WeniVooks

1. <h> 제목태그

• Heading: 제목

웹 페이지를 하나의 책이라고 생각해 본다면, 제목 태그는 마치 목차와 같습니다. 이 태그는 HTML의 논리 구조에서 매우 중요한 역할을 담당합니다. HTML에서는 <h1>에서 <h6>까지 다양한 제목 태그를 제공합니다. 숫자가 작을수록 크기가 큰 제목을 나타냅니다. 예를 들어, <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>

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

• 한글의 경우는 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

8.<strong>

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

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

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

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

9. <b>

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

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

10.<em>

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

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

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

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

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

11. <i>

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

12.<q>

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

13. <blockquote>

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

14. <cite>

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

15. <address>

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

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

16. <mark>

• 형광펜으로 칠한 것처럼 표시됩니다. 하이라이트 텍스트를 정의할 때 사용합니다.
• 보통 검색 결과에 대한 시각적 효과를 위해 사용합니다.

  

17. <dfn>

• Definition의 줄임말로, 새로운 용어를 처음 설명할 때 사용합니다.

18. <abbr>

• Abbreviation의 줄임말로, 줄임말이나 약어임을 표시할 때 사용합니다.
• title 속성: 약어의 전체 의미를 title 속성에 지정합니다.
• 주로 title 속성과 함께 사용하여 전체 의미를 제공하며, 마우스 커서를 올렸을 때 나타나는 툴팁으로 보여줍니다.

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

19. <sup>

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

20. <sub>

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

21. <kbd>

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