👉🏻 사실 이번 섹션은 하루만에 배우는 양이 많고, 당장 필요성을 크게 느끼지 못해 학습 과정에서 조금 쳐지지 않았나 싶다. 그래도 간단하게 블로그로 작성해보면서 정리해보았다.
아직 <div>로 작성하는 것이 익숙하여 시맨틱 요소로 작성하는 것이 어색했다.
🔎 웹이란
웹이란공간이다. (문서, 이미지, 영상 등 다양한 정보를 여러 사람들과 공유할 수 있는 공간)
🔎 웹 표준이란
웹표준이란웹에서 표준적으로 사용되는 기술이나 규칙으로, 웹 페이지 제작 기법을 담고 있으며 웹개발에 사용되는 언어인 HTML(구조), CSS(표현), JAVAScript(동작) 등의 기술을 다룬다웹 표준의 장점
- 유지 보수의 용이성
- 웹 호환성 확보
- 검색 호율성 증대
- 웹 접근성 향상
🔎 Semantic HTML
웹 표준에서는 HTML을 시맨틱하게 작성하는 것의 중요성을 강조한다.
semantic: 의미의, 의미가 있는 이라는 뜻의 영단어HTML: 화면의 구조를 만드는 마크업 언어
위처럼 단순히<div>,<span>요소로만 화면을 구성하지 않고, 시맨틱 요소로 화면을 구성하니 요소의 이름만 보고도 화면에서 어떤 역할을 하는지, 어떤 담게 될지 명확하게 알 수 있게 되었다.
Semantic HTML의 필요성
1.개발자간의 소통
2. 검색 효율성
3. 웹 접근성
Semantic HTML의 종류
요소 종류 설명 <heder>페이지나 요소의 최상단에 위치하는 머릿말 역할의 요소 <nav>메뉴,목차 등에 사용되는 요소 <aside>문서와 연관은 있지만, 직접적인 연관은 없는 내용을 담는 요소 <main>이름 그대로 문서의 메인이 되는 주요 콘텐츠를 담는 요소 <article>게시글, 뉴스 기사 등 독립적으로 구분해 재사용할 수 있는 부분을 의미하는 요소. 각각의 을 구분하기 위한 수단이 필요하며, 보통 제목 <hgroup>을 포함하는 방법을 사용.<section>문서의 독립적인 구획을 나타내며, 딱히 적합한 의미의 요소가 없을 때 사용. 제목()을 포함하는 경우가 많다. <hgroup>제목을 표시할 때 사용하는 요소로, <h1> ~ <h6>요소가<hgroup><footer>페이지나 요소의 최하단에 위치하는 꼬릿말 역할의 요소
🔎 자주 틀리는 마크업
1. 인라인 요소, 블록 요소
// h1, div 요소는 블록 요소이고, // a, span 요소는 인라인 요소입니다. <a href=""> <h1>나쁜 예시 1</h1> </a> <span> <div>나쁜 예시 2</div> </span> <div><span>올바른 예시</span></div>
2. <strong> 요소와 <em> 요소 사용하기
<b>글씨를 두껍게</b> -- 대체하기 --> <strong>콘텐츠 매우 강조하기</strong> <i>글씨 기울이기</i> -- 대체하기 --> <em>콘텐츠 강조하기</em>
3. <hgroup> 올바르게 사용하기
// 나쁜 예시 <h1>엄청 큰 글씨</h1> <h3>적당히 큰 글씨</h3> <h2>큰 글씨</h2> <h6>엄청 작은 글씨</h6> <h4>그냥 글씨</h4> // 좋은 예시 <h1>제목</h1> <h2>큰 목차</h2> <h3>작은 목차</h3> <h3>작은 목차</h3> <h2>큰 목차</h2> <h3>작은 목차</h3> <h4>더 작은 목차</h4> <h4>더 작은 목차</h4>
3. </br>을 요소 사이 간격 만들기 위한 목적으로 사용하기 않기
// 나쁜 예시 요소 사이에 여백을 주고싶을 때 <br /> <br /> 이렇게 하면 안된다 // 좋은 예시 1 <p>요소 사이에 여백을 주고싶을 땐</p> <p>아예 별도의 단락으로 구별하기.</p>
4. HTML과 CSS 코드를 분리해서 작성하기
//HTML 파일 <head> <style> h1 { color : "red" } </style> </head> (O) <h1>스타일링 속성은 CSS로 작성하기.<h1> (O) <h2>style 요소를 사용해도, CSS 파일을 따로 작성해도 괜찮다.<h2> (X) <h3 style="color: blue">이렇게 인라인 스타일링으로는 사용하지 마세요.</h3> //CSS 파일 h2 { color : "yellow" }
🔎 크로스 브라우징
크로스 브라우징이란 웹 사이트에 접근하는 브라우저의 종류에 상관 없이동등한 화면과 기능을 제공할 수 있도록 만드는 작업을 의미한다
🔎 SEO
SEO란검색 엔진의 작동 방식에 맞게 웹 페이지를 최적화해주는 작업, 검색 엔진에서 웹 페이지를 보다 더 상위에 노출될 수 있게 만들어 준다.
On-Page SEO: 말 그대로 페이지 내부에서 진행할 수 있는 SEO로, 제목과 콘텐츠, 핵심 키워드의 배치, 효율적인 HTML 요소 사용법 등을 이용하는 방법.Off-Page SEO: 웹 사이트 외부에서 이루어지는 SEO로, 소셜 미디어 홍보, 백링크(타 사이트에서 연결되는 링크) 등을 이용하는 방법으로, 웹 페이지 내용이나 구조와는 관계가 없다.
SEO에 영향을 미치는 요소 중(On-Page에서 통제)
<title>요소<meta>요소<hgroup>요소콘텐츠- 개성있는 브랜딩, 복사 붙여넣기 금지, 간결한 제목과 설명글, 최대한 글자로 작성하기
🔎 웹 접근성이란?
웹 접근성이란 장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과동등하게 접근하고 이해할 수 있도록 보장하는 것.
웹 접근성을 갖추면 얻을 수 있는 효과
- 사용자층 확대
- 다양한 환경 지원
- 사회적 이미지 향상
✔️ 웹 접근성 접근성 지침
1.
인식의 용이성: 모든 콘텐츠는 사용자가 인식할 수 있어야 한다.
1) 적절한 대체 텍스트
2) 자막 제공
3) 색에 무관한 콘텐츠 인식
4) 명확한 지시사항 제공
5) 텍스트 콘텐츠 명도 대비
6) 자동 재생 금지
7) 콘텐츠 간 구분
2.운용의 용이성: 사용자 인터페이스 구성요소는 조작 가능하고 내비게이션 할 수 있어야 한다.
8) 키보드 사용 보장
9) 초점 이동
10) 조작 가능
11) 응답 시간 조절
12) 정지 기능 제공
13) 깜빡임과 번쩍임 사용 제한
14) 반복 영역 건너뛰기
15) 제목 제공
16) 적절한 링크 텍스트
3.이해의 용이성: 콘텐츠는 이해할 수 있어야 한다.
17) 기본 언어 표기
18) 사용자 요구에 따른 이행
19) 콘텐츠 선형 구조
20) 표의 구성
21) 레이블 제공
22) 오류 정정
4.견고성: 웹 콘텐츠는 미래의 기술로도 접근할 수 있도록 견고하게 만들어야 한다.
23) 마크업 오류 방지
24) 웹 애플리케이션 접근성 준수
🔎 WAI-ARIA
정의 : WAI에서 발표한 RIA 환경에서의 웹 접근성 기술 규격이다.
필요성 : HTML 요소에 추가적으로 의미를 부여할 수 있게 해준다.
사용법 : HTML 태그 내부에 속성(attribute)을 추가함으로써 의미를 부여해줄 수 있다.
1.역할(role) : HTML 요소의 역할을 정의하는 속성
<div role="button">div이지만 button으로 사용되는 요소</div>
- 상태(state) : 요소의 현재 상태를 나타내는 속성
<div role="tabList"> <li role="tab" aria-selected="true">Tab1</li> <li role="tab" aria-selected="false">Tab2</li> <li role="tab" aria-selected="false">Tab3</li> </div> <div role="tabpanel">Tab menu ONE</div> <div role="tabpanel">Tab menu TWO</div> <div role="tabpanel">Tab menu THREE</div>
- 속성(property) : 요소의 특징을 정의하는 속성(attribute)
<button aria-label="닫기"/> <img src="X.png" /> </button> <button aria-label="검색"/> <img src="돋보기.png" /> </button>
