HTML, CSS

HTML (HyperText Markup Language)은 웹 페이지를 만들기 위한 마크업 언어입니다.

HTML 주요 요소

html: 문서의 시작과 끝
head: 메타정보(제목, 스타일 등)
body: 화면에 보이는 내용
h1 ~ h6: 제목(큰 제목에서 작은 제목)
p: 문단
a: 링크
img: 이미지
ul, ol, li: 목록(순서 없는/있는 목록)
div: 구역 나누기
span: 텍스트 꾸미기
HTML 모든 태그

HTML 실습 과제

CSS (Cascading Style Sheets)는 웹 페이지의 디자인(스타일)을 설정하는 언어입니다.

CSS 주요 스타일

color: 글자 색상
font-size: 글자 크기
background-color: 배경 색상
margin: 바깥 여백
padding: 안쪽 여백
border: 테두리
width / height: 가로, 세로 크기
display: 레이아웃 방식(block, inline 등)
flex / grid: 레이아웃 배치
text-align: 텍스트 정렬

CSS(01)실습 과제

CSS 박스 모델 (Box Model)

구성 요소

Content: 내용 (텍스트, 이미지 등)
Padding: 내용과 테두리 사이 여백
Border: 테두리
Margin: 테두리 밖 여백

박스 모델 구조

CSS 우선순위

1. 인라인 스타일 : 가장 높은 우선순위
2. ID 선택자 : 높은 우선순위
3. 클래스, 속성, 의사 클래스 선택자 : 중간 우선순위
4. 태그 선택자 : 낮은 우선순위

CSS(02)실습 과제