📂 Naver Clone

🔗

- 네이버 웹 사이트 클론 코딩
- 시멘틱 태그와 의미있는 클래스명으로 마크업을 구성
- float보다는 flex를 사용하며 css 코드 구현 연습

시멘틱 마크업

• SEO 최적화에 유리.
  (SEO : Search Engine Optimization, 검색엔진 최적화)
• 웹 접근성에 효율적이다.
• 유지보수가 용이하다.
  
  
  

클래스명 주는 방법

의미있게 영역 구성하기

[상위요소]section,header,gnb...,
sc-0000,main-000,section-000 : 섹션
group-000
000-area : 영역 잡아줄 때 (섹션급이 아니라면 area부터 시작)
0000-wrap : 작은 단위
000-box : 더 작은 단위

리스트 클래스 작성

ul > event-list
li > event-item

목적에 맞는 a태그 클래스명

link : 링크 이동
btn : 스크립트 작동

텍스트 태그 구분

• strong : 문장강조 게시글에서 제목급
• em : 단어강조 게시글에서 카테고리,분류급
• p : 문장,단락,내용 등 유의미한 텍스트
• span : 의미가 많이 떨어지는 부가텍스트
  (단독 span = 부가텍스트)
  (a태그나 다른 태그에 소속된 span = 디자인)

css 파일 구조/명

• reset.css - 스타일 기본값을 모두 초기화
• common.css - 여러 부분에서 공통으로 스타일 주기 ex) blind
• layout.css - 큰 구조물 header, footer 스타일. body 스타일
• main.css - 메인페이지
• style.css - 메인페이지를 제외한 모든 서브이지 스타일

🔍 레이아웃 구성

header : 로고, 검색창, gnb

main : 콘텐츠 영역

footer

code

<header class="header"></header>
<main class="container"></main>
<footer class="footer"></footer>

공통 클래스 (blind)

• 웹 접근성을 고려하여 텍스트를 숨기는 방법

  ❌ BAD

  display: none;
  opacity: 0;
  visibility: hidden;
  width: 0;
  height: 0;
  font: 0
  
  position: absolute;
  top: -9999px; 성능저하
  left: -9999px; 성능저하
  text-indent: -9999px; 성능저하

  ⭕️ GOOD

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