CSS:개요

개요

태그 안에 넣었던 style 속성이 중복 사용되는 경우가 많은데, 이를 효율적으로 사용하기 위한 전략.

display 속성

Block

블록. 콘텐츠를 담을 공간에 대한 룩엔필을 다룬다.

모든 너비를 가져가며 아래로 쌓인다.

Inline

한 문장 내의 룩엔필을 다루는 개념.

옆으로 쌓인다.

Inline-block

블록인데, 옆으로 쌓인다.

None

있지만, 시각화되지 않는다.

사이즈 척도

필요에 따라 사이즈 척도를 달리하여 적용한다.

px

픽셀. 고정된 값을 지정한다.

em

부모의 값을 함께 따라간다. 부모에 대한 배율로 지정한다.

부모가 여러 개 있을 때 중복적용되어 의존성 관리가 어렵다;(기본폰트사이즈가 커지면 부모들의 변화와 중첩 적용되어 지수형태로 변화가 일어나버린다.)

rem(responsive

가장 많이 사용하는 방식.(최근엔 반응형 웹으로 만들기 때문에)

HTML의 기본 폰트사이즈에 의존하여 따라간다.

%

이것도 아주 많이 사용한다.

바로 위의 부모에 대한 크기의 %로 크기를 지정한다.

같은 이름의 스타일을 적용시킬 때.

가장 우선시 되는 건 style 속성에 넣은 것.

그 다음은 직접 짠 CSS.

그 다음은 불러온 CSS.