css 총정리 1

팀장님이 공유해주신 웹에 가서 읽고 정리해봄,,, 강의가 아니고 글이라 좀 잘 안 읽히긴 했다

 

 

 

html - 요소 (element)

<p>hello</p> (시작태그, 콘텐츠, 닫는 태그로 구성)

 

html - 속성 (attribute)

<img src='html.png'> (속성명 = 속성값)

 

seo - 검색 엔진 최적화

seo 같은 마케팅 도구를 사용해 검색엔진이 본인의 웹사이트를 검색하기 알맞은 구조로 웹사이트 조정

 

크롤링

로봇이라는 프로그램을 이용해 매일 전세계의 웹사이트 정보를 수집

검색엔진의 크롤러가 수행

 

인덱싱

검색 사이트 이용자가 검색할 만한 키워드를 미리 예상해 검색 키워드에 대응하는 인덱스(색인)을 만들어둠

검색엔진의 인덱서가 수행

 

시맨틱 요소

검색 엔진은 html 코드만으로 의미를 알 수 있어야 하는데

이때 시맨틱 요소를 해석함

 

시맨틱 태그

브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할

 

시맨틱 웹

웹에 존재하는 수많은 웹페이지들에 메타데이터를 부여하여, 기존의 잡다한 데이터 집합이었던 웹페이지를

의미와 관련성을 가지는 거대한 데이터베이스로 구축하고자 하는 발상

 

추가된 시맨틱 태그

header - 헤더

nav - 내비게이션

aside - 사이드에 위치하는 공간

section - 본문의 여러 내용 (article) 포함하는 공간

article - 본문의 주내용이 들어가는 공간

footer - 푸터

---

제목 태그 

h1 - h6

 

글자 형태 태그

b - 볼드체 (의미론적 중요성의 의미 x)

strong - 볼드체 (의미론적 중요성의 의미 가짐)

 

i - 이탤릭체 (의미론적 중요성의 의미 x)

em - 이탤릭체 (의미로적 중요성의 의미 가짐)

 

small - small text

 

mark - 형광펜

 

del - 텍스트 중간 짝대기

 

ins - 밑줄

 

sub / sup

아래에 쓰인, 위에 쓰인 text

 

본문 태그

 

p - 단락 태그

 

br - 개행

 

pre - 형식화된 text 지정, 작성된 그대로 브라우저에 표시

 

hr - 수평줄 삽입 

 

q - 인용부호

 

blockquote - 긴 인용문

 

---

하이퍼링크

 

1. href 어튜리뷰트

이동하고자 하는 파일의 위치(경로)를 값으로 받음

 

2. 디렉터리

파일과 다른 디렉터리를 갖는 파일 시스템 내의 존재물로서 폴더라고도 불리움

 

2-1) 루트 디렉터리 (파일 시스템 계층 구조 상의 최상위 디렉토리)

windows: c:\

 

2-2) 홈 디렉터리 (시스템의 사용자에게 각각 할당된 개별 디렉터리)

windos: c:\USERS\{계정명}

 

2-3) 작업 디렉터리 (작업 중인 파일의 위치한 디렉터리)

./

 

2-3) 부모 디렉터리 (작업 디렉터리의 부모 디렉토리)

../

---

파일 경로

절대 경로

현재 작업 디렉터리와 관계없이 특정 파일의 절대적인 위치를 가리킴

루트 디렉터리를 기준으로 파일 위치를 나타냄

 

상대 경로

현재 작업 디렉터리를 기준으로 특정 파일의 상대적인 위치 나타냄

 

target 어트리뷰트

링크를 클릭했을 때 윈도우를 어떻게 오픈할지 지정

_self : 연결문서를 현재 윈도우에서 오픈

_blank : 연결문서를 새로운 윈도우나 탭에서 오픈 (보안 취약점이 있으므로 rel="noopener noreferrer" 추가 권장)

---

목록 

 

1. 순서 없는 목록

ul / li

 

2. 순서 있는 목록

ol / li

(value = 1(숫자, 기본값), A(대문자 알파벳), a(소문자 알파벳), I(대문자 로마숫자), i(소문자 로마숫자))

start 어트리뷰트 : 시작값 지정 가능

reversed 어트리뷰트 리스트의 순서값을 역으로 표현

---

테이블

