1. 정의
웹 페이지의 스타일과 레이아웃을 지정하는 스타일 시트 언어이다. HTML과 함께 사용되어 웹 페이지를 시각적으로 꾸미고 디자인할 수 있도록 도와준다.
CSS는 HTML 문서의 요소들에 대한 스타일과 속성을 지정하는 규칙 세트로 구성된다.
각 규칙은 선택자(selecor)와 중괄호({})로 둘러싸인 선언 블록으로 구성된다. 선택자는 스타일을 적용할 HTML 요소를 식별하는 역할을 한다. 선언 블록은 선택자가 적용될 요오세 대한 스타일 속성과 값으로 구성된다.
2. CSS 규칙 예제
h1 {
color: blue;
font-size: 24px;
}
p {
color: red;
margin-top: 10px;
}CSS 규칙 해석
1) h1 선택자: <h1> 태그에 대한 스타일(색상, 폰트)을 정의하고 있다.
2) p 선택자: <p> 태그에 대한 스타일(색상, 위쪽 여백)을 정의하고 있다.
tip> haed 부분에 css 링크를 선언하여 HTML 요소에 작성한 CSS를 적용할 수 있다.
<!DOCTYPE html>
<html>
<head>
<title>문서 제목</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- 콘텐츠가 여기에 위치합니다 -->
</body>
</html>
3. 자주 사용하는 스타일 속성
1) color: 텍스트 색상 지정
2) font-size: 폰트 지정
3) font-family: 글꼴 지정
4) background-color: 배경 색상 지정
5) width, height: 요소 너비, 넓이 지정
6) margin, padding: 요소 외부 여백, 내부 여백 지정
7) boarder: 요소 테두리 스타일, 두께, 색상 지정
8) display: 요소 표시 방법 지정 (block, inline, inline-block, none)
9) position: 요소의 위치 방법 지정
- static: 요소를 일반적인 문서 흐름에 따라 배치(기본값)
- relative: 요소를 자기 자신을 기준으로 상대적인 위치에 배치
- absolute: 요소를 문서의 상대적인 위치에 배치 (가장 가까운 위치 지정 조상 요소를 기준으로 함)
- fixed: 요소를 브라우저 창에 상대적인 위치에 고정
- sticky: 요소를 스크롤 영역 내에서 상대적인 위치에 고정 (일정 오프셋을 넘어설 때까지 일반적인 문서 흐름에 따라 이동)
10) z-index: 요소의 쌓임 순서 지정 (더 큰 숫자가 더 위에 표시)
11) opacity: 요소의 투명도 지정 (0에서 1사이의 값을 가짐, 0: 완전 투명, 1: 완전 불투명)
12) overflow: 요소의 내용이 너무 클 때 표시 방법 지정 (visible, hidden, scroll, auto 등)