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// 설명 목록
<dt1부 씬 첫 만남</dt // 제목
<dd복수를 위해 남주를 찾아나선 여주</dd // 설명
</dl
</li
</ul
어때요?
그렇게 어렵지 않죠?
전 드라마를 좋아해서 드라마를 잘 활용하는 편이에요.
이렇게 저처럼 자신이 좋아하는 글을 태그로 써보는 연습을 해보면 금방 태그를 익힐 수가 있어요.
코딩도 훨씬 재미있게 할 수 있고요.
오늘은 텍스트 관련 태그를 정리해봤는데요.
아직 하나 안 한 게 있어요. 바로 표를 만드는 태그들 인데요, 그건 설명이 좀 필요해서 다음 포스팅으로 넘길게요.
텍스트 관련 태그 중에서 그나마머리 좀 써야 하는 태그거든요.
그럼 편안한 밤 되세요.