table - 표를 감싸는 태그

tr - 표 내부 행

th - 행 내부 제목 셀

td - 행 내부 일반 셀

 

어트리뷰트 : border(표 두께 지정), rowspan(해당 셀이 점유하는 행의 수 지정), colspan(해당 셀이 점유하는 열의 수 지정)

---

이미지, 오디오, 비디오

https://poiemaweb.com/html5-tag-image-multimedia

HTML5 Tag - Image & Multimedia | PoiemaWeb

---

form태그

사용자가 입력한 데이터 수집 위해 사용됨 (입력 양식 태그 포함 가능)

 get

- 전송 url에 입력 데이터를 쿼리 스트링으로 보내는 방식

- 전송 url 바로 뒤에 ?를 통해 데이터의 시작을 알려주고, key-value 형태의 데이터를 추가함

- 1개 이상의 전송 데이터는 &로 구분

- url에 전송 데이터가 모두 노출되므로 보안에 문제가 있으며 전송할 수 있는 데이터에 한계가 있음

ex. http://jsonplaceholder.typicode.com/posts?userId=1&id=1

 

post

- Request Body에 담아 보내는 방식

- url에 전송 데이터가 모두 노출되지 않지만 get에 비해 속도가 느림

- rest API 에서 POST 메소드는 특정 리소스의 생성을 요청함

ex. http://jsonplaceholder.typicode.com/posts

 

input 종류

select 태그

textarea

여러 줄의 글자 입력시 사용

 

button 

클릭할 수 있는 버튼 생성 (input button태그는 빈 태그)

텍스트나 이미지 같은 콘텐츠 사용 가능

어트리뷰트 : button, reset, submit

 

fieldset / legend

fieldset 태그는 관련된 입력 양식들을 그룹화할 때 사용

legend 태그는 fieldset 태그 내에서 사용되어야 함, fieldset 제목 정의

---

웹페이지의 레이아웃 구성 위해 공간 분할하는 태그

---

css 기본 문법

- 구조화된 문서를 화면, 종이 등에 어떻게 렌더링할 것인지를 정의하기 위한 언어

 

1. 셀렉터 (selector, 선택자)

html 요소를 선택하기 위해 css에서 제공하는 수단

 

h1(선택자) 선언블록({color(프로퍼티): red(값);})

 

2. 프로퍼티 (property, 속성)

셀렉터로 선택했으면 프로퍼티와 값을 지정해야 함

 

3. 값 (value, 속성값)

해당 프로퍼티에 사용할 수 있는 값을 특정 단위로 지정

 

4. html과 css의 연동

 1) link style - html에서 외부에 있는 css 파일 로드

<link rel='stylesheet' href='css/style.css>

 

 2) embedding style - html내부에 css 포함

 

 3) inline style - html 요소의 style 프로퍼티에 css 기술

 

5. reset css 사용

기본적인 html 요소의 css 초기화하는 용도로 사용(모든 웹 브라우저는 디폴트 스타일을 가지고 있으므로)

자주 사용하는 reset css - https://meyerweb.com/eric/tools/css/reset/

CSS Tools: Reset CSS

https://necolas.github.io/normalize.css/

Normalize.css: Make browsers render all elements more consistently.

---

셀렉터

 

복수의 셀렉터 지정 - 쉼표로 구분

 

전체 셀렉터 - * (html 요소 포함한 모든 요소 선택)

 

태그 셀렉터 - 태그명 (지정된 태그명 가지는 요소 선택)

 

id 셀렉터 - #id 어트리뷰트 값

 

클래스 셀렉터 - .class 어트리뷰트 값

 

어트리뷰트 셀렉터

셀렉터[어트리뷰트] (지정된 어트리뷰트를 갖는 모든 요소 선택)

 

셀렉터[어트리뷰트='값'] (지정된 어트리뷰트를 가지며 지정된 값과 어트리뷰트의 값이 일치하는 모든 요소 선택)

 

