안녕하세요!
2025년 6월 2일, UI·UX 반응형 웹퍼블리셔 국비 지원 수업 7일차 내용을 정리해보았습니다.
오늘은 텍스트 관련 태그(`a`, `span`, `p`, `h1~h6`)부터 목록 태그(`ul`, `ol`, `li`), 그리고 HTML 구조에서 중요한 시맨틱 태그(nav, section 등)의 개념까지 배웠습니다.
---
7일차 학습내용
19강
## HTML과 CSS 복습
- HTML(배우)
- 관계
- 부모/자식
- 형/동생
- 태그
- inline(인라인) 계열
- span(div 에서 display만 inline 태그, 인라인 계열의 기본 태그)
- a : 링크
- img: 이미지
- block(블록) 계열
- 기본
- div(구분, 적절한 태그가 생각나지 않을 때, 모르면 div, 블록 계열의 기본태그)
- nav(내비게이션, 보통 메뉴 감쌀 때)
- section(섹션)
- article(아티클, 게시물)
- 제목
- h1,h2,h3,h4,h5,h6
- 목록
- ul, li: 순서 없는 목록
- ol, li: 순서 있는 목록
---
- CSS : 스타일리스트
- 노말라이즈
- 해당 엘리먼트에 기본적으로 적용되어 있는 디자인을 없애서 다시 평범하게 만든다.
- a, body, ul, li, ol ,li, h1, h2, h2,h3, h4, h5, h6은 사용하기 전에 노말라이즈를 해야 한다.
- 선택자
- 태그 선택자: div {...}
- 자식 선택자: div>a {...}
- 후손 선택자: div a {...}
- 클래스 선택자: .menu-item {...}
- 아이디 선택자:#item {...}
- 기본 속성
- width, height, font-size, font-weight, letter-spacing, color, background-color, margin-top, margin-left, padding-top, padding-left, border, border-radius
- 레이아웃 속성
- display
- none: 사라진다.
- inline-block, inline: 글자화
- block: 블록화
- float: ??
- position:??
20강
HTML
## <a href="#">링크를 연결할 때 사용 </a>
## <span>문장 내 짧은 강조나 구간을 나눌 때 사용</span>
## <p>긴 본문 단락</p>
---
## h1, h2, h3, h4, h5, h6
: 숫자가 작을수록 폰트 크기가 크고, 굵은 제목이다.
: 큰 타이틀을 사용할 것 같으면 제목태그<h1>를 적용한다.
: 제목은 h 태그로, 본문은 p 태그로 구분해 작성하면 좋다.
<!-- html 예시 -->
<h1>제목 1</h1>
<h2>제목 2</h2>
<h3>제목 3</h3>
<h4>제목 4</h4>
<h5>제목 5</h5>
<h6>제목 6</h6>
---
## ul, li
# ul
: 순서 없는 목록(메뉴 역할, 리스트)
<!-- html 옭은 예시 -->
<ul>
<li>동물</li>
<li>식물</li>
</ul>: ul 안에는 반드시 li만 포함되어야 한다.
<!-- html 맞지 않은 예시 -->
<ul>
<li>동물</li>
<li>식물</li>
<div>생물</div> <!--틀린 태그-->
</ul>: div 같은 태그가 끼어들면 HTML 문법 오류이다.
---
## ol, li
# ol
: 순서 있는 목록(1, 2, 3 숫자/순서가 생긴다.)
<!-- html 옭은 예시 -->
<ol>
<li>동물</li> <!-- 1.동물-->
<li>식물</li> <!-- 2.식물-->
</ol>: ol도 마찬가지로 자식은 무조건 li여야 한다.
<!-- html 맞지 않은 예시 -->
<ol>
<li>동물</li>
<li>식물</li>
<div>생물</div> <!--틀린 태그-->
</ol>: div, p 등을 함께 사용하면 오류가 발생한다.
---
## 노말라이즈(Normalize)
: 스타일의 기본 값을 초기화한다.
<!-- 노말라이즈 css 예시 -->
body > ul, div {
list-style: none;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: inherit;
}- list-style: none; → 리스트 앞 점 제거
- margin, padding → 여백 제거
- text-decoration: none; → 링크 밑줄 제거
- color: inherit; → 부모 요소 색상 따라가기
> 대부분의 프로젝트에서는 CSS 기본 초기화(Normalize)부터 시작한다.
21강
## 시맨틱 태그
: <nav>를 시맨틱 태그라고 부른다.
: "의미 있는 구조"라는 뜻으로, HTML 문서 구조를 더 명확하게 구분해주는 태그를 말한다.
: <section>, <p>포함하여 시맨트 태그는 더 있다.
---
# 대표적인 시맨틱 태그
| 태그 | 용도 |
| <nav> | 내비게이션 메뉴 |
| <header> | 페이지 상단 |
| <footer> | 페이지 하단 |
| <section> | 구역 나누기 |
| <article> | 독립된 콘텐츠 영역 |
| <aside> | 보조 영역 (광고 등) |
> <div> 대신 시맨틱 태그를 사용하면 가독성 + SEO(검색 최적화)에 유리하다.
> 더 자세한 내용은 링크에서 확인할 수 있다.
22강
## 1차 풀 다운 메뉴 만들기 ul, li
: 00
---
마무리
오늘은 텍스트 구조, 목록 구성, 메뉴 스타일링, 시맨틱 태그 등 웹페이지 구조의 기본 틀을 배우는 날이었습니다.
HTML의 문법 규칙이 은근히 까다롭고, 여러 태그를 함께 응용하는 부분이 넘무 어려웠슴다ㅠ
복습 완료! 끝-