[portfolio] NAVER 클론코딩

김연빈·2023년 2월 15일
portfolio
0

portfolio

목록 보기
1/7
post-thumbnail

✔️네이버 클론코딩

제작기간 : 23.02.04 ~ 23.02.06 (3일)
사용 : HTML, CSS
분류 : 클론코딩, PC

파일 구조

  • index.html
  • assets/css/common.css
  • assets/css/layout.css
  • assets/css/main.css
  • assets/css/reset.css
  • assets/images/이미지파일

1. 시멘틱 마크업(Semantic Markup)

시맨틱(Semantic)이란 "의미론적인"의 뜻을 가지며 마크업(Markup)이란 HTML 태그로 문서를 작성하는 것

--> 의미가 잘 전달되도록 문서를 작성하는 것

예를 들어, <b>, <strong>태그는 둘 다 글씨를 두껍게 만들지만, 전자는 bold의 약자로 단순히 글씨 스타일만 바꿔줌. 반면에 후자는 단어를 강조하는 의미를 담고 있어서 스크린리더기가 강세를 실어서 읽어줌.

🔷작성방법

  • 머리글에 <header> 사용
  • 바닥글, 문서 하단에 들어가는 정보 구분 공간에 <footer> 사용
  • 내비게이션 역할에 <nav> 사용
  • 최상위 제목으로 <h1> 사용
  • 메인 컨텐츠에 <main>과 <section> 사용
  • 사이트 정보 및 연락 방법 적을 때 <address> 사용

🔷시멘틱 태그 장점

  • 검색엔진이 시맨틱 태그를 중요한 키워드로 간주하기 때문에 검색엔진 최적화(SEO)에 유리

  • 웹 접근성 측면에서, 시각장애가 있는 사용자로 하여금 그 의미를 훨씬 잘 파악할 수 있음.

  • 단순히 <div>, <span> 으로 둘러싸인 요소들보다 코드를 볼 때 가독성이 더 좋음. 유지보수가 쉬워짐.

2. 통일성 있는 클래스명

  • 의미없이 영역을 구성할 때
    group-flex, column-left, col-right ...

  • 의미있게 영역을 구성할 때

    • section 상위요소 계층 구조
      section - sc-000, main-000, section-000(다 같은 말)
      header 아래로 쭉 section과 등급이 동일
      gnb
      footer

    • section 하위요소 계층 구조(000에 역할, 목적에 맞게)
      .group-000 [대단위]
      .000-area [연관이 좀 더 있음]
      .000-wrap [소단위]
      .000-box

    • ul: 000-list, li: 000-item

    • a: link-000 - 링크 이동, btn-000 - 버튼으로 작동할 때

3. 웹 접근성을 고려한 본문 바로가기

웹 접근성(Web Accessibility)

장애를 가진 사람들도 신체적, 환경적 조건에 관계없이 인터넷을 통해 정보에 접근하고 이용할 수 있도록 하는 것.

이는 인터넷을 더욱 공평하고 인종, 성별, 연령, 장애 유무와 상관없이 모두가 이용할 수 있는 공간으로 만드는 것을 목표로 함.

  • 상단 요소들을 일일이 tab으로 이동해 본문으로 가지 않고도 skip-nav를 이용하면 상단에서 바로 본문으로 이동할 수 있음.
  • a태그의 엥커기능 활용. 본문으로 가려면 본문의 id값을 넣어줘야 함.
<div class="skip-nav">
	<a href="#main">메인으로</a>
</div>
<main id="#main">
</main>
.skip-nav{ 
    position: relative; 
    z-index: 15;
}
.skip-nav a{ 
    position: absolute; 
    top: -30px; 
    line-height: 30px; 
    background: #ccc; 
}
.skip-nav a:focus,
.skip-nav a:active{ 
    top: 0; 
}

4. 웹 접근성을 고려한 IR/IS 기법

  • IR (Image Replacement)
    : 이미지를 볼 수 없는 사용자에게 적절한 대체 텍스트를 제공하는 것.
    이는 웹 접근성 준수를 위한 스크린 리더 사용자뿐 아니라 검색 엔진의 효과적인 내용 수집을 위해서도 필요함.
    img 태그의 alt속성을 사용하여 대체 텍스트를 사용할 수 있지만, 길이가 너무 길 때 IR기법을 사용하기도 함. 또한 background-image를 사용할 때 IR기법으로 대체 텍스트를 제공함!
