03 HTML 텍스트 관련 태그(1)
html 배우기
< 포트폴리오 홈페이지 만들기 >
03 HTML 텍스트 관련 태그(1)
안녕하세요?
자~ 이제 본격적으로 홈페이지 만드는 코딩을 시작해 볼까요.
우선 홈페이지를 만들기 위해서 배워야 하는 언어가 바로 HTML 이예요. 흔히 인터넷 문서라고 하죠.
html은 그렇게 어렵지 않은 편이에요. 태그들만 알고, DOM 계층만 잘 이해하면 누구나 쉽게 만들 수 있죠.
특히 태그보다 더 신경 쓸 부분이 돔계층이라는 건데요. 쉽게 말해 가계도라고 생각하면 돼요.
돔계층을 얼마나 잘 이해하고 작업하느냐에 따라서 css 작업 시 오류 없이 생각대로 척척 만들어 낼 수 있거든요.
그럼 하나씩 배워볼까요.
태그는 크게 텍스트, 이미지&하이퍼링크, 폼 으로 나눠 볼 수 있는데요.
오늘은 텍스트에 관한 태그들을 정리해보려고 해요.
텍스트 관련 태그
01. 블럭(덩어리)으로 처리하는 태그
: 줄바꿈이 일어나는 블록 요소
<hn>: 제목 표시하기 // h1~h6까지 사용할 수 있는데 h1이 가장 크게 표시되고, h6이 가장 작게 표시된다.
ex) <h1>제목</h1>
<p>: 단락 만들기 <p>텍스트</p>
<br> : 줄 바꾸기
<hr> : 수평선 긋기
<blockquote> : 인용문 넣기 <blockquote> 인용 내용 </blockquote> // 안으로 들어 써짐
ex)
<h1>오늘의 명언</h1> // 제목
<p>요즘 부쩍 힘들어하는 사람들이 많이 찾아온다. // 이렇게 줄 바꿈을 해도 화면에는 줄이 바꿔지지 않는다.
지금의 삶이 많이 불안하고 자기가 잘 하고 있는 건지 모르겠다는 사람들.<br /> // 줄바꿈
내가 보기에는 너무 잘 하고 있는데도 많이 흔들리나 보다.
그래서 그런 사람들에게 늘 해주는 말이 있다. </p>
<hr> // 수평선
<blockquote> "흔들리지 않고 피는 꽃이 어디 있으랴" </blockquote> // 들여쓰기
02. 텍스트를 한 줄로 표시하는 태그
: 줄바꿈이 일어나는지 않는 인라인 요소
<strong>: 강조할 텍스트 굵게 표시하기 <strong>굵게 강조할 텍스트</strong>
<b>: 텍스트 굵게 표시하기 <strong>굵게 표시할 텍스트</strong>
<em>: 강조할 텍스트 이탤릭체로 표시하기 <em>이탤릭체로 강조할 텍스트</em>
<i>: 이탤릭체로 표시하기 <i>이탤릭체로 표시할 텍스트</i>
<q>: 인용 내용 표시하기 <q>인용 내용</q> // " 인용 내용 " 표시 됨
<mark>: 형광펜 효과 내기 <mark>텍스트</mark>
<span>: 줄바꿈 없이 영역 묶기 <span>내용</span>
<small>: 텍스트 작게 표시하기 <small>텍스트</small>
<sub>: 아래첨자 표시하기 <sub>텍스트</sub>
<sup>: 위 첨자 표시하기 <sup>텍스트</sup>
<s>: 취소선 <s>텍스트</s>
<u>: 밑줄 <u>텍스트</u>
ex)
<h2>도깨비 명대사</h2>
<p><strong>너와 함께 한 시간</strong> 모두 <b>눈</b> 부셨다.<br />
<mark>날이 좋아서,</mark> 날이 좋지 않아서, 날이 <i>적당해서</i> <br />
<em>모든 날이</em> 좋았다. </p>
<q>누군가의 <span>인생</span>이건 <u>신</u>이 <small>머물다간</small> 순간이 있다.</q>
<p>비<sub>로</sub> 올게 첫<sup>눈</sup>으로 올게 그것만 할 수 있게 해달라고 <s>신께</s> 빌어볼게</p>
03. 목록을 만드는 태그
1. 순서 없는 목록 만들기
<ul>
<li>내용</li>
<li>내용</li>
</ul>
2. 순서 있는 목록 만들기
: ol 태그 속성으로 순서 목록의 숫자와 순서를 바꿀 수 있음
- type: 숫자 1(기본), 영문 소문자 a, 영문 대문자 A, 로마숫자 소문자 i, 로마숫자 대문자 I
- start: 중간번호 부터 시작
- reserved: 역순으로 항목 표시
<ol>
<li>내용</li>
<li>내용</li>
</ol>
3. 설명 목록 만들기
<dl>
<dt>내용</dt> // 제목
<dd>내용</dd> // 설명
</dl>
ex)
<h1>내성적인 보스</h1> //제목
<ul> // 순서 없는 목록
<li>등장인물
<ol> // 순서 있는 목록
<li>주인공</li>
<li>서브 주인공</li>
<li>조연</li>
</ol>
</li>
<li>스토리
<dl> // 설명 목록
<dt>1부 씬 첫 만남</dt> // 제목
<dd>복수를 위해 남주를 찾아나선 여주</dd> // 설명
</dl>
</li>
</ul>
어때요?
그렇게 어렵지 않죠?
전 드라마를 좋아해서 드라마를 잘 활용하는 편이에요.
이렇게 저처럼 자신이 좋아하는 글을 태그로 써보는 연습을 해보면 금방 태그를 익힐 수가 있어요.
코딩도 훨씬 재미있게 할 수 있고요.
오늘은 텍스트 관련 태그를 정리해봤는데요.
아직 하나 안 한 게 있어요. 바로 표를 만드는 태그들 인데요, 그건 설명이 좀 필요해서 다음 포스팅으로 넘길게요.
텍스트 관련 태그 중에서 그나마 머리 좀 써야 하는 태그거든요.
그럼 편안한 밤 되세요.
