html

웹 성능 최적화를 위한 Critical CSS with 예제

웹 페이지의 로딩 속도는 사용자 경험과 검색 엔진 순위에 매우 중요한 영향을 미친다. 특히 모바일 기기에서의 웹 사용이 늘어나면서 빠른 페이지 로딩이 더욱 중요해졌다. 만약 당신이 CSS 파일을 불러오면, 이때 렌더링은 멈추게 된다.따라서, 초기에 중요한 CSS와 중요하지 않은 CSS를 구분하여 중요한 CSS를 먼제 제공하고 비동기적으로 중요하지 않은 CSS를 제공하면 더 빠른 웹페이지 로딩이 가능하다. 👻 CSS는 렌더링 차단 리소스: 브라우저는 페이지를 표시하기 전에 CSS 파일을 다운로드하고 파싱해야 한다. 👻 때문에 CSS 파일이 크거나 네트워크 상태가 좋지 않은 경우 CSS 파일을 요청하면 웹페이지를 렌더링하는 데 걸리는 시간이 크게 늘어날 수 있다. 즉, Critical CSS는 웹 페이지..

Etag를 활용한 브라우저 리소스 캐싱

Etag 😎 ETag HTTP 응답 헤더는 특정 버전의 리소스를 식별하는 식별자이다. (보통 지문으로 비유된다) 서버는 각 리소스에 대해서 Etag를 생성하고 버전을 관리한다. 웹 서버가 내용을 확인하고 변하지 않았으면, 웹 서버로 full 요청을 보내지 않기 때문에, 캐쉬가 더 효율적이게 되고, 대역폭도 아낄 수 있게 해준다. 🍎 특정 URL의 리소스가 변경되었을 때 Etag가 변경되어 새로 생성된다. ETag 는 지문과 같은 역할을 하면서 다른 서버들이 추적하는 용도에 이용되기도 한다. ETag 를 비교하여 리소스가 서로 같은지의 여부를 빠르게 판단할 수 있지만, 서버에서 무기한으로 지속될 수 있도록 설정할 수도 있다. 👻 ETag는 주로 웹 캐시 관리에 사용되며, 캐시된 리소스가 여전히 유효한지 확..

Web animations API 사용하기 (animate)

웹 애니메이션을 별도의 라이브러리 설치 없이 사용할 수 있다. 내장된 Web api를 사용하여 간단한 애니메이션을 구현할 수 있다. HTML title lorem ippsum CSS .phrase { background: #ff99ff; text-align: center; padding: 10px; } Javascript const tag = document.querySelector('.phrase'); tag.addEventListener('click', () => { tag.animate( [ {transform: 'translateY(0px)'}, {transform: 'translateY(15px)'}, {transform: 'translateY(0px)'}, ], { duration: 1500,..

HTML tabindex로 키보드 탭 선택순서 조정하기

일반적으로 웹 페이지에서 tab으로 input이나 a태그와 같은 요소에 접근할 때 나열된 서순대로 접근하게 된다. 이 순서는 절대적이지 않고 수정이 가능한데, tabindex 속성이 이를 가능케 한다. 탭으로 input에 접근하면, email, name, nickname 순서가 된다. Home Services About Contact tab으로 a태그 링크에 접근하면 Contract, About, Services 순서로 접근된다. tabindex가 음수이면, tab으로 포커싱할 수 없다.

HTML 작성 시 안티패턴들

HTML 작성 시 피해야 할 안티패턴들 🌈 이러한 패턴들은 코드의 가독성, 유지보수성 및 웹 접근성을 저해할 가능성이 있다. 테이블 레이아웃 테이블 요소를 사용하여 레이아웃을 구성하는 것은 지양해야 한다. 🐳 대신, CSS를 사용하여 레이아웃을 조정하는 것이 권장된다. 테이블 레이아웃은 가독성을 해치고 스크린 리더와 모바일 기기 접근성을 악화시킬 수 있다. 인라인 스타일 HTML 요소 내에 직접 스타일을 적용하는 것보다는 외부 CSS 파일을 사용하여 스타일링하는 것이 좋다. 인라인 스타일은 코드 유지보수를 어렵게 만들 수 있다. 문자 창조 순서 (Character Entity References) 사용 예전에는 특수 문자를 표현하기 위해 문자 창조 순서를 사용하는 경우가 많았다. 하지만 이제는 대부분의 ..

HTML 스킵 네비게이션이란?

네이버 웹 페이지의 HTML요소를 살펴보면, body 최상단데 id가 u_skip인 div 태그가 있다. 이 div 내부에 a태그 여러개가 삽입이 되어있는데, 각 태그는 서비스들의 바로가기가 연결되어 있다. 또한 특이사항으로, 이 a태그들은 보이지 않게 설정되어 있다. position: absolute; top: -30px; left: 0; 🌊 위와 같은 CSS 스타일이 적용되어 뷰포트에 보이지 않는다. 이런 구조는 어째서 존재하는 것일까? ChatGPT에 물어본 결과, 위와 같은 구조는 스킵 네비게이션 영역으로, 웹 접근성을 위해서 존재하는 바로가기 링크라고 한다. 스킵 네비게이션이 존재하는 이유는 다음과 같다. 스크린 리더 사용자들이 내용을 건너뛸 수 있게 바로가기 기능을 제공한다. 키보드를 사용하여..

Node Static Server 띄우는 방법들

정직인 서버를 띄우는 방법들에 대해서 알아보았다. SPA를 빌드 후 배포한다거나, 단순히 이미지나 html로 이루어진 웹페이지를 배포한다거나 할 때 복잡한 서버의 필요 없이 정적 서버를 띄워 웹 사이트에 접근하게 만들 수 있다. 이에 대한 여러가지 방법들에 대해서 알아보고, 기록하였다. serve, http-server와 같은 라이브러리 사용하기 CRA로 생성한 리액트 웹 어플리케이션의 빌드 명령어를 사용하면, 터미널에 친절하게 serve를 사용하여 정적 서버를 띄우는 방법을 알려준다. npm install -g serve serve -s build 위의 명령어로 serve를 설치하고, build 폴더 내부의 빌드된 리액트 어플리케이션을 정적 서버에 띄워준다. 이와 유사하게 http-server 라이브러..

Drag Event에서 dataTransfer로 데이터 전달하기

Drag 이벤트에서는 dataTransfer라는 특수한 객체를 사용할 수 있는데, 이를 통해서 드래그 되었을 때 값을 저장하고 해당 값을 전달할 수 있게 해준다. 이를 사용해서 drag & drop으로 랜덤 숫자를 생성하는 예제를 만들어 보았다. Drag And Get Random Number Number : 위의 Drag And Get Random Number를 드래그할 수 있게 설정한다. 그리고 드래그하여 하단의 Number에 드랍하면, 랜덤 숫자를 화면에 띄울 수 있게 한다. .drag-div { padding: 10px; background-color: #ccc; width: fit-content; } .drop-div { margin-top: 50px; padding: 10px; backgrou..