2주차 학습 — DevFlash

HTML 핵심 태그

태그	설명	예시
`<p>`	단락(Paragraph) — 앞뒤로 줄바꿈 자동 추가	`<p>내용</p>`
`<br>`	강제 줄바꿈 — 빈 요소(닫는 태그 없음)	`첫줄<br>둘째줄`
`<h1>~<h6>`	제목 태그 — h1이 가장 크고 h6이 가장 작음	`<h1>대제목</h1>`
`<strong>` / `<b>`	굵은 글씨 — strong은 의미상 강조, b는 시각적 굵기	`<strong>중요</strong>`
`<em>` / `<i>`	기울임꼴 — em은 의미상 강조, i는 시각적 이탤릭	`<em>강조</em>`
`<hr>`	수평선(Horizontal Rule) — 주제 구분에 사용, 빈 요소	`<hr>`

예제: 핵심 태그 사용

HTML 핵심 태그 예제

<h1>웹 프로그래밍</h1>
<h2>HTML 기초</h2>
<hr>
<p>
  <strong>HTML</strong>은 웹 페이지의 <em>구조</em>를 정의합니다.<br>
  태그를 올바르게 사용하면 검색엔진이 내용을 이해합니다.
</p>

            strong vs b, em vs i:
            <strong>과 <em>은 의미론적 마크업(스크린 리더, SEO에 영향).
            <b>와 <i>는 시각적 표현만. 가능하면 strong/em을 사용하세요.
          

이미지

img 태그 속성

<img>는 빈 요소(void element)로 닫는 태그가 없습니다.

속성	설명
`src`	이미지 파일 경로 (필수)
`width`	이미지 가로 크기 (px 또는 %)
`height`	이미지 세로 크기 (px 또는 %)
`alt`	이미지 로드 실패 시 또는 스크린 리더용 대체 텍스트 (필수 권장)

파일 경로 — 상대 경로

경로 표현	의미	예시
`./` 또는 파일명만	현재 폴더	`./photo.jpg`
`../`	상위 폴더로 이동	`../images/logo.png`
`폴더명/`	하위 폴더로 이동	`images/photo.jpg`

예제: 이미지 삽입

같은 폴더의 이미지

<img src="photo.jpg"
     width="300"
     alt="프로필 사진">

상위 폴더의 이미지

<img src="../images/logo.png"
     width="200"
     alt="로고">

            alt 속성은 이미지가 표시되지 않을 때 대신 보여지는 텍스트이자,
            시각 장애인용 스크린 리더가 읽는 내용입니다. 항상 작성하는 습관을 들이세요.
          

하이퍼링크

<a> 태그로 다른 페이지나 파일로 연결합니다.

속성	설명
`href`	연결할 URL 또는 파일 경로 (필수)
`target="_self"`	현재 탭에서 열기 (기본값)
`target="_blank"`	새 탭에서 열기

예제: 링크 종류

외부 링크 (새 탭)

<a href="https://www.naver.com"
   target="_blank">
  네이버 바로가기
</a>

내부 페이지 링크

<a href="menu.html">
  메뉴 페이지로 이동
</a>

<a href="../index.html">
  홈으로 이동
</a>

이미지에 링크 걸기

이미지 클릭 시 링크 이동

<a href="https://www.google.com" target="_blank">
  <img src="logo.png" width="150" alt="구글 로고">
</a>

            _self vs _blank: 일반적으로 같은 사이트 내 이동은 _self(기본값),
            외부 사이트로 이동할 때는 _blank를 사용합니다.
          

리스트

ul / ol 비교

태그	종류	기본 마커
`<ul>`	순서 없는 목록 (Unordered List)	● (채워진 원)
`<ol>`	순서 있는 목록 (Ordered List)	1, 2, 3 …

ol 속성 — type과 start

속성	값	결과
`type`	`"1"`	1, 2, 3 … (기본값)
	`"a"`	a, b, c …
	`"A"`	A, B, C …
	`"i"`	i, ii, iii … (소문자 로마자)
	`"I"`	I, II, III … (대문자 로마자)
`start`	`start="3"`	3번부터 시작

예제: ul / ol

ul — 순서 없는 목록

<ul>
  <li>아메리카노</li>
  <li>카페라떼</li>
  <li>카푸치노</li>
</ul>

ol — type="A", start="3"

<ol type="A" start="3">
  <li>C번부터 시작</li>
  <li>D</li>
  <li>E</li>
</ol>

정의 목록 — dl / dt / dd

용어와 설명 쌍을 나타낼 때 사용합니다.

태그	역할
`<dl>`	정의 목록 컨테이너 (Definition List)
`<dt>`	정의할 용어 (Definition Term)
`<dd>`	용어에 대한 설명 (Definition Description) — 들여쓰기 자동 적용

dl 예제 — 커피 메뉴 설명

<dl>
  <dt>아메리카노</dt>
  <dd>에스프레소에 물을 희석한 음료</dd>

  <dt>카페라떼</dt>
  <dd>에스프레소에 스팀밀크를 추가한 음료</dd>
</dl>

실습: 커피전문점 페이지

지금까지 배운 태그를 모두 활용하여 커피전문점 소개 페이지를 만듭니다.

폴더 구조

파일 구조

coffee/
├── index.html       ← 메인 페이지
├── menu.html        ← 메뉴 페이지
└── images/
    ├── logo.png
    ├── americano.jpg
    └── latte.jpg

index.html 구조

coffee/index.html — body 구조

<body>
  <h1>☕ My Coffee Shop</h1>
  <hr>

  <img src="images/logo.png" width="200" alt="카페 로고">

  <h2>소개</h2>
  <p>
    신선한 원두로 내린 <strong>핸드드립 커피</strong>를 즐기세요.<br>
    매일 <em>오전 8시</em>부터 <em>오후 10시</em>까지 영업합니다.
  </p>

  <h2>메뉴 안내</h2>
  <ul>
    <li>아메리카노 ₩3,500</li>
    <li>카페라떼 ₩4,000</li>
    <li>카푸치노 ₩4,500</li>
  </ul>

  <a href="menu.html">전체 메뉴 보기</a>
</body>

menu.html 구조

coffee/menu.html — body 구조

<body>
  <h1>메뉴</h1>
  <hr>

  <h2>커피</h2>
  <ol type="1">
    <li>
      <img src="images/americano.jpg" width="100" alt="아메리카노">
      <strong>아메리카노</strong> — ₩3,500
    </li>
    <li>
      <img src="images/latte.jpg" width="100" alt="카페라떼">
      <strong>카페라떼</strong> — ₩4,000
    </li>
  </ol>

  <h2>메뉴 설명</h2>
  <dl>
    <dt>아메리카노</dt>
    <dd>에스프레소 + 물</dd>
    <dt>카페라떼</dt>
    <dd>에스프레소 + 스팀밀크</dd>
  </dl>

  <a href="index.html">← 메인으로</a>
</body>

            경로 포인트: menu.html에서 images 폴더는 같은 coffee/ 폴더 안에 있으므로
            images/americano.jpg처럼 하위 폴더명부터 씁니다.
            상위 폴더로 이동할 때만 ../를 사용합니다.
          

퀴즈로 복습하기

2주차 퀴즈 풀기 →