[HTML+CSS+자바스크립트] 02. 텍스트 관련 태그, 목록, 이미지, 링크

기록용 포스팅이기에 간결히 적습니다.

하지만 질문 및 지적은 환영합니다.

책에서 개인적으로 중요하다고 생각하는 부분을 정리하고 사견을 더했습니다.

검색엔진 최적화(SEO, Search Engine Optimization), 웹 접근성 관련 내용은 붉은 글씨로 표시.

---

 

"코딩 자율학습 HTML+CSS+자바스크립트"를 읽으며 정리한 내용입니다.(챕터 2.3~3.5)

 

블록 요소: hn, p태그처럼 사용할 때마다 줄 바꿈되는 태그.

인라인 요소: a, span 태그처럼 공간이 부족할 때만 줄 바꿈되는 태그.

 

04. 텍스트 관련 HTML 태그

(1) hn 태그

<hn> 주로 제목이나 주제 </hn>

h는 heading을 의미하고 n은 숫자.

<!-- 실제 실행하려면 body 태그 내에 위치. -->
<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>

위 코드 실행 결과(hn 태그)

SEO를 위해서 본문에서 핵심이 되는 내용으로 제목이나 주제를 잘 선택해서 작성해야 함.

 

(2) <p> 태그

<p> 본문의 문단을 작성할 때 사용 </p>

 

(3) <br> 줄 바꿈

 

(4) blockquote

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

<blockquote cite="https://ko.wikipedia.org/wiki/HTML">
    <p>하이퍼 텍스트 마크업 언어(영어: Hyper Text Markup Language, HTML, 
    문화어: 초본문표식달기언어, 하이퍼본문표식달기언어)는 웹 페이지 표시를 위해 
    개발된 지배적인 마크업 언어다. 또한, HTML은 제목, 단락, 목록 등과 같은 본문을 
    위한 구조적 의미를 나타내는 것뿐만 아니라 링크, 인용과 그 밖의 항목으로 구조적 
    문서를 만들 수 있는 방법을 제공한다.</p>
</blockquote>

blockquote 태그 실행 결과.

(5) q 태그

<q cite="출처 URL"> 짧은 인용문 </q>

blockquote와 마찬가지로 인용에 쓰이지만 두 가지 차이점 있음.

	blockquote	q
요소 타입(?)	블록 요소	인라인 요소
여백	양 옆으로 기본 여백	없음

 

(6) ins와 del 태그

<ins> 추가 텍스트 </ins>   -> 밑줄

<del> 삭제 텍스트 </del>   -> 취소선

 

(7) sub와 sup 태그

_{아래 첨자}

^{위 첨자}

sub, sup 태그 예시

 

---

05. 텍스트 강조하기

<p>strong 태그 예시 : <strong>strong 태그</strong></p>
<p>b 태그 예시 : <b>b 태그</b></p>
<p>em 태그 예시 : <em>기울어짐.</em></p>
<p>i 태그 예시 : <i>기울어짐.</i></p>

strong, b, em, i 태그 예시

*strong 태그를 중첩하면 시각적으로 차이는 없으나, 구조상 html에서 더 중요한 부분임을 나타냄. (em도 마찬가지)

*b, i 태그는 시각적으로는 각각 strong, em과 같으나 구시대의 유물. 사용 지양.

06. 목록 만들기(ul/ol/dl)

(1) ul(unordered list): 비순서형 목록

(2) ol(ordered list): 순서형 목록

(3) dl(description list): 정의형 목록

<h1>ul 태그 목록</h1>
<ul>
    <li>항목 1</li>
    <li>항목 2</li>
</ul>
<h1>ol 태그 목록</h1>
<ol>
    <li>항목1</li>
    <li>항목2</li>
    <li>항목3</li>
</ol>
<h1>dl 태그 목록</h1>
<dl>
    <dt>용어 1</dt>
    <dd>용어 설명 1</dd>
    <dt>용어 2</dt>
    <dd>용어 설명 2</dd>
    <dt>용어 3</dt>
    <dd>용어 설명 3</dd>
</dl>

ul, ol, dl 태그 예시

 

07. 링크와 이미지(a / img)

(1) a 태그: 링크

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

 

* 개발 초기 단계에 작성하면서 링크 대상 경로가 불분명할 때는 <a href="#">링크</a> 로 써두고 나중에 대체.

 

target의 속성값으로는 _blank, _parent, _self, _top이 있으나, 새 탭에서 링크를 여는 방식인 _blank 외에는

거의 사용하지 않음. 

 

target, title 속성은 생략 가능.

 

(2) img 태그: 이미지

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

 

*웹 표준에서는 src 속성과 alt 속성 꼭 사용하도록 권고

 

 

링크 태그 안에는 텍스트 뿐만 아니라 여러 요소가 올 수 있음.

<a href="대상 경로">
	<img src="이미지 경로" alt="대체 텍스트">
</a>

이렇게 이미지 태그를 안에 넣으면 이미지 눌렀을 때 링크로 가도록 함.(사이트 로고 같은 거 클릭하면 메인 페이지로 이동하는 거 생각하면 됨.)