CSS 문서를 HTML 문서에 불러오는 방법은 `<link>` 요소를 사용하는 것입니다. 이 요소는 주로 외부 CSS 파일을 HTML에 적용하는 데 사용됩니다. 아래는 `<link>` 요소의 자세한 설명입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Web Page</title>
<link rel="stylesheet" href="style.css">
- rel: 연결되는 파일과의 관계를 정의합니다. CSS 파일을 불러올 때는 "stylesheet"를 사용합니다.
- href: 불러올 파일의 경로를 지정합니다. 해당 파일은 HTML 파일로부터 상대 경로나 절대 경로로 지정할 수 있습니다.
- type: 불러오는 파일의 MIME 타입을 지정합니다. CSS 파일을 불러올 때는 "text/css"를 사용합니다.
- media: CSS 파일이 적용될 미디어 유형을 지정합니다. 생략하면 기본값인 "all"로 설정됩니다.
<link rel="stylesheet" href="style.css" type="text/css" media="screen">
`<link>` 요소는 `<head>` 태그 내에 작성되어야 합니다.
`rel` 속성은 CSS 파일과의 관계를 정의하는데, CSS 파일을 불러올 때는 "stylesheet"를 사용합니다.(rel은 "relationship"의 약자임)
`href` 속성에는 불러올 CSS 파일의 경로를 지정합니다. (href는 "hypertext reference"의 약자입니다.)
`type` 속성은 불러오는 파일의 MIME 타입을 지정하는데, CSS 파일을 불러올 때는 "text/css"를 사용합니다. `media` 속성은 CSS 파일이 적용될 미디어 유형을 지정하는데, 생략하면 기본값인 "all"로 설정됩니다.
CSS 파일은 HTML 파일과 동일한 디렉토리에 있거나, 서버의 절대 경로로 지정할 수 있습니다. 위의 예제에서는 `style.css`라는 파일을 불러오고 있으며, 이 파일은 HTML 파일과 동일한 디렉토리에 있어야 합니다. 만약 서버의 다른 디렉토리에 있는 CSS 파일을 불러오려면 경로를 조정해야 합니다.
CSS 파일을 불러온 후에는 CSS 규칙이 웹 페이지에 적용되며, 웹 페이지의 스타일링을 변경할 수 있습니다.
'Visual Studio Code' 카테고리의 다른 글
| 빠르게 주석 처리 (0) | 2023.07.27 |
|---|---|
| 여러 줄 동시 선택 방법 (0) | 2023.07.22 |
| 코드 접기 (0) | 2023.07.21 |
| 주석 처리 (HTML, JavaScript, CSS) (0) | 2023.07.20 |