민둥 개발자의 계발 블로그

HTML 태그(TAG)#2 글꼴을 바꾸는 태그 본문

Study/HTML

HTML 태그(TAG)#2 글꼴을 바꾸는 태그

민둥산의 민둥이 2022. 4. 10. 22:48

 안녕하세요, 이번 포스팅의 태그는 글꼴을 바꾸는 태그입니다. 우선 시작하기에 앞서 저번 포스팅에서 올렸던 HTML의 소스 코드 바로 정답 먼저 보여드리겠습니다! 

 

HTML 태그 #1 답

<html>
 <head>
  <title>html first</title>
 </head>
 <body>
  <h1>html?</h1>
  <p> 
   Hyper Text Markup Language.<br>
   웹페이지를 만드는 언어.<br>
   웹페이지의 구조를 담당.<br>
   명령(tag)으로 구성되며 tag는 각괄호 안에 들어가며 시작tag와 종료tag의 한 쌍으로 이루어짐.
  </p>
 <hr>
 <h2>body 안의 tag들</h2>
  <p>
   br - 줄바꿈<br>
   p - 문단<br>
   hn - 제목글자(n=1~6)<br>
   hr - 줄긋기(문단 나누기)<br>
   pre - 스페이스바, 엔터키 지정한 값대로 적용(만능은 아님, 제대로는 CSS에서 편집)(고정폭 글꼴)<br>
   b - 글자 굵게(tag 중에서는 작은 포장)
  </p>
 <hr>
<h6>제목글자크기는 6이 한계</h6>
 <hr>

 <pre>
       Pre tag입니다.
    공백을    그대로
    
   살려서 나타냅 니  다.
 </pre>
 <hr>

<h4>풀꽃</h4>
<pre>
</pre>
<pre>                 나태주</pre>
<p>
 자세히 보아야 예쁘다<br>
 오래 보아야 사랑스럽다<br>
 <b>너도 그렇다</b>
</p>
<hr>


 </body>
</html>

저와 비슷하게 코드를 사용하셨나요? 만약 화면이 다르게 나오셨다면 한번 따라 쳐보는 것을 추천드립니다. 그럼 이제 본론으로 들어가서..

 

HTML 글꼴 바꾸는 태그

<b></b>

  • Bold의 약자로, 글씨를 굵게(볼드체로 변형) 해줍니다.

<strong></strong>

  • Strong은 강하다는 의미죠. 강조를 하기 위한 태그입니다.
  • 볼드체와 효과는 같지만 주로 중요하다고 여겨지는 문장에 사용합니다. (태그가 길기에 b보다 비선호)

<i></i>

  • italic의 약자로, 글꼴을 이탈릭체로(기울어지게) 변형하는 태그입니다.

<em></em>

  • Emphasis Element의 약자로, strong 태그처럼 강조할 때 사용합니다.
  • 사실상 i태그와 효과는 동일합니다.

<small></small>

  • small 은 작다는 뜻이죠. 글꼴을 작게 변형시켜주는 태그입니다.

<sup></sup>

  • Superscript의 약자입니다. 윗첨자 뜻이죠.
  • 숫자에 붙는 지수처럼 작은 글씨를 위쪽에 붙일 때 사용하는 태그입니다. 

<sub></sub>

  • subscript의 약자입니다. 아래 첨자라는 뜻이죠.
  • 화학 기호와 같이 밑에 붙는 작은 글씨를 만들 때 사용하는 태그입니다.

<mark></mark>

  • mark는 표시하다라는 뜻입니다.
  • 글자를 형광펜으로 하이라이트 하는 듯한 효과가 있습니다.

 

그럼 이제 글꼴을 바꾸는 태그는 끝입니다! CSS를 배운다면 글자의 크기나 색깔 등을 조금 더 다양하게 바꿀 수 있다고 하니 다들 파이팅 해서 HTML 끝내고 CSS도 열심히 배웁시다!

 

※주의사항

글꼴을 바꾸는 태그는 중복 사용이 가능합니다. 예를 들면 <b><i> 내용물 </b></i> 이런 식으로 말이죠. 하지만 중요한 점은 먼저 시작하는 태그가 나중에 오는 태그를 감싸는 식으로만 사용되어야 합니다. <b><i> 내용물 </b></i> 이런 식으로 사용하면 오류가 생긴다는 말이죠. 현재로써 HTML의 오류는 눈에 잘 보이지 않지만 나중에 CSS와 Javascript를 합쳐 웹페이지를 만들 때 큰 문제가 될 수 있으므로 배울 때 미리미리 방지해야 해요!

 

============================================================================

오늘 배운 태그를 사용하여 아래와 같은 페이지 만들기! (정답은 마찬가지로 다음 포스팅에..)

html tag

글자를 변경하는 tag들 - 속포장tag(inline tag)

b - bold bold 볼드체(선 굵게)
strong - strong storng(중요하다는 의미에서) 볼드체
i - italic italic 이텔릭체(기울이기)
em - em em(강조한다는 의미에서) 이텔릭체
small - small small(글자크기 작게)(*big은 없음)
sup - sup sup(윗첨자)
(ex)10cm2
sub - sub sub(아랫첨자)
(ex)H2O
mark - mark mark(하이라이트)

중복적용시 주의사항

1. bold+italic(o)(ib, bi)
2. bold+italic(o)(bi, ib)
3. bold+italic(x)(bi, bi)
4. bold+italic(x)(ib, ib)
- 시작과 종료의 tag가 서로 감싸야만 한다

주석 tag

 

 

 

반응형
저작자표시 (새창열림)

'Study > HTML' 카테고리의 다른 글

HTML#4 정답 공개 및 추가 문제!  (0) 2022.04.18
HTML#4 테이블 만들기!  (4) 2022.04.12
HTML 연습! 심심해서 직접 해보았습니다!  (2) 2022.04.11
HTML 태그#3 목록 태그 및 특수문자 출력!  (0) 2022.04.11
HTML 사용하기! HTML 태그(Tag) 종류#1  (0) 2022.04.05
'Study/HTML' Related Articles more
Comments