0036 External 방식의 CSS 적용
이제 <link /> 요소에 대해서 알았으니 외부의 CSS 파일을 HTML 페이지에 링크하는 External 방식의 CSS 적용을 시도해보도록 하자.
우선, 우리가 할 일은 HTML 문서를 만들고 해당 문서에 스타일을 적용하기 위한 외부의 CSS 파일을 만드는 것이다.
우선 사용할 HTML 파일은 앞서 만든 0034_1.html과 거의 유사하지만 <head> 영역에 <style> 요소 대신에 다음과 같은 <link /> 요소를 넣어 0036.html 파일을 만들도록 하자.
<link rel="stylesheet" type="text/css" href="0036.css" />
0036.css 는 우리가 앞으로 만들 외부 CSS 파일 이름이다. 해당 파일을 만들고 0036.html 파일과 0036.css 파일을 같은 디렉터리에 두면 정상적으로 웹페이지에 스타일이 적용될 것이다.
물론, <title> 요소를 수정하여 웹페이지 제목도 변경한다.
다음과 같이 
0036.html을 작성해보자.
<!DOCTYPE html>
<html>
<head>
<title>External CSS 적용</title>
<link rel="stylesheet" type="text/css" href="0036.css" />
</head>
<body>
<h1>h1 블록</h1>
<h2>첫 번째 h2 블록</h2>
<p>p블록 시작 <br /><br />p블록 끝</p>
<h2>두 번째 h2 블록</h2>
<p>2번 p블록 시작 <br /><br />2번 p블록 끝</p>
</body>
</html>
<head> 영역 내의 <link /> 요소에서 외부 CSS 파일을 링크하고 있지만 아직 해당 CSS 파일이 만들어지지 않았으므로 어떤 CSS 규칙도 HTML에 적용되지 않은 상황이다. 실행 결과는 다음과 같다.
이젠 외부(external) CSS 파일을 만들 차례다.
메모장이나 텍스트 에디터를 열어 다음과 같이 작성하고 
0036.css 파일로 저장해보자(0036.html 파일과 같은 디렉터리에 두어야 한다.).
/* h1 요소와 h2 요소의
공통으로 글꼴(font)과
글자색(color)을 설정 */
h1, h2 {
font-family: sans-serif;
color: blue;
}
/* h1 요소에 1픽셀
두께의 빨간 실선으로
밑줄을 만든다. */
h1 {
border-bottom: 1px solid red;
}
/* 블록인 p 요소의
텍스트를 가운데로
정렬하고 글자색은
빨간색으로 설정 */
p {
text-align: center;
color: red;
}
그리고 다시 0036.html을 새로고침 하거나 재실행해보면 그 결과는 다음과 같다.
아래와 같이 CSS에서 주석(comment)을 다는 방법은 HTML과 다르다.
HTML 주석 형식 → <!-- 주석(comment) 내용 -->
CSS 주석 형식 → /* 주석(comment) 내용 */
위의 실행 결과에서 보듯이 주석은 웹페이지에 어떤 영향도 미치지 않는다. 그리고 여러 줄에 걸쳐서 주석을 달 수 있다.
CSS의 border 속성(property)이 경계선을 주는 속성이라면 border-bottom은 밑줄을 주는 속성이다. 속성을 정의하는 방식은 border와 동일하다.
border: 1px solid red;
border-bottom: 1px solid red;
위의 boder-bottom 선언(declaration)으로 1픽셀 두께의 빨간 실선으로 밑줄이 생김
그리고 text-align 속성은 텍스트의 정렬을 설정한다. 속성값을 center로 하면 텍스트가 가운데로 정렬된다.
Anki 파일
아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다.
Ankilog 파일: 0036 External 방식의 CSS 적용.apkg
'Anki로 공부하기 > HTML공부' 카테고리의 다른 글
| 0038 클래스(class) 속성 (0) | 2018.12.14 |
|---|---|
| 0037 HTML 요소의 아이디(id) 속성과 CSS의 아이디(id) 선택 (0) | 2018.12.12 |
| 0035 External CSS 적용을 위한 link 요소 (0) | 2018.12.10 |
| 0034 CSS 요소 선택자(element selector) (0) | 2018.12.07 |
| 0033 HTML에 CSS 적용하고 기본 문법 알아보기 (0) | 2018.12.06 |
