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.

CSS란?CSS(Cascading Style Sheets)는 웹 페이지의 스타일을 정의할 때 사용하는 언어입니다. 쉽게 말하면, CSS는 HTML 문서의 외형을 꾸미기 위해 사용합니다. CSS는 웹 문서의 색상, 글꼴, 레이아웃 등을 설정하여 페이지가 시각적으로 어떻게 보이는지를 제어합니다. HTML은 구조를 정의하고, CSS는 그 구조를 시각적으로 표현하는 데 사용됩니다. CSS 구성요소CSS는 3가지 구성 요소로 이루어져있습니다.선택자(Selector)속성(Property)값(Value)아래에서는 해당 3가지 구성 요소에 대해 설명합니다. 선택자(Selector)선택자는 스타일을 적용할 HTML 요소(Element)를 지정하는 역할을 합니다. 선택자는 Element Selector, Class Sel..

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

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