23_10_13 CSS 공부정리

[코딩애플] HTML,CSS 기초모듈

 

1.float를 썼을때 문제

=> 그다음 박스의 margin을 주면 잘 안먹을 때가 있음

해결책 : 가상의 박스를 위에 추가하고 clear : both;속성을 준다

 

            <div class="top">

                <div class="picture"><img src="lion.png" width=100px height=100px;></div>

                <div class="info">

                    <div class="who">이름ㅎ</div>

                    <div class="when">언제</div>

                </div>

            </div>

            <div style="clear:both;"></div> //이런식으로 높이가 없는 가상의 박스를 만듦.

            <div class="contents">

                <div class="title">제목</div>

                <div class="content">내용</div>

            </div>

 

-시멘틱 태그 : 태그의 용도를 한번에 알아볼 수 있는 태그들

nav, section, footer 등

 

 a:visited : 방문한적 있는 링크 선택

.navbar li a:visited {

    color:black;

    }

 

background-imgae : url();

이미지를 배경으로 넣는 속성

*linear-gradient(색이 점진적으로 변하는 그라데이션을 줄 수 있는 키워드)

예)background-image : linear-gradient( rgba(0,0,0,0.5), rgba(0,0,0,0.5) ); -> 화면에 검은색 틴트주기

 

background-size : 100%; cover ; contain ;

배경크기를 설정. cover = div박스를 꽉차게 할것 / contain = 여백이 생겨도 좋으니 이미지를 다 보여줄것

background-repeat : no-repeat;

배경의 반복 설정

background-position : center; right;

div박스내에서 이미지의 위치 설정

background-attachment : fixed;

스크롤시 이미지 고정

filter : brightness(100%);

이미지에 보정입히기

 

margin collapse 현상 : 큰박스와 자식박스의 테두리가 겹쳐있으면 margin이 합쳐지는 현상

-부모박스에 padding 1px을 주면 해결됨.(테두리를 떨어뜨려놓기)

margin collapse 현상

.main-background {

    width : 100%;

    height : 500px;

    background-image : linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(../shoes.jpg);

    background-size : contain; //object-fit : cover와 유사

    background-repeat : no-repeat;

    background-position: center;

    background-attachment: fixed;

    filter : brightness(100%);

    padding : 1px; //margin-collapse 현상 해결.

}

.main-title {

    color : white;

    font-size: 40px;

    margin-top : 100px

}

https://velog.io/@jiseong/css-background-size-object-fit(object-fit/background-size 차이점)

[CSS] background-size 와 object-fit

 

position : relative  = 내 원래 위치를 기준으로 이동 (float와 비슷하게 공중에 뜸)

position : absolute = 내 (position relative인) 부모 위치를 기준으로 이동

position : static = 좌표로 이동 X

position : fixed = 화면 기준으로 이동(브라우저 뷰포트 기준으로 설정됨. 화면에 달라붙는 요소를 만들 수 있음)

.buy-btn {

    /* display : block;

    margin-left : auto;

    margin-right : auto; */

    padding : 15px;

    font-size : 20px;

    background-color: white;

    border : none;

    border-radius: 10px;

    position : absolute; 

    left : 0px;

    right : 0px;

    margin: auto;

    width : 150px; //적절한 너비를 포함해서 이 5줄을 하면 가운데 정렬 가능.

}

 

-width를 퍼센트로 할때 창을 크게하면 박스가 너무 커질 수 있음

=> min-width / max-width를 통해 조절가능

 

-개발 시작하기 전에 div 전체에 border-box속성을 주고 시작하면 편함

 

-브라우저간에 input,button 태그 등의 디자인이 다름

=> 브라우저 호환성을 위해 normalize.css를 맨처음 import하는 경우가 많음.

https://www.daleseo.com/css-normalize-reset/

CSS Normalize와 CSS Reset