NAVER

one_k·2022년 10월 9일

CSS html iris 시멘틱태그 포트폴리오

포트폴리오

목록 보기

1/6

🛠 NAVER 클론코딩

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

📌 Review!!

1. 시멘틱태그란?

사이트의 구조를 파악하기 용이할 수 있도록 도와주기 위해 만들어진 태그이다.

✏️ 시멘틱태그를 사용하면 좋은점

SEO 최적화에 유리. (SEO: Search Engine Optimization)
검색 엔진이 태그의 목적에 부합하게 설계되어있는 구조의 사이트에서 더욱 빨리 효율적으로 정보를 파악할 수 있어 검색 결과의 노출에 유리할 수 있게 해준다.
웹 접근성에 효율적
일반적인 브라우저에서는 차이가 없지만 스크린리더(시각장애인을 위한 웹 서핑 프로그램)과 같은 환경에서는
웹 접근성과 사용성을 향상시켜준다.
유지보수의 용이성
많은 div사용으로 관리가 어려워지는 문제점에서 벗어나 태그의 이름만 보고도 어떤 영역인지 바로 확인이 가능하며 해당 태그 영역의 특성에 맞는 작업을 구분하여 진행하기에 용이하다.

✏️ 시멘틱태그의 종류

<header> : 머리글, 제목, 헤더
<nav> : 네이게이션, 목차, 리스트 등 다른 페이지로의 이동을 위한 링크 공간을 위주로 표현
<main> : 이름처럼 문서 <body>의 중심 주제, 주요 내용 또는 응용 프로그램의 중심 기능과 직접 관련되어나 확장되는 콘텐츠를 나타낸다.
<aside> : 좌측과 우측 사이드 위치의 공간을 의미하며, 본문 외에 부수적인 내용을 주로 표현
<section> : 주제, 카테고리 별로 섹션을 구분하는 용도의 태그로 주로 사용하며, 같은 테마를 가진 여러개의 콘텐츠의 그룹화
<article> : 기사, 블로그 등 텍스트 위주의 페이지를 구성할때 주로 사용
<footer> : 바닥글, 문서 하단에 들어가는 정보 구분 공간을 표현하는 태그

2. 클래스명 주는방법?

✏️ 의미없이 영역을 구성하고싶을땐

group-flex
column-left, column-right
col-left ,col-right
row-top , row-bottom

✏️ 의미있게 영역을 구성할땐

section-event — 섹션
group
event-area — 영역잡아줄때(섹션급이아니라면 area부터 시작)
event-wrap — 작은단위
event-box — 더 작은단위

✏️ 리스트 클래스 작성

ul → event-list
li → event-item

✏️ a태그에 클래스 줄땐 목적에 맞게

link-목적 → 링크이동
btn-더보기 → 링크이동(x) 스크립트작동

3. WAI-ARIA 란?

마우스와 같은 포인팅 장비를 사용하기 힘든, 스크린 리더를 사용하는 사용자들에게 페이지의 내용과 데이터가 바뀌는 영역에 역할, 속성, 상태 정보를 추가하여 페이지에 접근성을 높여 여러 사용자들에게 원활한 페이지 이용을 도와준다.

예를 들면,

<li tabindex="0" class="checkbox" checked>
  Receive promotional offers
</li>

li태그에 .checkbox 클래스를 부여하여 css상으로 체크박스 형태의 모양을 만들어 사용할 경우
시각적 불편함이 없는 사용자들의 경우 css 화면을 보고 해당 영역이 체크박스임을 인지할 수 있지만 스크린리더로 화면을 탐색해야하는 사용자들의 경우 위의 css 정보를 얻을 수 없다.

이때 스크린리더 사용자들을 위한 방법이 WAI-ARIA를 사용하는 것이다.

<li tabindex="0" class="checkbox" role="checkbox" checked aria-checked="true">
  Receive promotional offers
</li>

