(SEO 최적화를 위한) 잊고 있는 HTML 태그 10가지

프론트엔드 개발자로서 SEO 최적화를 위해 시맨틱 태그를 활용하여 마크업을 하는 습관이 필요하다. , , , , , , 등은 시맨틱 마크업의 기본이라 할 수 있는데, 그 외의 수많은 태그들은 사용할 일이 많지 않아 쉽게 떠오르지 않는 것 같다. 그럴 때를 위해 잊기 쉬운 태그 10가지를 복기해 보자.  1. 반응형 이미지: 이미지를 반응형으로 다루기 위해 보통 CSS를 조작하는 경우가 많은데, 이외에 태그에 srcset 속성 및 sizes 속성을 이용하는 방법과 태그와 태그를 조합하는 방법도 있다. 태그의 경우, 하나의 태그에 대해 여러 개의 반응형 이미지를 제공하는 0개 이상의 태그를 삽입하여 대역폭을 절약하고 페이지 로드 시간을 단축할 수 있다. 적절한 조건에 해당하는 이미지 소스가 없는..

[CSS] 이미지 스프라이트 (Image Sprite)

이미지 스프라이트(Image Sprite)란?여러 개의 이미지를 하나의 이미지로 합쳐서 사용하는 기법. 목적웹 페이지에 이미지가 있을 때 웹 브라우저는 서버에 이미지를 요청한다. 때때로 사용되는 이미지가 많을 경우에는 이 요청 또한 많아지기에 웹 페이지의 로딩 시간이 오래 걸리게 된다. 이미지 스프라이트 기법을 사용하면, 이 요청을 줄여 로딩 시간을 단축할 수 있다. 이미지가 갖고 있는 의미가 적으며 단순 디자인을 위한 이미지를 사용할 때 적합한 기법이다.  위처럼, 여러 개의 이미지를 하나로 합쳐서 background-position을 요리조리 돌려가며 사용한다. 장점이미지 로딩 속도 최적화간결한 마크업변경이 잦지 않은 이미지의 경우 유지 보수 용이단점CSS background-image 속성을 사용하..

[CSS] IR 기법

IR(Image Replacement) 기법이란?이미지의 대체 텍스트를 제공하기 위한 CSS 기법으로, 주로 이미지를 볼 수 없는 사용자에게 적절한 대체 텍스트를 제공하기 위함이다. 이미지 스프라이트(Image Sprite) 기법을 사용하는 경우에도 쓰일 수 있다.  위와 같이 img 태그를 사용할 때 alt 속성으로 대체 텍스트를 삽입할 수 있지만, CSS background-image 속성을 사용해서 이미지를 사용하는 경우에는 그럴 수 없다. 네이버에서는 아래처럼 사용했다..blind { position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; overflow: hidden;} 그리고 H5BP(HTML5 Boiler..

dialog 태그로 손쉽게 모달창 만들기

HTML의 dialog 태그를 이용하면 많은 스크립트를 작성하지 않고 손쉽게 모달창을 만들 수 있다. 모달 열기 버튼 모달창 내용 모달 닫기 버튼

앞으로 써먹어야 할 2022 CSS 최신 기술 모음

CSS 최신 기술들을 모아보았다. 2022년 11월 현재 기준으로, 브라우저 호환성이 떨어지는 기술일 수록 아래 쪽에 작성했다. :has() 특정한 자식을 가진 부모 요소를 선택할 수 있다. /** 포인터가 올라가 있는 img를 가진 부모 a 태그 **/ a:has(> img:hover) { ... } accent-color 라디오 버튼, 체크 박스, 범위 슬라이더 등 HTML 요소의 기본 강조 색상을 변경한다. input { accent-color: purple; } dvh, lvh, svh dvh: Dynamic Viewport Height - 동적 뷰포트 높이 (네비게이션 여부에 따라 달라짐) lvh: Largest Viewport Height - 가장 큰 뷰포트 높이 (네비게이션이 없을 때) sv..