웹 표준
- W3C에서 권고하는 웹에서 표준적으로 사용되는 기술이나 규칙
- 사용자가 어떠한 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상적으로 작동할 수 있도록 하는 웹페이지 작동 기법을 담고 있다.
웹 표준의 장점
- 유지보수의 용이성
- 웹 호환성 확보
- 검색 효율성 증대
- 웹 접근성 향상
Semantic HTML
-
요소가 어떤 내용을 담게 될지, 어떤 기능을 하게될지 확실하게 의미를 가지고 있는 요소를 시맨틱요소, 시맨틱요소를 적절하게 사용하여 구성한 HTML을
Semantic HTML이라고 한다. -
시맨틱 HTML의 필요성
1. 개발자간 소통
2. 검색의 효율성
3. 웹 접근성 -
시맨틱요소의 종류
<header>: 페이지나 요소의 최상단에 위치하는 머릿말 역할 <nav>: 메뉴, 목차등에 사용되는 요소 <aside>: 문서와 연관은 있지만, 직접적인 연관은 없는 내용을 담은 요소 <main>: 문서의 메인이 되는 주요 콘텐츠를 담는 요소 <article>: 게시글, 뉴스 기사 등의 독립적으로 구분해 재사용할 수 있는 부분을 의미하는 요소. -> 각각의 <article>을 구분하기 위한 수단이 필요하며, 보통 제목을 포함하는 방법을 사용. <section>: 문서의 독립적인 구획을 나타내며, 딱히 적합한 의미요소가 없을 때 사용. 제목에 포함하는 경우가 많다. <footer>: 페이지나 요소의 최하단에 위치하는 꼬릿말 역할.
자주 틀리는 마크업
- 인라인 요소안에 블록 요소 넣기
- 인라인 요소는 콘텐츠가 차지하는 만큼만 (대표적으로
<span>)
블록 요소는 가로로 넓게 화면영역을 차지 (대표적으로<div>) - 인라인 요소는 항상 블록요소 안에 들어가야하며, 반대의 경우는 안된다.
--> 인라인 요소에는 뭐가있고, 블록 요소에는 뭐가 있는지 파악하기
- 인라인 요소는 콘텐츠가 차지하는 만큼만 (대표적으로
<b>,<i>요소<b>요소는 글씨를 굵게,<i>요소는 글씨를 기울일 때
-->하지만 시맨틱한 이름이 아니기 때문에
<b>-><strong>
<i>-><em>으로 사용하는 것이 좋다.
<hgroup>마구잡이 사용<br />연속으로 사용- 요소사이의 간격을 위해 남발하면 안됨.
- 간격을 조절하려면 css속성을 이용
- 인라인 스타일링 사용하기
- HTML에서 스타일주지말고 나눠놓은거 css에서 하자.
크로스 브라우징
- 크로스 브라우징
웹사이트에 접근하는 브라우저의 종류에 상관없이 동등한 화면과 기능을 제공할 수 있도록 만드는 작업 - 크로스 브라우징 워크플로우
1. 초기 기획
- 초기 기획단계에서 어떤 웹사이트를 만들 것인지 정확하게 결정
( 어떤 콘텐츠와 기능이 있어야하는지, 디자인은 어떻게 할지 등 )
- 사이트의 고객이 누구일지 생각 ➡️ 고객이 사용하는 브라우저나 기기는 무엇일지 생각하고 파악한 후, 걸맞는 기술을 사용해서 개발할 수 있도록 기획
2. 개발
- 코드를 작성할 때 사용하는 코드가 브라우저에서의 호환성 확인
- MDN, CanIUse에서 확인가능
3. 테스트 / 발견
- TestComplete, LambdaTest, BitBar 등 크로스브라우징 테스트툴 활용
4. 수정 / 반복
- 테스트 단계에서 버그가 생겼다면 수정이 필요, 수정이 완료되면 3번 과정부터 다시 반복
SEO (Search Engine Optimization , 검색 엔진 최적화 )
- On-Page SEO
➡️ 페이지 내부에서 진행할 수 있는 SEO로 제목과 콘텐츠, 핵심 키워드 배치, 효율적인 HTML요소 사용법 등을 이용하는 방법
- Off-Page SEO
➡️ 웹사이트 외북에서 이루어지는 SEO로, 소셜미디어 홍보, 백링크, 등을 이용하는 방법으로 웹사이트 구조와 상관없음.
SEO에 영향을 미치는 요소
-
<title>요소
<title>요소는 검색결과창에서 제목에 해당하는 요소로,<head>요소의 자식요소로 작성
-<title>요소에 어떤 내용을 작성하는가에 따라 검색후 유입까지 유도할 수 있다.
-<title>요소에 핵심키워드가 포함되면 상위에 노출될 확률이 올라간다.
!! 제목에 핵심키워드는 한번만 ( 같은 키워드를 반복하면 검색시 불이익 받을 수 있음 )
-
<meta>요소-
메타데이터를 담는 요소
➡️ 메타데이터란 해당 웹사이트가 다루고있는 데이터가 무엇인지<head>요소의 자식으로 작성하는 것이 일반적
-
검색결과창이나 소셜미디어, 채팅어플리케이션의 링크 미리보기로
<meta>요소에 들어있는 내용
-
SEO를 위한 meta요소
<meta name="속성값" content="내용">-> 속성값의 종류
- description : 콘텐츠에 대한 간략한 설명 ( 검색결과 제목 밑에 뜨는 내용 )
- keywords : 웹페이지의 관련 키워드들 나열할때 사용
- author : 콘텐츠의 제작자를 표시 -
오픈 그래프 ( open graph )
<meta property="속성값" content="내용">-> 속성값의 종류
- og:url : 페이지의 표준 URL
- og:site : 사이트의 이름
- og:title : 콘텐츠의 제목
- og:description : 콘텐츠에 대한 간략한 설명
- og:image : 미리보기에 표시될 이미지
- og:type : 콘텐츠의 미디어유형
- og:locale : 리소스 언어로 기본값은 en_US, 한국은 ko_KR
-
-
<hgroup>요소 -
콘텐츠
- 개성있는 브랜딩
- 복붙금지
- 간결한 제목과 설명글
- 최대한 글자로 작성 ➡️ 꼭 이미지를 넣는다면 'alt'속성을 사용하여 해당 이미지의 설명을 텍스트로 작성하는 것이 좋다.
Google - SEO 기본 가이드
Naver - 웹마스터 가이드
웹 접근성
- 웹 접근성 ( Web Accessibility )
➡️ 일반적으로 웹 접근성은 장애인, 고령자 등이 웹사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것을 뜻함.
➡️ 웹 접근성의 궁극적인 목적은 어떤 상황이든, 어떤 사람이든 정보를 제공받지 못하는 경우가 없도록 하는것
- 웹 접근성을 갖추면 얻을 수 있는 효과
1. 사용자층 확대
2. 다양한 환경지원
3. 사회적 이미지 향상
WAI-ARIA
- WAI-ARIA
- WAI ( Web Accessibility Initiative )
➡️ 웹 표준을 정하는 W3C에서 웹 접근성을 담당하는 기관
- ARIA ( Accessible Rich Internet Applications )
➡️ 장애가 있는 사람들이 웹 콘텐츠와 웹 응용 프로그램에 더 쉽게 액세스할 수 있도록하는, 즉 웹 접근성을 갖추기 위한 기술
- WAI-ARIA의 필요성
1. 시맨틱 요소만으로 의미를 충분히 부여할 수 없는 상황에 WAI-ARIA를 사용하면 HTML요소에 추가적인 의미를 부여하여 더 원활하게 페이지를 탐색할 수 있게 도와줌
➡️ 시맨틱요소만으로 충분하다면 WAI-ARIA를 사용하지 않아야 한다.
2. SPA처럼 AJAX를 사용하는 상황, 즉 새로고침 없이 페이지의 내용이 바뀌는 상황에서도 변경된 영역에 대한 정보를 전달해줄수 있어 동적인 콘텐츠에서도 웹 접근성을 향상시킬 수 있음.
- WAI-ARIA의 사용법
- HTML태크 내부속성을 추가함으로써 의미를 부여할 수 있음.
1. 역할 (Role)
- HTML의 요소 종류와 역할이 서로 맞지 않을 때, 어떤 역할을 하는 요소인지 명시해줄때 사용할 수 잇는 속성
2. 상태 (State)
- 어떤 탭이 선택되었는지 알려주는 속성
- 외 에도 아코디언 UI가 펼쳐진 상태인지 표시해주는aria-expand,
요소가 숨김상태인지 표시해주는aria-hidden등의 속성이 있음.
3. 속성 ( Property )
-aria-label➡️ 이미지로만 되어 있을 때 설명.
-aria-live➡️ 실시간으로 내용을 갱신하는지 설명.
