0035 External CSS 적용을 위한 <link /> 요소
앞에서 Inline 방식과 Internal 방식을 모두 사용해봤다. 마지막으로 External 방식을 사용해보아야 하는데 그 전에 <link /> 요소에 대해서 간단히 알아볼 필요가 있다.
<link /> 요소는 내용(content)이 없는 빈요소(empty element)이고 <head> 영역에 위치한다. CSS 파일 뿐만 아니라 다른 외부 소스(source)들을 HTML 문서에 링크하는 역할을 하기 때문에 <img /> 요소처럼 <link /> 요소도 여러 번 계속 사용할 수 있다. 하지만 주로 CSS 파일을 연결하는데 사용된다.
이번에는 아래와 같이 작성된 CSS 파일에 링크하는 <link />경우에 한정해서 살펴보자.
<link rel="stylesheet" type="text/css" href="myStyle.css" />
1. rel 속성(attribute)
rel 속성은 현재 문서와 링크된 자료 사이의 관계(relationship)를 특정하는 속성이다.
rel의 속성값 "stylesheet" 는 <link>된 외부 자료가 HTML 웹페이지에 적용될 스타일 시트(stylesheet)라는 뜻이다.
2. type 속성(attribute)
type 속성은 링크로 연결된 자료의 인터넷 미디어 타입을 특정하는 속성이고 이러한 type에 속성값을 "text/css"로 주면 연결 링크된 외부 자료의 미디어 타입이 외부의 스타일 시트라는 것을 의미한다.
type 속성은 앞서 공부한 순서가 있는 목록 요소 <ol>의 글머리 기호를 설정하는 type 속성과는 전혀 다르다(0028 HTML 순서가 있는 목록의 글머리 기호 바꾸기 참조 ).
<link /> 요소에 type 속성을 사용할 때는 반드시 href 속성을 설정해 주어야 한다.
3. href 속성(attribute)
href 속성은 링크로 연결할 외부 자료의 위치를 명시하는 속성이다. 속성값은 <img /> 요소의 src 속성과 마찬가지로 절대 경로(URL)와 상대 경로(relative path)이다. 이에 대해서는 0015 URL 간략하게 이해하고 연습하기와 0016 이미지를 보여주는 img 요소 01 사용법 및 src 속성을 참조하기 바란다.
주의할 점은 <a> 요소에서 href 속성을 사용할 때, 아이디(id) 이동이 가능했는데 <link /> 요소의 href 속성은 그 특성상 아이디(id) 이동이 허용되지 않는다는 점이다.
href의 속성값으로 상대경로(relative path)인 "myStyle.css"가 주어졌으므로 외부(external) CSS 파일은 myStyle.css라는 파일명으로 스타일이 적용될 HTML 웹페이지 파일과 동일한 디렉터리에 있어야 한다.
Anki 파일
아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다.
Ankilog 파일: 
0035 External CSS 적용을 위한 link 요소.apkg
'Anki로 공부하기 > HTML공부' 카테고리의 다른 글
| 0037 HTML 요소의 아이디(id) 속성과 CSS의 아이디(id) 선택 (0) | 2018.12.12 |
|---|---|
| 0036 External 방식의 CSS 적용 (0) | 2018.12.11 |
| 0034 CSS 요소 선택자(element selector) (0) | 2018.12.07 |
| 0033 HTML에 CSS 적용하고 기본 문법 알아보기 (0) | 2018.12.06 |
| 0032 CSS 소개 (0) | 2018.12.04 |