텍스트 요소들이란

혹시 인터넷 하다가 키보드를 잘못 눌러서 브라우저 옆면에 이상한 글자들이 나오는 창이 뜨는걸 본 경험이 있는가? (초등학생 시절에 봤던 그 화면이 내 인생의 동반자가 될 줄은 몰랐지...) 거기 보면 여러 글자들이 나올텐데, 그 친구들을 한번 소개해 보겠다. 오늘 소개한 친구들은 주로 글자를 표시해주는 태그들이다.

h1, h2, h3, h4, h5, h6 (하나둘셋넷다여 육학년이냐?)

제목을 나타내주는 태그들이다. h1이 가장 큰 사이즈를 나타내고, 숫자가 커질 수록 제목의 사이즈는 작아진다. (나중에 Semantic을 소개할때 또 나오겠지만, 숫자가 작을 수록 웹에서의 제목 우선 순위도 높다)

<h1>차 빼 이 친구야 바뻐</h1>
<h2>동석이형❤️</h2>

p

Paragraph를 뜻하는 태그이다. 주로 본문 글자를 표시할 때 사용한다.

<p>나랏말싸미 듕귁에 다라...<p>

br

Line Break를 뜻하는 태그이다. 텍스트를 끊고 다음 줄로 보낼때 사용한다. (이걸로 본문을 띄어쓰는 걸로 꾸미는데 쓰지 말자. 그건 CSS로 해야 된다)

<p>나랏말싸미 듕귁에 다라,<br>문자와로 서르 사맛디 아니할쎄</p>

blockquote, q

blockquote이랑 q 둘다 인용문을 표시할 때 쓰는 태그들이다. 둘의 차이점은 blockquote는 블록 요소이고, q는 인라인 요소이다.

<blockquote>나랏말싸미 듕귁에 다라, 문자와로 서르 사맛디 아니할쎄</blockquote>

<q>나랏말싸미 듕귁에 다라, 문자와로 서르 사맛디 아니할쎄</q>

strong, b

strong이랑 bold 둘다 글자를 두껍게 표시한다. 둘의 차이점은 Semantic을 따라 쓸때 달라지는데, strong은 글의 내용이 중요할 때 써야 하며, bold는 그저 글자를 두껍게 하고 싶을 때 사용한다.

<p>나는 <b>괜찮은데</b>, 너가 배고플거 같아서 <strong>야식으로 치킨을 먹자</strong></p>

em, i

em이랑 i 둘다 글자를 기울어서 표시한다. 둘의 차이점은 Semantic을 따라 쓸때 달라지는데, em은 emphasize(강조하다)의 줄임말이므로, 내용을 강조할 때 사용한다. i는 italic의 줄임말로, 단순히 글자를 기울게 해서 표시할 때 사용한다.

<p>나는 <i>괜찮은데</i>, 너가 배고플거 같아서 <em>야식으로 치킨을 먹자</em></p>

a

Anchor의 줄임말로, 다른 웹페이지로 가는 Hyperlink를 표시하는 태그이다. 링크를 표시할 땐 href라는 attribute로 표시해준다. a 태그는 절대경로와 상대경로가 있는데, 절대경로는 내가 어느 페이지에 있든 간에, 고유 URL로 인도해주고, 상대경로는 내가 있는 페이지가 속한 경로의 형제 파일로 인도해준다.

<a href="https://naver.com">Naver</a>
<a href="야식/야식추천리스트.jpg">야식추천리스트</a>

모든 태그들 다 쓰기엔 너무 빡세서 대표적인 태그들을 소개해봤다. (기술블로그를 MDN같이 만들 수는 없잖아...) 다음엔 구조를 나타내는 포스트를 준비해 보겠다.