👒 Naver

• 프로젝트 이름: Naver
• 사용한 언어: HTML, CSS
• 웹사이트 유형 : Adaptive (적응형)

시멘틱 마크업?

웹 문서의 구조를 설명하고 의미를 부여하기 위해 사용되는 HTML 태그의 사용을 말합니다.

ex) header, nav, main, section, article, aside, footer, small 등..

시멘틱 마크업의 장점

1. 검색엔진 최적화(SEO) - 웹 페이지 검색 결과에서 높은 순위를 유지할수 있게 합니다.
2. 웹 접근성 향상 - 스크린 리더와 같은 보조 기술 사용자에게 페이지 내용을 명확하게 전달할수 있습니다.
3. 유지보수 용이성 - 웹 문서의 구조와 의미가 더 명확해져 코드를 이해하고 유지보수하는데 용이해집니다.

기타 태그 정리

strong - 문장을 강조하는 글의 제목 (굵게)
em - 단어를 강조하는 글의 카테고리, 분류 (이탤릭체)
p - 문장,단락,내용에 사용하며 유의미한 텍스트일때
span - 보통 중요하지 않은 텍스트나, 디자인 요소에 사용
form method="" - get(보안에 취약, 데이터 노출되어도 무방할때), post(보안에 강력, 데이터를 안전하게 전송해야 할때)

마크업 순서의 중요한 이유?

제목, 본문, 목록, 링크 등의 요소들이 올바른 순서로 표현되면 검색엔진, 스크린리더 등이 문서를 읽고 해석하는 데 도움이 되며 더 나아가 시각 장애인이나 다른 장애를 가진 사용자도 콘텐츠를 이해하고 상호 작용할 수 있습니다.

클래스 이름 정리

1. 의미 있는 영역 구성할때

   section - sc-'event' (이름 자체가 해당 요소에 대한 정보를 전달할 수 있도록 네이밍)
   group - group-'event'
area - 'event'-area (영역 잡을때, section 급이 아닐때는 area부터 시작)
   wrap - 'event'-wrap (작은 단위)
   box - 'event'-box (더 작은 단위)

2. 의미 없는 영역 구성할때

   column-left, column-right
col-left, col-right
row-top, row-bottom
inner1, inner2 (연관성 없는 디자인 묶음에 각각 다른 스타일을 주고 싶을때 숫자 증가시켜서 구성)
   flex (단순하게 flex 용도로 필요할때)

3. 기타 클래스 이름

   ul - 'event'-list
li - 'event'-item
a - link-'event'
button - btn-'event'

Tip

<a> 태그는 주로 하이퍼 링크 생성에 사용
<button> 태그는 사용자 상호작용을 위한 버튼 생성에 사용

WAI ARIA란?

웹 페이지의 내용과 데이터가 바뀌는 영역에 역할, 속성, 상태 정보를 추가하여 웹 접근성을 향상시키기 위한 목적으로 개발된 기술 세트입니다.

role - 요소의 역할 정리
aria-attributes - 보다 많은 정보를 제공하기 위해 사용되는 속성
aria-states - 요소의 현재 상태

네이버 코딩에서 사용한 예시

<ul class="tab-list" role="tablist">
	<li class="tab-item news" role="presentation"><button class="btn on" role="tab" aria-selected="true">뉴스스탠드</button></li>
	<li class="tab-item news" role ="presentation"><button class="btn" role="tab" aria-selected="false">언론사편집</button></li>
	<li class="tab-item sort" role="presentation"><button class="btn" role="tab" aria-selected="false">엔터</button></li>
	<li class="tab-item sort" role="presentation"><button class="btn" role="tab" aria-selected="false">스포츠</button></li>
	<li class="tab-item sort" role="presentation"><button class="btn" role="tab" aria-selected="false">경제</button></li>
</ul>

role="presentation" - 해당 요소의 시각적인 디자인이나 레이아웃에 특별한 역할이 없을때
role="tab" - 탭 메뉴
aria-selected="true or false" - 특정 요소의 선택여부 나타낼때

CSS 파일 구조/명

reset.css - 기본 스타일 초기화
common.css - 공통적으로 사용되는 스타일 정의
main.css - 메인페이지의 스타일 정의 (메인페이지만)
layout.css - header와 footer의 스타일 정의

IR/IS 기법

IR 기법 (Image Replacement)

콘텐츠를 시각적으로 숨겨야 하지만 (주로 background-image에 사용) 스크린 리더기에는 읽혀야 될때 사용할수 있는 방법입니다.

.blind{
  position: absolute; 
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  margin: -1px;
}

1. postion: absolute; - 레이아웃에 영향 주지 않기 위하여
2. width: 1px; height: 1px; - width, height이 0일 경우 스크린 리더기에서 읽을수 없다
3. overflow: hidden; - 넘치는 부분 숨김
4. clip: rect(0,0,0,0); - 화면에 보이는 영역 0으로 지정
5. margin: -1px; - 요소가 차지하는 공간 제거

IS 기법 (Image Sprite)

여러 개의 작은 이미지를 하나의 이미지로 합치는 기술을 의미합니다. IS 기법을 사용함으로써 웹 페이지의 성능을 향상시키고 로딩 시간을 단축시킬수 있습니다.

네이버 코딩에서 사용한 예시

.gnb .nav-item [class*="ic-"]::after,
.gnb .nav-item [class*="ic-"]::before,
.header .group-search [class*="btn-"]::after{
  background-image: url(../images/sp-bg.png);
  background-size: 434px;
  background-repeat: no-repeat;
}

위와 같이 background-position 을 사용하여 각 이미지의 좌표를 잡을수 있습니다.