1. NAVER 적응형 PC 클론 코딩

wj·2022년 9월 2일

CSS html pc 적응형 클론코딩

포트폴리오 작업

목록 보기

7/7

📌
사이트 명: NAVER
제작 기간: 22.07.22 ~ 22.07.24 (3일 소요)
사용 언어: html, css

[네이버 적응형 PC 클론 코딩 작업]

column-left와 column-right를 나누어, flex가 아닌 float를 활용하여 작업했습니다.
class명 작성 방식 및 마크업 레이아웃 구성을 터득하는 데에 도움이 된 작업입니다!

💡Learning point

시멘틱 마크업과 class명 작성법

IS/IR 기법 활용 (.blind 활용법)

검색창 만들기 (form, fieldset, legend태그 활용)

말줄임 적용 (1줄 말줄임, 2줄 이상 말줄임)

float 해제 방식

WAI-ARIA 활용

1. 시멘틱 태그란

HTML의 구조를 설계하는데 있어 태그에 의미를 부여 함으로써
사이트의 구조를 파악하기 용이할 수 있도록 도와주기 위해 만들어진 태그
✅ header, main, section, h1, nav, footer, address 태그를 사용하여, 직관적인 마크업을 작성할 수 있다.

시멘틱 마크업의 장점!

SEO 최적화에 유리하여 좋은 점수를 얻음
(SEO: Search Engine Optimization)
태그의 목적을 고려하여 설계되어 있는 구조의 사이트에서 더욱 빠르고 효율적으로 정보를 파악할 수 있기 때문에 검색 결과의 노출이 원활하도록 돕는다.
웹 접근성에 효율적
일반적인 브라우저 외의 스크린리더(시각장애인을 위한 웹 서핑 프로그램)와 같은 환경에서 웹 접근성을 향상시켜준다.
유지보수의 용이성과 협업에서의 이점
div를 남용하게 되면 지속적인 관리 및 기존 작업자 외의 사람이 코드를 수정하기가 어려워지는데 시멘틱 태그를 활용하게 되면 태그의 이름만 보고도 어떤 영역인지 바로 확인이 가능하여, 해당 태그 영역 작업을 진행하기에 용이하다.

[태그의 우선순위 점수]

태그 : 1
클레스 : 10
가상요소(nth) : 10
아이디 : 100

1-1. 마크업에 관하여

[article 태그]

주로 문서 혹은 요소가 독립적으로 존재할 수 있을 때 사용한다.

article 태그 특징
1. 내용이 독립적이다.
2. 하위 요소로 제목(h1~h6)태그가 나와야 한다.
3. 해당 페이지에서 다른 페이지나 다른 영역에 언제든지 독립적으로 작성이 가능한 영역을 그룹화
4. 사이트 안에서 독립적으로 구분해 배포하거나, 재 사용할 수 있는 구획
5. 게시판과 블로그 글, 매거진이나 뉴스 기사에 활용
6. header와 footer 요소를 포함하기도 한다.

[section 태그]

논리적으로 관계있는 문서 또는 요소를 분리할 때 사용한다.

section 태그 특징
1. 논리적으로 관련된 집합체
2. 하위 요소로 제목(h1~h6)태그가 나와야 한다.
3. header와 footer 요소를 포함하기도 한다.

[div 태그]

요소 간 논리적 관계와는 상관없지만 요소를 분리할 필요가 있을 경우 사용한다.

💡 article태그와 section태그의 사용 용도를 생각하면 서로 관련 있는 내용을 모아 놓아야 할 section 안에 각각 독립된 article을 여러 개 작성하여, 서로 다른 내용을 배치하는 대신, article 태그 안에 section 태그를 작성하는 것이 자연스럽다.

작성된 컨텐츠가 독립된 자체 만으로도 의미가 통한다면? article 사용

작성된 컨텐츠가 주제와 관련된 것이라면? section 사용

주제와 관련이 없고 논리적 관계가 없다면? div 사용

1-2. 영역 정렬 기법

1) width 값이 있는 영역을 중앙으로 정렬하고 싶을 때

margin: 0 auto

