html 썸네일형 리스트형 웹 컴포넌트 알아보기 웹 컴포넌트 웹 컴포넌트(Web Components)는 웹 페이지와 웹 앱을 만드는 데 사용하는 재사용 가능한 사용자 지정 요소를 만들 수 있게 하는 기술들의 집합이다. 웹 컴포넌트는 네이티브 웹 표준을 기반으로 하므로, 추가적인 라이브러리나 프레임워크 없이도 동작하며, 다양한 프레임워크와 함께 사용될 수 있다. 생기게 된 계기 프레임워크의 파편화: 웹 개발의 역사를 거슬러 올라가면, 다양한 JavaScript 라이브러리와 프레임워크들이 서로 경쟁하며 성장해 오며 jQuery, Angular, React, Vue 등과 같은 도구들이 각자의 컴포넌트 시스템을 가지게 되었다. 이로 인해 동일한 컴포넌트를 다양한 프레임워크에 맞게 재작성해야 하는 상황이 발생하게 되었고, 웹 컴포넌트는 이러한 프레임워크의 경계.. 더보기 HTML - SEO를 위한 Meta 태그 알아보기 meta 태그 사이트의 SEO최적화를 위한 방법중 가장 먼저 확인하는 부분중 하나는 HTML meta태그를 이용하는 방법이라고 생각 된다. 이 meta 태그를 사용하는게 어떤 목적을 가지고 있고 어떤 역할들을 하는지 정리해보려고 한다. 태그 태그는 HTML 문서의 메타데이터를 표현하는 데 사용된다. 메타데이터는 페이지에 대한 정보를 나타내지만, 실제 페이지 콘텐츠로 표시되지는 않지만, 브라우저 동작, 검색 엔진 최적화 (SEO), 또는 다른 목적을 위해 사용된다. 사용 목적 검색 엔진 최적화 (SEO): 메타데이터는 검색 엔진이 웹 페이지의 내용을 이해하고 적절하게 색인화하는 데 도움을 준다. 예를 들어, description 메타 태그는 검색 결과에 페이지 설명으로 표시되며, 이는 사용자가 웹 페이지의.. 더보기 JavaScript - Lazy Loading 웹 페이지를 이용하는 사용자는 웹 사이트의 로딩 시간과 성능에 대해서 높은 기대치를 가지고 있다. 그렇기 때문에 로딩속도가 짧고 성능이 높은 사이트의 경우에는 많은 이용자가 방문을 하게 되지만 로딩 속도가 느리거나 컨텐츠의 확인에 시간이 걸리는 사이트의 경우 이용자의 이탈률과 불편함이 높아지게 된다. 이러한 문제를 해결하고 전반적인 사용자의 경험을 개선하기 위한 방법 중 하나로 Lazy Loading을 사용한다. Lazy Loading이란? Lazy Loading이란 웹 페이지의 성능을 최적화하기 위한 기법 중 하나로, 페이지의 로딩 속도를 빠르게 만들기 위해 필요한 리소스(예: 이미지, 스크립트, 동영상 등)를 초기 페이지 로딩 시에 모두 로드하는 것이 아니라 스크롤을 통해 해당 이미지가 화면에 나타나.. 더보기 브라우저 렌더링 알아보기 우리가 사용하는 크롬, 사파리 등등에서 페이지에 접속하게 되면 해당 페이지에서 제공하는 화면을 볼 수 있게 된다. 이렇게 우리가 볼 수 있는 브라우저 화면이 보여지는 과정은 어떻게 이루어져 있을까 렌더링 순서 HTML 다운로드: 브라우저는 웹 서버에게 HTML 파일을 요청하고, 이를 받아서 다운로드한다. DOM 트리 생성: HTML 파일이 다운로드되면, 브라우저는 이를 분석하고 DOM (Document Object Model) 트리를 만든다. 각 HTML 요소(태그)는 DOM 트리의 노드가 된다. CSSOM 트리 생성: HTML 문서가 외부 CSS 파일과 스타일 태그를 포함하고 있다면, 이들을 분석하여 CSSOM (CSS Object Model) 트리를 만든다. 렌더 트리 생성: DOM 트리와 CSSOM.. 더보기 시맨틱 태그 시맨틱 태그란 해당 영역이 그 자체로 의미를 가지며 어떠한 의미를 가지고 있는지 명확하게 표현하는 태그를 말한다 이를 통해 검색 엔진이 콘텐츠를 이해하는 데 도움이 되고, 웹 접근성을 높이는데도 중요한 역할을 하게 된다 시맨틱 태그 특징 의미론적 표현 : 시맨틱 태그는 그 자체로 의미를 가지고 있다 예를 들어 태그는 페이지의 상단, 태그는 문서의 구역을 의미하고 있다. 검색 엔진 최적화 (SEO) : 검색 엔진은 시맨틱 태그를 통해 페이지의 주요 콘텐츠를 더 쉽게 파악할 수 있다. 웹 접근성 향상 : 스크린 리더와 같은 보조 기술은 시맨틱 태그를 사용하여 콘텐츠를 더 정확하게 이해하고 사용자에게 전달할 수 있다. 이렇게 스크린 리더와 같은 부분을 개선시키게 된다면 시각 장애인과 같은 사용자들이 웹 사이트.. 더보기 Before & After 기능 만들기 Before & After 기능 만들기 프로젝트의 목표는 사용자가 원하는 한 이미지의 배경을 도시와 숲 두가지의 배경으로 자유롭게 변환하는 기능을 만드는 것이었습니다. 이 기능을 구현하기 위해서, 사용자는 화면 중앙의 막대를 조절하여 변환 영역을 조절할 수 있도록 설계하였습니다. 이미 실사이트에는 기존에 있는 코드를 활용하여 이를 구현할 수 있었어요. 이 코드는 화면 영역 내에서 마우스를 움직이는 것만으로도 기능을 실행할 수 있게 해줬습니다. 그런데, 프로젝트를 마친 뒤에 든 생각이 있었는데요. "사용자가 막대를 클릭했을 때에만 변환이 실행되면 어떨까?"라는 생각이었습니다. 저는 이런 방식이 실제로 사용되는 경우가 더 많지 않을까 생각했어요. 그래서, 클릭 시에만 움직일 수 있는 기능을 직접 구현해보기로.. 더보기 텍스트 자동 롤링효과 만들기 이전 블로그에 게시되었던 내용입니다 (원본 게시 날짜 :2020년 4월 16일) 1. 만들게 된 배경 유명 포털사이트나 TOP10, TOP5같이 순위나 특정한 장소를 일정한 주기로 표시하는 기능을 넣고 싶은데 어떤걸 넣으면 좋을지 고민하다가 일정한 시간이 지날때마다 단어가 위로 올라가며 바뀌는 기능을 만들어보고 싶다는 생각을 가지고 바로 만들어보았습니다. 2. 만들어볼 효과 시간이 지날때 마다 지역이 바뀌는 기능입니다 롤링 될 내용의 갯수를 제한하지 않고 임의의 갯수를 정해 넣어도 돌아갈 수 있도록 만들었으며 타이머를 따로 변수로 지정하여 쉽게 수정할 수 있도록 만들었어요. 3. 코드 Html CSS JavaScript let rollingData = [ '서울', '대구', '부산', '경기', '울산.. 더보기 이전 1 다음