셀렉터[어트리뷰트~='값'] (지정된 어트리뷰트의 값이 지정된 값을 (공백으로 분리된 단어로 포함하는 요소) 선택

/* h1 요소 중에 title 어트리뷰트 값에 "first"를 단어로 포함하는 요소 */

h1[title~="first"] { color: red; }

 

셀렉터[어트리뷰트|='값']  (지정된 어트리뷰트의 값과 일치하거나 지정 어트리뷰트 값 뒤 연이은 하이픈('값-')으로 시작하는 요소 선택)

/* p 요소 중에 lang 어트리뷰트 값이 "en"과 일치하거나 "en-"로 시작하는 요소 */

p[lang|="en"] { color: red; }

 

셀렉터[어트리뷰트^='값'] (지정된 어트리뷰트 값으로 시작하는 요소 선택)

/* a 요소 중에 href 어트리뷰트 값이 "https://"로 시작하는 요소 */

a[href^="https://"] { color: red; }

 

셀렉터[어트리뷰트$='값'] (지정된 어트리뷰트 값으로 끝나는 요소 선택)

/* a 요소 중에 href 어트리뷰트 값이 ".html"로 끝나는 요소 */

a[href$=".html"] { color: red; }

 

셀렉터[어트리뷰트*='값'] (지정된 어트리뷰트 값을 포함하는 요소 선택)

/* div 요소 중에서 class 어트리뷰트 값에 "test"를 포함하는 요소 */

div[class*="test"] { color: red; }

 

복합 셀렉터

 

1. 후손 셀렉터

자신의 1level 상위에 속하는 요소 - 부모 요소

1 level 하위에 속하는 요소 - 자손 요소(자식 요소)

자신보다 n level 하위에 속하는 요소 - 후손 요소 (하위 요소)

/* div 요소의 후손요소 중 p 요소 */

div p { color: red; }

 

2. 자식 셀렉터

자손 셀렉터는 셀렉터a의 모든 자식 요소 중 셀렉터 b와 일치하는 요소 선택

/* div 요소의 자식요소 중 p 요소 */

div > p { color: red; }

 

3. 형제 (동위) 셀렉터

형제(동위) 셀렉터는 형제 관계(동위 관계)에서 뒤에 위치하는 요소를 선택할 때 사용

3-1) 인접 형제 셀렉터

셀렉터 a의 형제 요소 중 바로 뒤에 위치하는 셀렉터 b요소 선택

a와 b사이에 다른 요소가 존재하면 선택되지 않음

/* p 요소의 형제 요소 중에 p 요소 바로 뒤에 위치하는 ul 요소를 선택한다. */

p + ul { color: red; }

 

3-2) 일반 형제 셀렉터

셀렉터 a의 형제 요소 중 셀렉터a 뒤에 위치하는 셀렉터 b 요소를 모두 선택

/* p 요소의 형제 요소 중에 p 요소 뒤에 위치하는 ul 요소를 모두 선택한다.*/\

p ~ ul { color: red; }

 

4. 가상 클래스 셀렉터

요소의 특정 상태에 따라 스타일을 정의할 때 사용

 

링크, 동적 셀렉터

/* input 요소가 사용 가능한 상태일 때,

input 요소 바로 뒤에 위치하는 인접 형제 span 요소를 선택 */

input:enabled + span { color: blue; }

 

/* input 요소가 사용 불가능한 상태일 때,

input 요소 바로 뒤에 위치하는 인접 형제 span 요소를 선택 */

input:disabled + span { color: gray; text-decoration: line-through; }

 

/* input 요소가 체크 상태일 때,

input 요소 바로 뒤에 위치하는 인접 형제 span 요소를 선택 */

input:checked + span { color: red; }

 

/* p 요소 중에서 첫번째 자식을 선택 */

p:first-child { color: red; }

 

/* p 요소 중에서 마지막 자식을 선택 */

/* body 요소의 두번째 p 요소는 마지막 자식 요소가 아니다.

body 요소의 마지막 자식 요소는 div 요소이다. */

p:last-child { color: blue; }

 

/* ol 요소의 자식 요소인 li 요소 중에서 짝수번째 요소만을 선택 */

ol > li:nth-child(2n) { color: orange; }

 

/* ol 요소의 자식 요소인 li 요소 중에서 홀수번째 요소만을 선택 */

ol > li:nth-child(2n+1) { color: green; }

 

/* ol 요소의 자식 요소인 li 요소 중에서 첫번쨰 요소만을 선택 */

ol > li:first-child { color: red; }

 

/* ol 요소의 자식 요소인 li 요소 중에서 마지막 요소만을 선택 */

ol > li:last-child { color: blue; }

 

