- <HTML5+CSS3>스타일시트 기초 목차
스타일시트란 스타일을 관리하기 쉽도록 한 군데 모아놓은 것을 스타일시트라고 한다. CSS의 경우 공백을 무시한다.
; :대괄호 {} 안에는 속성과 속성값이 오는데 속성/속성 값은 '속성:속성 값'과 같은 형식으로 함께 표시하며, 속성/속성 값 쌍이 여럿일 경우에는 세미콜론으로 구분한다.
ex) p { color : blue ; } p= 선택자 color= 속성 blue= 속성값이다
스타일 정보의 기록
-스타일 정보는 웹 문서를 브라우저 화면에 표시하기 전에 결정되어야 한다. 모든 스타일 정보는 헤드 태그안에서 정의해야 한다.
웹 문서 안에 있는 내부 스타일시트라면 /head태그가 나타나기전에 규칙을 기록한다.
위와 같이
내부스타일 시트: /head태그 나타나기전
외부스타일 시트: 문서 안에 있는 스타일 정보를 별도의 파일로 저장. 내부 스타일 시트에서 <style>태그와 </style>태그는 제외하고 그 사이의 내용만 복사해서 노트패드나 메모장에 붙여서 별도의 파일로 저장한다 . 외부스타일 파일의 확장자는 .css이다. 웹 문서에서는<link>태그를 이용 해 스타일시트 파일을 연결함.
ex)<link href="외부 스타일 파일 경로" rel="stylesheet" type="text/css">
(rel은 <link>태그로 연결하는 파일이 스타일시트 파일이라는 뜻 type="text/css"는 스타일 시트 소스가 텍스트 파일로 된 css유형)
예를들어, 스타일 정보를 style.css로 저장했다면, 웹 문서에서 <head>와 </head>태그 사이에서 외부 스타일 문서를 링크해 사용한다.
ex) style.css 외부 스타일 시트 파일
ul{
color:blue;
list-style:squre;
}
-> 외부에서 지정한 스타일 정보
example.html 문서
<head>
<meta charset="utf-8">
<title>요안도라</title>
<link href="style.css" rel="stylesheet" type="text/css"><link>
</head>
이런식으로 외부스타일 시트를 <link>태그로 지정한다.
'HTML&CSS > HTML5' 카테고리의 다른 글
| <HTML+CSS3>하위선택자와 형제,그룹,자식 선택자들 (0) | 2018.10.12 |
|---|---|
| <HTML5+CSS3>스타일의 우선순위 (0) | 2018.10.12 |
| <HTML5+CSS3>기타 다양한 폼 요소들,버튼넣기,결과 및 진행 ,진행상태 (0) | 2018.10.12 |
| <HTML5+CSS3>태그의 다양한 속성 (0) | 2018.10.10 |
| <HTML5+CSS3> 사용자가 정보를 입력하는 input 태그 (3) 파일첨부,서버전송 리셋버튼 (0) | 2018.10.10 |
