HTML 태그를 이용하여 웹 문서를 설계하고 변경하는 데에는 많은 제약이 따른다. 문서의 전체적인 구조와 틀은 태그로 정의할 수 있지만 화면에 표현되는 다양한 스타일은 정의할 수 없기 때문이다. 스타일시트는 이런 문제점을 보완하고 웹 문서에 다양한 레이아웃과 장식을 하기 위하여 사용한다.
CSS
스타일 시트 표준안으로, 웹 문서에 글꼴, 색상, 정렬과 각 요소의 배치 방법 등과 같은 디자인 요소를 적용하는 데 사용한다. HTML5에서는 CSS3를 기본으로 사용한다. CSS3는 모듈 기반으로 지원된다는 특징이 있는데, 이는 각종 브라우저나 디바이스에 원하는 CSS 모듈만 탑재하거나 필요한 모듈만 빠르게 업데이트할 수 있도록 지원하는 기능이다. 또한 이전 버전에서 갖지 못했던 화려하고 역동적인 표현을 추가하여 자바스크립트 같은 서버 측 기술에만 의존하던 영역들을 추가로 지원한다.
CSS의 특징
- 내용과 디자인 수정이 용이
- 다양한 기능으로 확장 가능
- 통일된 문서 양식 제공
- 전송 및 로딩 시간 단축
CSS3 기본 사용법
CSS는 데이터의 디자인을 책임지는 스타일 언어다. 따라서 어떤 태그 혹은 속성에 어떤 디자인을 적용할 것인지 선택해야 한다. 다음은 CSS의 정의 문법이다.
선택자 { 속성: 속성값[단위]; }
선택자
{} 괄호 사이에 정의한 스타일 규칙이 적용될 대상
속성과 속성값
'속성: 속성값' 형식으로 표시하며, 여러 속성을 가질경우 세미콜론(;)으로 구분
주석
CSS의 주석은 /*와 */를 사용한다.
CSS의 사용 위치
웹 문서에 CSS를 적용하는 방법은 인라인 스타일 시트, 내부 스타일 시트, 외부 스타일 시트의 세 가지 방법이 있다. 각각 사용 위치는 모두 다르지만 결과는 같다. 웹 문서의 특성에 따라 적합한 방법을 선택하여 사용하면 된다.
인라인 스타일 시트
스타일 시트를 HTML 태그 안에 직접 지정하는 방법이다. 웹 문서 내 부분적으로 적용할 스타일을 간편하게 지정할 수 있어서 편리하다. 하지만 궁극적을 스타일 시트를 사용하여 얻는 장점은 발휘할 수 없으므로 꼭 필요한 경우에만 사용하도록 한다.
내부 스타일 시트
HTML 문서의 <head> 태그 안에 스타일 시트를 지정하는 방법이다. 웹 문서 내 지정된 태그에만 적용되므로 문서마다 스타일을 다르게 할 때 사용하면 편리하다.
외부 스타일 시트
확장자가 '.css'인 스타일 시트 파일을 따로 만들어 HTML 문서에 <link> 태그로 연결하는 방법이다. 이러한 방법으로 스타일 시트를 작성하면 여러 HTML 문서에 동일한 스타일을 적용할 수 있다.
CSS의 우선순위
하나의 태그에 세 가지 스타일 시트 적용 방법을 모두 사용하였다면, 어떤 순서로 적용될까? 스타일 시트는 우선순위에 따라서 단계적으로 적용된다. 다음은 스타일 시트의 우선순위 표이다.
인라인 스타일 시트 적용 > 내부 스타일 시트 적용 > 외부 스타일 시트 적용 > 브라우저 기본 스타일 시트 적용
만약 하나의 요소에 인라인 스타일 시트가 중복 정의 되면 제일 마지막에 설정된 값이 적용된다. 또한 우선순위와 상관없이 속성을 강제로 적용할 수 있는 방법도 있다. !important 표시를 설정해 놓으면 어느 위치에 있든 우선적으로 적용된다.
p { color: blue!important; } /* 우선적용 */
p { color: red; }'Web > CSS' 카테고리의 다른 글
| [CSS] 레이아웃 속성 (0) | 2024.09.16 |
|---|---|
| [CSS] 박스 모델 (6) | 2024.09.16 |
| [CSS] 색상과 배경을 위한 스타일 (2) | 2024.09.16 |
| [CSS] 텍스트 관련 스타일 (1) | 2024.09.16 |
| [CSS] 선택자 (0) | 2024.09.15 |