쓰윽터디/Front_end

[html] 태그 정리

Kkan 2024. 10. 22. 22:24
728x90
반응형

최근 모 회사에서 면접을 봤다.

기본기가 부족하다는 것을 알았다.

그래서 정리한다.

 

1. html 기초

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document Title</title>
</head>
<body>
  <!-- 컨텐츠들 -->
</body>
</html>

 

  • <!DOCTYPE html>: HTML5 문서임을 선언하는 태그.
  • <html>: 모든 HTML 요소들을 감싸는 루트 요소.
  • -- lang: 문서의 언어를 설정하는 속성. lang="ko"는 한국어로 설정. ( 우리는 한국이니 )
  • <head>: 웹 문서의 메타데이터를 담는 요소.
  • <meta>: 메타 정보를 제공하는 태그. 대표적인 속성은 charset, name, content 등이 있음.
  • -- charset: 문자 인코딩 설정 (일반적으로 UTF-8 사용).
  • -- viewport: 모바일 웹 페이지를 조정할 때 사용.
  • <title>: 페이지 제목을 설정. 브라우저 탭에 표시됨.
  • <body>: 실제로 화면에 보이는 콘텐츠를 담는 요소.

2. 문서 구조 관련 태그

2.1. Heading 태그

  • 태그 이름: <h1> ~ <h6>
  • 용도: 문서에서 제목을 설정하는 태그. <h1>이 가장 중요한 제목이고, <h6>이 가장 덜 중요한 제목임.
  • 속성: -
  • 주의사항: <h1>은 페이지당 하나만 사용해야 함. 다른 레벨의 헤딩은 순차적으로 사용하는 것이 좋음. 이거 쓰면 글자가 태그에 맞게 변하는데, 그거 그대로 쓰지 말 것. 스타일링 하려고 쓰는 태그 아님.

2.2. 단락 태그

  • 태그 이름: <p>
  • 용도: 텍스트를 담는 태그.
  • 속성: -
  • 주의사항: 텍스트를 감쌀 때 블록 요소라서 줄바꿈이 자동으로 포함됨.

2.3. 구분선

  • 태그 이름: <hr>
  • 용도: 주제를 나누는 수평선.
  • 속성: -
  • 주의사항: 이 태그는 시각적인 구분을 위해 사용하지만, CSS로 구분선을 그리는 것이 더 나음. 잘 안쓴다.

3. 컨테이너 및 레이아웃 관련 태그

3.1. Division 태그

  • 태그 이름: <div>
  • 용도: 블록 수준의 컨테이너로, 여러 요소들을 그룹화할 때 사용.
  • 속성: -
  • 주의사항: div는 의미가 없는 단순한 컨테이너이므로, 의미가 있는 요소가 있다면 그걸 사용하는 게 더 좋음.

3.2. Span 태그

  • 태그 이름: <span>
  • 용도: 인라인 수준의 컨테이너로, 텍스트나 다른 인라인 요소를 그룹화할 때 사용. 
  • 속성: -
  • 주의사항: span도 div와 마찬가지로 의미가 없기 때문에, 적절한 다른 태그가 있을 경우 그걸 사용하는 것이 좋음.

4. 링크 및 미디어 태그

4.1. Anchor (링크) 태그

  • 태그 이름: <a>
  • 용도: 다른 페이지나 리소스로 연결하는 링크를 생성.
  • 속성
href: 링크할 URL을 지정.
target: 새 탭에서 열지 여부를 결정 (_blank로 설정 시 새 탭에서 열림).
rel: noopener와 noreferrer를 보안 목적으로 자주 사용.
  • 주의사항: 링크가 없는 경우, 버튼처럼 사용하지 말고 다른 요소를 사용하는 것이 좋음.

4.2. Image 태그

  • 태그 이름: <img>
  • 용도: 이미지를 삽입할 때 사용.
  • 속성
src: 이미지 파일 경로.
alt: 대체 텍스트로, 이미지가 로드되지 않을 경우 표시됨.
width, height: 이미지의 크기 조정.

 

주의사항: 반드시 alt 속성을 설정해야 접근성 및 SEO에 유리함.

 

*** 알아보자 ***

왜 " alt " 속성을 꼭 설정해야 할까?

1. 웹 접근성 측면

