코딩자율학습단 19기 | 3일차 학습일지 – 텍스트 태그, 목록, 링크/이미지

오늘 학습 정보

• 날짜/Day: 26/1/14 (Day3)
• 교재 범위: ~3.5 텍스트 강조하기 (종이책 p.59~81)

출처: 코딩 자율학습단 카카오톡 채널 메시지 캡처

오늘의 핵심 키워드 3개

• 핵심 키워드 1: 목록(ul/ol/dl)
• 핵심 키워드 2: 링크/이미지(a, img)
• 핵심 키워드 3: 강조(strong, em)

태그/속성 정리

2-1. 텍스트/문단/줄바꿈

h1 ~ h6 (제목)

역할: 페이지/섹션 제목 표시 (숫자가 작을수록 더 중요한 제목 / h1부터 단계적으로 사용)

형식: <h1>제목</h1>

p (문단)

역할: 본문 문단 작성

형식: <p>내용</p>

br (줄 바꿈)

역할: 문단에서 줄 바꿈(단독 태그)

형식: <br>

2-2. 인용(출처 표시)

blockquote (긴 인용문)

역할: 문단 단위 인용(긴 글 인용할 때)

형식: <blockquote cite="출처URL">문단 단위 인용문</blockquote>

속성: cite (출처 URL)

q (짧은 인용문)

역할: 문장 안에서 짧게 인용(따옴표 형태로 표시)

형식: 문장 안에 짧은 인용문

속성: cite (출처 URL)

2-3. 텍스트 의미/표현(추가·삭제·첨자)

ins / del (추가/삭제)

역할: 문장 수정 내역처럼 ‘추가/삭제’ 의미 표현

형식: <ins>추가된 내용</ins>, <del>삭제된 내용</del>

sub / sup (아래/위 첨자)

역할: 화학식, 수학식 등에서 첨자 표현

형식: <sub>아래 첨자</sub>, <sup>위 첨자</sup>

예시: H₂O, 4²

2-4. 그룹(레이아웃/구조 잡기)

div (블록 요소 그룹)

역할: 관련 요소들을 덩어리(블록) 로 묶어서 구조 잡기

형식: <div> ... </div>

속성: class (CSS 적용 식별자)

span (인라인 요소 그룹)

역할: 문장 속 특정 부분만 따로 묶어서 스타일/처리하기

형식: <span> ... </span>

추가 설명: 문장 중 “이 부분”만 따로 하이라이트

속성: class (CSS 적용 식별자)

2-5. 목록

ul / ol / li (기본 목록)

역할: 항목 나열

• ul: 순서 없는 목록(점 표시)
• ol: 순서 있는 목록(번호 표시)
• li: 목록 항목

형식:

<ul>
   <li>목록1</li>
   <li>목록2</li>
</ul>
<ol>
   <li>목록1</li>
   <li>목록2</li>
</ol>

dl / dt / dd (정의형 목록)

역할: “용어 + 설명” 형태로 정리할 때 사용

형식:

<dl>
   <dt>용어 1</dt>
   <dd>설명 1</dd>
   <dt>용어 2</dt>
   <dd>설명 2</dd>
</dl>

2-6. 링크/이미지

a (링크)

역할: 다른 페이지/위치로 이동하는 링크 생성

형식: <a href="대상 경로" target="링크 연결 방식" title="링크 설명">링크 텍스트</a>

속성:

• href (대상 경로, 생략 불가능)
• target (열리는 방식, 생략 가능): (_blank, _parent, _self, _top) 새 창으로 열리는 방식인 _blank를 주로 사용
• title (링크 설명, 생략 가능)

img (이미지)

역할: 이미지 삽입(단독 태그)

형식: <img src="이미지경로" alt="이미지 설명">

속성:

• src (이미지 경로)
• alt (대체 텍스트)

이미지 경로 표기: (HTML에서 이미지 경로는 항상 웹브라우저에서 실행되는 HTML 파일의 위치가 기준)

• ./ : 현재 폴더(생략가능)
• ../ : 상위 폴더

2-7. 텍스트 강조하기

strong (강한 의미 강조)

역할: “중요한 내용”임을 의미적으로 강조

형식: <strong>중요한 내용</strong>

em (강조)

역할: 문맥상 강조(말로 읽을 때 힘을 주는 느낌)

형식: <em>강조할 내용</em>

이슈 로그

오늘은 개념 정리 위주라서 따로 막힌 부분은 없었습니다. 대신 div vs span, strong vs em은 헷갈리기 쉬워서, 다음에 직접 코드로 한번씩 써보면서 감을 잡아보려고 해요.

학습단 도서

• 「코딩 자율학습 HTML+CSS+자바스크립트」