CSS
- HTML (Markup Language) 을 꾸며주는 표현용 언어
- css 의 속성: property / html의 속성: attribute
- 주석
/* 주석 작성 */
h1 {color:yellow; font-size:2em; }
속성이름과 속성값 사이에는 개행을 해서는 안 된다
- 선택자 selector - h1
- 속성 property - color
- 값 value - yellow
- 선언 declaration - color:yellow, font-size:2em
- 선언부 declaration block - {color:yellow; font-size:2em;}
- 규칙 rule set - h1 {color: yellow; font-size:2em;}
h1
{color:yellow; font-size:2em;}
h1 {
color:yellow;
font-size:2em;
}
h1 {
color:
yellow;
CSS 적용
- Inline
- 해당 요소에 직접 스타일 속성 이용해 규칙 선언
- 선택자 X, 선언부에 내용만 스타일 속성의 값으로 부여하기
- 코드 재활용 불가 -> 사용 빈도 낮음
<div style="color:red;"> hello </div>
- Internal
- 문서에 < style > 활용
- < head > 내부에 < style > 들어감 ( style 내부에 스타일 규칙 들어감)
- 페이지가 많고 스타일 규칙 내용이 많아지면 사용이 어려움
<style> div {color:red;} </style>
- External
- 외부 스타일 시트 파일 이용 (스타일 규칙을 별도 외부 파일로 만들어 넣는 것)
- 이때 외부 파일의 확장자 .css -> css 파일은 stylesheet 으로 적기
- rel 속성: 연결되는 파일과 문서와의 관계 명시
- 외부 스타일 시트 방식으로 선언 시 파일 관리가 용이하고 용량이 적다 -> 최다 사용
div {color:red;} /* 스타일 규칙 선언 */
<link rel="stylesheet" href="css/style.css">
/* head 내부에 link 선언 후 href 속성으로 css 파일 경로 적기 */
- Import
- 스타일 시트 내 다른 스타일 시트 파일을 불러오는 방식
- style 내부 상단이나 외부 스타일 시트 파일 상단에 선언하나 성능이 좋지 않아 거의 사용하지 않음
@import url("css/style.css");