-
[프론트엔드] HTML과 CSS 개념 정리 + Grid Garden / Flexbox FroggyFront 2026. 3. 16. 17:02
1. HTML
Hyper Text Markup Language의 줄임말로 웹페이지의 뼈대를 구성할 대 사용되는 기본 언어.
웹 페이지는 HTML 문서라고도 불리며, HTML 태그들로 구성된다.
1-1. HTML의 구조
1) <!DOCTYPE html>: HTML5로 작성한 웹 문서 선언
2) <html> : 웹 문서의 시작과 끝
3) <head>: meta, title 태그 위치
4) <body> : 웹 브라우저에 표시되는 내용
- HTML의 기본 구성 요소 '태그'
<p> (Opening Tag) </p> (Closing Tag)
1-2. 시멘틱 태그 (Semantic Tag)
: 웹 문서의 구조를 나타내는 태그
1) <header> : 헤더 영역 태그
2) <nav> : 내비게이션 영역 태그
3) <main> : 핵심 콘텐츠 태그
4) <section>: 콘텐츠 영역 태그
5) <article>: 독립적인 콘텐츠 태그
6) <aside>: 사이드바 태크
7) <footer> : 푸터 영역 태그
8) <div>: 여러 소스 묶는 태그
1-3. HTML 태그
1) <img> : 이미지 삽입 태그
: <img src = "이미지 경로" width = "너비" height ="높이" alt ="대체 텍스트">
2) <audio> : 오디오 삽입 태그
: <audio src = "오디오 경로" controls>
3) <video>: 비디오 삽입 태그
: <video src = "비디오 경로" controls width = "너비">
4) <a> : 하이퍼링크
: <a href = "링크 경로"> </a>
5) <table> : 표 만드는 태그
- <table> : 표의 시작과 끝
- <caption> : 제목
- <tr> : 한 행의 시작과 끝
- <th> : 행 안의 셀 (강조)
- <td> : 행 안의 셀 (일반)
6) <form> : 사용자에게 정보를 받는 입력 양식
- <input> : type 속성을 통해 사용자의 입력을 받아오는 태그
eg) <input type = "submit" value = "로그인">
1-4. HTML 특수 문자
1) > <
2) < >
3) & &
4) " "
5) 한 칸 공백
2. CSS
Cascading Style Sheets.
style은 HTML 문서의 디자인 요소를 구성하는 스타일 시트 언어.
2-1. CSS 적용 방법
1) 인라인 스타일
: HTML 태그 안에서 style 속성을 이용해서 직접 작성 -> 해당 줄에만 적용됨.
2) 내부 스타일 시트
: <style> 태그를 이용해 html 문서 내부에 작성, <head> 태그 안에서 사용함.
3) 외부 스타일 시트
: .css 파일을 별도로 만들어 HTML 파일과 연결. -> 가장 기본적.
2-2. CSS 선택자 (Selector)
: 스타일을 어디서 적용할 것인지 선택하는 요소
1) * (전체 선택자)
- 문서 전체 스타일에 적용.
- 브라우저 기본 스타일 초기화
eg) * {속성: 속성값}
2) 태그 선택자 (타입 선택자)
- 선택한 특정 태그에 모두 적용
eg) 태그 이름 {속성: 속성값}
3) class 선택자
- 특정 부분에서만 사용
- 문서 안에서 사용 가능
- .(마침표) 기호를 클래스명 앞에 붙여 사용
eg) .class {속성: 속성값}
4) id 선택자
- # 기호를 앞에 붙여 사용
- 문서 안에서 한 번만 사용 가능
eg) #id {속성: 속성값}
5) 그룹 선택자
- 선택자를 그룹으로 나타낼 수 있음.
- ,(쉼표)로 선택자 구분하여 나열.
6) [고급] 자손 결합자
eg) 선택자A 선택자B {속성: 속성값}
- 부모 요소에 포함된 모든 자식 요소에 적용
- 자손: 선택 태그 안에 들어가 있는 모든 것
7) [고급] 자식 결합자
eg) 선택자A > 선택자B {속성: 속성값}
- 부모 요소 바로 아래 있는 자식 요소에만 적용
- 자식: 선택 태그 바로 아래 계층
8) [고급] 형제 결합자
eg) 선택자A ~ 선택자B {속성: 속성값}
- 기준이 되는 태그 뒤에 오는 모든 특정 태그에 적용
9) [고급] 인접 형제 결합자
eg) 선택자A + 선택자B {속성: 속성값}
- 기준이 되는 태그 바로 뒤에 오는 하나의 특정 태그에 적용
10) 의사 클래스 (가상 클래스)
- 선택자에 추가하는 키워드로, 선택한 키워드가 특정 상태일 때 활성화 (마우스오버, 클릭, visit 등)
eg) 선택자: 의사클래스 이름{속성: 속성값}
* 의사 클래스 스타일
- :link 사용자가 한 번도 클릭하지 않은 기본 링크 스타일
- :visited 사용자가 이미 클릭한 링크 스타일
- :hover 마우스 커서를 위에 올렸을 때 스타일 (마우스오버)
- :active 마우스커서로 항목을 클릭하는 순간 스타일
- :focus 포커싱되는 순간 스타일
* 의사 요소
: 눈에 보이지 않는 요소, 태그상 마크업되어 있지 않음.
- ::first-letter 텍스트의 첫 글자만을 선택
- ::first-line 텍스트의 첫 라인만을 선택
- ::before 특정 요소의 내용 바로 앞에 다른 요소를 삽입
- ::after 특정 요소의 내용 바로 뒤에 다른 요소를 삽입
- ::selection 해당 요소에서 사용자가 선택한 부분만을 선택
2-3. 스타일 우선순위
!important
인라인 스타일
#id
.class
태그 (타입 스타일)
상속된 스타일
- 같은 종류의 선택자일 경우 젱ㄹ 나중에 지정된 스타일
2-4. CSS 단위
* 절대 단위
1) px
- 절대적 크기로 고정.
- 화면 해상도에 다라 크기 결정.
- 반응형 웹 디자인에서 제한적임.
* 상대 단위
2) rem
- 웹페이지의 기본 글꼴 크기 기준.
- 전체 웹페이지에 걸친 일관된 크기 조정.
3) em
- 해당 요소의 부모 글꼴 크기 기준.
- 특정 요소 내의 상대적 크기 조정.
2-5. Grid와 Flex (+ Grid Garden / Flexbox Froggy 플레이)
* Flex
1) display: flex;
- Flexbox을 적용하기 위한 시작점
- Flex item들이 가로 방향으로 배치. (자신이 가진 내용물의 width만큼만 차지)
2) flex-direction
- flex-direction: row; 텍스트의 방향과 동일하게 정렬
- flex-direction: row-reverse; 텍스트의 방향과 반대 방향으로 정렬
- flex-direction: column; 요소들을 위에서 아래로 정렬
- flex-direction: column-reverse; 요소들을 아래에서 위로 정렬
3) flex-wrap 아이템 줄바꿈 설정
- flex-wrap: nowrap; (기본값) 줄바꿈 없음 - 한 줄에 표시
- flex-wrap: wrap; 줄바꿈. 아이템을 여러 줄에 표시
- flex-wrap: wrap-reverse; 줄바꿈. 아이템을 여러 줄에 표시 + 역순 배치.
4) justify-content 주축(수평 방향 정렬)
- justify-content: flex-start; 요소들을 시작점으로 정렬 (왼쪽)
- justify-content: flex-end; 요소들을 끝점으로 정렬 (오른쪽)
- justify-content: center; 요소들을 가운데로 정렬
- justify-content: space-between; 요소들 사이 균일한 간격
- justify-content: space-around; 요소들 '둘레'에 균일한 간격
- justify-content: space-evenly; 요소들 사이와 양 끝에 균일한 간격
5) align-items: 수직축(수직 방향 정렬)
- align-items: stretch; 요소들을 창에 맡게 늘립니다.
- align-items: flex-start; 요소들을 시작점으로 정렬 (위쪽)
- align-items: flex-end; 요소들을 끝점으로 정렬 (아래쪽)
- align-items: center; 요소들을 가운데로 정렬
- align-items: baseline; 시작상의 위치에 정렬
* Grid
1) grid-template Grid 형태 정의 (px, fr 픽셀, 비율 대로 트랙 크기 분할 가능)
- grid-template-rows; 행의 배치
- grid-template-columns; 열의 배치
- repeat(횟수, 크기) : 반복되는 값 줄여서 표현
- minmax(최솟값, 최댓값)
2) grid-gap 간격 지정
- grid-column-gap : 열 사이의 간격 지정
- grid-row-gap : 행 사이의 간격 지정
- grid-gap : 행과 열 사이의 간격 한꺼번에 지정
3) justify-content 가로 정렬
- justify-content: stretch;
- justify-content: start; 요소들을 시작점으로 정렬 (왼쪽)
- justify-content: end; 요소들을 끝점으로 정렬 (오른쪽)
- justify-content: center; 요소들을 가운데로 정렬
- justify-content: space-between; 요소들 사이 균일한 간격
4) align-items 수직 정렬
- align-items: start; 위쪽 정렬
- align-items: space-between;
+)
Grid Garden / Flexbox Froggy 플레이
