HTML 쉽게 배우기 | 텍스트 태그(p, b, strong, i, em, u, span)

저번 편에서 HTML 문서를 작성했어요.

혹시 기억이 잘 안 나시면 (웹개발 HTML | 쉽게 배우기 1) 편을 참고해주세요.

 

저번에 작성한 HTML 문서가 하얀 도화지라면 이제는 거기에 우리만의 밑그림을 그릴 차례입니다.

 

이번 편에서는 텍스트 위주의 태그들을 알아볼게요.

 

 

 

텍스트 태그:

<p></p>

<span></span>

<b></b> | <strong></strong>

<i></i> | <em></em>

<u></u>

 

 

저번 편에서 처음에 "안녕하세요"를 아무 태그 없이 써도 브라우저에서 보였죠?

그럼 제가 왜 자꾸 텍스트 태그를 언급할까요? 🤔

그건 바로 태그없이 쓴 텍스트는 아무 스타일을 할 수 없기 때문입니다. 

🌟스타일에 대해서는 천천히 알아볼게요

 

 

먼저 <p></p>를 살펴볼게요.

여기서 p 는 paragraph (문장)을 뜻합니다. 말 그대로 문장 또는 어떤 텍스트를 쓸 때 사용합니다.

여기서 텍스트는 글, 숫자, 그리고 특수문자 입니다.

숫자??🤨

네, HTML에서는 모든 게 텍스트입니다.

🌟텍스트와 숫자의 차이점은 나중에 Javascript 편에서 더 자세히 알아볼게요

 

p 태그를 사용해서 작성한 문장/숫자/특수문자

p 태그는 블록 요소라고 하는데, 블록 요소가 뭐냐면 서로 위아래로 쌓이는 요소를 말합니다.

예를 들어서 <p>p 태그 안에 <p>또다른 p 태그</p></p> 이렇게 쓰면 브라우저에 어떻게 보일까요?

p 태그 안에 p 태그

브라우저에 보는 p 태그 안에 p 태그

HTML만 보면 한 줄로 나와야 되는데 브라우저에서는 "또 다른 p 태그" 부분이 바로 밑에 줄로 갔어요.

이게 블록 요소의 특징입니다.

🛑원래는 p 태그 안에 p 태그 사용 안 합니다. 이거 하지 마세요. 여러분들 보여주려고 한 거예요.

❗❗만약에 문장 중간에 줄 바꿈을 하고 싶으시면 <br> 태그를 사용하세요. 이 태그의 존재의 이유가 줄 바꿈입니다.

 

 

 

이제 <span></span>을 볼까요?

span 태그는 p 태그 안에 있는 문장의 부분에 차별화를 줄 때 사용합니다.

예를 들어서 문장의 어느 한 부분에 하이라이트를 주고 싶을 때 사용할 수 있습니다.

스타일이 있는 span과 스타일이 없는 span

하이라이트된 문장과 하이라이트없는 문장

span만 사용하면 아무런 변화가 없습니다. span 자체에는 아무런 스타일이 없기 때문입니다.

위에서 p 태그 안에 p 태그를 사용했을 때 두 줄로 보였는데 span은 아무렇지 않죠?

span은 인라인(inline)요소이기 때문입니다.

인라인 요소란 다른 요소와 같은 라인에 표시되는 요소입니다. 그래서 p 태그 안에 사용했을 때 줄 바꿈이 되지 않고 문장의 한 부분에 스타일을 줄 수 있는 거죠.

style="background: yellow;"
인라인 스타일이라고 합니다.

말 그대로 요소에 스타일을 주는 방법입니다.

style은 대부분의 요소에 사용할 수 있는 속성입니다. 이 속성으로 요소에 원하는 스타일을 줄 수 있습니다.

❗❗요소 스타일에 대해서는 CSS 편에서 좀 더 자세하게 알아볼게요.

 

 

 

<b></b> | <strong></strong> 태그를 볼게요.

둘 다 텍스트를 굵게 만들 때 사용합니다.

차이점은 시각 장애인 분들이 인터넷 할 때 사용하는 프로그램에서 나타납니다.

시각 장애인 분들은 스크린 리더라는 프로그램을 사용해서 웹 사이트에 있는 정보를 알 수 있습니다.

스크린 리더는 말 그대로 브라우저 화면에 있는 내용을 사용자한테 읽어 줍니다.

이 프로그램은 <b> 태그를 이해 못합니다. 그래서 <strong> 태그가 추가 됐죠.

<strong>은 문장 또는 문장의 한 부분에 중요성을 나타낼때 사용합니다.

<b>는 아무것도 없어요. 그냥 텍스트를 굵게 만들죠.

HTML에서 <b> 와 <strong> 사용하는 방법

<b>와 <strong>둘다 텍스트를 굵게 만듭니다.

 

 

 

<i></i> | <em></em>을 볼까요?

둘다 텍스트를 기울입니다.

<b> 와 <strong> 처럼 스크린 리더에서 둘의 차이점이 나타납니다.

<em>은 문장 또는 문장의 한 부분을 강조할때 사용합니다.

HTML에서 <i> 와 <em> 사용하는 방법

<i> 와 <em> 둘다 텍스트를 기울입니다

 

 

 

 

<u> 를 알아볼까요?

u는 텍스트에 밑줄을 칠때 사용합니다.

strong, em 과는 다르게 아무 의미 없습니다. (시멘트 태그가 아닙니다)

개인적으로 이 태그를 잘 사용 안합니다.

만약 텍스트에 밑줄을 쳐야하면 span 으로 할수있습니다.

<u>, <span>으로 밑줄 치는 방법

<u>, <span>으로 밑줄친 텍스트

 

 

 

❓<strong>, <em>을 강조하는 이유
strong 과 em 같이 어떤 의미를 주는 태그를 시멘틱 태그라고 합니다.
HTML5에는 여려가지의 시멘틱 태그들이 있는데, 이 태그들의 용도는 HTML을 의미있게 작성하기 위합입니다.
🌟다른 시멘틱 태그들은 앞으로 차차 알아볼게요

HTML을 의미있게 작성하는게 무슨 의미가 있니?

있죠.
인터넷을 사용하는데 제일 많이 쓰이는 신체부위가 어딜까요?
네, 바로 우리 눈 입니다.

감사하게도 우리는 우리 눈으로 쉽게 보고, 읽고, 판단할수 있지만 그렇지 못한 분들도 있죠.
그런 분들은 인터넷을 할때 우리보다 많은 불편함이 있을수밖에 없죠.

이분들은 인터넷/컴퓨터를 할때 보조장치를 사용합니다. 보조장치를 사용해서 인터넷을 할때 보조장치는 HTML의 시멘틱 태그의 도움으로 사용자에게 정보를 전달합니다.

말이 길어졌는데, 한마디로 정리하자면 웹 접근성에 도움을 주는게 시멘틱 태그 입니다.


⁂저도 웹 접근성을 배우고 있는 중입니다. 같이 공부해요.

 

 

 

이렇게 길어질줄은 몰랐는데, 쓰다보니 길어졌네요.

 

오늘도 수고하셨습니다 🎉👏👏

 

끝!