CSS강의 - 기본 문법

기본문법

CSS의 기본 문법은 태그, 프로퍼티, 속성값의 3가지 요소로 이루어 진다.

selector { property : value }

예를 들어, body 태그를 변경하려면, 아래와 같은 형식이 된다.

body { color : black }

만약 태그의 속성값이 여러 단어라면, 큰따옴표(")로 구분해 준다.

h { font-family : "Arial Black" }

태그 하나에 여러가지 속성값을 주고 싶을 때가 있다. 예를 들어, 빨강 글씨에, 폰트를 Fixedsys로 주려면, 아래와 같이 세미콜론(;)으로 구분을 해줘야 한다.

h { font-family : "Fixedsys"; color : red }

h { font-family : "Fixedsys";
     color : red }

위의 두가지 Style Sheets는 완벽히 동일하게 작동을 하지만, 아래에 있는 정의가 보기도 편하고, 나중에 디버깅도 편하다.

정의된 속성을 일괄적으로 여러가지 HTML Tag에 적용을 하려면, 아래처럼 Grouping 을 해주면 면 된다.

h1,h2,h3 { font-family : "Fixedsys"; color : red }

class

점(.)은 하나의 Tag에 대한 class를 선택 할 수 있다. 예를 들어, h1 태그에 폰트를 나눠서 줄 필요가 있을 때 점(.)을 사용하여 선택을 할 수 있다.

h1.A{ font-family : "Fixedsys" }
h1.B{ font-family : "Arial Black" }

위의 예처럼, class A는 Fixedsys 가 적용되고, B에는 Arial Black 이 적용되게 된다.

만약, 점(.) 앞에 아무런 태그를 써주지 않으면, 특정 class를 포함하는 모든 태크에 대해 일괄적으로 적용이 되게 된다.

.A { font-family : "Fixedsys" }

위와 같이 정의를 해주면, class A를 포함하는 모든 태그에 대해서, 폰트를 정의한다.

HTML 내에서, class는 아래 처럼 정의가 된다.

<h1 class="A">
블로그의 제목
</h1>
<h2 class="B">
소제목
</h2>