.blind{
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0)
}

  • position:absolute를 줘서 일반 문서의 흐름에서 벗어나 다른 레이아웃들에 영향을 주지 않도록 해야 함. position:absolute를 사용하면 주변의 다른 요소들이 absolute된 속성을 무시하고 배치됨!

    그 다음 width, height를 1px로 설정해 아주 작은 영역만 차지하도록 하고, margin:-1px로 화면 상에 안나오게 함

    그 후 overflow:hidden으로 하여 컨텐츠가 숨겨지도록 함

    clip은 요소의 특정 부분만 나오도록 하는 속성으로 이미지를 자를 때 유용하게 사용됨

    clip:rect(10px 30px 20px 50px)처럼 상우하좌 순으로 px을 지정해 자를 수 있음. 여기서는 0px로 설정해 아예 숨긴 것

  • IS (Image Sprites)
    : HTML의 img태그가 background-image보다 로딩 속도가 빠르긴 하지만 img태그를 가지고 하나씩 이미지들을 불러오는 것은 시간이 오래 걸림.
    IS기법은 사용하고자 하는 이미지들을 모아 하나의 이미지로 만들어 그 이미지 파일만 서버에 요청하고, CSS의 background-image와 background-position 속성을 이용해 원하는 이미지가 있는 부분을 선택해서 사용함. background-position은 배경 이미지의 위치를 지정하고 배치하는 속성

.icon{
	background-image:url('이미지 주소');
    background-repeat:no-repeat;
    display:inline-block;
    height:66px;
    width:66px;
 }
 .icon1{
 	background-position:0 0;
 }
 .icon2{
 	background-position:-66px 0;
 }
 .icon3{
 	background-position:-132px 0;
 }
 .icon4{
 	background-position:-198px 0;
 }

IS기법과 IR기법을 함께 사용하면 서버로 요청 보내는 횟수를 최소화하여 웹 페이지 로딩 속도를 줄일 수 있고, 이미지를 관리하기 쉬워짐~!

5. 대체 텍스트 alt

alt - ➊ image가 나오지 않을 경우 대체 텍스트, ➋ 이미지 검색 시 키워드, ➌ 스크린 리더에서 읽히게 하기 위해 필요

텍스트가 있는 이미지를 img 태그로 마크업할 때 대체 텍스트는 img 태그의 alternative속성인 'alt'에 작성하면 됨.

대체 텍스트가 너무 긴 경우에는 img 태그에는 alt를 빈 값으로 제공하고 span 태그에 대체 텍스트를 작성하여 blind로 숨기는 방법도 있음. --> 위에서 말한 IR 기법

6. 🔥네이버와 다르게 만든 부분

  • float 속성 말고 flex, grid 속성을 사용(float 속성 공부한 것은 별도로 작성)

  • .sc_timesquare를 .sc-sidenews로 바꾸고 h2.blind 내용도 사이드 뉴스로 변경
    --> 직관적인 이름을 사용하여 시각장애인과 검색엔진에게 명확하게 의미를 전달함 (웹 접근성 준수)

  • 여백 주기

    • 네이버는 float를 사용하여 여백을 줄 때,
      자식 요소 a태그에게 margin을 주어 여백을 만들고 부모 요소 ul태그에게 margin 음수값을 주어서 너비를 맞추었음.

      ul{
	margin-right: -10px;
 }
 ul li{
 	float: left;
    width: 33.33%;
 }
 ul li a{
	display: block;
    margin-right: 5px;
 }

    • 나는 grid를 사용했음

      ul{
    display: grid;
    grid-template-columns: repeat(3, 107px);
    grid-template-rows: repeat(4, 1fr);
	justify-content: space-between; /* 요소 사이 간격 일정하게 띄우기 */
    row-gap: 10px;
 }

* 웹 표준 검사 통과

The W3C Markup Validation Service의 Nu Html Checker를 통해 index.html의 마크업이 웹 표준에 적합함을 확인했습니다.

profile
김연빈
web publisher
다음 포스트

[portfolio] Seoul City Hall 클론코딩

0개의 댓글