html만으로 웹 사이트를 디자인하는 것에는 한계가 있습니다. 그리고 html의 한계를 보완해주는 것이 바로 css입니다. css를 적용하는 방법에는 크게 html 내부에 css를 작성하는 방법과 외부의 css파일을 불러와 적용하는 방법이 있습니다. 이 글은 외부의 css 파일을 적용하는 법에 대해 다루고 있습니다. 외부의 css 파일은 <link> 태그를 통해 적용할 수 있습니다.
1. css 파일 만들기
외부의 css 파일을 적용하기에 앞서 사용할 css 파일을 만들어야합니다. css 파일을 만드는 방법은 html과 같습니다. 편집기(메모장, visual studio code 등)를 실행하신 후 css를 작성해주세요.
css를 작성할 때에는 가장 먼저 @charset "utf-8";를 작성해주세요. 코드의 문자 깨짐을 방지하기 위한 코드입니다. css 코드는 '대상 { 속성 : 값; }'의 형태로 작성하시면 됩니다.
| 유형 | 예시 |
| 대상 | 태그 이름, 클래스, id 등 변경 대상 |
| 속성 | 색, 크기 등 변경 유형 |
| 값 | 색상 코드, 숫자 등 변경 값 |
작성을 마치셨다면 파일을 저장해주세요. 이때, 반드시 .css 형태(즉, 확장자를 css 형태)로 지정해주셔야합니다.
아래 코드는 화면의 배경색과 텍스트의 색을 지정하는 css 코드입니다.
@charset "utf-8";
body {
background-color : skyblue;
}
h1{
color : blue;
}
2. css 파일 적용하기
이제 css 파일을 html에 불러와야합니다. 이 때, 사용하는 태그는 <link>입니다. html 파일의 <head> 구역에 <link> 태그를 입력해주세요. <link rel="stylesheet" href="경로/이름.css"> 형태로 작성하시면 됩니다. 만약, html과 같은 위치에 css가 있는 경우 경로는 생략하셔도 됩니다.
<head>
<link rel="stylesheet" href="design.css">
</head>
<body>
<h1> css 적용 예제</h1>
</body>
'Programming > HTML5 & CSS3' 카테고리의 다른 글
| [HTML] 텍스트, 이미지 클릭 시 alert 창(메시지) 띄우기 (0) | 2020.12.16 |
|---|---|
| [HTML] 텍스트, 이미지 링크 만드는 법 (0) | 2020.12.13 |
| [CSS] html 내부에 css 적용하는 법 (0) | 2020.12.11 |
| [HTML] 표 테두리 스타일 변경하는 법 (0) | 2020.12.10 |
| [HTML] 셀합침, 표(테이블)에 배경색 넣는 법 (0) | 2020.12.09 |
