[260701수 03일차] HTML & CSS

# HTML & CSS 학습일지

[HTML 3일차 & CSS 1일차] 멀티미디어·개발자도구·폼 심화
+ 이력서 미니 프로젝트, CSS 첫걸음

2026.07.01 · 학습 범위: 29번 ~ 34번 파일, CSS 01 ~ 02

📋 오늘 다뤄본 것들

오늘은 HTML 실습의 마무리 단계였다. 영상·음성 태그로 멀티미디어를 넣어보고, Emmet 자동완성으로 타이핑 속도를 줄이는 법을 배웠다. 개발자도구(F12)로 화면 뒤 구조를 들여다보는 법도 정리했고, 폼 심화와 지금까지 배운 태그를 총동원한 이력서 미니 프로젝트로 HTML 파트를 마무리했다. 그리고 이제 CSS로 넘어가는 첫걸음도 뗐다.

멀티미디어

videoaudiocontrolsautoplaymutedloop

Emmet

>*N.class#id{}[]

개발자도구

F12ElementsConsole

폼 심화

aria-labelfieldsetlegendmethodaction

🎯 미니 프로젝트

이력서 웹사이트

🎨 CSS 선택자

요소 선택자.class자손 선택자

🗂️ 태그별 메모

영상·음성 넣기 — video / audio

video와 audio 모두 controls로 재생 컨트롤을 노출하고, autoplay muted loop 조합이면 소리 없이 자동 반복 재생된다. audio는 src를 직접 쓰기보다 source 태그로 감싸는 걸 확인했다.

<video controls width="600" src="./video.mp4" autoplay muted loop></video>

<audio controls autoplay loop>
  <source src="./audio.mp4" type="audio/mpeg">
</audio>

---

Emmet 자동완성

타이핑 없이 태그 구조를 순식간에 만들어내는 문법이다. 퍼블리싱할 때도 썼었지만 규칙을 다시 한 번 표로 정리했다.

문법	의미	예시
>	자식 태그 넣기	ul>li
*N	N번 반복	li*3
.이름	class 붙이기	div.box
#이름	id 붙이기	div#top
{글자}	태그 안 내용	h1{제목}
[속성]	속성 넣기	a[href=#]

---

개발자도구(F12) — 화면 뒤 들여다보기

F12 또는 우클릭 → 검사로 열 수 있다. Elements 탭에서 HTML 구조를 트리로 보고, 값을 더블클릭해 잠깐 수정하며 디자인을 미리 볼 수 있다. Console 탭의 빨간 에러 메시지는 어디가 잘못됐는지 힌트를 준다.

개발자도구에서 바꾼 내용은 화면에만 잠깐 적용된다. 실제 파일은 바뀌지 않고 새로고침하면 원래대로 돌아오니, 마음껏 실험해도 안전하다.

---

폼 심화 — aria-label / fieldset / method

회원가입 폼을 만들며 접근성 관련 속성을 새로 짚었다. nav에 aria-label을 붙이면 스크린리더 사용자가 "이게 무슨 메뉴인지" 알 수 있고, fieldset과 legend로 체크박스 그룹을 묶으면 의미상 하나의 질문으로 인식된다. form의 action은 데이터를 보낼 주소, method는 get/post 중 전송 방식을 정한다.

<nav aria-label="주요 메뉴">...</nav>

<form action="/signup" method="post">
  <label for="email">이메일</label>
  <input type="email" id="email" name="email" required>

  <fieldset>
    <legend>관심사</legend>
    <label><input type="checkbox" name="tag" value="fe"> 프론트엔드</label>
  </fieldset>
</form>

label의 for와 input의 id를 똑같이 맞추면, 라벨 텍스트를 클릭했을 때도 해당 입력창에 포커스가 간다. 사소하지만 사용성에 꽤 영향을 준다.

---

🎯 미니 프로젝트 — 이력서 웹사이트

지금까지 배운 태그를 전부 동원해 이력서 · 자기소개서 · 포트폴리오 세 파트로 구성된 한 페이지 이력서를 만들었다. header/nav/main/section/article/footer로 큰 골격을 잡고, 연락처는 tel: mailto: 링크로, 기술스택은 table로, 포트폴리오 영상은 video로 담았다.

사용한 태그: header nav main section article footer h1~h5 p ul ol dl table form input video img a strong mark small hr
3일간 배운 걸 한 페이지에 다 쏟아부었다는 느낌이 들 정도로, 이번 실습의 총정리 성격이 강했다.

---

🎨 CSS 첫걸음 — 선택자와 우선순위

드디어 CSS로 넘어갔다. HTML이 뼈대라면 CSS는 꾸미기다. 오늘은 선택자 종류와, 같은 요소에 여러 스타일이 겹칠 때 어떤 게 이기는지를 확인했다.

선택자 3종 세트

/* 요소 선택자 — 태그 이름으로 전체 지정 */
h1 { color: red; }

/* 클래스 선택자 — .클래스명 */
.special { color: orange; }

/* 자손 선택자 — 부모 자손 사이 띄어쓰기 */
li em { color: purple; }

h1 요소선택자

.special 클래스선택자

li em 자손선택자

우선순위 — 누가 이기나

같은 요소에 여러 규칙이 겹치면 더 구체적인 선택자가 이긴다. 오늘 실습에서 확인한 순서는 이렇다.

1요소 선택자body, h1, p — 가장 넓은 범위, 가장 낮은 우선순위

2자손 선택자li em — 특정 위치의 요소만 지정

3클래스 선택자.special — 요소보다 구체적, 더 높은 우선순위

그래서 p에 초록색을 걸어놔도 class="special"이 붙은 문단만 주황색으로 따로 이길 수 있는 것이다. 또 하나 배운 건 CSS 작성 순서 관례다: 전체(body) → 요소 선택자 → 클래스 선택자 → 자손 선택자 순으로 넓은 범위에서 구체적인 범위로 좁혀가며 쓰면 나중에 코드를 읽기 편하다.

/* 1. 전체 */
body { background-color: #333; font-family: Verdana, sans-serif; }

/* 2. 요소 선택자 */
h1 { color: azure; text-align: center; }
p { color: #ccc; text-align: center; }

/* 3. 클래스 선택자 */
.special { color: orangered; font-weight: bold; }

/* 4. 자손 선택자 */
li em { color: yellow; font-style: normal; }

✍️ 마치며

HTML 실습을 이력서 미니 프로젝트로 마무리하고 나니 지난 3일간 배운 게 한 페이지에 다 녹아있다는 게 실감났다. 오늘부터는 CSS로 넘어가는데, 선택자 우선순위처럼 "왜 이 스타일이 이기는지"를 이해하고 넘어가는 게 앞으로 훨씬 중요해질 것 같다.

🏷️ HTML  |  CSS  |  웹개발  |  학습일지  |  프론트엔드