WeniVooks

검색

HTML/CSS 에센셜

텍스트와 관련된 태그들

1. <h> 제목태그

  • Heading: 제목

웹 페이지를 하나의 책이라고 생각해 본다면, 제목 태그는 마치 목차와 같습니다. 이 태그는 HTML의 논리 구조에서 매우 중요한 역할을 담당합니다. HTML에서는 에서 까지 다양한 제목 태그를 제공합니다. 숫자가 작을수록 크기가 큰 제목을 나타냅니다. 예를 들어, 태그는 가장 크고 중요한 제목을 표시하며, 태그는 상대적으로 작은 제목을 표시합니다. 목차를 통해 책의 전체 내용을 미리 짐작할 수 있듯이, 제목 태그도 웹 페이지의 주요 내용을 한눈에 파악할 수 있도록 돕습니다. 또한, 제목 태그는 검색엔진 사이트나 스크린리더를 사용하는 사용자에게도 매우 중요한 정보로 활용됩니다. 따라서, 웹 페이지를 제작할 때 적절한 제목 태그를 사용하는 것은 페이지의 접근성과 검색 엔진 최적화에 있어서 필수적입니다.

🔍 스크린리더(screen reader)

  • 컴퓨터의 화면 낭독 프로그램입니다. 전맹, 저시력, 난독증과 같은 학습장애, 노인, 다문화가족 등의 웹 접근성을 지원하기 위해 사용합니다
  • ex) 애플의 보이스오버
Mac에서 VoiceOver 켜기 및 끄기내레이터 소개 - Microsoft 지원

V8-8.png 검색엔진은 h 태그에 기반하여 결과물을 보여줍니다! 제목 태그를 잘 설정하는 것도 SEO에 좋은 결과를 가져다줍니다! 제목 태그도 검색어를 고려하여 잘 작성해야겠죠?

주의할 점
  • h1 태그는 한 페이지에 한 번만 사용을 권장합니다.
  • 스타일의 목적으로 h 태그를 사용하지 마세요!
    • 기본적으로 숫자가 커질수록 글자가 작아지는 기본 스타일이 있긴 하지만, 이것을 스타일의 목적으로 사용하면 안 됩니다.
  • h1 ~ h6 순서대로 작성해야 합니다

2. <a>

HTML에서 태그는 하이퍼링크를 만드는 데 사용됩니다. 이 태그는 주로 href 속성을 통해 연결할 URL을 지정합니다. 다음은 href 속성의 다양한 사용 방법입니다.

href 속성값

  • 절대 URL 연결: 전체 URL을 입력하여 외부 사이트로 연결합니다. 예: href="https://www.example.com"
  • 상대 URL 연결: 현재 사이트 내의 경로를 사용하여 연결합니다. 예: href="/about"
  • 같은 페이지의 요소로 연결: 페이지 내의 특정 요소로 이동합니다. 예: href="#section1"
  • tel: 전화번호: 클릭 시 전화 앱이 열리도록 합니다. 예: href="tel:+1234567890"
  • mailto: 이메일주소: 클릭 시 이메일 클라이언트가 열리도록 합니다. 예: href="mailto:example@example.com"

target 속성값

target 속성은 링크를 클릭했을 때 열리는 위치를 지정합니다. 주요 속성값은 다음과 같습니다.

  • _self: 링크를 현재 페이지에서 엽니다. 기본값입니다.
  • _blank: 링크를 새 탭에서 엽니다.

download 속성

download 속성을 사용하면 링크를 클릭할 때 페이지 이동 대신 사용자에게 URL을 저장할지 물어봅니다. 예: <a href="file.pdf" download>Download PDF</a>

인터넷 익스플로러는 download 속성을 지원하지 않습니다.

  • 인라인 요소입니다.

예외적으로 블록 요소들을 감쌀 수 있습니다!

3. <p>

paragraph의 약어로 하나의 문단을 나타냅니다.

  • HTML에서 문단은 이미지나 입력 폼 등 서로 관련 있는 콘텐츠는 무엇이나 될 수 있습니다.
  • 블록 요소입니다

4. <br>

break(line break)의 약어로 줄을 나눈다는 뜻입니다

  • HTML은 엔터 값을 인식하지 않기 때문에 HTML 문서에서 여러 줄로 되어 있어도 실제 화면에서는 한 줄로 보입니다.
  • 텍스트 안에 줄 바꿈 처리를 해줍니다. 2번 연속하여 사용하지 않습니다.

여백을 위해 <p></p> 내용이 없는 p태그를 사용하거나, <br> 태그를 여러 번 사용하지 마세요! 여백은 CSS를 사용하여 적용하는게 적절합니다.

