CSS:개요

개요

Cascading style sheets. 위에서 아래로 떨어지면서 속성을 지정한다. 같은 속성이 중복된 경우, 아래에서 지정한 속성이 최종적으로 적용된다.

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

적용하는 법

태그 안의 class 속성을 지정하여 스타일을 적용할 장소를 지정한다.

의도	설명	코드
단순 적용		<style> .box { width:200px; } <div class="box"></div>
자식에 적용	wrap 안의 box에만 적용한다.(다른 box태그엔 적용되지 않는다.) .wrap 쓰고 한 칸 띄고 .box를 넣는다.	<style> .wrap .box { width:300px; } <div class="wrap"> <div class="box"></div> </div>

display 속성

Block

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

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

Inline

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

옆으로 쌓인다.

Inline-block

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

None

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

사이즈 척도

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

px

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

em

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

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

rem(responsive)

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

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

%

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

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

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

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

그 다음은 직접 짠 CSS.

그 다음은 불러온 CSS.