💻 naver 클론코딩

• 사이트명: 네이버
• 제작기간: 22.07.02 ~ 22.07.03 (2일 소요)
• 사용언어: html, css
• 분류: 적응형 PC, 클론코딩
  
  

🔍 Main Point

• 시맨틱 마크업
• 웹 접근성을 위한 본문 바로가기
• 통일성 있는 클래스명 작성
• 웹 접근성을 고려한 blind 기법
• float 해제 방법
• IR, IS 기법
• 네이버의 여백주는 방법

1. 시맨틱 마크업

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

👉 작성방법

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

👉 시맨틱태그 장점

• SEO 최적화에 유리 (SEO: Search Engine Optimization)
  검색 엔진이 태그의 목적에 부합하게 설계되어있는 구조의 사이트에서 더욱 빨리 효율적으로 정보를 파악할 수 있어 검색 결과의 노출에 유리할 수 있게 함

• 웹 접근성에 효율적
  스크린리더 환경에서는 시각장애가 있는 사용자로 하여금 그 의미를 훨씬 잘 파악할 수 있음

• 유지보수의 용이성
  태그의 이름만 보고도 어떤 영역인지 바로 확인이 가능한 정리된 마크업은 코드 식별이 용이
  
  
  
  

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

• 상단의 대메뉴들을 일일이 탭으로 이동하여 아래쪽 본문까지 내려오는 것이 아니라, 메뉴바에서 바로 아래쪽 본문으로 내려갈 수 있는 건너뛰기 링크(skip navigation)의 제공
  
  
  
  

3. 통일성 있는 클래스명 작성

• 의미 없이 영역을 구성할 때
  column-left, column-right 등 네이밍 부여

• 의미 있게 영역을 구성할 때
  섹션: sc-visual
  영역: group-title, title-area 등 사용
  리스트 클래스: ul -> theme-list , li -> theme-item
  목적에 맞는 a태그 클래스명 부여: 링크이동 -> link-목적, 특정한 액션 btn-더보기
  
  
  
  

4. 웹 접근성을 고려한 blind 처리

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

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

  .blind {
  	/* 레이아웃에 영향을 끼치지 않도록 */
    position: absolute;
  
  	/* 스크린 리더가 읽을 수 있도록 */
    width: 1px;
    height: 1px;
  
  	/* 눈에 보이는 부분을 제거 */
    clip: rect(0 0 0 0);
    margin: -1px;
    overflow: hidden;
  }

  
  
  

5. IR/IS기법

• IR(Image Replacement)
  의미가 포함되어 있는 이미지를 배경으로 처리하고 대신 전경에 상응하는 텍스트를 넣는 방법으로써 화면 낭독기를 사용하는 시각 장애인이 텍스트 데이터에 접근 할 수 있도록 함

• IS(Image Sprite)
  조각난 이미지 파일들을 하나의 파일로 병합 후 배경으로 처리해서 웹 문서 전송 속도를 높이는 기법. 이 때 의미가 있는 이미지는 전경에 상응하는 텍스트를 포함시켜서 접근성을 확보해야 하기 때문에 IR(Image Replacement) 기법이 함께 사용됨
  
  
  
  

6. float 해제 방법

• float된 요소의 부모태그에 overflow:hidden을 적용할 경우 해당 요소의 컨텐츠를 박스 외부로 표현해줄 수 없으므로 float된 요소의 부모태그에 가상요소를 만들고 해당 요소에 clear:both를 지정해 주는 방법 권장

float된 요소의 부모태그::after {
   content:'';
   display:block;
   clear:both;
}

7. 네이버의 여백주는 방법

• 네이버의 경우 margin 음수 값을 이용한 여백을 주는 방법을 사용하였는데, 원리는 자식요소에 원하는 margin 값을 주고 자식을 감싸고 있는 부모에 margin 음수 값을 부여하여 여백을 줌
  

<div class="wrapper">
  <div class="container">
    <div class="items"></div>
    <div class="items"></div>
    <div class="items"></div>
  </div>
</div>

.wrapper {
  width: 900px;
  margin: 0 auto;
  border: 2px solid red;
}
.container {
  margin-right: -30px;
}
.container::after {
  content: '';
  display: block;
  clear: both;
}
.items {
  float: left;
  width: 280px;
  height: 150px;
  background: royalblue;
  margin-right: 30px;
}

💡 실제 화면 보기