CSS Reset/Emmet/단위/마진/display/opacity

CSS Reset

• body { margin:0; padding:0; }

• reset.css cdn 검색해서

• reset-css에

• reset.min.css에서 copy html code를 기존 css보다 위에 추가 함

• Codepen 사이트 들어가서

• create pen 눌러서 코드 입력

 

Emmet문법

• <div class="box"></div> == .box

• <ul class="list><ul> == ul.list

• <div class="container"> <ul class="list"><li class="list-item"><a href="" >list1</a></li></ul></div>.container>ul.list>li.list-item*10>a{list$}

 

CSS 단위

• em: 자신이 상속되어 있는 font-size의 영향을 받음

• rem: html에 지정된 font-size의 영향만을 받음

• vw: 100이 최대, 화면이 보이는 가로 길이를 중심으로 계산함

• vh: 100이 최대, 화면이 보이는 세로 길이를 중심으로 계산함

• vmax: 긴 길이를 기준해서 백분율 계산

• vmin: 더 짧은 길이를 기준해서 백분율로 계산

• max-width: 요소의 최대 가로 너비를 지정

• min-width: 요소의 최소 가로 너비를 지정

• max-height: 요소의 최대 세로 너비를 지정

• min-height: 요소의 최소 세로 너비를 지정

• margin에서 퍼센트를 사용할 때는 부모 요소의 퍼센트 만큼을 적용하는 것임

 

마진 중복(병합, Collapse)

마진의 특정 값들이 중복되어 합쳐지는 현상

1. 형제 요소들의 margin-top과 margin-bottom이 만났을 때

2. 부모 요소의 margin-top과 자식 요소의 margin-top이 만났을 때

3. 부모 요소의 margin-bottom과 자식 요소의 margin-bottom이 만났을 때

마진 중복 계산법

• 마진 중복 현상 발생시, 중복 값 계산법

• 둘 다 양수: 더 큰 값으로 중복

• 둘 다 음수: 더 작은 값으로 중복

• 각각 양수와 음수: 두 수의 합으로 결정됨

• padding 사용시 요소의 크기가 커질 수 있으므로 크기가 커지지 않도록 계산 해야 함

 

• box-sizing: border-box; 를 추가하면 원하는 크기로 패딩을 넣고 요소의 크기를 결정할 수 있음

• border: 요소의 테두리선을 지정

• width, style, color 등의 정보를 포함해야 함

• border-width: medium, thin, thick 등의 속성을 가짐

• border-style: none, hidden, solid, dotted, dashed, double, groove, ridge, inset, outset

• border-color: rgb(), #000, transparent(투명한선, 배경색 보임)

• box-sizing: border-box;를 통해 테두리 두께까지 계산해서 요소에 적용 가능함

• box-sizing

• 요소의 크기 계산 기준을 지정

• content-box: 너비만으로 요소의 크기를 계산

• border-box: 너비에 안쪽 여백과 테두리 선을 포함해 요소의 크기 계산

display

• block, inline, inline-block(기본요소는 inline이지만 block처럼 가로너비, 새로너비를 가질 수 있음), none(요소 사라짐) 등의 속성 값 가짐

overflow

• 요소의 크기 이상으로 내용이 넘쳤을 때 내용의 보여짐을 제어

• visible: 넘친부분을 자르지 않고 그대로 보여줌

• hidden: 넘친부분을 잘라내고 보이지 않도록 함

• scroll: 넘친부분을 잘라내고, 스크롤바를 이용해 볼 수 있도록 함

• auto: 넘친부분이 있으면 잘라내고 스크롤바를 만들고 아니면 그냥 보여줌

opacity

• 요소의 투명도를 지정함

• 숫자 0부터 1사이의 소수점 숫자

• 0에 가까울수록 투명하고 1에 가까울수록 불투명 함

• opacity: 0;은 존재는 하지만 화면에서 안보이는 것이고 display: none;은 존재하지도 않는 것임