4장. 웹 스타일링을 위한 CSS 기초 배우기
4.1 CSS 문법 살펴보기
1) CSS 기본 문법
CSS는 기본적으로 선택자와 선언부로 구성된 문법 형태를 가진다.
- 선택자: CSS 속성을 적용할 대상(태그, 요소)을 지정하는 영역
- 선언부: 선택자로 지정된 대상(태그, 요소)에 적용할 CSS 속성과 값을 적는 영역
2) 주석
- 코드에 설명을 남기는 것
- CSS에서 주석 내용은
/*와 */ 사이에 작성할 수 있다.
4.2 CSS 적용하기
- 내부 스타일 시트 방법: HTML 문서 내부에
style 태그로 CSS 코드를 작성해 적용하는 방법
- 외부 스타일 시트 방법: 별도의 CSS 파일을 만들어 HTML 문서와
link 태그로 연결해 CSS를 적용하는 방법
- 인라인 스타일 방법: 모든 태그에서 사용할 수 있는
style 속성을 사용해 CSS를 적용하는 방법
5장. CSS 선택자 다루기
5.1 기본 선택자 사용하기
1) 선택자
선택자는 CSS 속성을 적용할 대상을 선택하는 문법이다.
2) 기본 선택자
- 전체 선택자 - 모든 태그를 선택자로 지정한다.
- 태그 선택자 - 태그명으로 선택자를 지정한다.
- 아이디 선택자 -
id 속성값으로 선택자를 지정한다.
- 클래스 선택자 -
class 속성값으로 선택자를 지정한다.
- 기본 속성 선택자 - HTML 태그에서 사용할 수 있는 속성과 값으로 선택자를 지정한다.
- 문자열 속성 선택자 - 태그의 속성값이 특정한 문자열과 일치하는 요소를 선택자로 지정한다.
5.2 조합 선택자 사용하기
기본 선택자와 조합해서 사용했을 때 선택자의 의미를 더 풍부하게 하는 역할을 한다.
- 그룹 선택자 - 여러 선택자를
, 기호로 구분해 선택자를 그룹으로 묶어 지정한다.
- 자식 선택자 - 선택자 범위를 자식 관계로 제한하고,
> 기호를 구분자로 사용한다.
- 하위 선택자 - 선택자 범위를 자식 및 자손 관계로 제한하고, 공백을 구분자로 사용한다.
- 인접 형제 선택자 - 특정 태그와 가장 인접한 형제 관계 태그를 선택자로 지정하고,
+ 기호를 구분자로 사용한다.
- 일반 형제 선택자 - 특정 태그와 형제 관계에 있는 모든 태그를 선택자로 지정하고,
~ 기호를 구분자로 사용한다.
5.3 가상 요소 선택자 사용하기
실제로 존재하는 요소는 아니지만, 존재한다고 가정하고 선택하는 방법. 가상 요소 선택자 앞에는 :: 기호(콜론 2개)를 붙인다.
::before - 요소의 맨 앞 선택::after - 요소의 맨 뒤 선택
5.4 가상 클래스 선택자 사용하기
요소의 상태를 이용해 선택자를 지정하는 방법. 가상 클래스 선택자 앞에는 : 기호를 붙인다.
- 링크 가상 클래스 선택자
:link - 링크를 한 번도 방문한 적 없는 상태:visited - 링크를 한 번 이상 방문한 적이 있는 상태
- 동적 가상 클래스 선택자
:hover - 마우스를 올린 상태:active - 마우스로 클릭한상태
- 입력 요소 가상 클래스 선택자
:focus - 입력 요소에 커서가 활성화된 상태:checked - 체크박스 요소에 체크한 상태:disabled - 상호작용 요소가 비활성화된 상태:enabled - 상호작용 요소가 활성화된 상태
- 구조적 가상 클래스 선택자
:first-child, :last-child - 첫 번째 자식 태그와 마지막 자식 태그:nth-child(n), :nth-last-child(n) - n번째 자식 태그와 끝에서 n번째 자식 태그:nth-of-type(n), :nth-last-of-type(n) - n번째 특정 자식 태그와 끝에서 n번째 특정 자식 태그:first-of-type, :last-of-type - 부모의 첫 번째 특정 자식 태그와 마지막 특정 자식 태그
6장. CSS 필수 속성 다루기
6.1 CSS의 특징 살펴보기
- 기본 스타일 시트는 웹 브라우저에 기본으로 내장된 스타일 시트를 말한다.
- 적용 우선순위는 같은 태그에 스타일 속성이 중복으로 작성됐을 때, 어느 속성을 적용할지 결정하는 기준이다. 적용 우선순위는 개별성 규칙의 점수에 따라 계산된다.
- 상속은 부모 요소의 속성을 자식 요소가 물려받는 것을 말한다.
- CSS에는 px, em, rem, %, vw, vh와 같은 다양한 단위가 있다.
- 색상 표기법에는 키워드 표기법과 RGB 표기법, HEX 표기법이 있다.
6.2 텍스트 속성으로 텍스트 꾸미기
| 속성명 | 설명 |
|---|
font-family | 글꼴 지정 |
font-size | 텍스트 크기 지정 |
font-weight | 텍스트 굵기 지정 |
font-style | 글꼴 스타일 지정 |
font-variant | 영문 소문자를 크기가 작은 대문자로 변경 |
color | 텍스트 색상 지정 |
text-align | 텍스트 정렬 지정 |
text-decoration | 텍스트 꾸밈 지정 |
text-spacing | 자간 지정 |
line-height | 행간 지정 |
6.3 박스 모델을 구성하는 속성 다루기
박스 모델은 모든 태그가 사각형 모양으로 구성됐다는 개념이다. 박스 모델은 margin, border, padding, content 영역으로 구성되며 각 영역마다 영역을 제어하는 속성이 있다.
| 영역 | 속성 |
|---|
| margin | margin, margin-top, margin-right, margin-bottom, margin-left |
| border | border, border-top, border-right, border-bottom, border-left |
| padding | padding, padding-top, padding-right, padding-bottom, padding-left |
| content | width, height |
6.4 배경 속성으로 요소의 배경 설정하기
| 속성 | 설명 |
|---|
background-color | 배경색을 지정한다 |
background-image | 배경에 이미지를 삽입한다 |
background-repeat | 배경 이미지의 반복 여부를 지정한다 |
background-size | 배경 이미지의 크기를 지정한다 |
background-position | 배경 이미지의 위치를 지정한다 |
background-attachment | 배경 이미지를 스크롤할 때의 모습을 결정한다 |
background | 모든 배경 속성을 한번에 사용할 수 있는 단축 속성 |
6.5 위치 속성으로 HTML 요소 배치하기
| 속성 | 속성값 |
|---|
position | static, relative, absolute, fixed, sticky |
float | none, left, right |
clear | left, right, both |
6.6 전환 효과 속성 적용하기
어떤 속성의 값이 다른 값으로 변경되는 것을 전환이라고 하며, 이런 효과를 지정하는 속성들을 전환 효과 속성이라고 한다.
| 속성 | 설명 |
|---|
transition-property | 전환 효과의 대상 속성명을 값으로 지정한다 |
transition-duration | 전환 효과가 진행되는 시간을 지정한다 |
transition-delay | 전환 효과가 지연되는 시간을 지정한다 |
transition-timing-function | 전환 효과 속도를 지정한다 |
transition | 모든 전환 효과 속성을 한 번에 지정할 수 있는 단축 속성 |
6.7 애니메이션 속성으로 전환 효과 제어하기
애니메이션 속성은 HTML 요소에 적용된 스타일을 다른 스타일로 부드럽게 전환하게 한다. 전환 효과 속성과 비슷하지만, 세부적으로 더 많은 기능을 내포하고 있다.
| 속성 | 설명 |
|---|
@keyframes | 애니메이션의 전체 속성을 정의한다 |
animation-name | 애니메이션을 지정할 키 프레임명을 지정한다 |
animation-duration | 애니메이션의 지속 시간을 지정한다 |
animation-delay | 애니메이션의 지연 시간을 지정한다 |
animation-fill-mode | 애니메이션 실행 전과 종료 후의 상태를 지정한다 |
animation-iterator-count | 애니메이션의 반복 횟수를 지정한다 |
animation-play-state | 애니메이션의 진행/정지 상태를 정의한다 |
animation-direction | 애니메이션의 진행 방향을 지정한다 |
animation-timing-function | 애니메이션의 속도를 지정한다 |
animation | 모든 애니메이션 관련 속성을 지정한다 |
6.8 변형 효과 적용하기
- 어떤 요소에 위치 이동, 회전, 확대, 축소, 기울이기와 같은 효과를 지정해 변형하는 속성
transform 속성을 사용하며 속성값에 변형 효과를 나타내는 함수를 지정한다.
| 함수 | 설명 |
|---|
translate(x, y) | 요소를 현재 위치에서 x와 y만큼 이동한다 |
translateX(n) | 요소를 현재 위치에서 n만큼 x축으로 이동한다 |
translateY(n) | 요소를 현재 위치에서 n만큼 y축으로 이동한다 |
scale(x, y) | 요소를 x와 y만큼 확대 또는 축소한다 |
scaleX(n) | 요소를 n만큼 x축으로 확대 또는 축소한다 |
scaleY(n) | 요소를 n만큼 y축으로 확대 또는 축소한다 |
skew(xdeg, ydeg) | 요소를 x축과 y축으로 xdeg, ydeg(각도)만큼 기울인다 |
skewX(deg) | 요소를 deg(각도)만큼 x축 방향으로 기울인다 |
skewY(deg) | 요소를 주어진 deg(각도)만큼 y축 방향으로 기울인다 |
rotate(deg) | 요소를 deg(각도)만큼 회전한다 |
- 변형 효과의 기준점을 변경할 때는
transform-origin 속성을 사용한다.
7장. 효과적인 레이아웃을 위한 CSS 속성 다루기
7.1 플렉스 박스 레이아웃으로 1차원 레이아웃 설계하기
1) 플렉스 박스 레이아웃
플렉스 박스 레이아웃은 1차원 레이아웃 설계를 위해 CSS3에서 추가된 개념이다. 플렉스 박스 레이아웃의 구성 요소는 다음과 같다.
| 구성 요소 | 설명 |
|---|
| 주축(main axis) | 플렉스 박스의 진행 상황과 수평한 축 |
| 교차축(cross axis) | 주축과 수직하는 축 |
| 플렉스 컨테이너(flex container) | display 속성값으로 flex나 inline-flex가 적용된 요소 |
| 플렉스 아이템(flex item) | 플렉스 컨테이너와 자식 관계를 이루는 태그 요소 |
2) 플렉스 박스 레이아웃의 기본 속성
| 속성 | 설명 |
|---|
display | flex, inline-flex 값을 지정하면 해당 요소가 플렉스 컨테이너가 됨 |
flex-direction | 플렉스 박스 레이아웃의 주축 방향을 지정한다 |
flex-wrap | 플렉스 아이템의 자동 줄바꿈 여부를 지정한다 |
flex-flow | flex-direction과 flex-wrap 속성을 한 번에 사용할 수 있는 단축 속성 |
3) 플렉스 박스 레이아웃의 정렬 속성
| 속성 | 설명 |
|---|
justify-content | 플렉스 아이템을 모두 주축 방향으로 정렬한다 |
align-items | 플렉스 아이템을 모두 교차축 방향으로 정렬한다 |
align-self | 각각의 플렉스 아이템을 교차축 방향으로 정렬한다 |
align-content | 플렉스 아이템이 두 줄이상일 때 교차축 방향으로 정렬한다 |
7.2 그리드 레이아웃으로 2차원 레이아웃 설계하기
1) 그리드 레이아웃
그리드 레이아웃은 2차원 레이아웃 설계를 위해 CSS3에서 추가된 개념이다. 그리드 레이아웃의 구성 요소는 다음과 같다.
| 구성 요소 | 설명 |
|---|
| 행 (row) | 그리드 레이아웃에서 가로줄을 의미한다 |
| 열 (column) | 그리드 레이아웃에서 세로줄을 의미한다 |
| 그리드 셀 (grid cell) | 행과 열이 만나서 이루어지는 하나의 공간을 의미한다 |
| 그리드 갭 (grid gap) | 그리드 셀과 그리드 셀 사이의 간격을 나타낸다 |
| 그리드 아이템 (grid item) | 그리드 셀 안에 포함되는 콘텐츠를 의미한다 |
| 그리드 라인 (grid line) | 그리드 행과 열을 그리는 선을 의미한다 |
| 그리드 넘버 (grid number) | 그리드 라인에 붙는 번호를 의미한다 |
| 그리드 컨테이너 (grid container) | 그리드 아이템을 묶는 부모 요소이다 |
2) 그리드 레이아웃의 기본 속성
| 속성 | 설명 |
|---|
display | 속성의 값을 grid, inline-grid로 지정하면 그리드 레이아웃을 만들 수 있다 |
grid-template-rows, grid-template-columns | 그리드 레이아웃의 행과 열을 지정한다 |
row-gap, column-gap | 그리드 셀과 셀 사이의 간격을 지정한다 |
3) 그리드 레이아웃의 정렬 속성
| 속성 | 설명 |
|---|
align-items | 그리드 아이템 전체를 셀의 세로 방향으로 정렬한다 |
align-self | 각각의 그리드 아이템을 셀의 세로 방향으로 정렬한다 |
justify-items | 그리드 아이템 전체를 셀의 가로 방향으로 정렬한다 |
justify-self | 각각의 그리드 아이템을 셀의 가로 방향으로 정렬한다 |
place-item | align-items와 justify-items 속성을 한 번에 사용할 수 있는 단축 속성 |
place-self | align-self와 justify-self 속성을 한 번에 사용할 수 있는 단축 속성 |
4) 그리드 레이아웃의 배치 속성
| 속성명 | 설명 |
|---|
grid-template-areas | 그리드 레이아웃에서 행과 열을 이름으로 지정한다 |
grid-area | 그리드 아이템에 이름을 지정한다 |
grid-column-start, grid-column-end | 그리드 레이아웃에서 열의 시작 번호와 끝 번호를 지정한다 |
grid-row-start, grid-row-end | 그리드 레이아웃에서 행의 시작과 끝 번호를 지정한다 |
grid-column | grid-column-start와 grid-column-end 속성을 한 번에 사용할 수 있는 단축 속성 |
grid-row | grid-row-start와 grid-row-end 속성을 한 번에 사용할 수 있는 단축 속성 |
7.3 반응형 웹을 위한 미디어 쿼리 사용하기
미디어 쿼리는 사이트에 접속하는 미디어 타입과 특징, 해상도에 따라 다른 스타일 속성을 적용할 수 있게 하는 기술이다.
/* 형식 */
@media <not|only> <mediatype> and (<media feature>) <and|or|not> (<media feature>) {
/* CSS 코드 */
}
