Reset CSS를 사용하는 이유Reset CSS를 사용하는 이유는 브라우저마다 기본적으로 제공하는 스타일이 다르기 때문에 스타일을 초기화하여, 다양한 브라우저에서 일관성 있는 UI를 제공하기 위해 사용합니다. 최근에는 완전히 스타일을 초기화하기보다는 각 브라우저의 기본 스타일을 보완해 주는 방식으로 Normalize CSS도 많이 사용됩니다. Reset CSS 코드 예시아래 사이트와 같이 브라우저의 기본 스타일을 제거하는 reset css를 공유하는 사이트가 있습니다. CSS Tools: Reset CSSCSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default ..

object-fit이미지를 특정 영역에 채우려고 할때 사용할 수 있는 속성 중 object-fit이 있습니다. object-fit에는 3가지 값을 넣을 수 있는데, fill, cover, contain이 있습니다. fill, cover, containfill: 세로 길이를 늘려서 특정 영역을 채움. 특정 영역에 맞게 채우다보니 이미지 비율이 달라짐cover: 이미지가 잘리더라도, 이미지가 늘어나지 않고 영역을 채움cotain: 이미지 비율을 유지하고, 이미지도 잘리지 않고 영역을 채움 See the Pen Untitled by taehong.kim (@taehongdev) on CodePen.

Tailwind CSS는 유틸리티 기반의 CSS 프레임워크로, 개발을 빠르고 쉽게 만들 수 있습니다. 정말 빠르게 개발할 수 있다는 점에서 개인적으로 tailwindcss를 선호하는 편입니다. 본 글에서는 Vite 기반의 React 프로젝트에서 Tailwind CSS를 적용하는 방법에 대해 설명합니다. Vite 프로젝트 생성 및 기본 설정먼저 Vite기반의 React 프로젝트를 생성해야하는데, 아래 글을 참고하시면 좋습니다. Bun 설치 및 React 프로젝트 생성하기Bun은 JavaScript 및 TypeScript 프로젝트를 위한 번들러(bundler)입니다. 본 글에서는 Bun을 이용하여 React 프로젝트를 생성하는 방법에 대해 설명합니다. Bun 설치하기먼저, React 프로젝트를 생성하기 전b..

HTML5는 웹 개발자들에게 다양한 새 기능을 제공합니다. 상세 내용은 아래와 같습니다. 향상된 멀티미디어 지원HTML5에서는 비디오와 오디오를 쉽게 삽입하고 재생할 수 있는 태그를 제공합니다. 태그: 비디오 파일을 직접 삽입할 수 있습니다.  태그: 오디오 파일을 삽입하고 재생할 수 있습니다. 이러한 멀티미디어 태그들은 추가적인 플러그인 없이도 브라우저에서 바로 재생 가능하며, 다양한 포맷을 지원합니다. 그래픽과 애니메이션HTML5는 2D 그래픽과 애니메이션을 지원합니다.  태그: 자바스크립트와 결합하여 동적인 그래픽을 그릴 수 있는 도구를 제공합니다. SVG(Scalable Vector Graphics): XML 기반의 벡터 그래픽을 지원합니다. (해상도에 영향을 받지 않아서, 이미지 깨짐 현상이 없..

HTML(HyperText Markup Language)은 웹 페이지의 구조를 정의하는 데 사용되는 표준 마크업 언어입니다. 이전에는 대부분 div, span과 같은 HTML 태그를 사용했지만, 최근에는 시멘틱 태그를 사용합니다. 여기서 시맨틱(Semantic) 태그란, 그 내용이 무엇인지 브라우저와 개발자 모두에게 명확하게 설명해 주는 HTML 태그를 말합니다. 이러한 시멘틱 태그들은 웹 페이지의 가독성을 높이고, 검색 엔진 최적화(SEO)에 도움을 줍니다. 본 글에서는 HTML의 시멘틱 태그에 대해 설명합니다. 시맨틱 태그란?시맨틱 태그는 웹 페이지의 다양한 부분(헤더, 푸터, 본문 등)을 명확하게 구분짓는 데 사용되는 HTML 태그입니다. 이 태그들은 각 섹션의 의미를 명확히 하여, 웹 페이지의 구..

실행 환경 설정 Next.js 14버전은 node버전이 18.17 이상이어야 합니다. 따라서, n 패키지 또는 nvm을 통해 node 버전을 18.17로 설치 및 변경해줍니다. node 버전을 어떻게 변경해야 하는지 모르시는 분은 아래 글을 참고해주세요. macos에 nodejs 설치하기 (쉽게 node 버전 변경하기) nodejs 설치 nodejs를 설치하는 방법은 brew를 사용한 방법이 있고, nodejs 공식사이트에서 직접 설치하는 방법이 있습니다. 본 글에서는 brew를 사용하여 설치하는 방법에 대해 소개합니다. brew로 설치 bluemiv.tistory.com n 패키지를 이용하여 node 버전을 변경합니다. 그리고 버전이 제대로 변경됐는지 확인해봅시다. sudo n 18.19.0 node ..

타입스크립트 요즘은 웹 개발을 하기 위해서 꼭 배워야 할 언어 중에 typescript가 있습니다. javascript로도 잘 개발해왔는데, 왜 typescript를 사용할까요? 본 글에서는 javascript와 typescript의 차이를 살펴보면서 typescript에 대해 살펴봅니다. javascript vs typescript javascript 예전부터 사용해오던 javascript는 타입이라는게 없어서 편하기도 하면서, 많은 버그들을 만들어 우리들을 괴롭혀왔습니다. 예를들면, 두 수를 더해주는 메소드를 구현해보겠습니다. function sum(numA, numB) { return numA + numB; } 일반적으로는 우리는 numA와 numB에 숫자 형태의 값을 넣어서 사용할 것입니다. 아래..

브라우저 창에 url을 입력했을때 보통 어떤 내용을 검색하기 위해 브라우저 창에 url을 입력합니다. 이때 내부적으로 이루어지는 일을 살펴봅니다. 브라우저에서 동작하는 과정을 알아보기 전에 DNS에 대해 먼저 알아야 합니다. DNS 서버로 부터 서버 IP 조회 구글 사이트(google.com)에 접속한다고 가정해봅시다. 브라우저 주소창에 https://google.com을 검색할 것 입니다. 브라우저는 화면을 그리기 위해 서버로부터 HTML, CSS, JS, 이미지 등의 리소스 파일들을 가지고 오려고 할 것입니다. 하지만 브라우저는 입력받은 url(https://google.com)로는 서버의 ip를 주소를 알 수 없기 때문에, DNS 서버에 요청하여 서버의 ip 주소(예: 13.123.55.23)를 가..

이벤트 버블링 (Event Bubbling) 이벤트 버블링은 한 요소에 이벤트가 발생하면 해당 요소의 이벤트 핸들러가 실행이 되고, 부모 요소의 이벤트 핸들러도 순차적으로 실행이되는 현상을 말합니다. 예시 코드로 설명해보면 FORM DIV P 만약 사용자가 P를 클릭했습니다. 간단하게 생각하면 p 라는 글씨만 표시가 될거라고 생각 할 수 있습니다. 하지만, 실제로는 아래와 같이 부모 요소의 이벤트 핸들러가 실행되는 것을 볼 수 있습니다. 요약하면 이벤트가 자식 요소부터 시작해서 부모 요소로 거슬러 올라가며 이벤트가 발생하는 것을 이벤트 버블링(Event Bubbling)이라고 합니다. 버블링 중단하기 원치 않은 이벤트 버블링을 막는 방법이 있는데, event.stopPropagation()을 이용할 수 ..