CSS

2023.02.09

0. 시작하기전

어제에 이어서 오늘은 CSS를 정리해보자
본 포스트는 'Do it 웹 표준의 정석'을 바탕으로 작성하였다.

1. CSS의 기본

❓CSS란?
✔ Cascading Style Sheets(CSS)는 HTML이나 XML로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어 이다.
✔ CSS는 요소가 화면, 종이, 음성이나 다른 매체 상에 어떻게 렌더링되어야 하는 지정한다.
✔ 주석

/* 주석 입니다 */

1-1 스타일 시트

1. 브라우저 기본 스타일 - 웹 브라우저에 웹 문서를 표시할 때 브라우저에서 기본적으로 사용하는 스타일

2. 인라인 스타일 - style 속성을 사용해서 필요한 요소에 스타일 직접 지정

3. 내부 스타일 시트 - 문서 앞부분에 문서에서 사용하는 스타일을 모아서 함께 정의하고 관리

4. 외부 스타일 시트 - 문서에서 사용하는 스타일을 모아서 따로 파일로 저장한 후 연결해서 사용(link 태그 사용)

1-2 CSS 기본 선택자

1. 전체 선택자 - 문서의 모든 요소에 스타일 적용

* {margin:0;}

2. 타입 선택자 - 특정 태그를 사용한 모든 요소에 스타일 적용

p {font-style:italic;}

3. 클래스 선택자 - 특정 부분만 선택해서 문서 안에 여러번 적용(마침표 사용)

