[상단 태그]
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 |