질문
CSS문법은 알겠는데, 이제 HTML에 CSS를 적용하려면 어떻게 해야하나요?
답변
HTML에 CSS를 적용하는 방식은 3가지가 있습니다.
많이 사용하는 방식 순서로 나열하겠습니다.
1. 외부 파일 방식
HTML파일과 CSS파일을 각각 따로 만드는 것이다.
HTML파일 안에 CSS파일 경로를 삽입하는 방식이다.
CSS 적용 문법은 아래와 같다.
(실습을 위해 저는 컴퓨터 바탕화면 coding폴더에 html파일, css파일을 저장했습니다.
저의 컴퓨터 안에 있는 css파일 경로는 C:\Users\root\Desktop\Coding\style.css입니다.
어디에 저장되어 있느냐에 따라 css파일의 경로는 다르겠지요^^)
= HTML 파일 =
<!DOCTYPE html>
<html>
<head>
<title>CSS 맛보기</title>
<link href="C:\Users\root\Desktop\Coding\style.css" type="text/css" rel"stylesheet" />
</head>
<body>
<p>여기에 있는 한글내용에 글자크기, 글자색깔을 지정해 본다.</p>
</body>
</html>
= CSS 파일 =
p{
font-size: 20px;
color: red;
}
2. style 태그 방식
HTML파일 안에 CSS 명령어들을 삽입하는 방식.
HTML파일 <head></head>태그 사이에 style태그를 이용하여 CSS명령어들을 삽입한다.
CSS 적용 문법은 아래와 같다.
= HTML 파일 =
<!DOCTYPE html>
<html>
<head>
<title>CSS맛보기</title>
<style type="text/css">
p{
font-size: 20px;
color: red;
}
</style>
</head>
<body>
<p>여기에 있는 한글내용에 글자크기, 글자색깔을 지정해 본다.</p>
</body>
</html>
3. style 속성 방식
HTML 요소마다 style속성을 이용하여 CSS를 적용하는 방식.
CSS 적용 문법은 아래와 같다.
= HTML 파일 =
<!DOCTYPE html>
<html>
<head>
<title>CSS맛보기</title>
<body>
<p style="font-size:20px; color:red;">여기에 있는 한글내용에 글자크기, 글자색깔을 지정해 본다.</p>
</body>
</head>
</html>
위 3가지 방식으로 CSS 코딩한 결과는 아래와 같습니다.
