HTML 문서에 CSS를 적용하는 방법 세 가지를 정리해보았다.
HTML 태그에 style 속성 사용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 사용법</title>
</head>
<body>
<div id="wrap">
<div class="box" style="width: 400px; background: #000"></div>
</div>
</body>
</html>
HTML 문서 내에서 style 속성을 사용해 대상에게 직접 스타일을 부여하는 방법.
스타일을 적용할 대상 태그 내에 style="속성값"을 사용하여 추가한다. 각 CSS 속성은 세미콜론(;)으로 구분한다.
HTML문서 하나로 다 처리할 수 있다는 장점이 있지만, 적용하는 스타일이 많아질 수록 HTML 코드가 길고 복잡해지며 대상마다 스타일이 따로따로 지정되어 있어 관리가 어렵다.
<style> 태그로 사용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 사용법</title>
<style>
.box {width: 400px; background: #000;}
</style>
</head>
<body>
<div id="wrap">
<div class="box"></div>
</div>
</body>
</html>
HTML 문서 상단에 style 태그를 넣어 사용한다. style 태그는 문서의 <head> 안에 위치해야 한다.
<style> 속성값 </style> 으로 사용하며, 스타일을 적용할 대상의 이름을 지정하고 요소들을 중괄호로 묶어준다.
style을 헤더에 모아서 관리할 수 있다는 이점이 있으나, 이 역시 스타일이 많아지면 문서가 길어지고 HTML코드가 뒤로 밀려나게 된다.
style.css로 사용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 사용법</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrap">
<div class="box"></div>
</div>
</body>
</html>
.box {
width: 400px;
background: #000;
}
별도의 style.css파일을 만들어 HTML 문서에 링크한다. <head>에 link 태그로 css파일을 링크하고, CSS파일에 스타일값을 입력한다.
여러 문서에 동일 스타일을 적용해 빠르게 디자인을 관리할 수 있고, 코드가 길어져도 HTML문서에 영향을 미치지 않으므로 일반적인 웹사이트에서 보편적으로 채용하는 방식이다.
CSS를 사용하는 세 가지 방법을 정리했다. 어느 방식이든 브라우저 상에선 동일하게 출력이 된다.
정말 단순한 사이트거나 습작이라면 위의 두가지 방법도 사용해봄직 하지만, 보통은 세번째 방법이 가장 권장된다. 관리상의 이점도 있고, HTML 문서에 불필요한 꾸밈요소들이 더해지는 것은 웹 접근성 측면에서도 좋지 않기 때문이다.
HTML은 가장 기본적인 뼈대와 구조만 만들고, CSS 파일에서 세부 디자인을 설정한다고 생각하고 사이트를 구상하는 것이 좋겠다.