alt 속성은 시각적 장애가 있는 사용자가 스크린 리더(Screen Reader) 같은 도구를 사용할 때 이미지를 이해할 수 있도록 도와준다.

스크린 리더는 웹 페이지의 텍스트 내용을 읽어주는 도구인데,

이미지에 alt 속성이 설정되어 있으면 그 내용을 사용자에게 음성으로 전달할 수 있다.

alt 속성이 설정되어 있다면

스크린 리더는 이미지를 설명할 수 있고, 사용자는 어떤 이미지인지 알 수 있다.

설정되어 있지 않다면

스크린 리더는 이미지를 그냥 이미지라고 설명하게 되고, 사용자는 어떤 이미지인지 알 수 없게 된다.

 

따라서, 중요한 정보가 이미지로 제공되는 웹사이트에서는 큰 문제를 일으킬 수 있다.

 

2. SEO 측면

검색 엔진은 이미지 파일 자체를 인식하지 못하기 때문에 alt 속성을 통해 이미지를 텍스트로 설명할 수 있어야 한다.

alt 속성은 이미지의 내용을 텍스트로 설명하기 때문에,

검색 엔진은 이를 분석해 페이지의 내용을 더 정확하게 파악하고 검색 결과에 반영할 수 있게 된다.

alt 속성이 설정되어 있다면

검색 엔진의 간택(?)을 받아 노출될 확률이 높아지고, 페이지 순위에도 긍정적인 영향을 미치게 된다.

설정되어 있지 않다면

이미지 로딩이 실패했을 경우 사용자는 알 수 없게 되고, 접근성을 위반하게 되어 웹사이트에 부정적인 영향을 끼치게 된다.

<img src="shoes.jpg" alt="검정색 운동화" width="300" height="200">

 

 

 

3. 잘 사용해보기

- 사용자에게 이미지를 잘 설명해야하고,

- 장식용 이미지의 경우 헷갈리지 않게 속성을 ''(빈 값) 으로 설정

- 짧고 명확하게 적을 것

 

5. 리스트 태그

5.1. Ordered List 태그 ( ol )

  • 태그 이름: <ol>
  • 용도: 순서가 있는 리스트를 만들 때 사용.
  • 속성
type: 숫자 대신 로마자나 알파벳으로 리스트 항목을 표시 가능
start: 리스트 시작 번호 설정.
  • 주의사항: 적절한 리스트 항목의 순서를 고려해야 함. (사실 크게 사용해본 기억 없음.)

5.2. Unordered List 태그 ( ul )

  • 태그 이름: <ul>
  • 용도: 순서가 없는 리스트를 만들 때 사용.
  • 속성:
type: 원형, 사각형, 또는 디스크 등으로 리스트 마커를 변경 가능.
  • 주의사항: 디자인적으로 마커를 커스텀할 때는 CSS로 처리 가능.

5.3. List Item 태그

  • 태그 이름: <li>
  • 용도: 리스트 항목을 나타냄. <ul>, <ol> 안에서만 사용 가능.
  • 속성: value 속성을 사용해 특정 항목의 순서를 지정 가능.
  • 주의사항: <li>는 반드시 리스트 태그 안에서만 사용해야 함.

6. 폼 관련 태그

6.1. Form 태그

  • 태그 이름: <form>
  • 용도: 사용자의 입력을 서버로 보내기 위한 폼을 생성.
  • 속성
action: 데이터를 보낼 URL을 지정.
method: 데이터를 전송하는 방식 (GET, POST).
  • 주의사항: 적절한 보안 처리가 필요. 비밀번호나 민감한 정보는 POST 방식으로 전송해야 함.

6.2. Input 태그

  • 태그 이름: <input>
  • 용도: 사용자로부터 입력을 받을 때 사용.
  • 속성
type: 입력 필드의 유형 지정 (예: text, password, email, submit 등).
name: 서버로 전송할 때 사용할 이름 지정.
value: 입력 필드의 기본값을 설정.
placeholder: 입력 필드에 힌트를 표시.
required: 필수 입력 필드로 설정.
  • 주의사항: 사용자 경험을 고려해 적절한 입력 유형을 선택해야 함.

6.3. label 태그

  • 태그 이름: <label>
  • 용도: 폼 요소(주로 <input>, <textarea>, <select> 등)에 대한 설명(레이블)을 제공하여 사용자가 어떤 데이터를 입력해야 하는지 명확히 알려줌.
  • 속성