/* ol 요소의 자식 요소인 li 요소 중에서 4번째 요소 요소만을 선택 */

ol > li:nth-child(4) { background: brown; }

 

/* ul 요소의 모든 자식 요소 중에서 뒤에서부터 시작하여 홀수번째 요소만을 선택 */

ul > :nth-last-child(2n+1) { color: red; }

 

/* ul 요소의 모든 자식 요소 중에서 뒤에서부터 시작하여 짝수번째 요소만을 선택 */

ul > :nth-last-child(2n) { color: blue; }

 

/* p 요소의 부모 요소의 자식 요소 중 첫번째 등장하는 p 요소 */

p:first-of-type { color: red; }

 

/* p 요소의 부모 요소의 자식 요소 중 마지막 등장하는 p 요소 */

p:last-of-type { color: blue; }

 

/* p 요소의 부모 요소의 자식 요소 중 앞에서 2번째에 등장하는 p 요소 */

p:nth-of-type(2) { color: green; }

 

/* p 요소의 부모 요소의 자식 요소 중 뒤에서 2번째에 등장하는 p 요소 */

p:nth-last-of-type(2) { color: orange;}

 

/* p 요소 중에서 첫번째 자식을 선택 */

p:first-child { background: brown;}

 

/* input 요소 중에서 type 어트리뷰트의 값이 password가 아닌 요소를 선택 */

input:not([type=password]) { background: yellow; }

input[type="text"]:valid { background-color: greenyellow; }

 

input[type="text"]:invalid { background-color: red; }

---

8. 가상 요소 셀렉터

/* p 요소 콘텐츠의 첫글자를 선택 */

p::first-letter { font-size: 3em; }

 

/* p 요소 콘텐츠의 첫줄을 선택 */

p::first-line { color: red; }

 

/* h1 요소 콘텐츠의 앞 공간에 content 어트리뷰트 값을 삽입한다 */

h1::before { content: " HTML!!! "; color: blue; }

 

/* h1 요소 콘텐츠의 뒷 공간에 content 어트리뷰트 값을 삽입한다 */

h1::after { content: " CSS3!!!"; color: red; }

 

/* 드래그한 콘텐츠를 선택한다 */

::selection { color: red; background: yellow; }

---

css 프로퍼티 값의 단위

 

크기 단위

px(절대값) em, %(상대값)

기본값 - 16px, 1em, 100%

 

https://poiemaweb.com/css3-units

CSS3 Units | PoiemaWeb

https://poiemaweb.com/css3-box-model

CSS3 Box Model | PoiemaWeb

---

display 프로퍼티 

블록 - 화면 크기 전체의 가로폭 차지

(div, h1-6, p, ol, ul, li, hr, table, form)

 

인라인 - width, height, margin-top, margin-bottom 프로퍼티 지정 불가 (line-height로 지정)

(span, a, strong, img, br, input, select, textarea, button)

 

인라인 블록 - inline 레벨 요소와 같이 한 줄에 표현되면서, width, height, margin 프로퍼티 모두 지정 가능

 

 

3. opacity 프로퍼티

요소의 투명도 정의

0.0 - 1.0의 값 입력

0.0 = 투명

1.0 = 불투명

---

백그라운드 프로퍼티

1. background-image 프로퍼티

2. background-repeat 프로퍼티

3. background-size 프로퍼티 (cover, %, px, contain)

4. background-attachment 프로퍼티 (fixed)

5. background-position 프로퍼티 

6. background-color 프로퍼티

https://poiemaweb.com/css3-background

---

폰트와 텍스트

 

font-size 프로퍼티

font-family

font-style -> 이탤릭체

font-weight -> 폰트 굵기 지정

line-height -> 텍스트의 높이 지정 (텍스트 수직 정렬에도 응용)

letter-spacing -> 글자 사이의 간격

text-align -> 텍스트 수평 정렬

text-decoration -> 링크에 underline제거 & overline, line-through 추가

white-space -> 공백, 들여쓰기, 줄바꿈

text-overflow -> 자동 줄바꿈이 되지 않은 텍스트의 처리방법 정의

word-wrap ->  한 단어의 길이가 길어서 부모 영역 벗어난 텍스트의 처리 방법 정의 (단어 어느정도 고려해 개행)

