💻NAVER 클론코딩
- 사이트: 네이버
- 사용언어: HTML, CSS
- 분류: 적응형 PC, 클론코딩
네이버 클론코딩을 진행하였습니다. 기존의 네이버와는 다르게 flex를 사용한 점이 특징입니다.
네이버 클론코딩을 통해 blind기법, 적응형 PC등에 대한 새로운 지식들을 습득할 수 있었으며 또한 어떻게 하면 클래스 네이밍을 중복되지 않게 할 수 있는지도 배울 수 있었습니다.
📌KEY POINT
- 시맨틱 마크업
- 클래스명 주는 법
- blind 처리기법
- is / ir
- background와 img는 언제 사용하나?
- html에 role이란?
- wai-aria
1. 시맨틱 마크업
시맨틱의 의미론적인이란 뜻과 html에 태그로 문서를 작성한다는 뜻에 마크업이 합쳐진 말로 즉 시맨틱 마크업이란 의미를 잘 전달하도록 문서를 작성하는 것을 말한다.
💚 작성방법
- 헤더와 푸터에는 각각 <header>,<footer>를 사용한다.
- 메인컨텐츠에는 <main>, <section>을 사용한다.
- 각각의 제목들에는 <h1> ~ <h6>을 사용하는데 최상위에는 <h1>을 사용한다.
- 메뉴부분은 <nav>를 사용한다.
- 사이트의 정보와 관련된 곳은 <address>를 사용한다.
- 더 강조되어야 하는 부분이 있다면 <b> 보다는 <strong>을 사용해주는 것이 좋다.
💚 시맨틱 마크업의 장점
- 검색엔진이 시맨틱 태그를 중요한 키워드로 간주하기 때문에 검색엔진 최적화(SEO)에 유리하다.
- 웹 접근성 측면에서 장애가 있는 사용자가 사용할 때 그 의미를 훨씬 잘 전달할 수 있다.
- div, span 등으로 써져있는 요소들보다 가독성이 좋다.
2. 클래스명 주는 법
💚 의미없이 영역을 구성할 때
colum-right, colum-left와 같이 클래스명을 만든다.
💚 의미가 있는 영역을 구성할 때
- section: section-000, sc-000
- group: group-000
- gruop 안에 포함된 영역을 구성할 때는 차례로 000-area, 000-wrap, 000-box 등으로 클래스명을 만들면 좋다.
- ul: 000-list, li: 000-item
- a태그
- 링크: link-000
- 버튼: btn-000
3. blind 처리기법
웹접근성(장애를 가지신 분들도 장애를 가지고 있지 않은 사람들처럼 웹사이트를 이용할 수 있게 하는 것)을 위해 만들어진 기법으로 콘텐츠는 안보이게 해야하지만 스크린 리더기에는 읽히게 해야할 때 사용하는 기법이다.
.blind {
/* 레이아웃에 영향을 끼치지 않도록 하기 위하여 */
position: absolute;
/* 스크린 리더기가 읽을 수 있는 부분*/
width: 1px;
height: 1px;
/* 눈에 보이는 영역을 제거하는 부분 */
overflow: hidden;
clip: rect(0, 0, 0, 0);
margin: -1px;
}- clip: rect(top right bottom left)
clip은 요소의 특정 부분만 나오게 할 수 있다. 즉, 어떤 요소에 대해 보여주고 싶은 영역이 있다면 지정하는 속성이다.
position의 속성 값이 absolute or fixed인 요소이여야하며 만약 overflow의 속성 값이 visible일 경우에는 적용 되지 않는다.
4. is / ir 기법
💚 is 기법
여러 개의 이미지 파일들을 하나의 파일로 병합해서 배경으로 처리하는 기법이다.
- 장점
- 서버부하가 적다.
- 요청이 줄어들어 속도가 빨라진다.
- 많은 이미지를 사용하지 않고 스프라이트 이미지 하나만 사용하기 때문에 관리가 쉽다.
- 단점
- 수정 시 전체의 이미지를 다 바꿔야하기 때문에 유지보수가 힘들다.
- 데이터 관리에 문제가 생기게 된다면 전체 이미지의 로딩이 불가능하다.
💚 ir 기법
is보다 좀 더 큰 의미로 이미지를 볼 수 없는 사용자에게 적절한 대체 텍스트를 제공하는 것을 말한다.
웹 접근성의 일환으로 그림을 보는 데에 장애가 있어 리더기를 통해 웹 문서에 접근할 때에 필수적이다.
5. background와 img는 언제 사용하나?
💚 background: 로고, 아이콘, 배경을 사용할 때 주로 사용한다.
💚 img: 자주 바뀌는 구역(=데이터)에서 주로 사용한다.
6. html에서 role이란?
💚 role이란?
alt태그와 비슷한 속성으로 시각장애인들이 스크린리더기와 검색엔진의 크롤링 및 색인과정을 도와주는 부수적인 역할을 하는 속성이다.
<div class="sort-area" role="tablist">
<a href="" class="btn-sort active" role="tab" aria-selected="true">구독한 언론사</a>
<a href="" class="btn-sort" role="tab" aria-selected="false">전체언론사</a>
</div><header id = "example" role= "form">7. wai-aria
💚 wai-aria란?
마우스와 같은 포인팅 장비를 사용하기 힘든, 스크린 리더기를 사용하는 사용자들에게 동적 컨텐츠, javascript, ajax, vue, react 등과 같이 페이지를 새로고침 하지 않고도 페이지의 내용과 데이터가 바뀌는 영역에 역할, 속성, 상태 정보를 추가하여 동적인 컨텐츠에 보다 원활하게 접근하고 페이지에 접근성을 높여 다용한 사용자들이 원활한 페이지 이용을 할 수 있도록 도와준다.
💚 주의사항
- 올바르지 못한 ARIA를 사용할 바엔 ARIA를 사용하지 않는 편이 좋다.
스크린리더를 사용하여 페이지에 접근하는 경우 ARIA의 정보에 의지하게 되는데
-> 바르지 못한 정보를 제공하게 되는 경우 스크린리더 사용자의 페이지 접근에 치명적인 영향을 주게될 수 있다.
- ARIA를 사용하기 전에 태그의 역할과 의미에 맞게 작성한다.
- 태그의 기본 의미를 중복해서 선언할 필요는 없다.
- 페이지에서 사용하는 태그의 역할이 잘못된 ARIA를 선언하면 안된다.
-> role="button"을 사용해야하는 곳에 role="heading"을 사용한다면 오류가 발생할 수 있다.