role, aria-checked ARIA 속성을 사용하여 해당 영역이 체크박스인지, 체크가 되었는지 안되었는지 까지 명시할 수 있다.

✏️ 사용시 주의사항

올바르지 못한 ARIA를 사용할 바엔 ARIA를 사용하지 않는 편이 좋다.

<div role="button">주문하기</div>

위 태그는 키보드로 접근을 할 때 해당 컨텐츠를 접근할 수 없다. 그렇기 때문에 버튼의 용도에 맞게 a, button 태그를 사용해야한다.

ARIA를 사용하기 전에 태그의 역할과 의미에 맞게 작성한다.

<!-- X -->
<div role="button">버튼</div>

<!-- O -->
<button>버튼</button>

태그의 기본 의미를 중복해서 선언할 필요는 없다.

<!-- X (중복선언) -->
<input type="checkbox" role="checkbox">
<button role="button">버튼</button>
<fieldset role="group">...</fieldset>
<ul role="list">...</ul>

<!-- O -->
<input type="checkbox">
<button>버튼</button>
<fieldset>...</fieldset>
<ul>...</ul>

페이지에서 사용하는 태그의 역할이 잘못된 ARIA를 선언하면 안된다.

<!-- X -->
<button role="heading">버튼</button>

4. IR/IS 기법

✏️ IR(Image Replacement)기법

이미지를 볼 수 없는 사용자에게 적절한 대체 텍스트를 제공하는 것을 말한다.
웹 접근성의 일환으로, 그림을 보는 데에 장애가 있어 리더기를 통해 웹 문서에 접근할 때에 필수적이다.

웹 접근성이란?
어떠한 사용자가 어떠한 기술환경에서도 전문적인 능력 없이 웹 사이트에서 제공하는 모든 정보에 접근할 수 있도록 보장하는 것이다. 즉, 모든 사용자가 모든 기기에서 웹에 접근할 수 있도록 하는 것을 말한다

/*
공통, 안되는것들
display: none; 
opacity: 0;
visibility: hidden;
width: 0;
height: 0;
font:0


position: absolute;
top: -9999px; 성능저하
left: -9999px; 성능저하

text-indent: -9999px; 성능저하

*/

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

✏️ IR(Image Replacement)기법

여러 개의 이미지 파일들을 하나의 파일로 병합해서 배경으로 처리하는 기법이다.

장점

요청하는 횟수가 많아지게 되면 그만큼 로딩 속도가 느려지는데 sprite처럼 하나의 파일로 만들게 되면
요청이 줄어들어 속도가 빨라진다.
많은 이미지 파일을 관리하는 대신 하나의 스프라이트 이미지 파일만 관리하면 된다.

단점

img 태그가 아닌 css의 background-image로 처리 되기 때문에 alt속성 사용이 불가하다.
그래서 아이콘, 로고와 같이 의미상 크게 중요하지 않은 이미지의 경우에 이 기법을 사용하는 것이 좋다.
이미지의 개수가 늘어남에 따라 자체의 용량이 커질 수 있다.
수정이 필요한 경우 유지보수가 까다롭기 때문에,
수정이 안될 것 같은 단순한 이모티콘이나 로고의 경우에 자주 사용한다.

one_k

다음 포스트

NAVER

포트폴리오

🛠 NAVER 클론코딩

📌 Review!!

1. 시멘틱태그란?

✏️ 시멘틱태그를 사용하면 좋은점

✏️ 시멘틱태그의 종류

2. 클래스명 주는방법?

✏️ 의미없이 영역을 구성하고싶을땐

✏️ 의미있게 영역을 구성할땐

✏️ 리스트 클래스 작성

✏️ a태그에 클래스 줄땐 목적에 맞게

3. WAI-ARIA 란?

✏️ 사용시 주의사항

4. IR/IS 기법

✏️ IR(Image Replacement)기법

.blind

✏️ IR(Image Replacement)기법

장점

단점

서울시청

0개의 댓글