외부 스타일 시트 란?
외부에 별도의 파일로 저장된 스타일을 의미 합니다.
외부 CSS 파일을 사용하게 되면, 여러 웹문서에서 동일한 CSS 스타일 링을 한번에 적용할 수 있습니다.
즉, 내부 스타일 시트 혹은 인라인 스타일에 비해서 유지보수의 용이성 그리고 웹 문서의 파일 사이즈 등도 절약할 수 있기에 효율적입니다.
외부스타일 문법
외부 스타일 시트를 html 문서와 연결 시키는 방법은 head 태그사이에 link태그를 사용합니다.
<link> 태그 안에서는 rel 과 href 속성을 사용하여 stylesheet 와 css 파일 경로를 적어주면 됩니다.
<link rel="stylesheet" href="css/styleTest.css">
외부스타일 시트 예제를 만들어 보겠습니다.
[test.html]
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/styleTest.css">
</head>
<body>
<h1>외부 스타일 시트이란 외부 파일에 만들어둔 스타일 정보를 의미한다</h1>
<h2>해당 CSS파일을 연결하는 모든 html 문서에서는 동일한 스타일을 적용 할 수 있다</h2>
<h3>많은 문서로 연결된 웹 페이지 작업시 저장용량 및 효율성이 높다고 할 수 있다.</h3>
</body>
</html>html 에 연결할 css 파일을 만듭니다.
css 폴더아래 styleTest.css 로 파일을 만듭니다.
구조적인 파일 관리를 위해서 css 폴더에 css 만 별도로 저장합니다.
[styleTest.css]
h1{
padding : 20px;
background-color: blueviolet;
color: rgb(250, 248, 248);
}
h2{
padding : 10px;
background-color: black;
color: white;
}
h3{
background-color: red;
color: burlywood;
font-style: italic;
}브라우저에 적용해 본 결과
외부 스타일 시트가 html 웹 문서에 잘 적용된 것을 확인 할 수 있습니다.
css 파일 연결 정보를 head 태그 사이에 코딩한다는 것은 브라우저가 해당 웹페이지를 분석시 "CSS연결 정보가 있구나" 라는 것을 브라우저에게 알려주는 것 입니다. 외부 스타일 시트 와 html 웹 문서를 연결하는 방법에 대해서 알아보았습니다. 감사합니다.
CSS 내부 스타일 시트 란?
CSS 내부 스타일 시트 란? HTML 파일의 내부스타일 시트 예제를 만들어 보겠습니다. head 태그 안에 h1 과 p 태그에 적용될 스타일 정보를 코딩 합니다. 내부 스타일 시트에서 선언된 태그들은 모두
soo0100.tistory.com
CSS 인라인 스타일 이란?
CSS 인라인 스타일 이란? 특정 태그에만 CSS 스타일을 적용하는 것을 말합니다. 인라인 이란 표현 그대로, 특정 태그 내부에 전역 속성인 style 지정해서 사용할 수 있습니다. 그렇기에 해당 요소에
soo0100.tistory.com
'앱 만들기 > CSS' 카테고리의 다른 글
| 브라우저 기본 스타일 이란? (0) | 2023.05.10 |
|---|---|
| CSS 스타일 시트 우선순위 (3) | 2022.11.22 |
| CSS 내부 스타일 시트 란? (4) | 2022.11.17 |
| CSS 인라인 스타일 이란? (2) | 2022.11.16 |
| CSS 글자색 바꾸는 방법 (4) | 2022.11.07 |
댓글