Notice
Recent Posts
Recent Comments
Link
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
| 29 | 30 |
Tags
- Spring_에러정리
- Git_정리
- asp.net
- JavaScript
- Spring_오류정리
- DML
- SQL_용어정리
- vb.net
- 자바스크립트
- json
- Git_명령어정리
- jsp
- SQL
- CSS
- 배열
- git
- spring
- MySQL
- 아파치톰캣
- 다이어그램
- java
- workbench
- HTML
- 자바
- github
- 인스턴스
- Linux
- Linux_명령어정리
- 이클립스
- 인덱스
Archives
- Today
- Total
데브마우스
[CSS]CSS 개요 정리 본문
CSS란 무엇인가요?
CSS란 Cascading Style Sheets의 약자로써 웹 페이지를 꾸며주는 연쇄 스타일 시트입니다.
1996년 CSS버전1이 출시되었으며 글 작성 시점에서 CSS의 최신버전은 CSS3입니다.
왜 CSS를 사용하나요?
초기의 웹 페이지는 HTML만 있었습니다. 그러다보니 문서를 아름답게 꾸밀 수 없었습니다. 웹 문서를 더 아름답게 꾸미기 위해 CSS를 사용했습니다. 문서 작성을 HTML이 담당한다면 디자인은 CSS가 담당합니다.
CSS 적용 방법
CSS는 HTML 파일 내부에 적용하거나 별개의 .CSS 파일을 만들어서 적용시킬 수 도 있습니다.
| 적용 방법 | 예시 |
| 파일 내부의 HTML 태그에 적용 | <h1 style="font-size:16px;">CSS를 HTML 태그에 적용</h1> |
| 파일 내부의 <head> 태그 안에 <style> 태그 안에 작성하여 적용 | <head> <style> h1 { font-size:16px; } </style> </head> |
| 파일 외부의 별개의 파일로 적용 | <link type="text/css" rel="stylesheet" href="style.css"> |
CSS 적용 우선순위
| 우선 순위 | 적용 방법 |
| 1 | 속성 값 뒤에 !important |
| 2 | 인라인 스타일 시트 적용 |
| 3 | 내부 스타일 시트 적용 |
| 4 | 외부 스타일 시트 적용 |
| 5 | 브라우저 기본 스타일 시트 적용 |
우선 순위가 높을수록 우선 적용됩니다.
하나의 요소에 스타일 시트가 중복해서 정의될 경우 제일 마지막에 설정된 값이 적용됩니다.
CSS3의 문법 구성
| h5 | { | color: | red; | } |
| ↑ 선택자 | 열어주는 중괄호 | ↑ 속성 | ↑ 속성 값 | 닫아주는 중괄호 |
CSS 파일을 분리 했을 때 장점
- 내용과 디자인 수정이 쉽습니다.
- 다양한 기능으로 확장할 수 있습니다.
- 여러 HTML 파일에 통일된 문서 양식을 제공할 수 있습니다.
- 전송 및 로딩 시간을 단축합니다.
'CSS > CSS: 정리' 카테고리의 다른 글
| [CSS]선택자 정리 (0) | 2023.12.28 |
|---|---|
| [CSS] CSS의 단위 정리 (0) | 2023.12.15 |
| [CSS]CSS 상속 정리 (0) | 2023.12.14 |