for: 폼 요소의 id와 연결하여 해당 입력 필드에 대한 레이블을 지정. for="inputID"로 설정하면, 해당 ID를 가진 입력 필드와 연동됨.
id: 레이블 자체에 고유한 식별자를 부여할 때 사용. 주로 스타일링이나 스크립트와 연동할 때 사용.
  • 주의사항
반드시 폼 필드와 연결되어야 함.
for 속성을 사용하거나 레이블이 폼 요소를 감싸도록 작성해야 함.
접근성과 사용성을 고려하여 모든 입력 필드에 적절한 레이블을 제공하는 것이 중요함.
레이블 없이 입력 필드가 있으면 사용자가 혼란스러워질 수 있음.

7. 표 관련 태그 

- 필자는 잘 사용하지 않는다. 보통 css로 표를 만든다.( grid / flex )

7.1. Table 태그

  • 태그 이름: <table>
  • 용도: 데이터를 표 형태로 나열할 때 사용.
  • 속성: border, cellpadding, cellspacing 등의 속성을 사용할 수 있지만, CSS로 스타일링하는 것이 더 일반적임.
  • 주의사항: 테이블을 레이아웃 용도로 사용하지 말고, 데이터 표현을 위해서만 사용해야 함.

7.2. Table Row 태그

  • 태그 이름: <tr>
  • 용도: 테이블의 행을 나타냄.
  • 주의사항: <thead>, <tbody>, <tfoot>로 구분해 더 명확한 구조를 가지도록 함.

7.3. Table Data 태그

  • 태그 이름: <td>
  • 용도: 테이블의 데이터를 나타냄.
  • 속성: colspan, rowspan을 사용해 여러 열이나 행을 병합 가능.

7.4. Table Header 태그

  • 태그 이름: <th>
  • 용도: 테이블의 헤더 셀을 나타냄.
  • 속성: scope 속성을 사용해 어느 부분을 헤더로 참조하는지 명시 가능.
  • 주의사항: 데이터 셀과 혼동하지 않도록 주의.

 

이것 말고도 여러 태그가 있는데,

내가 잘 안써서.. 굳이 정리해야하나 라는 생각이 들었다.

지금부터는

내 생각에 정말 중요하다고 느껴지는 것들이다.

 

시맨틱 태그는

HTML5에서 도입된 중요한 개념이다.

문서의 구조를 더 명확하고 의미 있게 만들어 웹 접근성을 높이고, 검색 엔진 최적화(SEO)에 기여할 수 있다고 한다.

시맨틱 태그는 요소 자체에 의미를 부여함으로써, 개발자와 검색 엔진이 문서의 구조를 더 잘 이해할 수 있게 돕는다.

<header> 태그

  • 용도: 문서나 섹션의 머리글 부분을 나타냄. 주로 네비게이션, 로고, 타이틀 등이 포함됨.
  • 특징
페이지 전체의 헤더뿐만 아니라, 각 article이나 section의 헤더로도 사용 가능.
  • 주의사항: 사이트 전체나 섹션의 첫 부분을 나타내기 때문에 문맥에 맞는 정보를 담아야 함.

<section> 태그

  • 용도: 문서의 주요 부분을 구분하는 태그로, 주로 특정 주제를 다루는 콘텐츠를 묶을 때 사용.
  • 특징
논리적인 섹션을 만들 때 사용하며, h1 ~ h6 헤딩과 함께 자주 사용됨.
구체적인 주제나 관련된 내용을 논리적으로 구분할 때 유용함.
  • 주의사항: 단순한 레이아웃을 위한 것이 아니라, 콘텐츠의 의미적 구분에 사용해야 함.

<article> 태그

  • 용도: 독립적으로 배포하거나 재사용할 수 있는 문서의 섹션을 나타냄. 기사, 블로그 포스트, 사용자 리뷰 등 자립적인 콘텐츠에 사용.
  • 특징
다른 페이지로 이동해도 그 자체로 완전한 콘텐츠임.
article 안에 또 다른 article을 중첩할 수 있음
  • 주의사항: 독립적인 콘텐츠에만 사용해야 함. 전체 페이지를 묶는 용도로 사용하지 않음.

<aside> 태그

  • 용도: 주 콘텐츠와는 직접적인 연관성이 없는 추가적인 정보를 제공할 때 사용. 광고, 사이드바, 관련 링크 등이 이에 해당.
  • 특징
