CSS란 무엇인가?
CSS(Cascading System Sheets)는 스타일, 레이아웃 등을 통해 문서(HTMl)를 표시하는 방법을 지정하는 언어이다.
HTML이 정보를 표현한다면 CSS는 HTML문서를 시작적으로 이쁘게 꾸며주는 역할을 한다.
CSS를 통해
- 정보(HTML)와 디자인(CSS)를 분리하여 관리할 수 있다.
- 정보를 수정하지 않고 디자인만 변경할 수 있다.
- 태그에 style 속성을 주면 소스코드가 지저분해 지는데, 분리하여 관리하게 되면 유지보수 및 가독성이 좋아진다.
- 검색엔진이 HTML을 해석 가능하도록 하기 때문에 더 많은 방문자들이 방문할 수 있도록 유도할 수 있다.
- 시각장애인을 위한 스크린리더 프로그램이 HTML문서를 해석하도록 할 수 있다.(웹접근성)
CSS 구문
CSS는 규칙 기반 언어이다.
웹 페이지의 특정 요소 또는 요소 그룹에 적용할 스타일 그룹을 지정하는 규칙을 정의한다.
"내 페이지의 제목은 파란색이며 텍스트는 15px로 표시 되기를 원한다."
h1{
color: blue;
font-size: 15px;
}- 선택자(Selector)
- h1
- 선언(Declaration), 속성과 값의 쌍
- color: blue
- 속성(Property)
- font-size
- 값(Value)
- 15px
- CSS 구문은 선택자와 함께 열린다.
- 선택자를 통해 스타일을 지정할 HTML 요소를 선택
- 그 다음 중괄호 안의 속성과 값, 하나의 쌍으로 이루어진 선언을 진행
- 콜론 앞에는, 속성이 있고 콜론 뒤에는 값이 있다.
- 각 쌍은 선택한 요소의 속성, 속성에 부여할 값을 의미한다.
- 속성(Property) : 어떤 스타일 기능을 변경할지 결정
- 값(Value) : 어떻게 스타일 기능을 변경할지 결정
CSS 정의 방법
- HTML 태그 내에 스타일 지정(Inline Styles)
- 내부 스타일 시트(Internal Style Sheet) / 내부참조(embedding)
- 외부 스타일 시트(External Style Sheet) / 외부 참조(link file)
- 인라인, inline
<h1 style="color: blue; font-size: 100px;">내 제목은 파란색 폰트 사이즈 100px로 디자인하겠다.</h1>해당 태그에 직접 style속성을 활용
- 내부 참조, embedding
<head>
<style>
h1 {
color: blue;
font-size: 15px;
}
</style>
</head>HTML 문서 내에서 <head>와 </head>사이에 <style> 태그로 지정
- 외부 참조, link file
<head>
<link rel="stylesheet" href="mystyle.css">
</head>외부 CSS 파일을 <head>내 <link>를 통해 불러오기
CSS 적용 우선순위 (cascading order / specificity)
위에서부터 차례대로 읽어들이는 HTML과 달리, CSS에는 우선순위 라는것이 적용된다.
- 중요도(Importance), 속성값 뒤에 !important; 를 붙인 속성
- 태그에 직접적으로 style 속성을 넣는 방식, inline 방식
- id 선택자, #id로 지정한 속성
- class 선택자, .클래스로 지정한 속성
- 태그이름 으로 지정한 속성, 요소선택자
- 소스 순서
'Web > css' 카테고리의 다른 글
| CSS Box model (0) | 2021.08.16 |
|---|---|
| CSS 상속과 단위 (0) | 2021.08.16 |
| CSS Selector, 가상 선택자 (0) | 2021.08.16 |
| CSS Selector, 결합자 / 복합 선택자 (Combinators) (0) | 2021.08.16 |
| CSS 선택자, Selector (0) | 2021.08.16 |