CSS(Cascading Style Sheet)

h1태그, p태그, img태그를 사용해서 기사의 내용에 따라 마크업이 완료되었다면 이제는 태그마다 스타일을 지정해주는 과정을 통해서 기사의 코딩을 마무리지을 수 있다. 스타일링은 head와는 상관이 없고, 전적으로 body태그에 포함된 태그와 관련된다.

<body>
	<h1>이미지 이름은 반드시 영문 소문자로!</h1>
	<img src="./img/image-name.jpg">
	<p>웹사이트에 이미지를 삽입할 적에 가장 빈번한 실수는 
	이미지의 이름을 한글로 작성하는 것입니다. 반드시 이미지 이름은 
	영어로 작성해야 합니다. 그리고 여러 단어로 구성될 경우 하이픈을 
	사용하여 구분하는 것이 좋습니다. ex. my-first-work
	이미지가 안보이는 몇몇 이유중의 하나는 JPG처럼 대문자 확장자를
	코딩 시에 jpg와 같이 소문자로 사용했기 때문입니다.</p>
	<a href="http://leebh.net" target="_new">leebh.net</a>
</body>

위의 코드를 보면, body, h1, p, img총 4가지의 태그를 사용한 것을 알 수 있다.

body태그는 문서의 실제 내용이 삽입되는 태그다.
h1태그는 heading을 의미한다. 따라서 제목에 사용하는 태그다. 위계에 따라 h1,h2,h3,h4,h5,h6 총 6가지의 heading을 사용할 수 있고, h1은 한 페이지에서 단 한 번만 사용하는 것이 좋다.
p태그는 paragraph, 문단을 지정하는 태그다. 따라서, p태그를 사용하여 줄바꿈을 할 수 있고, 문단사이 간격, 첫 줄 들여쓰기 등이 적용된다. br태그를 사용해도 용이하게 줄바꿈이 가능하지만 되도록 p태그를 사용하는 것이 좋다.
img태그는 이미지를 삽입하는 태그다. 다른 태그와는 달리 img태그에는 src라는 속성(attribute)을 반드시 입력해야 하며, 여기서 src(source)는 해당 이미지의 링크를 의미한다. 위의 예제를 살펴보자.
a태그를 통해 링크를 삽입한다. a태그로 인하여 다른 페이지, 외부링크로 이동이 가능하기 때문에 아주 중요한 태그다. href속성은 링크 주소를 의미하며, target속성은 현재 창에 띄울 것인지, 새 창에 띄울 것인지를 결정한다. 위의 예제에서는 target속성을 _new로 지정하였기 때문에 새 탭에 해당 링크의 페이지가 로드된다. 만약 속성을 _self로 지정하면 현재 탭이 바뀌면서 해당 링크의 페이지를 로드한다.

	a태그로 감싸는 요소들은 클릭이 가능해진다!
	<a href="링크"><img src="..."></a> 이미지를 링크로
	<a href="링크">여기로 가자</a> 글자를 링크로

이 5가지 태그의 스타일을 지정해보자. 스타일링은 당연히 <style>태그 사이에 내용을 넣어 지정할 수 있다.

<style>
	*{font-family: 'Spoqa Han Sans', 'Sans-serif'; }
	body{width: 800px;background:yellow;}
	p{font-size: 1em; line-height: 1.7; color: #333;}
	h1{font-size: 1.5em; line-height: 1.7; color: black;}
	img{width:100%;}
</style>

위에서 보듯 스타일을 지정할 때의 간단한 형식이 있는데, 다음과 같다.

태그이름{ 항목:값; 항목:값; 항목:값;}

이것이 css를 작성하는 규칙이다. 줄을 넘겨도 되고, 빈칸을 마음대로 주어도 된다. 컴퓨터는 사이 공백을 무시한다.

시작에 앞서, 모든 태그에 스포카 한 산스라는 폰트를 적용했다. ‘∗’별표시는 모든 태그에 적용한다는 의미다.
body는 전체 폭을 지정하고, 배경색을 지정했다.
본문의 폰트 크기는 1em이라는 표준 단위를 지정했고, 행간은 1.7배, 색상은 rgb값을 숫자로 지정했다. #000이 검은색 #fff가 흰색이다.
제목의 폰트 크기는 본분의 1.5배, 행간은 폰트 크기의 1.7배, 글자색은 검은색이다. 자주 사용되는 색은 이름으로 입력할 수 있다.
이미지의 경우 body폭에 꽉 차게 가로폭을 100%로 채웠다.

주요 css 속성 값

텍스트의 경우엔 다음과 같이 타이포그래피에 사용되는 대부분의 설정값을 적용할 수 있다. 적절한 속성값을 사용해서 본문의 가독성을 향상시켜보자.

	font-family: 
	font-size: 
	font-weight: 
	line-height: 
	letter-spacing:
	word-spacing:
	word-break:
	color:
	text-align:
	text-decoration:
	text-indent:
	text-shadow:

자세하게 알고 싶다면 교과서 사이트를 참고할 것.

body와 같이 텍스트나 이미지를 담는 박스 태그는 폭(width)과 여백(margin)의 설정이 중요하다.

	width:
	height:
	margin-top:
	margin-left:
	margin-right:
	margin-bottom:
	margin-top:
	margin-left:
	margin-right:
	margin-bottom:
	border:
	border-radius:

이 역시 자세하게 알고 싶다면 교과서 사이트를 참고할 것.

테두리(border)
바깥여백(margin)
안여백(padding)