◆ 질문
: CSS란 무엇인가요?
◆ 답변
: ‘HTML은 정보, CSS는 디자인이다.’
‘CSS는 HTML 요소가 실제 표시되는 방법을 기술하는 언어다.’
이렇게 한 문장으로 말할 수 있지만, 이것으로는 쉽게 와 닿지는 않을 것입니다.
비유적으로 표현하면 ‘HTML은 벌거벗은 몸이고 CSS는 옷이다’라고 말하고 싶네요.
HTML로 정보를 작성하면 그 정보의 글꼴, 글자크기, 색깔, 그리고 위치 등을 CSS를 통하여 디자인하는 것이지요.
맛있는 음식도 좋은 그릇에 담아야 더 맛 나는 법입니다.
그것을 가능하게 하는 것이 CSS입니다.
음식으로 다시 비유하여 말하면 HTML은 주방에서 음식(컨텐츠)를 만들어 내어 놓는 것이고, CSS는 그것들을 맛깔스럽게 치장하고 이쁜 그릇에 담아 테이블 위에 적당하고 알맞은 위치에 배열하는 것입니다.
웹사이트를 만들고 싶은 이유는 자신의 컨텐츠를 웹에 게시하여 많은 사람들이 접하게 하기 위해서 일 것 입니다.
여기에는 두 가지 핵심 포인트가 있습니다. 첫째는 컨텐츠이고 둘째는 보는 이를 위하여 컨텐츠를 보기 좋게 치장하고 배치하는 것입니다.
맛보기로 HTML로 작성된 정보에 CSS를 이용하여 포장을 하고 배치해 보겠습니다(글자 분홍색 굵게, 박스만들고, 가운데 배치).
CSS를 적용하는 방법에는 크게 3가지가 있는데 그 중 HTML 문서 내에 CSS 코드를 적용하는 방법을 사용하겠습니다.
1. HTML 문서
=== HTML 코딩 ===
<DOCTYPE! html>
<html>
<head>
<title>CSS 맛보기</title>
</head>
<body>
<p>HTML로 작성한 정보에 CSS로 포장하고 배치해 본다.
CSS 적용방식은 HTML문서내에 코딩하는 방식으로 head 요소 안에 집어 넣는다.</p>
</body>
</html>
=== 웹브라우저 실행결과 ===
2. HTML 문서에 CSS를 적용
=== CSS 코딩 ===
<DOCTYPE! html>
<html>
<head>
<title>CSS 맛보기</title>
<style type="text/css">
p{
font-weight: bold;
color: #ee3e80;
width: 300px;
border: 20px solid #0088dd;
padding: 20px;
margin: 10px auto 10px auto;
}
</style>
</head>
<body>
<p>HTML로 작성한 정보에 CSS로 포장하고 배치해 본다.
CSS 적용방식은 HTML문서내에 코딩하는 방식으로 head 요소 안에 집어 넣는다.</p>
</body>
</html>
=== 웹브라우저 실행결과 ===