화면에 따른 줄 바꿈 처리를 위해서 br 대신

  1. <span> 태그와 CSS display 속성을 사용
  2. <wbr> 태그 사용

하여 줄 바꿈을 처리하기도 합니다!

5. <wbr>

웹 페이지에서 특정 요소의 줄 바꿈 규칙을 무시하고, 브라우저가 줄을 바꿀 수 있는 위치를 지정하는 방법입니다.

  • 한글의 경우는 CSS의 word-break:keep-all속성과 함께 사용해야 합니다.
    • word-break: 텍스트가 자신의 콘텐츠 박스 밖으로 오버플로 할 때 줄을 바꿀지 지정
    • keep-all : 단어 단위로 줄바꿈 해주는 속성. 한중일(CJK) 텍스트에서는 줄을 바꿀 때 단어를 끊지 않습니다. 비 CJK 텍스트에서는 normal과 동일합니다.

6. <code>

짧은 코드 조각이나 한 줄의 코드를 나타낼 때 사용합니다. 이 태그를 사용하면 텍스트가 고정 폭 글꼴로 표시되어, 코드나 명령어가 다른 텍스트와 구별되도록 합니다.

  • 짧은 코드 조각: 한 줄의 코드나 명령어를 강조할 때 사용됩니다.
  • 고정 폭 글꼴: 텍스트가 고정 폭 글꼴로 표시되어 가독성이 높아집니다.

7. <pre>

공백이 필요한 코드, 혹은 텍스트를 사용해 그림을 그릴 때 사용합니다.

  • HTML에 작성한 내용 그대로를 표현합니다.
  • 텍스트는 고정 폭 글꼴을 사용하고, 공백을 그대로 유지합니다.
7.1 Entity Code

HTML Entity 코드는 HTML 문서에서 특수 문자(공백,<, >, & 등)을 표현하기 위한 특별한 문자열입니다. 브라우저는 이 코드를 해당하는 문자로 렌더링합니다. HTML에서는 일부 기호들이 태그나 특별한 의미를 나타내는 데 사용됩니다. 예를 들어, <와 > 기호의 경우 HTML 태그의 시작과 끝을 나타내며 "의 경우 속성값을 둘러싸는 데 사용됩니다. 이러한 문자를 직접 사용하면 HTML 파싱 오류가 발생할 수 있기 때문에 특수 문자 코드(Entity 코드)로 변환해야 합니다.

자주 쓰이는 Entitiy Code

문자Named Entity
공백&nbsp;
<&lt;
>&gt;
&&amp;
"&quot;
'&apos;
©&copy;

8.<strong>

중대하거나 긴급한 콘텐츠를 나타내는 태그입니다.

  • 기본적으로 굵은 글꼴이 적용됩니다.

  • 스크린 리더를 사용하여 컴퓨터 화면을 낭독할 때 strong 사이에 있는 문자는 거센 억양으로 소리를 내어 발음하여 사용자가 중요한 정보를 쉽게 인식할 수 있도록 합니다.

    경고! 이런 행동은 매우 위험합니다!

9. <b>

과거에 굵은 글씨 처리를 위해 사용한 태그입니다.

  • 사용하지 않는 걸 권장드립니다.

10.<em>

  • Emphasis : 강조, 강한 어조
  • 텍스트의 강세: 강조하고 싶은 텍스트에 강세를 부여합니다.
  • 기울임 꼴: 기본적으로 기울임 글꼴이 적용됩니다.
  • 음성 강조: 음성으로 읽을 때도 문자의 의미를 강조하여 전달합니다.
  • 중첩 가능: 요소를 중첩하면 더 큰 강세를 나타낼 수 있습니다

위 예시에서 <em> 태그는 “개리”라는 단어를 기울여서 표시하여, 문장에서 개리를 강조하고 있습니다. 이는 다음과 같은 두 가지 의미로 해석될 수 있습니다:

  1. 다른 친구들은 다 왔는데 개리만 학교에 오지 않았어요!
  2. 학교에 잘 나오는 개리인데 오늘 학교에 오지 않았어요! 와 같이 ‘개리’에 집중!

위 예시에서 <em> 태그는 “학교에”라는 단어를 강조하여, 문장이 다음과 같이 해석될 수 있습니다

  • 개리가 학교에 오지 않고 다른 곳에 간 것 같아요! 와 같이 ‘학교’에 집중!

11. <i>

  • 기본적으로 기울임 꼴이 적용됩니다.
  • 외국어, 등장인물의 생각 등 일반적인 산문에서 벗어난 경우 사용합니다.

