CSS는 Cascading Style Sheets의 약자입니다. CSS는 HTML 태그들이 각종 미디어에서 어떻게 보이는지를 정의하는데 사용됩니다. 스타일을 HTML 문서로부터 분리하여 관리할 수 있게 해줍니다.
HTML만으로 웹 페이지를 제작할 경우, 각 태그의 세부 스타일을 일일이 지정해주어야 하며, 완성 후에도 스타일의 변경 및 유지보수가 어렵습니다.
이 문제를 해결하기 위해 W3C에서 만든 스타일 시트 언어가 CSS입니다.
CSS를 사용함으로써 웹 페이지의 스타일을 별도의 파일로 저장하고 쉽게 제어할 수 있게 됩니다.
이는 웹 사이트의 스타일을 일관성 있게 유지하고 유지보수를 용이하게 합니다.
p {
text-align: center;
color: blue;
}
--- ---------- ------ ----- -----
[선택자] 속성명 속성값 속성명 속성값
----------------------------------
[선언부]
1. CSS의 문법은 선택자와 선언부로 구성된다.
2. 선택자는 CSS를 적용하고자 하는 HTML 태그를 가리키고 선언부는 중괄호({})를 사용하여 전체를 둘러싼다.
3. 각 선언은 CSS 속성명과 속성 값을 콜론(:)으로 연결한다.
4. CSS 선언은 언제나 마지막에 세미콜론(;)으로 끝마친다.
# CSS 주석
예시:
p {
color: blue;
} /* p 태그의 글자 색상은 파란색입니다. */
-
전체 선택자
- 스타일은 모든 요소에 적용할 때 사용한다.
- 주로 모든 하위 요소에 한꺼번에 스타일을 적용할 때 사용하며, 전체 선택자는 asterisk(*) 기호를 사용한다.
-
태그 선택자
- 특정 태그가 쓰인 모든 요소에 스타일을 적용한다.
- 선택자 위치에 태그명을 작성하면 사용된 모든 해당 태그에 동일한 스타일이 적용된다.
-
클래스 선택자
- 클래스 선택자는 특성 집단의 여러 요소를 한 번에 선택할 때 사용한다.
- 같은 클래스 이름(class="")을 가지는 요소들을 모두 선택해주고, 스타일 적용 시 선택자에 ".클래스명"을 작성해준다.
-
아이디 선택자
- 아이디 선택자는 특정 요소를 선택할 때 사용한다.
- 스타일을 지정할 때 사용되며, 선택자 부분에 "#아이디명"을 작성한다.
-
그룹 선택자
- 여러 선택자에 같은 스타일을 적용할 경우 쉼표로 구분해서 여러 선택자를 나열한 후, 스타일은 한 번만 정의한다.
하나의 요소는 하나 이상의 CSS 선언에 영향을 받을 수 있다. 이 때 충돌을 피하기 위해서 CSS 적용 우선순위가 필요하다.
-
중요도:
- CSS가 어디에 선언되어 있는지에 따라서 우선순위가 달라진다.
- 인라인 스타일 (HTML 태그 내부에 style 속성으로 사용)
- 내부 스타일 시트 (HTML 문서의 style 태그 안에 위치)
- 외부 스타일 시트 (CSS 파일을 외부에 따로 만들어서 불러오는 방법)
- 웹 브라우저 기본 스타일
- CSS가 어디에 선언되어 있는지에 따라서 우선순위가 달라진다.
-
명시도:
- 명확하게 특정할 수록 우선순위가 높아진다.
- !important
- 인라인 스타일
- 아이디 선택자
- 클래스 선택자
- 태그 선택자
- 전체 선택자
- 상속받은 속성
- 명확하게 특정할 수록 우선순위가 높아진다.
-
선언 순서:
- 나중에 선언된 스타일이 우선 적용된다.
시맨틱(Semantic): "의미가 있는"
HTML5에 도입된 시맨틱 태그는 개발자와 브라우저에게 의미있는 태그를 제공한다.
<div>
: non-semantic 태그, 안에 들어간 내용의 의미를 유추하기 어렵다.<header>
: semantic 태그, 상단, 헤더를 의미하는 태그<nav>
: semantic 태그, 메뉴, 네비게이션을 의미하는 태그<main>
: semantic 태그, 내용의 중심을 의미하는 태그<aside>
: semantic 태그, 사이드에 위치하는 공간을 의미하는 태그<section>
: semantic 태그, 여러 중심 내용을 감싸는 공간을 의미하는 태그<article>
: semantic 태그, 글자가 많이 들어간 부분을 의미하는 태그<footer>
: semantic 태그, 하단, 푸터를 의미하는 태그