통합 요약노트
Ch.2 콘텐츠 쌓기 — 텍스트, 목록, 링크, 이미지
텍스트 강조, 목록, 하이퍼링크, 이미지 삽입
이 챕터의 내용
1
텍스트를 강조하는 법
strong(강한 강조)과 em(기울임 강조) — 의미를 담은 강조 태그입니다.
텍스트에 의미를 담아 강조하는 두 가지 태그
자기소개에 강조 표현을 추가해봅시다
스크린 리더가 '강조'로 인식하는 태그는?
- <strong> = 중요 강조, <em> = 뉘앙스 강조
- b/i보다 strong/em이 접근성에 좋다
- <!-- --> 주석은 화면에 표시되지 않는다
2
목록으로 정리하기
ul(순서 없음)과 ol(순서 있음) — 두 종류의 목록 태그를 배워봅시다.
목록에는 두 종류가 있습니다: 순서가 중요한가, 아닌가
목록 안에 또 다른 목록을 넣을 수 있습니다
취미와 학습 목표를 목록으로 정리해봅시다
- <ul> = 순서 없는 목록 (●), <ol> = 순서 있는 목록 (1.2.3.)
- <li>는 반드시 ul 또는 ol 안에서 사용
- 목록 안에 목록을 중첩할 수 있다
3
링크로 세계 연결하기
a 태그(anchor) — 텍스트나 이미지를 클릭하면 다른 곳으로 이동하게 만드는 태그입니다.
링크는 a 태그와 href 속성으로 만듭니다
주소를 적는 방법에는 두 가지가 있습니다
좋아하는 사이트 링크를 홈페이지에 추가해봅시다
- <a href="주소">텍스트</a>로 링크를 만든다
- target="_blank"로 새 탭에서 열 수 있다
- 같은 사이트는 상대 경로, 외부는 절대 경로
4
이미지로 말하기
img 태그와 alt 속성 — 이미지를 삽입하고 접근성까지 챙기는 방법을 배워봅시다.
이미지는 img 태그 하나로 삽입할 수 있습니다
파일이 늘어나면 폴더로 정리해야 합니다
프로필 사진을 홈페이지에 넣어봅시다
- <img src="경로" alt="설명">으로 이미지를 삽입한다
- alt 속성은 접근성, SEO, 로딩 실패 대비에 필수
- 파일 이름은 소문자 + 하이픈, 메인 파일은 index.html
key
핵심 용어 모음
🔗
href
이동할 주소 (URL 또는 파일 경로)
📑
target="_blank"
새 탭에서 열기
📝
내부 텍스트
화면에 보이는 링크 텍스트
📁
src
이미지 파일의 경로 (필수)
♿
alt
대체 텍스트 — 이미지 설명 (필수)
📐
width / height
이미지 크기 (선택, CSS 권장)
compare_arrows
비교 정리
| 항목 | 인라인 요소 | 블록 요소 |
|---|---|---|
| 대표 태그 | <strong>, <em>, <a>, <span> | <h1>~<h6>, <p>, <div>, <ul> |
| 배치 방식 | 줄바꿈 없이 옆으로 나열 | 항상 새 줄에서 시작, 전체 너비 차지 |
| 크기 설정 | width/height 설정 불가 | width/height 설정 가능 |
퀴즈와 인터랙션으로 더 깊이 학습하세요
play_circle인터랙티브 코스 시작하기