# HTML 심화

Doozuu·2022년 9월 25일
html시맨틱태그웹 접근성
0

HTML

목록 보기
2/2

1. 상단의 태그들

DOCTYPE

  • 문서가 어떤 형식과 버전으로 작성되었는지를 명시
  • 선언시 standards mode(최신 형식)로 문서 실행
  • 비선언시quirks mode(옛날 브라우저를 모방)로 문서 실행

head 태그

: 메타데이터(기계가 읽을 정보)가 담기는 곳

1. title 태그 : 웹페이지 제목

  • 브라우저의 탭에 표시됨.
  • 즐겨찾기 제목&검색결과 제목으로 표시됨.

2. 파비콘(favicon) : 브라우저 탭에 표시되는 아이콘

  • 오늘날에는 .png .gif 파일로 파비콘 사용 가능.
<link rel="shortcut icon" href="./favicon.png" type="image/x-icon">

👉🏻 브라우저 탭에 표시되는 favicon 과 title

3. CSS와 자바스크립트 등의 코드 및 링크

4. meta 정보

  • charset : 페이지가 어떤 문자로 작성되었는지 명시 -> 글자 깨짐 방지
    UTF-8 : 전세계 거의 모든 문자를 표현할 수 있는(유니코드) 형식
    html 태그의 lang 속성은 '언어'이고, charset은 '문자'이다.
<meta charset="UTF-8">
  • IE 관련 호환정보 : 익스플로어에서 열람시 어떤 모드로 실행할 것인지 지정
    IE=edge : 해당 익스플로어 버전에서 가장 최신 형식으로
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  • 뷰포트 관련 정보 :
    viewport: 화면에 보여지고 있는 영역
    ⚠️ 모바일에서는 키보드에 의해 화면이 밀려나는 경우, 실제 레이아웃과 보여지는 것이 달라질 수 있음.
    모바일 웹 사이즈 확인은 개발자 도구 상단의 두 번째 아이콘 클릭 👇🏻
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  • Open Graph 정보 : Meta(구 페이스북)에서 만든 프로토콜
    아래처럼 링크보냈을 때 미리보기 페이지가 함께 뜨게 해줌.
<meta property="og:title" content="얄코의 HTML & CSS 강좌">
<meta property="og:description" content="얄코의 최신 강좌! 웹 개발을 위한 HTML과 CSS 지식들을 '떠먹여'드립니다.">
<meta property="og:image" content="https://showcases.yalco.kr/html-css-scoop/03-01/yalco.png">



2. 웹 접근성

웹 접근성이란?

장애인이나 고령자분들이 웹 사이트에서 제공하는 정보를 비장애인과 동등하게 접근하고 이용 할 수 있도록 보장하는 것으로 웹 접근성 준수는 법적의무사항 이다.

참고자료

W3C https://www.w3.org/WAI/fundamentals/accessibility-intro/ko
NULI https://nuli.navercorp.com -> 다양한 사람들 입장에서 체험

주요 내용

  1. 이미지의 alt 속성에 설명넣기
    ⭐️ 이미지에는 alt를 무조건 넣어야 한다.
    시각장애인이 사용하는 스크린 리더에서 해당 내용을 읽어준다.
  1. 의미 없는, 또는 읽을 필요 없는 이미지에는 공백의 alt 속성 사용하기
    alt=""
    alt를 넣지 않으면 스크린 리더가 src 값을 읽게 된다.
  2. alt에 적을 설명이 너무 많은 경우, img > p 태그에 설명 적어주기
    이 경우 p 태그의 글자가 불필요하게 화면에 나타나므로 안보이게 숨겨줘야 함.
    (눈에 보이지는 않고 스크린 리더에는 읽힐 수 있도록)
    -> sr-only CSS 활용
  3. aria-label 속성으로 설명 넣기
  4. aria-hidden 속성과 role 속성
  • 이모지나 SVG 요소 등을 스크린 리더에게만 감추고 싶을 때
    aria-hidden = true
  • 특정 정보를 나타내는 이모지나 SVG 요소 등을 스크린 리더가 특정 텍스트로 읽도록 할 때
    role 속성으로 이미지임을 명시, aria-label 속성으로 설명 넣기



3. 시맨틱 태그

시맨틱 태그란?

태그 자체에 의미가 담긴 태그를 뜻한다.

  • div랑 기능적으로 동일하지만 특정 의미(역할)를 나타낸다.
  • div를 남용하지 말고 적절한 시맨틱 태그를 활용해야 한다.