2) 영역을 좌우 정렬할 때

<div class="box2">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

.box2{
	background: #f00;
	overflow: hidden;
}
.box2 div{
	float: left;
}

3) position:absolute 사용해서 상하, 좌우, 상하좌우 정렬하는 법

1-3. class명 작성 방법

의미가 없는 단순 영역 구성

group-flex1, group-flex2
inner1, inner2
group-row

등으로 단순 영역 구성을 위해 만든 태그이기 때문에 숫자를 증가시켜 구성

의미가 있는 영역 구성

section-@@@ [sc-@@@] - 섹션
group-@@@
@@@-area - 영역 잡을 때 (섹션 급이 아니라면 area부터 시작)
@@@-wrap - 작은 단위
@@@-box - 제일 작은 단위

리스트 클래스 작성 시

ul → event-list
li → event-item

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

link-@@@ 목적 → 링크 이동(ex. 마이페이지, 장바구니)
btn-@@@ → 링크 이동이 아닌, 스크립트 구현 시(ex. 메뉴 버튼, top버튼)

class명 작성 시 주의할 점

4단계 이상의 상속으로 작성할 경우, 추후 css에서 자식요소가 겹칠 수도 있기 때문에, 모든 태그에 클래스 명을 작성해주는 것이 좋다.

[피해야할 클래스 작성 방법- 4단계 이상의 상속]

.section-event ul{}
.section-event ul li{}
.section-event ul li a{}
.section-event ul li a img{}

[지향해야할 클래스 작성 방법- 선택자를 정확하고 간결하게 작성]

.section-event .event-list{}
.section-event .event-item{}
.section-event .link-item{}
.section-event .link-item img{}

1-4. 공통으로 적용되는 클래스 작성

이미지 테두리에 border가 공통적으로 들어가는데, 동일한 클래스 명을 준 뒤, css에 작성하면 여러 이미지들에 동일한 css를 적용시킬 수 있다.

.thumb::after{
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border: 1px solid #000;
    opacity: 0.1;
}

IR (Image Replacement)

이미지를 스크린 리더기로 읽힐 수 있도록 대체 텍스트로 처리하여,
이미지를 볼 수 없는 사용자에게 적절한 대체 텍스트를 제공하는 것으로,
웹 접근성 준수 및 검색 엔진의 효과적인 내용 수집을 위해 필요하다.

display:none이나 oveflow:hidden의 경우에는 스크린 리더기 또한 해당 영역을 읽을 수 없게 되므로, 웹 접근성을 위해 대체 텍스트를 blind 클래스 처리하여 사용자의 눈에는 보이지 않지만, 리더기를 통해 제공될 수 있도록 한다.
clip: rect(top right bottom left) 속성은 어떤 요소에 대해 보여주고 싶은 영역을 지정하는 속성이다.

.blind {
/* 레이아웃에 영향 가지 않게 */
  position: absolute;

/* 스크린 리더가 읽을 수 있게 */
  width: 1px;
  height: 1px;

/* 사용자에게 보이지 않게 */
  clip: rect(0 0 0 0);
  margin: -1px;
  overflow: hidden;
}

IS (Image Sprite)

여러 개의 이미지를 합친 한 장의 이미지로 background-position을 사용하여, 필요한 이미지의 위치 값을 잡아주면 편리하게 활용이 가능하다.

/* is 01 */
header .logo a::after,
header .service-area > a::after,
.sc-news .group-issue .link-media::after,
.sc-news .group-title .btn-set::after,
header .search-area .btn-submit::after,
header .search-area .keyboard,
header .search-area .ic-arrow,
header .gnb-area .gnb-list i,
header .gnb-area .btn-more::after,
.sc-sidenews .navi .btn-nav::after,
header .weather-area .degree .max::before,
.sc-news .group-title .link-stand::before,
.sc-news .group-title .link-stand::after,
.sc-login .sub-area::before,
.sc-login .sub-area .link-join::before,
.sc-news .group-list .btn-mdprev,
.sc-themepost .btn-theme-setting::before,
.sc-themepost .btn-theme.prev,
.sc-themepost .btn-theme.next,
.sc-themepost .list1-thumb .ic-play,
.sc-themepost .list3 .list3-thumb .ic-play,
.sc-themepost .list3 .fund-hd::after,
.sc-themepost .list3 .fund-list .btn-next::after,
.sc-themepost .btn-more .ico-more::before,
.sc-login .link-login::before,
footer .notice-area .more::after,
footer .btn-top,
footer .screen-mode{
    background-image: url(../images/sp-bg.png);
    background-repeat: no-repeat;
    background-size: 457px;
}