.bg {background-color:#ddd;}

4. id 선택자 - 특정 부분만 선택해서 문서 안에서 한번만 적용(#사용)

#container {width:500px;}

5. 그룹 선택자 - 여러 요소에 같은 스타일 적용

h1, h2 {text-align:center;}

1-3 스타일 우선순위

1. 얼마나 중요한가?
   사용자 스타일 -> 제작자 스타일 -> 브라우저 기본 스타일

2. 적용 범위
   !important -> 인라인 스타일 -> id 스타일 -> 클래스 스타일 -> 타입 스타일

3. 소스 작성 순서
   나중에 작성한 스타일이 먼저 작성한 스타일을 덮음

2. 텍스트 표현

2-1 글자 관련 속성

1. font-family - 글꼴 종류 지정

2. font-size - 글자 크기 지정

3. font-style - 글자를 이탤릭체로 표시할지 지정

4. font-weight - 글자의 굵기 지정

2-2 텍스트 스타일 속성

1. color - 글자색 지정

2. text-decoration - 텍스트에 밑줄이나 취소선을 표시할지 여부 지정

3. text-transform - 텍스트 전체 또는 첫 글자를 대문자로 표시

4. text-shadow - 텍스트에 그림자 추가

5. letter-spacing - 글자 사이의 간격을 지정

6. word-spacing - 단어 사이의 간격 지정

7. text-align - 텍스트 정렬 방법 지정

8. line-height - 줄 간격 조정

2-3 웹에서 색상 지정 방법

1. 16진수 -빨, 초, 파 각각 두자리씩 총 여섯 자리의 16진수로 색상 표시

2. rgb(R,G,B) - 빨, 초, 파의 양을 0~255 숫자로 표현
   rgba(R,G,B,a) - rgb 형식에 불투명도를 함께 표현

3. hsl(H,S,L) - 색상, 채도, 명도의 값으로 색상 표현
   hsla(H,S,L,a) - hsl 형식에 불투명도를 함께 표현

4. 색상이름 - red, yellow, black과 같은 색상 이름 사용

3. 레이아웃 구성(박스 모델)

3-1 박스 모델 속성

1. width - 박스 모델의 너비 지정

2. height - 박스 모델의 높이 지정

3. box-sizing - 박스 모델의 크기를 계산하는 기준을 지정

4. box-shadow - 박스 모델에 그림자 효과 추가

3-2 테두리 속성

1. border-style - 상하좌우 4개 방향의 테두리 스타일을 한꺼번에 지정
   border-위치-style - 위치 자리에(top,right,bottom,left)중에서 선택하여 특정 위치의 테두리 스타일만 지정

2. border-width - 상하좌우 4개 방향의 테두리 두께 한꺼번에 지정
   border-위치-width - 특정 위치 자리에 테두리 두께 지정

3. border-color - 상하좌우 4개 방향의 테두리 색상을 한꺼번에 지정
   border-위치-color - 특정 위치 자리에 테두리 색상 지정

4. border-radius - 상하좌우 4개 방향의 꼭짓점을 한꺼번에 둥글게 지정
   border-위치-radius - 위치 자리에(top-left,top-right,bottom-right,bottom-left)등을 선택해 특정 꼭짓점만 둥글게 지정

3-3 여백 속성

contents - 텍스트와 이미지가 표시되는 상자
padding - 콘텐츠 주변 영역
border - padding과 contents를 둘러싸는 테두리
margin - 테두리 밖의 영역

1. margin - 상하좌우 4개 방향의 마진을 한꺼번에 지정
   margin-위치 - 특정 위치 자리에 마진 지정

2. padding - 상하좌우 4개 방향의 패딩을 한꺼번에 지정
   padding-위치 - 특정 위치 자리에 패딩 지정

3-4 레이아웃 속성

1. display - 화면에서 요소를 배치하는 방법 지정
   (block, inline, inline-block, none...)

2. float - 웹 요소를 왼쪽이나 오른쪽으로 배치
   float를 적용한 요소는 clear 속성으로 해제 하지 않으면 뒤에 오는 요소도 계속 왼쪽이나 오른쪽으로 연결해서 배치

3-5 위치 지정 속성

1. left, right, top, bottom - 기준 위치와 요소 사이에 상하좌우가 얼마나 떨어져 있는지 지정

2. position - 웹 요소의 위치 지정
   (static, relative absolute, fixed)

4. 배경 꾸미기(이미지 & 그라데이션)

4-1 배경 이미지 관련 속성

1. background-color - 배경색 지정

2. background-clip - 배경색이나 이미지를 어디까지 적용할지 지정

3. background-image - 배경 이미지 지정

4. background-repeat - 배경 이미지의 반복 방법 지정

5. background-position - 배경 이미지의 위치 지정

6. background-origin - 배경 이미지를 배치할 기준 지정

7. background-attachment - 배경 이미지를 문서에 고정

8. background - 하나의 속성으로 배경 스타일을 한꺼번에 지정

9. background-size - 배경 이미지의 크기 조절

4-2 선형 그라데이션 관련 속성

1. 방향 - 끝 지점을 기준으로 to 다음에 방향을 나타내는 예약어를 최대 2개까지 사용(예약어: left,right,top,bottom)

2. 각도 - 그라데이션이 끝나는 각도를 지정, 값은 deg로 표기

3. 색상 중지점 - 쉼표로 색상을 구분하며, 색상만 지정하거나 색상과 중지점의 위치를 함께 지정

4-3 원형 그라데이션 관련 속성

1. 모양
   * eclipse - 타원형의 그라데이션을 나타냄(기본값)
   * circle - 원형의 그라데이션 나타냄

2. 크기
   * closet-side - 그라데이션 가장자리가 그라데이션 중심에서 가장 가까운 측면에 닿게함
   * closet-corner - 그라데이션 가장자리가 그라데이션 중심에서 가장 가까운 꼭짓점에 닿게함
   * farthest-side - 그라데이션 가장자리가 그라데이션 중심에서 가장 멀리 떨어진 측면에 닿게함
   * farthest-corner - 그라데이션 가장자리가 그라데이션 중심에서 가장 멀리 떨어진 꼭짓점에 닿게함

3. 위치 - at을 앞에 붙인 후 키워드나 백분율 사용

4. 색상 중지점 - 쉼표로 색상을 구분하며, 색상만 지정하거나 색상과 중지점의 위치를 함께 지정

5. CSS 고급 선택자

5-1 연결 선택자

1. 하위 선택자(상위요소 하위요소) - 상위요소에 포함된 모든 하위 요소를 선택

2. 자식 선택자(부모요소>자식요소) - 부모 요소에 포함된 자식 요소만 선택

3. 인접 형제 선택자(요소1+요소2) - 요소1 이후에 맨 먼저 오는 형제 요소 선택

4. 형제 선택자(요소1~요소2) - 요소1과 형제인 모든 요소 선택

5-2 속성 선택자

1. [속성] - 해당 속성이 있는 요소

[required]

2. [속성 = 값] - 지정한 속성값이 있는 요소

[target = _blank]

3. [속성 ~= 값] - 지정한 속성값이 포함된 요소(단어별)

[class ~= button]

4. [속성 |= 값] - 지정한 속성값이 포함된 요소(하이픈, 단어별)

[title |= us]

5. [속성 ^= 값] - 지정한 속성값으로 시작하는 요소

[title ^= eng]

6. [속성 $= 값] - 지정한 속성값으로 끝나는 요소

[title $= xis]

7. [속성 *= 값] - 지정한 속성값의 일부가 일치하는 요소

[href *=w3]

5-3 가상 클래스

1. :link - 방문하지 않은 링크에 스타일을 적용

2. :visited - 방문했던 링크에 스타일을 적용

3. :hover - 지정한 요소에 마우스 포인터를 올려놓을 때 스타일을 적용

4. :active - 지정한 요소를 활성화했을 때 스타일을 적용

5. :focus - 지정한 요소에 초점이 맞춰졌을 때 스타일을 적용

6. :target - 앵커 대상에 스타일을 적용(a)

7. :enabled - 지정한 요소를 사용할 수 있는 상태일 때 스타일 적용

8. :disabled - 지정한 요소를 사용할 수 없는 상태일 때 스타일 적용

9. :checked - 선택한 요소의 스타일 적용

10. :not - 지정한 요소가 아닐 때 선택해서 스타일 적용

5-4 구조 가상 클래스

1. :only-child - 부모 안에 자식 요소가 하나뿐일 때 자식 요소 선택

2. A:only-child - 부모 안에 A요소가 하니뿐일 때 선택

3. :first-child - 부모 안에 있는 모든 요소 중에서 첫 번째 자식 요소 선택

4. :last-child - 부모 안에 있는 모든 요소 중에서 마지막 요소 선택

5. A:first-of-type - 부모 안에 있는 A요소 중에서 첫 번째 요소 선택

6. A:last-of-type - 부모 안에 있는 A요소 중에서 마지막 요소 선택

7. :nth-child(n) - 부모 안에 있는 모든 요소 중에서 n번째 자식 요소 선택

8. :nth-last-child(n) - 부모 안에 있는 모든 요소 중에서 끝에서 n번째 자식 요소 선택

9. A:nth-of-type(n) - 부모 안에 있는 A 요소 중에서 n번째 요소 선택

10. A:nth-last-of-type(n) - 부모 안에 있는 A 요소 중에서 끝에서 n번째 요소 선택

5-5 가상 요소

1. ::first-line - 첫 번째 줄을 선택

2. ::first-letter - 줄에서 첫 번째 글자 선택

3. ::before - 특정 요소의 앞에 내용이나 스타일을 추가

4. ::after - 특정 요소의 뒤에 내용이나 스타일을 추가

6. 트랜지션과 애니메이션

6-1 변형 함수

1. translate() - 요소 이동하기
   ✔ transform: translate(tx,ty) - 지정한 크기만큼 x축과 y축으로 이동
   ✔ transform: translate(tx,ty,tz) - 지정한 크기만큼 x축, y축, z축으로 이동
   ✔ transform: translateX(tx) - 지정한 크기만큼 x축으로 이동
   ✔ transform: translateY(ty) - 지정한 크기만큼 y축으로 이동
   ✔ transform: translateZ(tz) - 지정한 크기만큼 z축으로 이동

2. scale() - 요소 확대,축소 하기
   ✔ transform: scale(sx,sy) - 지정한 크기만큼 x축, y축으로 확대,축소
   ✔ transform: scale(sx,sy,sz) - 지정한 크기만큼 x축, y축, z축으로 확대,축소
   ✔ transform: scaleX(sx) - 지정한 크기만큼 x축으로 확대,축소
   ✔ transform: scaleY(sy) - 지정한 크기만큼 y축으로 확대,축소
   ✔ transform: scaleZ(sz) - 지정한 크기만큼 z축으로 확대,축소

3. rotate() - 요소 회전하기
   ✔ transform: rotate(각도) - 지정한 각도만큼 회전
   ✔ transform: rotateX(각도) - x축을 기준으로 지정한 각도만큼 회전
   ✔ transform: rotateY(각도) - y축을 기준으로 지정한 각도만큼 회전
   ✔ transform: rotateZ(각도) - z축을 기준으로 지정한 각도만큼 회전
   ✔ transform: rotate3d(rx,ry,rz,각도) - x축과 y축, z축을 기준으로 지정한 각도만큼 회전

4. skew() - 요소 비틀기
   ✔ transform: skew(ax,ay) - 지정한 각도만큼 x축과 y축으로 비틈
   ✔ transform: skewX(ax) - 지정한 각도만큼 x축으로 비틈
   ✔ transform: skewY(ay) - 지정한 각도만큼 y축으로 비틈

6-2 트랜지션 속성

1. transition-property - 트랜지션의 적용 대상을 지정(기본값=all)

2. transition-duration - 트랜지션의 실행 시간 지정(단위=초, 기본값=0)

3. transition-timing-function - 트랜지션의 실행 형태를 지정

4. transition-delay - 트랜지션의 지연 시간을 지정(단위=초, 기본값=0)

5. transition - 위의 4가지 속성들을 한꺼번에 지정

6-3 애니메이션 속성

1. @keyframes - 애니메이션이 바뀌는 지점 설정

2. animation-delay - 애니메이션의 시작 시간을 지정

3. animation-direction - 애니메이션을 종료한 뒤 처음부터 시작할지, 반대방향으로 진행할지 지정

4. animation-duration - 애니메이션의 실행 시간을 지정(단위=초)

5. animation-iteration-count - 애니메이션의 반복 횟수 지정

6. animation-name - @keyframes로 설정해 놓은 중간 상태를 지정

7. animation-timing-function - 키프레임의 전환 형태를 지정

8. animation - 위의 속성을 한꺼번에 묶어서 지정

7. 반응형 웹과 미디어 쿼리

7-1 미디어 쿼리의 속성

1. width, height - 웹 페이지의 가로 너비 , 세로 높이

2. min-width, min-height - 웹 페이지의 최소 너비, 최소 높이

3. max-width, max-height - 웹 페이지의 최대 너비, 최대 높이

4. device-width, device-height - 단말기의 가로 너비, 세로 높이

5. min-device-width, min-device-height - 단말기의 최소 너비, 최소 높이

6. max-device-width, max-device-height - 단말기의 최대 너비, 최대 높이

7. orientation: portrait - 단말기의 세로 모드

8. orientation: landscape - 단말기의 가로 모드

7-2 플렉스 박스 레이아웃의 속성

1. display - 플렉스 컨테이너를 지정
   (속성값=flex, inline-flex)

2. flext-direction - 플렉스 항목에서 주축과 방향을 지정
   (속성값=row, row-reverse, column, column-reverse)

3. flex-wrap - 컨테이너 너비보다 항목이 많을 경우 줄 바꿈 여부를 지정
   (속성값= nowrap, wrap, wrap-reverse)

4. flex-flow - 배치 방향과 줄 바꿈을 한 번에 지정
   (속성값=felx-direction, flex-wrap)

5. justify-content - 주축에서 플렉스 항목 정렬 방법을 지정
   (속성값=flex-start, flex-end, center, space-between, space-around)

6. align-items - 교차축에서 플렉스 항목 정렬 방법을 지정
   (속성값=flex-start, flex-end, center, baseline, stretch)

7. align-self - 특정 플렉스 항목의 정렬 방법을 지정
   (속성값=flex-start, flex-end, center, baseline, stretch)

8. align-content - 여러 줄일 때 교차축 정렬 방법을 지정'
   (속성값=flex-start, flex-end, center, space-between, space-around, stretch)

9. flex - 플렉스 항목의 너비를 줄이거나 늘림
   (속성값=1개에서 3개까지의 값, auto, initial)

7-3 CSS 그리드 레이아웃의 속성과 함수

1. diplay - 그리드 컨테이너를 지정(속성값=grid, inline-grid)

2. grid-template-columns - 열을 지정(속성값=크깃값)
   grid-template-rows - 행(줄) 높이를 지정(속성값=크깃값)

3. grid-column-gap - 열과 열사이의 간격 지정(속성값=크깃값)
   grid-row-gap - 행과 행사이의 간격 지정(속성값=크깃값)
   grid-gap - 행과 열의 간격을 한꺼번에 지정(속성값=크깃값)

4. grid-column-start - 열 시작의 라인번호 지정(속성값=숫자)
   grid-column-end - 열 마지막의 라인번호 지정(속성값=숫자)
   grid-column - 열 시작과 끝 번호 사이에 슬래시(/)를 넣어 사용(속성값=숫자)

5. grid-row-start - 행 시작의 라인번호 지정(속성값=숫자)
   grid-row-end - 행 마지막의 라인번호 지정(속성값=숫자)
   grid-row - 행 시작과 끝 번호 사이에 슬래시(/)를 넣어 사용(속성값=숫자)

6. grid-area - 템플릿 이름을 지정

7. grid-templates-areas - grid-area를 사용해 템플릿 그리드 만듦

8. minmax() - 최솟값과 최댓값을 지정하는 함수(속성값=크기값, auto)

9. repeat() - 같은 값을 여러번 반복할 때 사용하는 함수(속성값=크기값, auto-fill, auto-fit)

8. The End

HTML과 CSS에서 사용하는 개념들을 정리해 보았다.
이제 JavaScript에 집중해서 공부하고 간단하게 실습을 진행해보자