스타일 시트
| 인라인 스타일 | 스타일 시트(CSS)를 사용하지 않고 스타일을 적용할 대상에 직접 표시 |
| 스타일을 적용하고 싶은 태그에 style 속성을 사용해 style=”속성:속성 값”; 형태로 스타일 적용 | |
| 내부 스타일 시트 | 웹 문서 안에서 사용할 스타일을 문서 안에 정리한 것(html문서의 <head>태그안에) |
| 모든 스타일 정보는 <head>태그안에서 정의하고 <style>태그와 </style>태그 사이에 작성 | |
| 외부 스타일 시트 | 여러 웹 문서에서 사용할 스타일을 별도 파일로 저장해 놓고 필요할 때마다 파일에서 가져와 사용 |
| <style>태그에서 <link>태그만 사용해 미리 만들어 놓은 외부 스타일 시트 파일 연결 |
- 외부 스타일 파일 연결할 때는 <link> 태그로 연결시키는 것과 @import하는 방법 두 가지가 있다.
1. <link>태그로 연결
- link는 외부의 문서를 연결시키는 태그
- 주로 css파일 같은 스타일시트 파일을 연결하거나 웹 폰트를 사용할 때 폰트가 있는 주소로 연결시킬 수 있다.
- <head>와 </head>사이에 넣고, 여러 <link>를 삽입할 수 있다.
<link>와 함께 사용하는 속성
| href | 연결할 곳의 주소(절대주소, 상대주소 모두 가능) |
| rel | 현재 문서와 연결 문서의 관계 표시(stylesheet, alternate, author, help, license, search 등) |
| type | 연결 문서의 MIME 유형(href 속성이 설정될 때만 사용함 css 파일-> text/css, js 파일 -> text/javascript, xml 파일 -> application/xml |
1. HTML 파일 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html파일</title>
</head>
<body>
<h1>외부스타일 적용하기</h1>
<ul>
<li><a href="#">다음</a></li>
<li><a href="#">네이트</a></li>
<li><a href="#">구글</a></li>
<li><a href="#">네이버</a></li>
</ul>
<img src="../img/img2.jpg" width="400"/>
</body>
</html>
2. css 파일 생성
@charset "UTF-8";
body {
color:#6867AC;
}
a:link, a:hover, a:visited {
text-decoration:none;
color:orange;
}
li {
list-style-type:none;
font-weight:bold;
}
3. html파일과 연결시키기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html파일</title>
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
2. @import로 연결
- @import url(' '); 또는 @import " "; 큰따옴표 홑 따옴표 모두 가능하고 인용부호 안에 주소를 입력
- @import는 css 파일 맨 처음 위치한다. (앞에 주석을 넣으면 @import파일을 인식하지 못한다)
2. css 파일 생성(1은 link와 같음)
@charset "UTF-8";
body {
color:#6867AC;
}
a:link, a:hover, a:visited {
text-decoration:none;
color:orange;
}
li {
font-weight:bold;
}
3. html파일과 연결시키기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html파일</title>
<style>
@import url('style.css') /*html과 css이 같은 폴더에 있어서 폴더명 생략*/
</style>
</head>
3. Link와 @import의 차이점
- <Link> 방식을 사용하는 것이 @import 방식을 사용하는 것보다 페이지의 로딩 속도 측면에서 뛰어나다.
'멀티캠퍼스 풀스택 과정 > 프론트엔드' 카테고리의 다른 글
| 프론트엔드1-9. margin과 padding (0) | 2022.02.07 |
|---|---|
| 프론트엔드1-8. CSS border속성 (0) | 2022.02.05 |
| 프론트엔드1-6. CSS 메뉴 만들기 실습(가상클래스, text-decoration) (0) | 2022.02.05 |
| 프론트엔드1-5. CSS 기초(선택자, position, background) (0) | 2022.02.05 |
| 프론트엔드1-4. <div> (0) | 2022.02.04 |
