[NO.04-1] HTML Font 태그 - 글꼴 태그

2023. 6. 29. 00:59HTML&CSS

이번 시간에는, 

 

글꼴태그,

목록태그,

표(Table)태그에 대해서 배워보겠다.

 

<글꼴 태그>

- <h1> ~ <h6> Heading

웹 페이지의 제목 또는 부제목을 표현할 때 사용하며, 숫자가 작을수록 큰 제목을 표시하는데 사용한다.

 

<h1> ~ <h6> 태그 예시
Go&nbsp; live server 실행 했을 떄

 

- <p> Paragraph

하나로 문단을 표시할 때 사용한다.

 

<h1> + <p> 태그 에시
김치볶음밥의 설명이 잘 나온다.

- <hr> Horizontal Rule

가로로 선을 긋는 태그이다. (종료태그 없음!!!)

<hr> 태그 예시
가로줄이 생긴 걸 확인할 수 있다.

 

- <br> Break

줄바꿈 태그로 HTML에서 개행 역할을 한다. (종료태그 없음!!!)

 

<h1> + <p> + <br> 태그 예시

 

한 줄 띄어서 나온 것을 볼 수 있다.

- < i > Italic

택스트를 이텔릭체로 표시할 떄 사용한다.

이텔릭체 예시

 

- <em> Emphasis

텍스트를 이텔릭체로 강조할 때 사용한다.

 

- <b>  Bold

텍스트를 진하게 표시할 떄 사용한다.

 

- <strong>

텍스트를 진하게 강조할 떄 사용한다.

 

- < i >와 <em>, <b>와 <strong>의 차이점

각 쌍의 앞 부분들은, 그저 표시하는 역할만 한다. 그러나, 후자 부분들은 표시 + 강조, 즉 이 html을 읽는 사람에게

강조하고 싶을 때 쓴다.

ex) 스크린리더 (시각장애인이 컴퓨터를 사용할 떄 화면에 나타나는 정보들을 음성으로 출력해주는 화면낭독 프로그램)을 사용 할 때, strong 태그를 사용한 부분은 거센 억양으로 음을 낼 수 있도록 재구성 가능.

 

< i >, <em>, <b>, <strong> 태그 예시
동해와 물과 백두산이 이텔릭체로, 남산과 소나무가 강조 표시가 되었다.

 

다음 글에서는 목록 태그에 대하여 알아보도록 하자.

'HTML&CSS' 카테고리의 다른 글

[NO.04-3] HTML Table 태그 -표 태그  (0) 2023.06.30
[NO.04-2] HTML List 태그 -목록 태그  (1) 2023.06.29
[NO.03] Emmet에 관하여  (3) 2023.05.28
[NO.02] HTML이란 무엇인가? (2)  (1) 2023.05.25
[No.01] HTML이란 무엇인가? (1)  (0) 2023.05.23