strong, b, em, i 등 모두 굵게, 기울임 등의 스타일을 위해서 사용하지 않도록 합니다! 꼭 스타일을 위해서는 CSS를 이용해주세요!

12.<q>

  • 짧은 인용문: 줄 바꿈이 없는 짧은 인용문에 사용됩니다.
  • <q> 태그를 사용하면 브라우저가 자동으로 인용 부호를 추가합니다.
  • cite 속성: 인용문의 출처 URL을 지정하여 출처를 명확히 할 수 있습니다.

13. <blockquote>

  • 긴 인용문을 나타냅니다.

14. <cite>

  • 저작물의 출처를 표기할 때 사용하며, 제목을 반드시 포함해야 합니다.

15. <address>

<address> 태그는 해당 콘텐츠에 대한 연락처 정보를 나타냅니다.

  • 연락처 정보: 물리적 주소, URL, 이메일 주소, 전화번호, SNS 정보, 좌표 등을 포함합니다.
  • 개인, 조직, 단체의 이름 명시: 연락처 정보를 제공하는 개인, 조직, 또는 단체의 이름을 반드시 적어야 합니다.
  • 위치: 페이지 헤더나 푸터에 배치하여 사업체의 연락 방법으로 사용할 수 있습니다. 또한, article 내에 사용하여 글의 작성자를 나타낼 수도 있습니다.
  • 제한 사항: 연락처 외의 정보(예: 출판일 등)를 포함해서는 안 됩니다.

학원, 병원, 식당처럼 직접적인 연락처가 필수인 곳이라면 이 태그를 꼭 사용하는 것이 좋습니다.

16. <mark>

  • 형광펜으로 칠한 것처럼 표시됩니다. 하이라이트 텍스트를 정의할 때 사용합니다.
  • 보통 검색 결과에 대한 시각적 효과를 위해 사용합니다.
    출처: mdn (https://developer.mozilla.org/ko/search?q=mark)

17. <dfn>

  • 현재 맥락이나 문장에서 정의하고 있는 용어를 나타냅니다. 보통 해당 용어의 설명이 근처에 위치합니다.
  • 보통 문서에서 용어를 처음 소개하거나 정의할 때 사용합니다.
  • title 속성: <dfn> 태그에서 정의하는 용어에 대한 추가 설명이나 완전한 정의를 선택적으로 제공합니다.

본문 컨텐츠(a링크) - 정의 용어(dfn) id로 연결하여 각주 형태로 정리해 두면 좋을것 같습니다!

18. <abbr>

  • 약어(abbreviation)임을 나타내는 태그입니다.
  • title 속성: 약어의 전체 의미를 title 속성에 지정합니다.
  • 주로 title 속성과 함께 사용하여 전체 의미를 제공하며, 마우스 커서를 올렸을 때 나타나는 툴팁으로 보여줍니다.

약어를 풀어서 설명해 준다면 사용자가 문서를 더욱더 이해하기 쉽겠죠?

<dfn> 태그와 <abbr> 태그가 헷갈려요!

  • <abbr>은 약어를 표시하고, <dfn>은 용어를 정의합니다.
  • <abbr>의 title 속성이 주로 약어의 전체 형태를 제공하는 데 반해, <dfn>은 title 속성은 선택적이며 용어의 더 자세한 설명이나 정의를 제공합니다.

이 두 태그는 HTML의 의미론적 마크업을 강화하는 데 중요한 역할을 합니다. 적절히 사용하면 웹 페이지의 접근성과 검색 엔진 최적화(SEO)를 향상시킬 수 있습니다.

  • 이런 방식으로 <dfn>과 <abbr> 태그를 함께 사용하면 용어의 전체 이름(<abbr>의 title 속성)을 제공할 수 있으며, 해당 용어가 문서에서 정의되고 있음을 나타냅니다(<dfn> 태그).

19. <sup>

  • 위 첨자 요소로 지수, 서수 표기를 위해 사용합니다

20. <sub>

  • 아래 첨자 요소로 각주, 변수, 화학식 등을 표기하기 위해 사용합니다

21. <kbd>

  • 키보드 입력, 음성 입력 등 임의의 장치를 사용한 사용자의 입력을 나타냅니다.

🤔 여러분은 HTML에서 가장 중요한 태그가 무엇이라고 생각하나요?

  • 저는 <a>(anchor) 태그라고 생각합니다. 인터넷을 정보의 바다라고 부르죠? 바로 이 태그로 문서와 문서가 연결되면서 우리가 방대한 인터넷의 세상에 살게 되었다고 생각합니다!
3장 일단 글을 적어보자!3.2 목록 관련 태그 ul,ol,dl