CSS란?
Cascading Style Sheet, 웹 문서의 디자인을 담당한다.
내부 스타일 시트 사용하기
<head>
<style>
h1 {
padding: 10px;
background-color: #222;
color: #fff;
}
</style>
</head>
외부 스타일 시트 사용하기
<head>
<link rel="stylesheet" href="외부 스타일 시트 파일 경로">
</head>
기본 선택자
* { 속성: 값; } // 전체 선택자
p { font-style: italic; } // 태그명 { 스타일 규칙 }
h1, p { text-align: center; } // 선택자1, 선택자2 { 스타일 규칙 }
.클래스명 { 스타일 규칙 }
#아이디명 { 스타일 규칙 }
텍스트 스타일
글자 관련 속성
font-family: <글꼴 이름> | [<글꼴 이름>, <글꼴 이름>] // 글꼴 종류 지정
font-size: <절대 크기> | <상대 크기> | <크기> | <백분율> // 글자 크기 지정
font-style: normal | italic | oblique // 글자를 이탤릭체로 표시할지 지정
font-weight: normal | bold | bolder | lighter | 숫자 // 글자 굵기 지정
텍스트 스타일 속성
color: <색상> // 글자색 지정
text-align: start | end | left | right | center | justify | match-parent // justify: 양쪽에 맞춰 문단 정렬, match-parent: 부모 요소에 따라 문단 정렬
line-height: // 줄 간격 조절
text-decoration: none | underline | overline | line through // 밑줄이나 취소선 여부
text-shadow: none | <가로 거리> <세로 거리> <번짐 정도> <색상> // 텍스트에 그림자 추가
text-transform: none | capitalize | uppercase | lowercase | full-width // 텍스트 대문자 여부
letter-spacing: // 글자 사이 간격 지정
word-spacing: // 단어 사이 간격 지정
웹에서 색상 지정 방법
| 방법 | 설명 |
|---|
| 16진수 | 빨강, 초록, 파랑 각각 두 자리씩 총 여섯 자리의 16진수로 색상 표현 |
| rgb, rbga | r, g, b: 색의 양을 0~255 사이의 숫자로 표현, a: 불투명도 표현 |
| hsl, hsla | 색상, 채도, 명도, a: 불투명도 |
| 색상 이름 | red, yellow, black 등 색상 이름 사용 |
목록 스타일
list-style-type 속성
| 종류 | 설명 | 예시 |
|---|
| disc | 채운 원 모양 | ● |
| circle | 빈 원 모양 | ○ |
| square | 채운 사각형 모양 | ■ |
| decimal | 1부터 시작하는 10진수 | 1, 2, 3, … |
| lower-roman | 로마 숫자 소문자 | i, ii, iii, … |
| upper-roman | 로마 숫자 대문자 | I, II, III, … |
| lower-alpha, lower-ratin | 알파벳 소문자 | a, b, c, … |
| upper-alpha, upper-ratin | 알파벳 대문자 | A, B, C, … |
| none | 블릿이나 숫자를 없앰 | |
list-style-image: <url(이미지 파일 경로)> | none // 불릿 대신 이미지 사용
list-style-position: inside | outside; // 안으로 들여쓰기, outside: 기본값
박스 모델
박스 모델 속성
| 종류 | 설명 |
|---|
| width | 너비 지정 |
| height | 높이 지정 |
| box-sizing | 크기를 계산하는 기준을 지정 |
| box-shadow | 그림자 효과 추가 |
테두리 속성
| 속성 | 설명 |
|---|
| border-style | 상하좌우 4개 방향의 테두리 스타일 한꺼번에 지정 |
| border-위치-style | top, right, bottom, left 중 선택해 특정 위치 테두리 스타일만 지정 |
| border-width | 상하좌우 4개 방향의 테두리 두께 한꺼번에 지정 |
| border-위치-width | 특정 위치 테두리 두께만 지정 |
| border-color | 상하좌우 4개 방향의 테두리 색상 한꺼번에 지정 |
| border-위치-color | 특정 위치 테두리 색상만 지정 |
| border-radius | 상하좌우 4개 방향 꼭짓점을 한꺼번에 둥글게 처리 |
| border-위치-radius | 특정 꼭짓점만 둥글게 처리 |
여백 속성
| 종류 | 설명 |
|---|
| margin | 상하좌우 4개 방향의 마진 한꺼번에 지정 |
| margin-위치 | 특정 위치의 마진만 지정 |
| padding | 상하좌우 4개 방향의 패딩 한꺼번에 지정 |
| padding-위치 | 특정 위치의 패딩만 지정 |
레이아웃 속성
| 종류 | 설명 |
|---|
| display | 요소 배치 방법 지정, block, inline, inline-block, none |
| float | 웹 요소를 오른쪽이나 왼쪽으로 배치 |
위치 지정 속성
| 종류 | 설명 |
|---|
| left, right, top, bottom | 기준 위치와 요소 사이에 상하좌우 얼마나 떨어져 있는지 지정 |
| position | 웹 요소의 위치 지정, static, relative, absolute, fixed |
배경 꾸미기
배경 이미지 관련 속성
| 종류 | 설명 |
|---|
| background-color | 배경색 지정 |
| background-clip | 배경색이나 이미지를 어디까지 적용할지 지정 |
| background-image | 배경 이미지 지정 |
| background-repeat | 배경 이미지 반복 방법 지정 |
| background-position | 배경 이미지 위치 지정 |
| background-origin | 배경 이미지 배치 기준 지정 |
| background-attachment | 배경 이미지를 문서에 고정 |
| background | 하나의 속성으로 배경 스타일 한꺼번에 지정 |
| background-size | 배경 이미지 크기 조정 |
선형 그라데이션 관련 속성
| 종류 | 설명 |
|---|
| 방향 | left, right, top, bottom |
| 각도 | 그라데이션이 끝나는 각도 지정, deg |
| 색상 중지점 | 쉼표로 색상 구분 |
원형 그라데이션 관련 속성
| 종류 | 설명 |
|---|
| 모양 | eclipse, circle |
| 크기 | closest-side, closest-corner, farthest-side, farthest-corner |
| 위치 | at을 앞에 붙인 후 키워드나 백분율 사용 |
| 색상 중지점 | 쉼표로 색상 구분 |