시맨틱 태그의 장점

  1. 웹 접근성 개선 : 스크린 리더를 사용하는 사람들이 필요한 정보를 보다 수월히 찾을 수 있음.
  2. SEO(Search Engine Optimization) : 검색엔진 최적화, 검색엔진이 페이지를 분석할 때 각 정보의 종류를 파악하는데 도움됨.
  3. 유지보수와 가독성 : 모든 구획이 div로만 구성된 페이지보다 코드 구조를 파악하기 쉬움.

시맨틱 태그의 종류

페이지나 구획의 제목 역할
활용: 로고, 제목, 검색창 등

링크들을 포함
활용: 메뉴, 색인 등

페이지나 구획의 최하단에 보여짐
활용: 페이지의 주인 연락처, 저작권 정보 등

<main>

페이지의 주요 내용 포함
페이지에 하나만 존재해야 함

<aside>

사이드바 등 주요 내용과 간접적으로 연관된 컨텐츠 포함

<section>

페이지의 컨텐츠를 일정 단위의 구획으로 나누는데 사용
더 작은 단위의 컨테이너는 div를 사용

<article>

페이지 내에서 재사용될 수 있거나, 다른 페이지에서도 사용될 수 있는 컨텐츠에 사용(반복되는 요소)
활용 : 기사, 블로그 포스트, 댓글 등

💡 figure, figcaption



4. 가독성을 위한 이름 짓기

1. 태그 위주

  • 단점 :
    선택자가 너무 길어짐
    요소를 식별하기 어려움
    위치와 태그가 같지만 종류가 다를 경우 구별하기 어려움
article { /* ... */ }
article aside { /* ... */ }
article aside figure { /* ... */ }
article div header { /* ... */ }
article ul li { /* ... */ }
article div ul li { /* ... */ }
article div ul li.special { /* ... */ }
/* ... */

2. 클래스 위주

  • 단점 :
    선택자가 너무 길어짐
    종속 관계 명시 없이는 중복될 수 있는 클래스가 있음
.card { /* ... */ }
.card .thumb { /* ... */ }
.card .thumb .image { /* ... */ }
.card .body .title { /* ... */ }
.card .body .list { /* ... */ }
.card .body .list .list-item { /* ... */ }
.card .body .list .list-item.special { /* ... */ }

3. BEM(Block Element Modifier)

⭐️ 블록(컴포넌트) 단위로 명명하는 방식

.BLOCK__ELEMENT--MODIFIER { /* ... */ }
  • 장점 :
    선택자가 간결하고 명확해짐
    높은 가독성, 이해하기 쉬운 구조
.card { /* ... */ }
.card__thumb { /* ... */ }
.card__image { /* ... */ }
.card__title { /* ... */ }
.card__list { /* ... */ }
.card__list-item { /* ... */ }
.card__list-item--special { /* ... */ }

💡 관련 참고자료:
https://en.bem.info
https://9elements.com/bem-cheat-sheet/



5. 기타 미디어

SVG(Scalable Vector Graphic)

  • 벡터 그래픽 : 이미지가 픽셀로 이루어진게 아닌 선과 면의 공식으로 만들어짐

  • 장점

    1.확대해도 이미지가 깨지지 않음
    2.페이지에서 빠르게 로드됨
    3.간단한 이미지의 경우 유용함
    -> 사이트 용량 줄일 수 있음. (복잡한 이미지는 x)

  • 연결 방법

    방법 1. SVG 파일을 img 태그의 src로 연결
    방법 2. SVG 코드를 css에 직접 넣기

💡 유용한 SVG 관련 툴

https://www.shapedivider.app
https://app.haikei.app

오디오와 동영상

속성 : src, controls, autoplay, loop

  • autoplay 자동으로 막혀있을 수 있음. (지양됨)
  • 환경과 브라우저마다 지원하는 파일 형식이 다름
    👉🏻 여러 형식 넣어서 다양한 옵션 제공
    👉🏻 Can I Use 사이트에서 어떤 파일 지원하는지 확인

연결 방법

  1. src 속성을 사용한 링크
  2. source 태그를 사용한 링크



출처:
https://www.inflearn.com/course/제대로-파는-html-css/unit/109346?tab=curriculum

profile
Doozuu
모든게 새롭고 재밌는 프론트엔드 새싹
이전 포스트

# HTML

0개의 댓글