맹쑤의 FE 일기

<불투명도와 알파 채널>

BOX MODEL

콘텐츠 레이아웃에 매우 중요한 특성이고 콘텐츠의 크기나 모양, 테두리, 간격을 바꿀 때 필요하다.

<가로, 세로>

width, height

<테두리와 모깎기>

Border : 요소를 둘러싸고 있는 박스 모델의 테두리, 웹 페이지를 보기 좋게 만드는데 중요한 역할, 각 요소를 구별하는데 도움, 눈에 띄도록 만들어 준다.

 border-width, border-color, border-style

/* width | style | color */

border : medium dashed green;

모깎기 : 모서리의 곡률을 조정하는 특성

border-radius

<padding>

 콘텐츠 박스와 요소를 둘러싼 테두리 사이에 남은 공간

apply to all four sides

padding : 10px;

vertical | horizontal

padding: 5px 10px;

top | right | bottom | left

padding: 5px 1px 0 2px;

<margin>

 바깥 공간을 다룬다.

apply to all four sides

margin: 10px;

vertical | horizontal

margin: 5px 10px;

top | right | bottom | left

margin: 5px 1px 0 2px;

효율적인 작업을 위해 

Body{

  margin : 0;

} 으로 만들고 하는게 좋다.

<Display Property>

 INLINE, BLOCK, INLINE-BLOCK

- inline : 요소가 인라인이면 너비나 높이는 무시

              패딩은 요소의 하나로서 존재하고 있지만 나머지 내용에 영향을 주지 않는다.

              마진은 가로줄에만 영향

- block : 크기 지정 가능, 패딩 적용, 마진 상하좌우 적용

- inline-block : 공간을 공유 서로 다른 줄로 밀어내지 않는다. 마진 상하좌우 적용

<CSS UNITS>

% : 너비나 높이 지정에 가장 많이 사용

em : 특성에 따라 다른 값이 바뀐다, 부모 요소의 글꼴 크기에 달려 있다.. 요소의 글꼴 크기에 맞춘 변경이 가능

        간단한 컴포넌트나 재사용할 수 있는 항목을 만들어 해당 글꼴 크기에 맞춰 달라지게 해야 하는 경우

        단점 : 단계별로 누적이 된다 > 급격하게 커지거나 작아질 수 있다.

rem : 글꼴 크기를 부모 요소의 크기에 따라 바꾸지 않고 root html 요소의 글씨 크기에 따라 바꾼다는게 em과 다른점

         문서 전체에서 하나의 글꼴 크기에 비례하여 바뀐다.

SPECIFICITY

 충동이 생길 경우 브라우저에서 규칙을 적용하는 방법

 하나 이상의 스타일이 동일한 요소에 적용되거나 적용될 수 있는 경우에 충돌이 발생

ID > CLASS > ELEMENT

Specificity Calculator (keegan.st)

PSEUDO CLASSES

 : active - 클릭했을 경우 요소 변화

 : checked - 체크박스

 : first

 : first-child

 : hover - 마우스 올렸을때 요소 변화

 : not()

 : nth-child()

 : nth-of-type() - nth-of-type(2n) 2n 매 두번째 요소 변화