01 CSS(Cascading Style Sheet)

• HTML 요소들을 꾸미는 방법을 정의하는 규칙
• Cascading(계단식)
  • 스타일 우선 순위(Priority)
  • 스타일 상속(Inheritance)

01-01 스타일의 우선 순위

1. 중요도: 작성자 > 사용자 > 사용자 도구
2. 명시도(Specificity): !important > in-line > id > class > type
3. 코드 순서: 최신순

01-02 CSS 문법 구성

selector (property: value; property2: property ...)

• 선택자(selelctor)와 선언부 (declarations)로 구성
• 각 프로퍼티 사이는 세미콜론(;)으로 구분
• value의 뒤에 기입 시 최우선순위로 스타일 적용

01-02 CSS의 위치

• 외부 스타일(.css) 사용: css파일을 html에 연결 사용. 한 스타일을 여러 html 문서에 적용.
• 내부 스타일: <style>태그에 정의된 스타일 사용
• 인라인 스타일: 각 html 요소의 style 속성에 정의해 사용

02 Selectors(선택자)

02-01 CSS Selector(선택자)

• 문서 내 특정 html 요소 '선택'하는 일을 함.

  • type selector: h1, img
  • class selector: 동일 클래스 이름 가진 모든 요소 선택
  • id selector: 해당 id를 가진 요소 선택
  • universal selector(전체 셀렉터): 모든 요소 선택(*)
  • pseudo-class(가상 클래스 셀렉터): 요소의 특정 상태 또는 해당 요소의 조건에 따른 다른 요소 선택

• Selector list: 콤마(,)를 사용해 여러 선택자 한꺼번에 스타일링

02-02 Combinator(결합자, 조합 선택자)

