HTML과 CSS를 이용하여 다음과 같은 웹에서 흔히 볼 수 있는 버튼을 만들어보도록 하겠습니다. HTML 작성 먼저 4가지 종류(기본, 성공, 오류, 경고)의 버튼에 대한 HTML을 작성합니다. 디폴트 스타일 제거 대부분의 브라우저는 User Agent Style이라고 불리는 디폴트(default) 스타일을 버튼에 적용해줍니다. 아무 스타일을 적용하지 않더라도 <button/> 엘리먼트가 시각적으로 버튼처럼 보이게 하기 위함인데요. 아이러니하게도 커스텀 스타일을 적용할 때는 이러한 브라우저 별로 조금씩 상이한 이 디폴트 스타일이
마크다운(Markdown)은 경량화된 마크업 언어로 구조적인 텍스트의 편집 용도로 여러 가지 도구에서 사용되고 있습니다. 대표적인 사례인 Github의 경우, 확장된 형태의 마크다운을 지원하고 있기 때문에 이슈(issue)나 PR(pull reqeust)를 생성할 때 쉽게 접해볼 수 있습니다. 이번 포스팅에서는 Markdown 형태의 텍스트를 HTML 형태의 택스트로 변환하는 방법에 대해서 살펴보겠습니다. Unified, Remark, Rehype remark는 마크다운을 처리할 때 사용하는 라이브러리이고, rehype은 HTML을
웹 페이지에서 이미지를 다룰 때 한 가지 파일로 모든 상황을 커버하기란 쉽지 않습니다. 모바일에서는 세로로 길쭉한 이미지가 잘 어울리는데 데스크톱에서는 가로로 넓은 이미지가 필요할 수 있고, 최신 브라우저에서는 AVIF로 용량을 줄이고 싶지만 구형 브라우저에서는 JPEG로 보여줘야 하죠. <img> 태그 하나로는 이런 분기를 처리할 수가 없습니다. HTML의 <picture> 요소는 바로 이런 문제를 해결하기 위해 등장했는데요. 화면 크기, 이미지 포맷 지원 여부, 해상도 등 여러 조건에 따라 브라우저가 최적의 이미지를 골라서 보여
HTML5가 등장한지 몇년이 흘렀음에도 불구하고, 아직까지도 <div> 태그로만 마크업된 웹사이트를 많이 접하곤 합니다. 하지만 이렇게 오로지 <div> 태그로만 마크업된 웹페이지는 시각적으로는 아름다울지 몰라도 여러 가지 측면에서 문제가 있을 수 있습니다. 시멘틱 마크업이란? <div> 태그는 보통 웹페이지에서 화면의 특정 영역에 스타일을 적용하거나, 전체 화면 레이아웃을 잡는데 자주 사용이 됩니다. 그래서 웹사이트에서 다음과 같은 <div> 태그가 사용되는 것을 어렵지 않게 접할 수 있습니다. 사실 HTML5에서 이러한 화면 레