NAVER 클론코딩

사이트명: 네이버
제작기간: 2.5일
사용언어: HTML, CSS
분류: PC, 클론코딩

✔️ Main Point

• 시맨틱 마크업
• 스킵 네비게이션
• 통일성 있는 클래스명 작성
• 웹 접근성을 고려한 blind 기법
• IR, IS 기법
• 네이버의 여백주는 방법
  
  
  
  
  
  
  
  
  

✏️ Project Review

~ 2022년도 프로젝트 작업 시 문제점

• h1 ~ h5 태그를 크기를 중심으로 사용
• display:none, opacity:0, text-indent:-999px 과거 방법

보완사항

• 현재는 h1 ~ h5 태그를 상위 제목 순을 고려하여 사용 중.
• blind 사용 (display:none, opacity:0, text-indent:-999px 과거 방법 지양)

HTML

시맨틱 마크업

❗️ 기본적인 부분이지만, 이전 작업했던 '~2022년도 프로젝트'까지 잘못 사용하고 있었던 부분이 많았었단 걸 알 수 있었다. 기존에는 h1 ~ h5 태그를 크기를 중심으로 사용하고 있었고, 현재는 상위 제목 순을 고려하여 사용 중.

Semantic은 '의미의', '의미론적인'이라는 뜻을 가진 형용사
따라서 시맨틱 마크업이란 의미를 잘 전달하도록 문서를 작성하는 것을 말함

작성방법

• 머리글 - <header>
• 바닥글, 문서 하단에 들어가는 정보 구분 공간 - <footer>
• 다른 페이지로의 이동을 위한 네비게이션 역할 - <nav>
• 메인 콘텐츠 - <main> 과 <section>
• 최상위 제목 - <h1>
• 사이트의 정보 및 연락처를 기입할때 - <address>

웹 접근성을 위한 본문 바로가기

❗️ 웹접근성이라고 하면 우리나라에서는 장애인에 의한 편의 고려 라고만 생각하지 말고,
더 큰 범위에서는 정상적으로 쓸 수 없는 상황에 대해서 편의를 고려한다고 생각하는게 더 맞지않을까 싶다. '마우스가 고장났다거나, 키보드 사용이 제한이 된다거나'

스킵 네비게이션 작업

<div id="skip"> 
    <a href="#newsstand">
      <span>뉴스스탠드 바로가기</span>
    </a> 
    <a href="#themecast">
      <span>주제별캐스트 바로가기</span>
    </a> 
    <a href="#sidenews">
      <span>사이드뉴스 바로가기</span>
    </a> 
    <a href="#shopcast">
      <span>쇼핑캐스트 바로가기</span>
    </a> 
    <a href="#account">
      <span>로그인 바로가기</span>
    </a> 
  </div>

뉴스스탠드 테두리 작업

❗️ 뉴스스탠드 썸네일 콘텐츠 테두리를 선으로 작업.
테이블로 작업하겠다는 생각이 우선 들었지만,
테이블 사용 시 빈 태그가 난무할 수 있기때문에 지양.

<div class="frame-area">
  <i class="vt-line vt1"></i>
  <i class="vt-line vt2"></i>
  <i class="vt-line vt3"></i>
  <i class="vt-line vt4"></i>
  <i class="vt-line vt5"></i>
  <i class="hr-line hr1"></i>
  <i class="hr-line hr2"></i>
  <i class="hr-line hr3"></i>
</div>

CSS

웹 접근성을 고려한 blind 처리

❗️ 네이버나 카카오는 가려진 텍스트의 처리를 모두 blind로 처리하였다.
성능저하의 원인이 되기도 하는 text-indent:-9999px 사용을 지양하고,
앞으로의 모든 프로젝트 작업은 전부 blind를 사용 예정.

웹 접근성을 위해 스크린리더가 꼭 읽어야 하는 필요한 정보 및 구조상 필요하지만 화면에는 보일 필요가 없는 곳에 클래스명을 지정해서 아래의 IR기법을 사용

.blind {
	/* 우선 레이아웃에 영향을 끼치지 않도록 붕 띄워놓는다. */
	position: absolute; //일단 붕 뜨게

	/* 스크린리더가 읽을 수 있도록 기본적인 공간은 있어야 한다.  */
  	width: 1px; height: 1px; //공간은 있어야함

	/* 눈에 보이는 부분은 제거한다. */
  	overflow: hidden; //잘라버려야함.
	clip: rect(0,0,0,0); //클리핑마스크 좌포를 전부 0으로 잡음.
	margin: -1px; 옆으로 //밀어준다.
}

clip: rect(top right bottom left)
clip 속성은 요소의 특정 부분만 나오도록 할 수 있다. 즉, 어떤 요소에 대해 보여주고 싶은 영역을 지정하는 속성이다.
position 속성 값이 absolute 혹은 fixed인 요소여야하고, 만약 overflow 속성 값이 visible일 경우에는 적용 되지 않음

가상선택자를 이용한 테두리 작업

❗️ ul, li에 border값을 주고, 특정 li에는 border값을 빼는 방법으로 늘 작업했었는데,
네이버 사이트 이 부분에서는 가상선택자를 이용하여 전체 테두리를 구성하는게 보다 효과적이었다.

.sc-story .story-list::before {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: '';
    border: 1px solid #dae1e6;
    z-index: -1;
}