주 콘텐츠에 부가적인 정보를 제공하는 용도로 사용됨.
메인 콘텐츠와 별도로, 문서의 부차적인 정보임을 나타냄.
(나는 사용해본 기억이 거의 없다..)
  • 주의사항: 메인 콘텐츠와 완전히 독립적이지 않고, 관련된 부가 정보임을 고려해 사용해야 함.

<footer> 태그

  • 용도: 문서나 섹션의 하단에 있는 정보(저작권 정보, 관련 링크 등)를 포함하는 영역.
  • 특징
페이지 전체의 footer뿐만 아니라, article이나 section 등의 각 부분에도 footer를 추가할 수 있음.
  • 주의사항: 문서나 섹션의 마지막 부분을 구성할 때 사용하며, 문서 전체의 맥락에서 반드시 관련 있는 정보를 포함해야 함.

<nav> 태그

  • 용도: 사이트나 페이지 내에서 탐색할 수 있는 링크들의 모음. 주로 내비게이션 바를 구성할 때 사용됨.
  • 특징
사이트나 페이지의 주요 탐색 링크를 포함함.
여러 nav 요소가 있을 수 있지만, 주 탐색 메뉴와 보조 탐색 메뉴는 구분해서 사용해야 함.
  • 주의사항: 단순한 버튼이나 작은 링크 그룹이 아니라, 웹사이트의 주요 내비게이션 링크 그룹에 사용해야 함.

음.. 

이렇게 정리를 하니까 뭔가 어려운 말 같다.

근데 여러번 사용해보고 간단하게 정리하자면

한 페이지를 작업할 때,

 

header 태그를 두고

section으로 묶어서 작업하고 (그 안은 div로 묶는다.)

footer로 마무리

 

이정도가 가장 간단하게 활용할 수 있는 범위였다.

ARIA(Accessible Rich Internet Applications) 속성

ARIA 속성은 웹 접근성을 높이기 위해 사용되는 속성들이다.

시각적 장애가 있는 사용자나 스크린 리더 사용자가 웹 페이지의 내용을 더 쉽게 이해할 수 있도록 도와준다.

주로 동적 콘텐츠나 복잡한 UI 컴포넌트에 사용된다.

하지만, 이 속성들을 제대로 사용해본 적이 없어 이 내용을 정리하면서 많은 반성을...

 

2.1. aria-label

  • 용도: 시각적으로 제공되지 않는 추가적인 텍스트 설명을 제공.
  • 예시: 버튼이나 링크에 대한 구체적인 설명이 필요할 때 사용됨.
<button aria-label="닫기 버튼">X</button>

2.2. aria-labelledby

  • 용도: 다른 요소의 콘텐츠를 레이블로 지정할 때 사용. 특정 요소가 다른 요소의 제목이나 설명 역할을 할 때 연결해줌.
  • 예시: 텍스트 레이블과 그에 연결된 입력 필드가 있는 경우 유용함.
<label id="nameLabel">이름</label> <input type="text" aria-labelledby="nameLabel">

2.3. aria-hidden

  • 용도: 스크린 리더가 해당 요소를 무시하도록 설정.
  • 예시: 화면에는 표시되지만 시각적 정보가 중요한 경우 스크린 리더에게 읽히지 않도록 함.
<div aria-hidden="true">이 내용은 스크린 리더에서 무시됩니다.</div>

2.4. role

  • 용도: 요소에 특정한 역할을 명시적으로 지정. 예를 들어, div나 span 같은 시맨틱 없는 요소에 버튼이나 알림 등의 역할을 부여할 수 있음.
  • 예시: role="button"을 사용해 div 요소를 버튼처럼 작동하도록 만들 수 있음.
<div role="button" tabindex="0">클릭하세요</div>

2.5. aria-expanded

  • 용도: 드롭다운 메뉴나 아코디언 등의 요소가 열렸는지 여부를 나타냄.
  • 예시: 사용자에게 인터페이스 상태를 알려줌.
<button aria-expanded="false">메뉴 열기</button> <div hidden>여기에 메뉴 내용이 들어갑니다.</div>

많다..

하지만, 한번 정리 했으니 여러번 정독하며 외우고, 실제로 써봐야지

728x90
반응형