word-break -> 한 단어의 길이가 길어서 부모 영역 벗어난 텍스트의 처리 방법 정의 (단어 고려하지 않고 강제 개행)

.white-space

text-overflow

---

요소의 위치 정의

position 프로퍼티 

1. 기본 - static (부모 요소의 위치를 기준으로 배치)

top, bottom, left, right 같이 사용 불가

 

2. 상대 위치 - relative (기본 위치를 기준으로 좌표 프로퍼티를 사용하여 위치 이동)

 

3. 절대 위치 - absolute (부모 요소 또는 가장 가까이 있는 조상 요소(static 제외)를 기준으로 좌표 프로퍼티만큼 이동

= relative, absolute, fixed 프로퍼티가 선언되어 있는 부모 또는 조상 요소를 기준으로 위치 결정

 

4. z-index 프로퍼티

5. overflow 프로퍼티

---

요소 정렬

float 프로퍼티 해당 요소를 다음 요소 위에 떠 있게 한다.

---

상속

상속되지 않는 경우 inherit 키워드를 사용해 명시적으로 상속받게 할 수 있음

 

캐스캐이딩

충돌을 피하기 위한 css 적용 순위 

 

규칙

1. 중요도 (css가 어디에 선언되었는지)

2. 명시도 (대상을 명확하게 특정할수록)

3. 선언순서 (선언 순서에 따라 (나중에 선언된 스타일 우선))

---

벤더 프리픽스

 

css는 웹 표준이 정해지지 않았기 때문에 브라우저에 따라 다른 방식으로 지원됨

그러므로 css를 모든 브라우저에서 원활히 사용하기 위해

스타일 속성 앞에 preifx 프리픽스(접두사)를 붙여줘야 함

 

   - 사파리, 크롬: -webkit-

   - 모질라, 파이어폭스: -moz-

   - 오페라: -o-

   - 익스플로러: -ms-

 

이렇게 스타일 속성 앞에 프리픽스를 넣어주면 브라우저별로 균일하게 스타일 속성을 표현해 낼 수 있음

 

= 간편하게 prefix free 라이브러리 사용하기

https://projects.verou.me/prefixfree/

Prefix free: Break free from CSS vendor prefix hell!

라이브러리를 다운로드하고 include 하기만 하면 벤더 프리픽스 없이 모든 css 사용 가능

<script src="prefixfree.min.js"></script>

---

그림자

text-shadow = 텍스트에 그림자 효과를 부여하는 프로퍼티

box-shadow = 요소에 그림자 효과를 부여하는 프로퍼티

---

그레이디언트

2가지 이상의 색상을 혼합해 부드러운 색감의 배경 등을 생성

 

선형, 방사형 2가지 종류가 있고, 작성 툴을 이용하는 것이 보편적

https://www.colorzilla.com/gradient-editor/

Ultimate CSS Gradient Generator from ColorZilla

---

트랜지션

css 프로퍼티 값이 변화할 때 프로퍼티 값의 변화가 일정 시간에 걸쳐 일어나도록 하는 것

ex. hover의 경우 마우스가 닿으면 바로 변하는데 트랜지션은 그 값의 변화가 일정 시간에 걸쳐 일어나도록 하게 만듦

 

https://poiemaweb.com/css3-transition

CSS3 Transition | PoiemaWeb

---

애니메이션

https://poiemaweb.com/css3-animation

CSS3 Animation | PoiemaWeb

---

트랜스폼

 

트랜지션 : css 스타일 변경을 부드럽게 표현하기 위해 지속시간을 부여해 속도를 조절함

애니메이션 : 하나의 줄거리를 구성해 줄거리 내에서 세부 움직임을 시간 흐름 단위로 제어하여 요소의 움직임 표현

트랜스폼 : 요소에 이동, 회전, 확대 축소, 비틀기 효과를 부여하기 위한 함수 제공

 

단, 애니메이션 효과를 제공하지 않으므로 정의된 프로퍼티가 바로 적용돼 화면에 표시됨

애니메이션 효과를 부여할 필요가 있다면 트랜지션이나 애니메이션과 함께 사용

 

https://poiemaweb.com/css3-transform

CSS3 Transform | PoiemaWeb

---

웹폰트

 

종류

 

1. cdn 링크 방식

@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);

* { font-family: 'Nanum Gothic', sans-serif; }

 

