WeniVooks

1. 제목 태그 (h1~h6)

Heading: 제목

웹 페이지를 하나의 책이라고 생각해 본다면, 제목 태그는 마치 목차와 같습니다. 이 태그는 HTML의 논리 구조에서 매우 중요한 역할을 담당합니다.

HTML에서는 <h1>에서 <h6>까지 다양한 제목 태그를 제공합니다. 숫자가 작을수록 중요도가 높은 제목을 나타냅니다.

목차를 통해 책의 전체 내용을 미리 짐작할 수 있듯이, 제목 태그도 웹 페이지의 주요 내용을 한눈에 파악할 수 있도록 돕습니다. 또한, 제목 태그는 검색 엔진이나 스크린리더를 사용하는 사용자에게도 매우 중요한 정보로 활용됩니다.

• HeadingsMap(구글 확장 프로그램)
• Daum 제목태그 구조 살펴보기

2. 앵커 태그 (a)

<a> 태그는 하이퍼링크를 생성하는 데 사용되는 기본 요소입니다. href 속성을 통해 연결할 URL을 지정하며, 텍스트나 이미지 등 다양한 콘텐츠를 링크로 만들 수 있습니다. 사용자가 클릭하면 지정된 위치로 이동하여 웹 페이지 간 이동을 가능하게 합니다.

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 속성은 링크를 클릭했을 때 열리는 위치를 지정합니다. 주요 속성값은 다음과 같으며, _blank 속성을 가장 많이 사용합니다.

• _self: 링크를 현재 페이지에서 엽니다. (기본값)
• _blank: 링크를 새 탭에서 엽니다.
• _parent: 부모 프레임에서 엽니다.
• _top: 최상위 창에서 엽니다.
• 프레임명: 지정된 프레임이나 창에서 엽니다.

download 속성

download 속성을 사용하면 링크를 클릭할 때 페이지 이동 대신 파일 다운로드를 수행합니다. 예: <a href="document.pdf" download="새파일명.pdf">PDF 다운로드</a>

• about.html , products.html 등 연결되는 페이지를 생성 후, 페이지 네비게이션 실습도 해봅시다.

3. 문단 태그 (p)

Paragraph(문단)의 약어로, 하나의 문단을 나타내는 HTML 요소입니다. 우리가 책이나 신문에서 보는 문단과 같은 개념으로, 관련된 내용들을 하나로 묶어주는 역할을 합니다.

• <p> 태그로 감싸진 내용은 문단 사이에 자동으로 여백이 생기며, 의미적으로 하나의 완결된 내용임을 브라우저에 알려줍니다.
• 검색 엔진이 내용을 더 잘 이해할 수 있습니다.
• 블록 요소입니다.

4. 줄바꿈 태그 (br)

Break(line break)의 약어로 줄을 나눈다는 뜻입니다. 닫는 태그가 없으며, 내용을 담지 않고 오직 줄바꿈 기능만 수행합니다.

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

5. 줄바꿈 기회 태그 (wbr)

<wbr>(Word Break Opportunity) 태그는 긴 단어나 URL 등이 화면 밖으로 넘어갈 때, 브라우저가 줄을 바꿔도 되는 위치를 미리 지정해주는 태그입니다.

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

6. 코드 태그 (code)

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

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

7. 서식 유지 태그 (pre)

<pre>(Preformatted) 태그는 공백이 필요한 코드, 혹은 텍스트를 사용해 그림을 그릴 때 사용합니다.

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

7.1 Entity Code

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

자주 쓰이는 Entitiy Code

8. 중요 태그 (strong)

<strong> 태그는 중요한 내용, 경고, 핵심 정보를 나타낼 때 사용합니다.

• 의미적으로 "이 부분은 특히 중요하다"는 것을 표현합니다.

• 기본적으로 굵게 표시되지만, 핵심은 시각 효과가 아니라 의미(importance)입니다.

• 몇몇 스크린리더는 <strong>을 만나면 억양을 달리하거나 강조하여 읽어, 사용자가 중요한 정보를 인식할 수 있도록 도와줍니다.

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

9. 강조 태그 (em)

<em> 요소는 강조(emphasis)를 표현합니다. 문장 안에서 특정 단어에 강세를 두고 싶을 때 사용합니다.

• 기본적으로 기울임꼴(italic)로 표시되지만, 중요한 것은 억양과 강조의 의미 변화입니다.
• 중첩 사용이 가능하며, 중첩될수록 강조의 정도가 더 강해지는 의미를 가집니다.

10. 이탤릭 태그 (i)

<i> 태그는 문장 흐름과 다른 성격의 텍스트를 나타낼 때 사용하며, 기본적으로 기울임꼴로 표시됩니다.

사용 예시

• 외국어
• 기술 용어
• 생각이나 내면의 독백
• 인용 속 등장인물의 말투
• 아이콘 글리프

<em>처럼 "강조"의 의미는 아니고, "성격이 다른 텍스트"를 표시하는 용도에 가깝습니다.

11. 인라인 인용 태그 (q)

<q> 태그는 짧은 인용문을 나타냅니다.

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

12. 블록 인용 태그 (blockquote)

<blockquote> 태그는 긴 인용문을 나타냅니다. 블록 레벨 요소로, 들여쓰기되어 표시됩니다.

13. 출처 태그 (cite)

<cite> 태그는 저작물의 출처를 표기할 때 사용하며, 제목을 반드시 포함해야 합니다. 기본적으로 기울임꼴로 표시됩니다.

14. 연락처 태그 (address)

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

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

15. 하이라이트 태그 (mark)

<mark> 태그는 형광펜으로 칠한 것처럼 하이라이트된 텍스트를 정의할 때 사용합니다.

• 보통 검색 결과에 대한 시각적 효과를 위해 사용합니다.
• 기본적으로 노란색 배경으로 표시됩니다.

  

16. 정의 태그 (dfn)

<dfn>(Definition)은 새로운 용어를 처음 설명할 때 사용합니다.

17. 약어 태그 (abbr)

<abbr>(Abbreviation)은 줄임말이나 약어임을 표시할 때 사용합니다.

• title 속성: 약어의 전체 의미를 title 속성에 지정합니다.
• 마우스 커서를 올렸을 때 나타나는 툴팁으로 전체 의미를 보여줍니다.

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

18. 위 첨자 태그 (sup)

<sup>(Superscript)는 위 첨자 요소로, 지수나 서수 표기에 사용합니다.

19. 아래 첨자 태그 (sub)

<sub>(Subscript)는 아래 첨자 요소로, 각주, 변수, 화학식 등을 표기하기 위해 사용합니다.

20. 키보드 입력 태그 (kbd)

<kbd>(Keyboard)는 키보드 입력, 음성 입력 등 임의의 장치를 사용한 사용자의 입력을 나타냅니다.