HTML 기초 - 2

2023. 10. 3. 18:19·프로그래밍 언어/HTML & CSS

[상단 태그]

 

DOCTYPE

- 문서가 최신 형식인 HTML5로 작성됐다는 것을 의미함

- 선언하지 않을 경우 옛날 브라우저를 모방하여 HTML 문서를 읽는다.

 

<head>

- 기계가 읽을 정보인 메타데이터가 담기는 곳이다

(페이지의 제목, 파비콘(아이콘), 기타 메타정보, CSS,JS의 코드 및 링크)

 

<title>

- 브라우저의 탭에 표시

- 브라우저 즐겨찾기의 제목으로 표시

- 검색엔진 검색결과의 제목으로 표시

 

 

[meta 태그와 속성들]

<meta charset=“UTF-8”>

- 페이지가 어떤 문서로 작성되었는지를 명시한다.

- UTF-8이란 전세계 거의 모든 문자를 표현할 수 있는(유니코드) 형식이다.

- 문서 저장형식도 UTF-8로 맞춘다.

- html 태그의 lang 속성은 검색 엔진에서 이 사이트가 어떤 언어로 되어있는지를 알려주는 것이고, charset은 UTF-8을 써서 어떤 문자를 나타낼 수 있는 사이트를 만들겠다는 것. (문자 인코딩)

 

 

 <meta http-equiv="X-UA-Compatible" content="IE=edge">

- 익스플로어에서 열람 시 어떤 모드로 실행할 것인지 지정하는 것

- IE=edge는 해당 익스플로러 버전에서 가장 최신 형식으로 읽으라는 것

 

익스플로어 지원이 끊긴만큼 추후에는 안 쓰일 확률이 높음

 

 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

뷰포트란 화면에 보여지는 영역을 말한다.

- 시각적 뷰포트 : 사람에게 보이는 영역

- 레이아웃 뷰포트 : 브라우저가 웹페이지를 그리는 영역

 

[content 속성 안의 항목들]

 

width : 뷰표트의 너비,

device-width : 기기의 화면 너비.

inital-scale : 페이지가 처음 로드될 때의 줌 레벨 (기본 1.0)

 

maximun-scale : 최대 줌 레벨 (비추)

minimun-scale : 최소 줌 레벨 (비추)

user-scalable : 사용자가 핀치로 줌인, 줌아웃 가능 여부 (비추)

위의 3개는 모든 브라우저에 적용되지않음. 즉 일관성이 없음

그래서 사용하지 않는 것이 좋음

 

 

 

 

 

[Open Graph 정보]

 

<meta property="og:title" content=“제목>
<meta property="og:description" content=“내용.”>
<meta property="og:image" content=“사진.png">

페이지 링크를 공유 했을 때, 제목이나 텍스트 이미지가 나오는 부분이 있는데, 그 부분을 설정하는 것이다. 

 

 

 

 

 

[파비콘]

 

<link rel="icon" href=“사진.png" type="image/x-icon">

이미지 경로를 지정하면 파비콘이 나오게 된다.

 type="image/x-icon”는 연결된 파일이 아이콘 이미지임을 브라우저에게 알림

 

 

 

 

 

[웹 접근성]

 

 

- 이미지는 alt 속성에 설명을 넣을 것 

- 의미 없거나 읽을 필요 없는 이미지에도 공백의 alt 속성이 필요하다

(alt을 넣지 않으면 스크린 리더가 파일명(src값)을 읽게 된다.

- 숨겨진 요소에 설명을 넣는다

 

class명을 sr-only로 지정하고,

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

위의 속성을 지정하면, 사용자의 눈에는 안 보이나, 스크린리더는 읽을 수 있게 할 수 있다.

 

 

aria-label 속성으로 설명 넣기

- 속성에 aria-label=“안녕” 을 넣으면 스크린 리더가 “안녕”을 읽는다.

 

aria-hidden, role 속성

- 이모지나 svg 요소등을 스크린 리더가 읽지 않게 하려면

aria-hidden : true 속성을 적용하면 된다.

 

이모지나 svg 요소등을 스크린 리더가 특정 텍스트로 읽게 하려면

role = “image” aria-label =“이미지” 속성을 적용하면 된다.

 

이미지 역할임을 알림과 동시에 “이미지”라고 읽게 할 수 있음

 

 

 

 

 

[시멘틱 태그]

 

- 시멘틱 태그는 기능적으로 div 태그와 동일

- 각각의 종류 자체가 페이지에서 해당 요소가 갖는 의미와 역할을 나타냄

- 웹 접근성이 개선되고, 유지보수와 가독성이 좋아진다.

 

 

<header>

페이지나 구획의 제목 역할을 하는 요소들을 두는데 사용

로고, 제목, 검색창 등

 

<nav>

링크들을 포함하는 태그

페이지의 메뉴들, 색인 등

 

<footer>

페이지나 구획의 최하단에 보여지는 푸터에 사용

연락처, 저작권 정보 등

 

<main>

페이지의 주요 내용이 들어가는 곳

페이지에서 하나만 존재해야 함

 

 <aside>

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

 

<section>

페이지의 컨텐츠를 일정 단위의 구획으로 나누는 데 사용

더 작은 단위의 컨테이너는 div 사용

 

<article>

페이지 내에서 재사용될 수 있거나, 다른 페이지에서도 사용될 수 있는 컨텐츠에 사용

기사,블로그 포스트, 댓글 등

'프로그래밍 언어 > HTML & CSS' 카테고리의 다른 글

CSS Flexbox 개념을 정리해보자!  (0) 2023.12.24
CSS Flex 기초  (0) 2023.10.02
CSS 기초 - 3  (0) 2023.10.01
CSS 기초 - 2  (0) 2023.09.26
CSS 기초 - 1  (0) 2023.09.25
'프로그래밍 언어/HTML & CSS' 카테고리의 다른 글
  • CSS Flexbox 개념을 정리해보자!
  • CSS Flex 기초
  • CSS 기초 - 3
  • CSS 기초 - 2
tteokbokki-master
tteokbokki-master
공부하며 알아가는 걸 조금씩 정리하고 있어요
  • tteokbokki-master
    용로그
    tteokbokki-master
  • 전체
    오늘
    어제
    • 분류 전체보기
      • 프로그래밍 언어
        • HTML & CSS
        • JavaScript
        • React 기초
        • 파이썬 기초
        • TanStack-Query
        • C언어 기초
        • git
        • 리눅스
        • 코딩테스트 공부
      • 개발 지식
      • 언어학
        • 의미론
      • 회고 및 기록
      • 프로젝트
        • TodoList 만들기
        • 학수고대 프로젝트
      • 기타
        • [JS-0기] 한입 FE 챌린지
        • 서평
  • 인기 글

  • 글쓰기 / 관리
  • hELLO· Designed By정상우.v4.10.3
tteokbokki-master
HTML 기초 - 2
상단으로

티스토리툴바