/* is 02 */
.sc-shop .group-goods .btn::before,
.sc-shop .trend-shop::before,
.sc-shop .trend-shop::after,
.sc-shop .shopnews-hd .navi .prev::after,
.sc-shop .shopnews-hd .navi .next::before,
.sc-shop .group-cate .navi .prev::after,
.sc-shop .group-cate .navi .next::after,
.sc-shop .plusdeal-hd .prev::after,
.sc-shop .plusdeal-hd .next::after{
    background-image: url(../images/sp-bg2.png);
    background-repeat: no-repeat;
    background-size: 107px;
}
.sc-shop .plusdeal-hd .ic-plusdeal::before,
.sc-shop .group-plusdeal .deal-list .thumb-box .ico-event,
.sc-shop .group-plusdeal .deal-list .thumb-box.box02::before{
    background-image: url(../images/ic-shop.png);
    background-repeat: no-repeat;
    background-size: 107px;
}

3.검색창 만들기(form, fieldset, legend태그 활용)

<form action="" method="get">
    <fieldset>
        <legend class="blind">검색</legend>
        <input type="text" class="input-text">
        <button class="btn-submit"><span class="blind">검색</span></button>
    </fieldset>
</form>

method = get / post 방식
1) get : 보안 필요 없을 때 (공개 데이터) ex) 포털 검색
2) post : 보안이 필요 할 때 (비공개 데이터) ex) 패스워드, 결제 정보 등등
fieldset : 영역을 구성
legend : form 제목에 해당
button class="btn-submit" : 데이터 ‘전송’ 버튼

4. 말줄임 적용 (1줄 말줄임, 2줄 이상 말줄임)

1줄 말줄임

.sc-shop .goods-list .dsc{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

2줄 이상 말줄임
-webkit-line-clamp에 기준을 작성해주면 된다.
보기의 경우 2줄 이상 넘치는 내용은 말줄임 기호로 표기하겠다는 의미이다.

.sc-themepost .list1-info .txt{
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

5. float 해제 방식

자식 요소에 float 적용 시, 부모 요소는 height값을 잃게 되기 때문에
구조를 유지하기 위해서는 해제를 해주어야 한다.

부모 요소에 overflow:hidden; 적용
이 경우에는 영역 밖의 컨텐츠는 표현하기 어렵다는 점이 있어, 단순한 디자인일 때 활용하는 것이 좋다.
가상요소 ::after에 clear처리

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

6. WAI-ARIA 활용

스크린 리더기 사용자들에게 페이지 새로고침 하지 않고도 페이지의 내용과 데이터가 바뀌는 영역에 역할, 속성, 상태 정보를 추가하여 동적인 컨텐츠에(javascript, ajax, vue, react 등) 보다 원활하게 접근하고, 페이지에 접근하기 수월하도록 돕는다.

WAI-ARIA는 단순 HTML로 표현할 수 없는 의미들을 태그에 부여하여 시각적인 불편함이 있는 사용자들게 일반적인 구조의 HTML에서 필요한 요소에 적절한 정보를 전달받아 원활하게 페이지 탐색 및 이용을 하도록 도와준다.

HTML5 Section 요소와 중복해서 사용하면 안됨.
HTML5에서 추가된 의미 있는 태그를 먼저 사용하고, 의미를 부가적으로 설명해주고자 할 때 WAI-ARIA의 role을 추가해주자.

설명이 잘 되어있는 사이트를 찾았는데
틈날 때마다 읽어두면 이해하기 좋을 것 같다.
https://story.pxd.co.kr/1588

tistory로 옮겼습니다

이전 포스트