• 선택자끼리 조합하거나 연산을 통해 세부적 요소를 선택하거나 차별화
  • A B(자손결합): 공백을 사용해 A의 자손인 B 선택
  • A>B(직계자손 결합): A의 직계 자손(차하위) B 선택
  • A+B(직후 형제 결합: A의 바로 다음에 오는 형제 B 선택
  • A-B(형제 결합): A의 뒤에 오는 모든 형제 B 선택

02-03 type, class, id, *

• type selector: html 태그 입력(h1, img p)
• class selector: 마침표(.) 뒤에 클래스명 입력(.frist, .box)
• id selector: 샵(#) 뒤에 id명 입력(#submit, #nav)
• universal selector: 와일드 카드(*) 사용.

02-04 attribute selector

• 태그명[속성명="속성값"]: 태그명 생략 시 해당 attribute를 가진 요소 선택(ex: input[type="text"])

02-05 pseudo-class(가상 클래스) selector

• 콜론(:)으로 정의
• 특정 요소 기준으로 요소 선택
• :hover, :active, :focus, :link, :visited
• :nth-child(n), :first-child, :last-of-type

02-06 pseudo-element

• 특정 선택자에 의해 선택된 요소 기준으로 콘텐츠 생성
  • 이중 콜론(::) 사용(ex: ::link, ::after, ::before)

※ 참고: https://developer.mozilla.org/en-US/docs/Web/CSS/::after - MDN Web Docs

02-07 Emmet

• 여러 html 태그 구조를 입력하는 단축 표현 확장. 본래 Extension이었으나 vscode에 통합됨. (ex: !로 html 골격 생성)

• 예시(Chatgpt 응답)

기능	문법	결과
태그 생성	div	<div></div>
	p	<p></p>
	a	<a></a>
클래스(.)/ID(#) 추가	div.class-name	<div class="class-name"></div>
	div#id-name	<div id="id-name"></div>
	div.container.main	<div class="container main"></div>
자식 요소(>) 추가	div>p	<div><p></p></div>
	ul>li*5	<ul><li></li><li></li><li></li><li></li><li></li></ul>
형제 요소(+) 추가	div+p	<div></div><p></p>
상위 요소(^) 이동	div>p^h1	<div><p></p></div><h1></h1>
	div>ul>li*3^p	<div><ul><li></li><li></li><li></li></ul></div><p></p>
반복(*)	ul>li*3	<ul><li></li><li></li><li></li></ul>
	ul>li*3>a{Item $}	<ul><li><a href="#">Item 1</a></li><li><a href="#">Item 2</a></li><li><a href="#">Item 3</a></li></ul>
넘버링($)	ul>li*3>a{Item $}	<ul><li><a href="#">Item 1</a></li><li><a href="#">Item 2</a></li><li><a href="#">Item 3</a></li></ul>
텍스트 추가({})	p{Hello World}	<p>Hello World</p>
	h1{Welcome to Emmet}	<h1>Welcome to Emmet</h1>
속성 추가([])	input[type=text]	<input type="text">
	a[href="https://example.com"]	<a href="https://example.com"></a>
	img[src="image.jpg" alt="description"]	<img src="image.jpg" alt="description">
CSS 속성 단축	m10	margin: 10px;
	p10-20	padding: 10px 20px;
	w100	width: 100px;
기타 속성 단축	bgc	background-color: ;
	bd	border: ;
	fs16	font-size: 16px;
여러 속성 추가	m10 p20 w100	margin: 10px; padding: 20px; width: 100px;
그룹화	div>(header>h1{Title}+nav>ul>li*3>a)+section>p	<div><header><h1>Title</h1></header><nav><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul></nav><section><p></p></section></div>

03 CSS Declaration(선언부)

03-01 Type(타입)

• 텍스트, 숫자, 색상, url()

※ 참고: CSS Data types - MDN Web Docs

03-02 Unit(단위)

• 1차원 크기(distant)를 결정하는 것.

• 단위 테이블(perplexity 답변)

구분	단위	설명
고정형	px	픽셀, 화면의 실제 픽셀 단위
	pt	포인트, 1px = 0.75pt
	cm	센티미터
	mm	밀리미터
	in	인치
반응형	%	부모 요소를 기준으로 한 백분율
	em	현재 요소의 폰트 크기를 기준으로 한 상대 단위
	rem	루트 요소(html)의 폰트 크기를 기준으로 한 상대 단위
	vw	뷰포트 너비의 1%
	vh	뷰포트 높이의 1%
	vmin	뷰포트의 작은 치수의 1%
	vmax	뷰포트의 큰 치수의 1%
	lh	현재 요소의 line-height 값을 기준으로 한 상대 단위
	rlh	루트 요소의 line-height 값을 기준으로 한 상대 단위

03-03 텍스트 표현

03-03-01 글꼴 관련 스타일

• 글꼴 지정

body { font-family: 돋움, 굴림 ,"맑은 고딕"}
/* 앞선 글꼴 부재시 다음 글꼴 사용*/

속성	설명	예시
font-family	글꼴 지정	font-family: "Arial", sans-serif;
font-size	글꼴 크기 지정	font-size: 16px; font-size: 1.5em;
font-style	글꼴 스타일 지정	font-style: italic;
font-weight	글꼴 두께 지정	font-weight: bold; font-weight: 600;

03-03-02 웹 폰트와 아이콘 폰트

• 웹 폰트: 폰트를 서버에 올려 사용자가 사이트 접속 시 문서와 함께 폰트도 내려받는 방식
• 아이콘 폰트: 아이콘을 글자 형태로 사용하는 방식

  <!-- <link> 방식으로 구글 웹 폰트 가져오기 -->

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

<style>
	  /* @import 방식으로 구글 웹 폰트 가져오기 */

	@import url('https://fonts.googleapis.com/css2?family=Diphylleia&display=swap');
    body {
		font-family: "Diphylleia", serif;
    h1 {
		font-family: 'Roboto', sans-serif;
    }
}
</style>

※ 참고
웹 폰트: 구글 폰트
아이콘 폰트: 폰트 어썸, 폰트 어썸 CDN

03-03-03 텍스트 관련 스타일

• ChatGPT 응답

속성	설명	예시
color	텍스트 색상 지정	color: red; color: #ff5733; color: rgb(255, 0, 0);
text-align	텍스트 정렬 방식 설정	text-align: center; text-align: justify;
line-height	줄 간격 설정	line-height: 1.5; line-height: 20px;
text-decoration	텍스트 장식 설정 (밑줄, 취소선 등)	text-decoration: underline; text-decoration: line-through;
text-shadow	텍스트 그림자 효과 설정	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
text-transform	텍스트 대소문자 변환 설정	text-transform: uppercase; text-transform: capitalize;
letter-spacing	글자 간격 설정	letter-spacing: 2px; letter-spacing: 0.1em;
word-spacing	단어 간격 설정	word-spacing: 4px; word-spacing: 0.5em;

참고 - [공유] Vertical-align 파헤치기! – 1부 - HIVELAB
(vertical-align: 수직(세로) 정렬)

03-03-04 목록 스타일

• list-style-type:불릿 모양과 번호 스타일 지정 속성
• ChatGPT 응답

값	설명	예시
disc	기본 원 모양의 채워진 원형 목록 아이템 기호	● 아이템 1 ● 아이템 2
circle	비어 있는 원 모양의 목록 아이템 기호	○ 아이템 1 ○ 아이템 2
square	네모 모양의 목록 아이템 기호	■ 아이템 1 ■ 아이템 2
decimal	숫자 목록 (1, 2, 3, ...)	1. 아이템 1 2. 아이템 2
decimal-leading-zero	01, 02, 03과 같이 0을 포함한 숫자 목록	01. 아이템 1 02. 아이템 2
lower-roman	소문자 로마 숫자 목록 (i, ii, iii, ...)	i. 아이템 1 ii. 아이템 2
upper-roman	대문자 로마 숫자 목록 (I, II, III, ...)	I. 아이템 1 II. 아이템 2
lower-alpha, lower-latin	소문자 알파벳 목록 (a, b, c, ...)	a. 아이템 1 b. 아이템 2
upper-alpha, upper-latin	대문자 알파벳 목록 (A, B, C, ...)	A. 아이템 1 B. 아이템 2
none	목록 아이템 기호를 표시하지 않음	아이템 1 아이템 2

• list-style-image: 이미지로 불릿 사용
• list-style-position: 목록 들여쓰기(inside), 내어쓰기(outside)
• list-style: 위의 내용 한번에 정의

03-04 박스모델

• 모든 html 요소는 박스로 되어 있으며 각각 패딩과 마진을 갖고 레이아웃을 차지한다는 css의 원리

  • Margin: 박스 바깥 여백
  • Border: 외곽선의 굵기
  • Padding: 박스 안쪽 여백

• box-sizing

  • box-sizing: border-box: witdh의 기준을 border 굵기 포함해서 계산
  • box-sizing: content-box: witdh의 기준을 content에 한전

• box-shadow: <수평 거리> <수직 거리> <흐림 정도> <번짐 정도> <색상> inset

03-04-01 테두리 스타일

• Border의 굵기 만큼 Box의 영역 차지

div {
	border: 10px solid blue;
}

• border-width, border-style, border-color의 형태로 분리 작성 가능

• border-style: 테두리 스타일 설정

  • 아래 테이블들은 ChatGPT 응답

속성값	설명	예시
none	테두리를 표시하지 않음.	없음
solid	실선 테두리.	──────────────────────────────
dashed	점선 테두리.	─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
dotted	점점이 테두리.	⋯ ⋯ ⋯ ⋯ ⋯ ⋯ ⋯ ⋯ ⋯ ⋯ ⋯
double	두 줄의 실선 테두리. 두 번째 줄은 첫 번째 줄과 간격을 둠.	══════ ══════
groove	그루브(홈) 테두리. 3D 효과를 주며, 홈이 파인 듯한 효과가 나타남.	(입체 효과로 표시됨)
ridge	리지(능선) 테두리. 그루브와 비슷하지만, 반대로 돌출된 효과를 가짐.	(입체 효과로 표시됨)
inset	인셋 테두리. 안으로 들어간 듯한 3D 효과를 제공함.	(입체 효과로 표시됨)
outset	아웃셋 테두리. 밖으로 돌출된 듯한 3D 효과를 제공함.	(입체 효과로 표시됨)

• border-width: 테두리 두께 설정

속성값	설명	예시
thin	얇은 테두리.	border-width: thin;
medium	중간 두께의 테두리 (기본값).	border-width: medium;
thick	두꺼운 테두리.	border-width: thick;
<length>	구체적인 길이로 테두리 두께를 지정. 예: px, em, rem 등 다양한 단위 사용 가능.	border-width: 2px;
<percentage>	부모 요소에 대한 비율로 테두리 두께를 지정.	border-width: 5%;

• border-color: 테두리 색상 설정

속성값	설명	예시
color	테두리 색상 지정	border-color: red;
transparent	테두리 색상 투명 설정	border-color: transparent;
inherit	부모 요소의 border-color 상속	border-color: inherit;
initial	기본값으로 설정	border-color: initial;
rgb()	RGB 색상 값으로 테두리 색상 설정	border-color: rgb(255, 0, 0);
rgba()	RGBA 색상 값으로 테두리 색상 설정	border-color: rgba(255, 0, 0, 0.5);
hsl()	HSL 색상 값으로 테두리 색상 설정	border-color: hsl(0, 100%, 50%);
hsla()	HSLA 색상 값으로 테두리 색상 설정	border-color: hsla(0, 100%, 50%, 0.5);

• border-radius: 모서리 곡률 설정

속성값	설명	예시
<length>	각 모서리의 반지름을 지정하는 길이 값. px, em, % 등 사용 가능	border-radius: 10px;
<percentage>	각 모서리의 반지름을 지정하는 백분율 값. 요소의 크기에 비례	border-radius: 50%;
all	네 개의 모서리에 동일한 반지름 값 설정	border-radius: 20px;
<length> <length>	가로 및 세로 반지름을 별도로 지정	border-radius: 10px 20px;
<length> <length> <length> <length>	네 모서리 각각에 다른 반지름 값 지정	border-radius: 10px 20px 30px 40px;
inherit	부모 요소의 border-radius 값 상속	border-radius: inherit;
initial	기본값 설정	border-radius: initial;

03-04-02 Margin, Padding

div {
    /* 마진 전체 */
    margin: 10px;
    /* 상하 좌우 */
    margin: 10px 20px;
    /* 상우하좌(시계방향) */
    margin: 10px 20px 30px 40px;
    /* 패딩 전체 */
    padding: 20px;
    /* 상하 좌우 */
    padding: 10px 20px;
    /* 상우하좌(시계방향) */
    padding: 10px 20px 30px 40px;
}

• margin-top, padding-bottom의 형태로도 작성 가능

• 마진 상쇄, 마진 겹침(Margin Collapse)

  • html이 문서 도구였던 시절의 유산
  • 붙어 있는 두 블록 요소의 위 아래 마진이 겹치는 경우, 더 큰 쪽의 마진으로 통합됨

※ 참고: CSS 마진 상쇄(Margin-collapsing) 원리 완벽 이해
- 출처 kimaramy velog

03-04-03 layout

• Block & In-line level: css의 display 속성으로 변경 가능

  • block, inline, inline-block, none

• float & z-index

  • float: 요소를 어디에 띄울 것인가를 결정하는 속성
    • left, right, none
    • float 처리된 요소는 위치값을 갖지 않음
    • flex의 등장으로 잘 안 쓰게 됨.
  • clear: 이후부터 float 속성 해제
    • left, right, both
  • z-index: 요소가 2차원 캔버스에 겹치는 경우 우선순위를 정하는 속성
    • 미설정 시 html 상에서 나중에 나오는 요소가 전에 나온 요소를 덮음
    • z-index가 높은 속성이 위로 올라감.

• flexbox: 1차원 레이아웃을 다루기 위한 속성.

• 컨테이너 속성(perplexity 답변)

속성	설명	값의 설명
display: flex;	요소를 Flex 컨테이너로 설정하여 자식 요소들을 Flex 아이템으로 만듦	flex: 블록 레벨 요소로 컨테이너 설정 inline-flex: 인라인 요소로 컨테이너 설정
flex-grow	Flex 아이템의 증가 비율을 설정, 컨테이너에 여분의 공간이 있을 때 아이템의 크기를 얼마나 늘릴지 결정	0: 기본값, 늘어나지 않음 양의 정수: 설정된 비율에 따라 늘어남
flex-shrink	Flex 아이템의 축소 비율을 설정, 컨테이너가 아이템을 수용할 수 없을 때 아이템의 크기를 얼마나 줄일지 결정	1: 기본값, 필요시 축소됨 0: 축소되지 않음 양의 정수: 설정된 비율에 따라 축소됨
flex-basis	Flex 아이템의 기본 크기를 설정, 아이템의 크기가 조정되기 전 초기 크기를 지정	auto: 기본값, 아이템의 내용에 따라 크기 결정 크기 값: px, %, em 등으로 지정 content: 내용에 맞춰 크기 조정
flex	flex-grow, flex-shrink, flex-basis를 한 번에 설정하는 단축 속성	initial: 0 1 auto와 동일 auto: 1 1 auto와 동일 none: 0 0 auto와 동일 양의 정수: flex-grow 값 지정 (예: flex: 1;) 길이 또는 퍼센트: flex-basis 값 지정 (예: flex: 10em; flex: 30%;) 두 개의 값: flex-grow | flex-basis 또는 flex-grow | flex-shrink 세 개의 값: flex-grow | flex-shrink | flex-basis
flex-direction	Flex 아이템이 배치되는 방향을 지정	row: 기본값, 가로로 배치 row-reverse: 오른쪽에서 왼쪽으로 배치 column: 세로로 배치 column-reverse: 아래에서 위로 배치
flex-wrap	Flex 아이템들이 한 줄에 배치될 수 없을 때, 어떻게 처리할지 결정	nowrap: 한 줄에 모두 배치 wrap: 줄 바꿈 허용 wrap-reverse: 줄 바꿈을 반대 방향으로 처리
flex-flow	flex-direction과 flex-wrap을 한 번에 설정하는 축약형	row wrap: 가로로 배치하고, 넘치면 줄 바꿈 row-reverse wrap: 반대로 배치하고 줄 바꿈 nowrap: 줄 바꿈 안 함
justify-content	아이템들이 주축(main axis) 방향으로 어떻게 정렬될지를 설정	flex-start: 시작 부분에 배치 flex-end: 끝 부분에 배치 center: 중앙에 배치 space-between: 아이템 간격을 균등하게 space-around: 아이템 간격을 균등하게, 양 끝에도 간격 추가 space-evenly: 모든 간격을 동일하게
align-items	아이템들이 교차축 방향으로 어떻게 정렬될지를 설정	flex-start: 교차축의 시작에 정렬 flex-end: 교차축의 끝에 정렬 center: 교차축의 중앙에 정렬 stretch: 늘려서 채움 baseline: 텍스트 기준선 맞춤
align-content	여러 줄이 있을 때 교차축 방향으로 전체 줄을 어떻게 정렬할지 결정	flex-start: 시작 부분에 줄 정렬 flex-end: 끝 부분에 줄 정렬 center: 중앙에 줄 정렬 stretch: 줄들 간격을 늘림 space-between: 줄 간격을 균등하게 space-around: 줄 간격을 균등하게, 양 끝에 간격 추가
align-self	개별 Flex 아이템에 대해 교차축 방향으로의 정렬을 설정, align-items를 개별 아이템에 대해 재정의	auto: 기본값, 부모의 align-items 값을 상속 flex-start: 교차축의 시작에 정렬 flex-end: 교차축의 끝에 정렬 center: 교차축의 중앙에 정렬 baseline: 텍스트 기준선에 정렬 stretch: 교차축을 채우도록 늘림

• 아이템 속성
  • order: 디폴트 0, HTML 상의 순서를 임의로 덮어씌울 수 있음
  • flow-grow: 늘어날 때 늘어나는 공간을 차지하는 비율
  • flow-shrink: 줄어들 때 줄어나는 공간만큼 스스로를 줄일 비율
  • align-self: 정렬 정의

※ 참고
이번에야말로 CSS Flex를 익혀보자
- studiomeal(1분코딩)
flex box 연습하는 개구리 게임 - Flexbox Froggy

03-04-04 position

• left, right, top, bottom: 입력 값만큼 멀어짐
• position: 배치 방법 지정
  • static: 기본값(브라우저가 배치하는 방식, inline, block을 따름
  • relative: 본연의 위치에서 top, left 적용
  • absolute: 본연의 위치를 벗어나서 문서 내에 절대적 위치
  • fixed: 본연의 위치를 벗어나 viewport에 고정
  • sticky: 본연의 위치에서 viewport에 고정. 스크롤 따라 이동.

03-05 배경 꾸미기

03-05-01 background

• 배경 속성 설정(ChatGPT 응답)

속성	설명	속성값 예시
background-color	배경 색상 지정	red, #ff0000, rgb(255, 0, 0), rgba(255, 0, 0, 0.5)
background-image	배경 이미지 설정	url("image.jpg"), url('https://example.com/bg.jpg')
background-position	배경 이미지 위치 지정	top left, center center, 50% 50%, top 20px left 10px
background-size	배경 이미지 크기 지정	cover, contain, 100px 200px, 50% 50%
background-repeat	배경 이미지 반복 설정	repeat, no-repeat, repeat-x, repeat-y
background-attachment	배경 이미지의 스크롤 동작 설정	scroll, fixed, local
background-origin	배경 이미지의 위치 기준 설정	border-box, padding-box, content-box
background-clip	배경 이미지가 어디까지 적용될지 설정	border-box, padding-box, content-box
background	여러 배경 속성을 한 번에 설정	background-color, background-image, background-position, background-size 등 결합하여 설정 가능

03-05-02 gradient

• ChatGPT 응답

속성	설명	속성값 예시
background-image	그라데이션을 배경 이미지로 설정	linear-gradient(to right, red, blue)
linear-gradient	선형 그라데이션 설정	linear-gradient(45deg, #ff7f50, #ff6347)
radial-gradient	방사형 그라데이션 설정	radial-gradient(circle, red, yellow)
repeating-linear-gradient	반복되는 선형 그라데이션 설정	repeating-linear-gradient(to right, red 0%, blue 50%)
repeating-radial-gradient	반복되는 방사형 그라데이션 설정	repeating-radial-gradient(circle, red, yellow)

03-05-03 shadow

box-shadow: 10px 10px 20px -12px gray;
text-shadow: 10px 10px 20px -12px gray;
/* h-offset, v-offset, blur, spread, color를 의미 */

03-05-04 Visibilty, Overflow

• visibility
  • visibility: visible: 보임
  • visibility: hidden: 안 보이지만 자리 차지
• Overflow
  • overflow: hidden;: 넘칠 시 자르고 감춤
  • overflow: scroll;: 넘칠 시 스크롤 바
  • overflow: visible;: 넘칠 시 그냥 보여줌
  • overflow: auto;: 넘칠 시 알아서 스크롤 바 생성

03-06 반응형 웹과 미디어 쿼리

03-06-01 반응형 웹

• 웹 요소를 화면 크기에 맞게 재배치하고 표시 방법을 바꾸어 사이트 구현.
• viewport: 화면에서 실제 내용이 표시되는 영역(테이블은 ChatGPT 응답)

속성	설명	속성값	기본값
width	뷰포트 너비 설정	device-width, initial-scale, %, px, em 등	auto
height	뷰포트 높이 설정	device-height, %, px, em 등	auto
initial-scale	페이지 초기 로딩 시 줌 배율 설정	number (예: 1, 0.5, 2 등)	1
maximum-scale	페이지 확대 최대 비율 설정	number (예: 3), none (확대 불가)	none (확대 제한 없음)
minimum-scale	페이지 축소 최소 비율 설정	number (예: 0.5), none (축소 불가)	none (축소 제한 없음)
user-scalable	페이지 확대/축소 가능 여부 설정	yes, no	yes
viewport-fit	iPhone X 이상에서 안전 영역 포함 여부 설정	auto, contain, cover	auto
orientation	페이지 방향 설정	portrait, landscape	auto
device-width	장치 화면 너비를 뷰포트 너비로 설정	device-width	auto
device-height	장치 화면 높이를 뷰포트 높이로 설정	device-height	auto

• object-fit: 콘텐츠의 크기 조정(ChatGPT 응답)

속성값	설명
fill	요소의 콘텐츠를 상자 크기에 맞게 늘이거나 줄임. 가로와 세로 비율이 깨질 수 있음.
contain	요소가 상자 안에 완전히 맞도록 크기를 조정. 비율을 유지하며 크기가 맞지 않는 부분은 빈 공간으로 남음.
cover	요소가 상자의 크기를 완전히 덮도록 크기를 조정. 비율을 유지하면서 상자 크기를 덮으나 일부가 잘림.
none	요소의 크기를 조정하지 않음. 원래 크기를 그대로 유지.
scale-down	none과 contain 중 하나와 비슷한 방식으로 동작. 콘텐츠의 크기를 none으로 설정하거나 contain처럼 축소됨.

03-06-02 미디어쿼리

• pc, tablet, smartphone 등 다양한 기기와 화면에 맞춰 레이아웃 정의
• 각각의 미디어에서 어떻게 보일지를 조건과 CSS Rule을 사용해 정의
  • PC: 960px 이상
  • Tablet: 768px 이상
  • Mobile: 767px 이하
    • orientation: landscape: 가로 모드
    • orientation: portrait: 세로 모드
• 미디어 쿼리 기본 구성: @media [only | not] 미디어 유형 [and 조건] * [and 조건]
• @media 속성의 미디어 유형(ChatGPT 응답)

미디어 유형	설명
all	모든 장치에 대해 적용. 기본값으로 사용되며, 모든 미디어 유형을 처리합니다.
print	인쇄 미디어에 대해 적용. 페이지를 출력할 때 스타일을 설정하는 데 사용됩니다.
screen	화면을 출력하는 장치에 대해 적용. 대부분의 컴퓨터와 모바일 장치에서 사용됩니다.
tv	텔레비전 장치에 대해 적용. 텔레비전 화면 크기와 해상도에 맞는 스타일을 설정할 수 있습니다.
aural	음성 합성 장치에 대해 적용. 스크린 리더 및 음성 합성 장치에서 사용됩니다.
speech	음성 출력 장치에 대해 적용. aural과 비슷하게, 음성 합성 장치 및 스크린 리더에서 사용됩니다.
braille	점자 디스플레이 장치에 대해 적용. 점자 기반 장치에서 스타일을 설정하는 데 사용됩니다.
handheld	휴대용 장치에 대해 적용. PDA, 휴대전화, 작은 화면을 가진 장치에서 사용됩니다.
tty	텍스트 기반 터미널 장치에 대해 적용. 텍스트만 표시되는 터미널에서 사용됩니다.
embossed	점자 장치에 대해 적용. 점자 터미널을 사용할 때 스타일을 지정하는 데 사용됩니다.
projection	프로젝터와 같은 장치에 대해 적용. 화면이 크게 출력되는 장치에서 사용됩니다.
computer	일반적인 컴퓨터 장치에 대해 적용. 데스크톱, 랩탑 등에서 사용됩니다.

03-07 CSS Grid Layout

• 가로와 세로 방향 모두 사용하여 배치하는 2차원 레이아웃
• display의 속성값

속성값	설명
grid	블록 레벨 그리드 컨테이너 생성
inline-grid	인라인 레빌 그리드 컨테이너 생성

• 열과 행 지정: 각 개수만큼 입력

grid-template-columns: 10px 20px 30px;
grid-template-rows: 10px 20px 30px 40px;
grid-auto-rows: 10px;	/* 동적으로 지정 크기의 행 추가*/

• 크기 지정법
  • fr: 상대 크기 지정 단위. 값에 따른 비율(가용 공간 전체가 100%)로 크기 지정
  • repeat(num, size): num개의 size크기 생성
  • minmax(min_num, max_num): 값의 안에서 크기 변경
  • repeat(auto-fit, num): 가용 크기 다 써서 생성
  • repeat(auto-fill, num): 지정 크기만큼 써서 생성
  • gap: 행, 열 간격 지정

.container {
	width: 100px;
	display: grid;
 	grid-template-columns: 2fr 1fr 1fr;	/* 1열 2배 크기, 2, 3열 1배 크기 */
    grid-template-columns: repeat(3, 1fr);	/* 같은 크기 열 3개 */
    grid-template-rows: minmax(100px, auto);	/* 높이 최소 100px 최대 auto */
    gap: 10px 20px;	/* 행 간격 10px, 열 간격 20px*/
}

.container {
	grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
	grid-template-columns: repeat(auto-fill, minmax(10px, 1fr));
}

• grid line & template: 그리드 배치 속성(chatGPT 응답)

속성명	설명	예시 코드
grid-template-rows	그리드 컨테이너의 행 크기 설정	grid-template-rows: 100px 200px 100px;
grid-template-columns	그리드 컨테이너의 열 크기 설정	grid-template-columns: 1fr 2fr;
grid-template-areas	그리드 영역 이름을 설정	grid-template-areas: "header header" "main sidebar" "footer footer";
grid-row-start	그리드 항목의 시작 행 위치 지정	grid-row-start: 1;
grid-row-end	그리드 항목의 끝 행 위치 지정	grid-row-end: 3;
grid-column-start	그리드 항목의 시작 열 위치 지정	grid-column-start: 2;
grid-column-end	그리드 항목의 끝 열 위치 지정	grid-column-end: 4;
grid-row	그리드 항목의 행 범위 지정	grid-row: 1 / 3;
grid-column	그리드 항목의 열 범위 지정	grid-column: 2 / 4;
grid-area	그리드 항목의 영역 지정 (행, 열, 행 시작, 열 끝)	grid-area: 1 / 2 / 3 / 4;

03-08 CSS 함수

• :root: 문서의 최상위 요소(html 태그) 선택하는 가상 클래스. 변수 사용 위해 사용.

• CSS 변수: 값을 이름 붙여 사용하는 것. CSS는 변수 앞에 하이픈(-) 2개를 붙임(속성 이음과 구별 위함).

  • var(): 변수 호출 시 사용

/* 예시 */
:root {
	--bg-color: #222;
}
body {
	background-color: var(--bg-color);
}

• 자주 사용하는 함수(ChatGPT 응답)

함수명	설명	예시 코드
var()	CSS 변수의 값을 가져오거나 설정	color: var(--main-color, blue);
calc()	수학적 계산을 통해 값을 동적으로 계산	width: calc(100% - 20px);
url()	외부 리소스 (이미지, 폰트 등) 경로 지정	background-image: url('image.jpg');
rgb()	RGB 색상 모델을 사용하여 색상 지정	color: rgb(255, 0, 0);
rgba()	RGBA 색상 모델을 사용하여 색상과 투명도 지정	color: rgba(255, 0, 0, 0.5);
hsl()	HSL 색상 모델을 사용하여 색상 지정	color: hsl(0, 100%, 50%);
hsla()	HSLA 색상 모델을 사용하여 색상과 투명도 지정	color: hsla(0, 100%, 50%, 0.5);
calc()	수학적 계산을 통해 스타일 값 계산	font-size: calc(10px + 2vw);
min()	두 값 중 최소값을 반환	width: min(100%, 500px);
max()	두 값 중 최대값을 반환	width: max(50%, 200px);
clamp()	최소값, 권장값, 최대값 중 권장값을 기반으로 계산	width: clamp(200px, 50%, 600px);
rotate()	요소를 회전	transform: rotate(45deg);
translate()	요소를 이동	transform: translate(50px, 100px);
scale()	요소의 크기를 비율에 맞춰 조정	transform: scale(1.5);
matrix()	2D 변환 행렬을 사용하여 복합 변환 적용	transform: matrix(1, 0, 0, 1, 0, 0);
perspective()	3D 변환에 깊이 효과를 추가	perspective: 500px;
rotateX()	요소를 X축을 기준으로 회전	transform: rotateX(45deg);
rotateY()	요소를 Y축을 기준으로 회전	transform: rotateY(45deg);
translateX()	요소를 X축 방향으로 이동	transform: translateX(100px);
translateY()	요소를 Y축 방향으로 이동	transform: translateY(100px);

• filter 함수(Chatgpt 응답)

함수명	설명	예시 코드
blur()	요소에 흐림(블러) 효과를 적용	filter: blur(5px);
brightness()	요소의 밝기 조정	filter: brightness(150%);
contrast()	요소의 대비를 조정	filter: contrast(200%);
drop-shadow()	요소에 그림자 효과를 추가	filter: drop-shadow(10px 10px 5px rgba(0, 0, 0, 0.5));
grayscale()	요소를 흑백으로 변환	filter: grayscale(100%);
hue-rotate()	요소의 색조를 회전시킨다	filter: hue-rotate(90deg);
invert()	요소의 색상을 반전시킨다	filter: invert(100%);
opacity()	요소의 불투명도(투명도)를 설정	filter: opacity(50%);
saturate()	요소의 채도를 조정	filter: saturate(200%);
sepia()	요소를 세피아 톤으로 변환	filter: sepia(100%);
url()	외부 필터를 URL로 불러와 적용	filter: url('filter.svg');

03-09 transition & animation

03-09-01 transition

• 스타일 속성이 바뀌는 것
• 트랜지션 속성(ChatGPT 응답)

속성명	설명	예시 코드	기본값
transition-property	적용할 CSS 속성명. 여러 속성을 콤마로 구분하여 지정 가능.	transition-property: background-color, transform;	all
transition-duration	애니메이션 효과의 지속 시간.	transition-duration: 0.5s;	0s
transition-timing-function	애니메이션의 속도 변화 곡선. (선형, 점프 등)	transition-timing-function: ease-in-out;	ease
transition-delay	애니메이션 효과가 시작되기 전 대기 시간.	transition-delay: 0.2s;	0s
transition	트랜지션 관련 속성 모두 지정.	transition: all 0.5s ease 0s;	all 0s ease 0s

• transform 함수(Chatgpt 응답)

함수명	설명	예시 코드	파라미터
rotate()	요소를 2D 평면에서 회전시킴	transform: rotate(45deg);	각도
scale()	요소의 크기를 비율에 맞춰 조정	transform: scale(1.5);	배율
skew()	요소를 기울여 2D 왜곡을 시킴	transform: skew(20deg, 10deg);	(x, y 각도
perspective()	3D 변환에 깊이 효과를 추가	transform: perspective(500px);	깊이 값
matrix()	2D 변환 행렬을 사용하여 복합 변환을 적용	transform: matrix(1, 0, 0, 1, 100, 50);	a, b, c, d, e, f
rotate3d()	3D 공간에서 X, Y, Z축을 기준으로 회전	transform: rotate3d(1, 1, 0, 45deg);	x, y, z, 각도

※ 참고: [CSS] Transition - cruiseweb 블로그

03-09-02 animation

• aniamation 속성(ChatGPT 응답)

속성명	설명	예시 코드	기본값
@keyframes	애니메이션의 변경 지점과 각 지점에서의 스타일을 정의.	@keyframes slideIn { 0% { transform: translateX(-100%); } 100% { transform: translateX(0); } }	없음
animation-name	애니메이션 이름을 지정. @keyframes에서 정의한 애니메이션 이름을 사용.	animation-name: slideIn;	none
animation-duration	애니메이션의 지속 시간.	animation-duration: 2s;	0s
animation-timing-function	애니메이션의 속도 변화 곡선. (선형, 점프 등)	animation-timing-function: ease-in-out;	ease
animation-delay	애니메이션 시작 전 지연 시간.	animation-delay: 1s;	0s
animation-iteration-count	애니메이션 반복 횟수. 숫자 또는 infinite로 지정 가능.	animation-iteration-count: infinite;	1
animation-direction	애니메이션의 진행 방향. (normal, reverse, alternate, alternate-reverse)	animation-direction: alternate;	normal
animation-fill-mode	애니메이션이 끝난 후 요소에 적용될 스타일을 지정.	animation-fill-mode: forwards;	none
animation-play-state	애니메이션의 재생 상태 (running, paused)	animation-play-state: paused;	running
animation	animation 관련 속성들을 모두 지정.	animation: slideIn 2s ease-in-out 1s infinite alternate forwards;	none 0s ease 0s

03-10 CSS Reset

• css를 초기화하여 브라우저 기본값 제거(ChatGPT 응답)

1. Eric Meyer’s CSS Reset: 가장 널리 사용되는 초기화 코드 중 하나

/* http://meyerweb.com/eric/tools/css/reset/ */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

2.Normalize.css: 브라우저 기본 스타일을 완전히 제거하는 대신 일관된 기본값을 설정하는 방식

/* https://necolas.github.io/normalize.css/ */
html {
    line-height: 1.15; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
}
body {
    margin: 0;
}
main {
    display: block;
}
h1 {
    font-size: 2em;
    margin: 0.67em 0;
}
hr {
    box-sizing: content-box; /* 1 */
    height: 0; /* 1 */
    overflow: visible; /* 2 */
}
pre {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
}
a {
    background-color: transparent;
}
abbr[title] {
    border-bottom: none; /* 1 */
    text-decoration: underline; /* 2 */
    text-decoration: underline dotted; /* 2 */
}
b,
strong {
    font-weight: bolder;
}
code,
kbd,
samp {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
}
small {
    font-size: 80%;
}
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
sub {
    bottom: -0.25em;
}
sup {
    top: -0.5em;
}
img {
    border-style: none;
}
button,
input,
optgroup,
select,
textarea {
    font-family: inherit; /* 1 */
    font-size: 100%; /* 1 */
    line-height: 1.15; /* 1 */
    margin: 0; /* 2 */
}
button,
input { /* 1 */
    overflow: visible;
}
button,
select { /* 1 */
    text-transform: none;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}
button:-moz-focus,
[type="button"]:-moz-focus,
[type="reset"]:-moz-focus,
[type="submit"]:-moz-focus {
    outline: 1px dotted ButtonText;
}
fieldset {
    padding: 0.35em 0.75em 0.625em;
}
legend {
    box-sizing: border-box; /* 1 */
    color: inherit; /* 2 */
    display: table; /* 1 */
    max-width: 100%; /* 1 */
    padding: 0; /* 3 */
    white-space: normal; /* 1 */
}
progress {
    vertical-align: baseline;
}
textarea {
    overflow: auto;
}
[type="checkbox"],
[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}
[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    outline-offset: -2px; /* 2 */
}
[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}
::-webkit-file-upload-button {
    -webkit-appearance: button; /* 1 */
    font: inherit; /* 2 */
}
details {
    display: block;
}
summary {
    display: list-item;
}
template {
    display: none;
}
[hidden] {
    display: none;
}

3. Simple CSS Reset: 필요 최소한의 초기화만 사용

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body {
    height: 100%;
}
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}
input, button, textarea, select {
    font: inherit;
}

03-11 CSS 전처리기

• CSS의 확장 문법을 사용하여 더욱 간편하고 강력한 스타일링을 할 수 있는 도구
• 브라우저가 자체적으로 해석할 수 없으나 컴파일을 통해 css로 변환
• Sass, SCSS, Less

※ 참조: 아이콘 프리웨어 사이트 - feathericons

출처: 한국경제신문 K-Digital Training - toss bank
참고 서적:
고경희 지음, Do it! HTML+CSS+자바스크립트 웹 표준의 정석, 이지스퍼블리싱, 2024년