2. 서버 폰트 로딩 방식

@font-face { font-family: myFontName; src: url("myFont.woff"); }

* { font-family: myFontName, sans-serif; }

 

일반적으로 사용되는 검증된 웹폰트 사용방법

@font-face { font-family:"Nanum Gothic"; src:url("NanumGothic.eot"); /* IE 9 호환성 보기 모드 대응 */

src:local("☺"), /* local font 사용 방지. 생략 가능 */

url("NanumGothic.eot?#iefix") format('embedded-opentype'), /* IE 6~8 */

url("NanumGothic.woff") format('woff'); /* 표준 브라우저 */ }

* { font-family: "Nanum Gothic", sans-serif; }

---

레이아웃

 

레이아웃 : 웹사이트를 구성하는 요소들을 배치할 공간을 분할하고 정렬하는 것

공간을 분할할 때는 먼저 행을 구분한 후, 행 내부 요소 분리

 

반응형 웹 디자인 : 화면 크기에 따라 적절히 화면 구성 변화

https://poiemaweb.com/css3-layout

CSS3 Layout | PoiemaWeb

---

반응형 레이아웃

화면 해상도에 따라 가로폭이나 배치를 변경해 가독성을 높임

 

1) viewport meta tag 

뷰포트를 이용해 디바이스의 특성과 디바이스의 화면 크기 등을 고려해 각종 디바이스 사용자에게 최적화된 웹페이지 제공

2) @media

서로 다른 미디어 타입에 따라 각각 style을 지정하는 것을 가능하게 함

@media를 사용해 미디어 별로 style을 지정하는 것을 media query라고 함

디바이스를 지정하는 것뿐 아니라 디바이스의 크기나 비율까지 구분 가능

https://poiemaweb.com/css3-responsive-web-design

CSS3 Responsive Web Design | PoiemaWeb

---

플렉스 박스 레이아웃

모던 웹을 위해 제안된 기존 레이아웃보다 더 세련된 방식의 니즈에 부합하기 위한 새로운 레이아웃 방식

https://poiemaweb.com/css3-flexbox

CSS3 Flexbox Layout | PoiemaWeb

---

수평/수직 중앙 정렬

 

inline / inline-block 요소

정렬 대상 요소의 부모 요소에 지정

.container {
  text-align: center;
}

 

2. block 요소

너비 명시적으로 지정, margin-right, left에 auto 지정

.item {
  width: 200px;
  margin: 20px auto;
}

 

3. 복수의 block 요소

정렬 대상 block 요소를 inline-block 요소로 변경 후

부모 요소에 text-align: center;

.container {
  text-align: center;
}
.item {
  width: 150px;
  display: inline-block;
}

 

4. flex 박스

.flex-center {
  display: flex;
  justify-content: center;
}

 

수직 정렬

 

1. single line

부모 요소에 padding-top, bottom 프로퍼티 값 동일하게 적용

.container {
  padding: 50px;
}

 

2. multiple lines

.parent {
  display: table;
  height: 100px;
}
.child {
  display: table-cell;
  vertical-align: middle;
}

 

3. flexbox

.container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 400px;
}

 

block 요소

 

1. 요소 높이가 고정되어 있는 경우

부모 요소를 기준으로 절대 위치 지정

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  /*요소의 높이(100px)의 반 만큼 위로 이동*/
  margin-top: -50px;
}

 

2. 요소 높이 불확정 상태

위와 동일

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  /*요소의 높이의 반(50%) 만큼 위로 이동*/
  transform: translateY(-50%);
}

 

 

3. flexbox

부모 요소에 flexbox 레이아웃 지정

.parent {
  display: flex;
  /*위에서 아래로 수직 배치*/
  flex-direction: column;
  /*중앙정렬*/
  justify-content: center;
}

 

수평/수직 정렬

요소의 너비와 높이 고정, 요소의 너비와 높이가 불확정 상태의 경우 모두 사용 가능

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  /*요소의 높이/너비의 반(50%)만큼 위/왼쪽으로 이동*/
  transform: translate(-50%, -50%);
}

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

---

컨테이너 요소로 img를 넣었을 때 img 요소 아래에 의도하지 않은

여분의 공간이 생긴 경우

https://poiemaweb.com/css3-removing-white-space-image-element

Typography | PoiemaWeb