스타일링을 시작하자

<CSS란 무엇인가>

앞서 살펴본 HTML요소들만으로 구현되는 웹사이트는 워드프로세서나 문서편집기를 사용한 단순한 문서처럼 보인다. 이에 반해 우리가 자주 접하는 웹사이트는 그리드 기반의 정보의 영역구분, 사이트의 그래픽 아이덴티티, 다양한 레이아웃의 구현 등을 통해 보다 짜임새있는 디자인을 볼 수 있는데 그러한 역할을 담당하는 것이 바로 CSS다.

CSS는 Cascading Style Sheet의 줄임말이다. 여기서 Cascading의 의미가 중요한데, 구조적으로 중첩될 수 있다는 의미다. 하나 하나의 요소에 모두 개별적인 스타일을 적용할 필요가 없이 공통된 사항들은 먼저 적용하고 개별적으로 특수하게 적용되는 사항들만 별도로 지정하여 효율을 높일 수 있다.

예전 HTML초기에는 하나하나의 요소에 이렇게 썼다.
<img src="...1.jpg" width="600" height="800">
<img src="...2.jpg" width="600" height="800">
<img src="...3.jpg" width="600" height="800">

좀 더 진화된 방식
<img src="...1.jpg" style="width:600px; height:800px;">
<img src="...2.jpg" style="width:600px; height:800px;">
<img src="...3.jpg" style="width:600px; height:800px;">

가장 효율적인 방식
<style> img{ width:600px; height:800px; }</style>
<img src="...1.jpg">
<img src="...2.jpg">
<img src="...3.jpg">

위에서 가장 마지막의 방식이 최근에 사용하는 방식이다. 문서를 구조와 내용에 해당하는 부분과 스타일링에 해당하는 부분으로 확실하게 나누어 구조와 내용은 HTML로 스타일링은 CSS로 작성한다. CSS에 해당하는 스타일시트는 <style>스타일 시트</style>요소 사이에 넣어서 구분한다.

<Id와 Class>

이름을 짓고 그 이름을 불러주는 것. 디자인에서 대부분의 작업은 대상을 클릭하여 혹은 선택영역을 지정하는 것으로 시작한다. 스타일이 지정되는 대상을 구체적으로 지정하는 것(selection)은 스타일링에 있어서 가장 중요한 과정이다.

HTML요소는 아무런 접두사 없이 스타일을 지정할 수 있다.
img{ width:600px; 800px}
p{ font-size:1em; line-height:1.7}
h1{ font-sieze:1.8em; line-height:1.3}

같은 요소라도 그것이 속한 블럭(block)에 따라 다른 스타일을 적용할 수 있다.
포함관계를 따라서 한 칸을 띄어쓰면 된다.
header img{ width: 100%} //헤더 속의 이미지
main img{ width: 600px} //메인콘텐츠의 이미지
footer img{ width: 80%} // 푸터 속의 이미지

글씨를 두껍게 하거나 밑줄을 긋는 스타일링은 포함관계로 정의하기 어렵다. 불특정하게 반복되어 나타나기 때문이다. 이렇듯 불특정한 위치에서 반복되는 스타일을 적용하기 위해서 클래스(Class) 속성을 사용한다. 일반적으로 편집디자인에서 정의하는 스타일에 가장 가까운 개념이다. html요소를 작성할 때 class=‘fighter’와 같이 이름을 지정한다(내맘대로). 알아보기 쉽게(semantically) 작성하는 것이 좋다.

<img src="...1.jpg">
<img src="...2.jpg" class="headline">
<img src="...3.jpg">	
두 번째 이미지에 ‘headline’라는 이름의 클래스를 지정했다.

<style> 
	img{ width:600px; height:800px; }
	.headline{ width:100%; height:auto;}
</style>
클래스의 이름은 앞에 .을 표기하여 구분하며 임의로 작성한다.
.garamond-premier-display 띄어쓰기를 사용하지 않는다.

클래스와 유사하게 html요소에 id속성을 지정할 수도 있다. class와 id는 동일한 원리로 특정 요소에만 작용하는데, class는 여러 번 중복될 수 있고, class는 여러 번 중복될 수 있고, class는 여러 번 중복될 수 있고, class는 여러 번 중복될 수 있고, class는 여러 번 중복될 수 있고, class는 여러 번 중복될 수 있고, class는 여러 번 중복될 수 있고, class는 여러 번 중복될 수 있고, class는 여러 번 중복될 수 있고, id는 단 한번만 사용되는 요소에 지정한다.

id는 해시(#)로 구분한다.
<style> 
	img{ width:600px; height:800px; }
	.headline{ width:100%; height:auto;}
	#only-one{ width:200px; height:auto;}
</style>

<img src="...1.jpg">
<img src="...2.jpg" class="headline">
<img src="...3.jpg" id="only-one">

<Pseudo Class>

여러 요소들이 있을 때, 가장 첫번째 요소라던가 첫 줄이라던가, 가장 마지막 요소라던가 4번째 요소 등 굳이 class나 id를 사용하지 않고도 선택적으로 요소들을 지정하는 방법이 있다. pesudo class를 이해하고 사용하는 수준이 되면 웹코딩에 능숙하다고 볼 수 있다. 이 페이지에서 참고하자 w3 pseudo class

p:first-child
p:last-child
p:nth-child(n)
p::first-letter
p::first-line
p::selection