웹 페이지의 구조를 브라우저가 알 수 있도록 하기 위해서,마크업 언어를 사용한다.
그럼 마크업 언어인 HTML을 시작하기 전에 먼저 마크업의 구성을 잠시 살펴보자.
.형태
엘리먼트 : <오프닝 태크> 콘텐츠(내용) <클로징 태그>
그럼 CSS란?
Cascading Style Sheets의 약자이고, 웹페이지에 있는 각각의 엘리먼트들이 어떻게
보여져야 하는지를 브라우저에게 알려주는 역할을 수행한다.
아래는 CSS 적용전과 적용후의 웹 페이지를 비교한 모습이다.
(적용전 : 출처 헤드퍼스트 HTML )
(적용후 : 출처 헤드퍼스트 HTML )
즉,CSS를 이용하면
padding / margin / background-color / border / font-family 와 같은 속성을 설정할 수가 있다.
HTML과 CSS의 역할을 구분한다면
HTML은 웹 페이지의 구조를 결정하는 역할이고
CSS는 표현 방법을 결정하는 역할로 구분 할 수 있다.
샘플 : 출처 헤드퍼스트 HTML
<head>
<title>Starbuzz Cofee</title>
<style type="text/css">
body
{
background-color:#deb48c;
margin-left:20%;
margin-right:20%;
border: 1px dotted gray;
padding: 10px 10px 10px 10px;
font-family:sans-serif;
}
</style>
</head>
<body>
<h1>Starbuzz Coffee Beverages</h1>
House Blend, $1.49
A smooth, mild blend of coffees from Mexico, Bolivia and Guatemala.
<h2>Mocha Cafe Latte, $2.35</h2>
<p>Espresso, steamed milk and chocolate syrup.</p>
<h2>Cappuccino, $1.89</h2>
<p>A mixture of expresso, steamed milk and foam.</p>
<h2>Chai Tea, $1.85</h2>
<p>A spicy drink made with black tea, spices, milk and honey.</p>
</body>
'나는 엔지니어 > HTML' 카테고리의 다른 글
| 스타일시트 (0) | 2012.06.28 |
|---|---|
| 내가 작성한 HTML이 표준을 만족하는가????? ㅡㅡa (0) | 2012.06.27 |
| img 태그에 관해서 (0) | 2012.06.27 |
| 새 윈도우 열기... (0) | 2012.06.27 |
| 목적지 앵커 설정 하는법 (0) | 2012.06.27 |
