이번 포스팅에서는 CSS에서 height 속성을 사용할 때 흔히 겪을 수 있는 문제점과 min-height 속성을 사용하여 이러한 문제를 쉽게 예방하는 방법에 대해서 살펴보았습니다. height 속성의 기본값 height 속성을 명시해주지 않으면 auto라는 키워드가 기본값으로 사용이 되는데요. height 속성이 auto로 설정되어 있는 요소는 내부 컨텐츠를 해당 요소를 딱 맞게 담을 수 있을만큼 높이가 자동 결정됩니다. 이 기본값 덕분에 우리가 height 속성을 별도로 명시해주지 않아도 요소의 높이는 화면 크기에 따라서 자동
이번 포스팅에서는 CSS에서 SVG 이미지를 배경으로 사용하는 방법을 간단한 실십을 통해 알아보겠습니다. 실습 시작 코드 HTML로 <div> 요소 3개를 만들고, 2번째 <div> 요소와 3번째 <div> 요소의 클래스를 각각 check와 heart로 설정해주겠습니다. CSS로는 글꼴 크기와 배경색과 같은 기본 스타일링을 해주었으며, SVG 이미지가 보일 자리를 확보하기 위해서 좌측 여백을 좀 크게 주었습니다. 이제부터 check와 heart 클래스에 스타일을 추가하여 2번째 <div> 요소와 3번째 <div> 요소 앞에 각각 체
웹에서 이미지 아래나 옆에 의도치 않게 공백이 생겨서 애를 먹는 경우가 있는데요. 이번 포스팅에서는 언제 이렇게 이미지 주변에 불필요한 공백이 생길 수 있으며, 이러한 성가신 공백을 효과적으로 제거하는 다양한 요령을 알려드리겠습니다. 이미지 아래에 생기는 공백 <div>나 <figure>와 같은 HTML 요소 안에 이미지를 담고 있는 <img> 요소를 넣어보겠습니다. 이미지 아래에 살짝 공백이 생긴 것이 보이시나요? 🤨 이미지 아래에 이러한 공백이 생기는 이유는 <img> 요소의 display 속성이 기본적으로 inline이기 때
HTML에서 리스트를 만들 때 사용하는 <ul>, <ol>, <li> 요소는 다른 HTML 요소에서 사용하지 않는 특수한 CSS 속성이 많이 사용되서 스타일하기가 좀 까다로운 편인데요. 이번 포스팅에서는 HTML의 <ul> 또는 <ol> 요소로 마크업이 되는 리스트(list)와 <li> 요소로 마크업되는 리스트 아이템(list item)을 CSS로 스타일하는 요령에 대해서 자세히 정리해보겠습니다. HTML로 리스트 마크업 HTML에서 리스트는 <ul> 또는 <ol> 요소로 마크업 할 수 있는데요. 순서가 중요하지 않은 경우에는 <u
이번 포스팅에서는 CSS Reset(리셋)과 CSS Normalize(노멀라이즈)에 대해서 알아보도록 하겠습니다. CSS Normalize와 CSS Reset의 필요성 세상에서는 여러 가지 브라우저가 있으며 우리가 만든 웹사이트나 웹 애플리케이션이 이 중 어떤 브라우저에서 돌아갈지는 알 수 없습니다. 여기서 문제는 소위 User Agent Stylesheet라고 불리는 브라우저 내장 스타일이 브라우저마다 조금씩 다르다는 것 인데요. 다시 말해서, 우리가 만든 UI가 크롬(Chrome)에서 열었을 때와 사파리(Safari)에서 열었을
이번 포스팅에서는 순수하게 HTML과 CSS만을 이용하여 아래와 같이 웹에서 어렵지 않게 볼 수 있는 토글 스위치 UI를 만들어보겠습니다. 토글 스위치란? 먼저 웹에서 토글(toggle) 혹은 토글 스위치(toggle switch)라고도 불리는 스위치(switch) UI 대해서 짚고 넘어가겠습니다. 마치 우리가 집 안에서 조명을 켜고 끌 때 사용하는 벽에 붙어있는 스위치를 상상하면 쉬울 것 같은데요. 웹에서도 이렇게 사용자가 어떤 기능을 켜거나 끌 수 있도록 해야하는 경우가 생기기 마련입니다. 좋은 사례로, 알람(notificati
웹에서 SVG가 사용되기 시작한지가 꽤 되어 가는 것 같죠? 개발자로서 주로 이미 만들어진 SVG 코드를 복사해서 붙여넣기만 하지 제대로 SVG에 대해서 깊이 알아볼 기회는 많지 않은 것 같습니다. 이번 포스팅에서는 HTML 문서 안에 SVG로 직접 간단한 그림을 그려보면서 그려보면서 전반적으로 SVG를 어떻게 사용하는지 가볍게 알아보겠습니다. SVG 란? SVG(Scalable Vector Graphics)는 HTML 문서에 백터(vector) 기반 그래픽을 그리기 위해서 사용되는 XML 기반 웹 기술입니다. 백터 기반 그래픽은
이번 포스팅에서는 CSS를 이용하여 라디오 버튼을 스타일하는 요령에 대해서 알아보겠습니다. 차근차근 따라오시다보면 아래와 같은 라디오 버튼을 만드실 수 있으실 거에요. 🍅😄 왜, 라디오 버튼을 스타일할까? 먼저 웹사이트를 만들 때 라디오 버튼(radio button)을 뭐하러 직접 스타일하는지에 대해서 잠깐 짚고 넘어가겠습니다. 일반적으로 웹사이트에서 라디오 버튼은 브라우저나 운영체제, 디바이스에 따라서 미묘하게 다르게 표현이 됩니다. 그래서 플랫폼에 구애받지 않고 일관적인 사용자 경험을 제공하기 위해서 라디오 버튼에 커스텀 스
웹사이트를 개발하다 보면 아무래도 사람들에게 보여질 부분에만 치중하기 쉬워집니다. 그런데 알고보면 사람뿐만 아니라 기계가 웹사이트를 읽어야하는 경우가 의외로 많은데요. 여기서 기계라함은 유저가 사용하는 브라우저가 될 수도 있고 웹사이트의 데이터를 수시로 수집해가는 검색엔진이 될 수도 있겠습니다. 또한 어떤 웹페이지의 링크를 공유하면 링크를 열기 전에 해당 콘텐츠를 미리보여주는 SNS나 메신저가 될 수도 있겠네요. 이번 포스팅에서는 이러한 기계들이 웹페이지를 효과적으로 이해할 수 있도록 도와주는 메타 태그에 대해서 알아보겠습니다. 메
사이트 네비게이션(site navigation)은 웹사이트에서 사용자가 효과적으로 페이지 사이를 이동을 할 수 있도록 도와주는 매우 흔하면서도 중요한 UI 입니다. 이번 포스팅에서는 React와 Styled Components를 이용하여 아래와 같은 다단계 사이드 네비게이션 UI를 한 번 구현해도록 하겠습니다. 컴파운트 컴포넌트 HTML에는 부모없이는 단독으로 쓰이지 않는 요소들이 있습니다. 대표적인 예로 <option> 요소는 항상 <select> 요소 안에서 사용되며, <li> 요소는 항상 <ul>이나 <ol> 요소 안에서 사용
이번 포스팅에서는 tabindex 속성을 사용해서 키보드 포커스 여부와 우선순위를 제어하는 방법에 대해서 알아보았습니다. 키보드 포커스 혹시 마우스가 고장나거나 배터리가 나가서 키보드로만 컴퓨터를 조작하거나 웹서핑을 해보신 적이 있으신가요? 마우스 사용자는 포인터로 웹페이지의 어디든지 클릭을 할 수 있지만, 키보드 사용자는 포커스라는 제한된 방법을 이용해야 되는데요. 다행히도 웹은 사용자와 상호작용(interactive)이 가능한 요소(element)는 기본적으로 키보드로 포커스가 잡히게 되어 있습니다. 대표적으로 <input>,
HTML에는 모든 엘리먼트를 대상으로 사용할 수 있는 속성이 존재하는데요. 이를 전역 속성(global attribute)이라고 합니다. 이번 포스팅에서는 HTML에서 자주 사용되는 전역 속성에 대해서 알아보겠습니다. style 아무래도 많은 분들에게 가장 익숙한 HTML 전역 속성은 style일 것입니다. style 속성은 해당 엘리먼트에 인라인으로 CSS 스타일을 선언하고 싶을 때 사용합니다. class 두번째로 살펴볼 HTML 전역 속성은 class인데요. HTML 문서 상에서 여러 엘리먼트를 하나의 이름으로 묶고 싶을 때 사
모든 HTML 문서는 크게 head 영역과 body 영역으로 나누어 집니다. 이번 포스팅에서는 웹 개발을 하면서 간과하기 쉬운 head 영역에 대해서 살펴보려고 합니다. head 요소 HTML의 <head> 요소(element)는 <body> 요소와 함께 HTML 문서의 최상위 요소인 <html> 바로 아래 위치합니다. 브라우저 화면에 보여지는 영역을 감싸고 있는 <body> 요소와 달리 <head> 요소는 화면에 보여지지는 않지만 브라우저가 해당 HTML 문서에 대해서 알아야 할 정보를 감싸고 있습니다. 그럼, head 영역에는
웹 페이지의 레이아웃을 디자인할 때 CSS에서 요소의 너비를 정의하는 width 속성이 매우 중요한 역할을 하게 되는데요. 이번 포스팅에서는 CSS의 width 속성의 기본적인 사용법과 각 속성값에 따라 어떻게 너비가 결정되는지에 대해서 알아보겠습니다. width 속성 CSS의 width 속성은 HTML 요소의 너비를 제어하기 위해서 사용되는데요. 크게 절대값, 상대값, 키워드로 설정이 가능한데 이에 따른 너비가 어떻게 결정되는지 이해하는 것이 중요합니다. 절대값 px와 같은 절대 단위를 사용하여 width 속성값을 지정해주면 해당
이번 포스팅에서는 fontsource를 사용하여 웹폰트를 직접 호스팅하는 방법에 대해서 알아보겠습니다. fontsource fontsource는 오픈 소스(open source) 웹폰트를 npm 패키지의 형태로 손쉽게 설치하고 직접 호스팅이 가능하게 해주는 라이브러리입니다. 웹폰트를 사용할 때 Google Fonts와 같은 외부 서비스를 통해서 웹폰트를 호스팅하는 경우가 많은데요. 하지만 다양한 웹폰트를 사용하거나 속도가 민감한 서비스의 경우에는 웹폰트를 직접 호스팅하면, 웹폰트 다운로드로 인한 지연을 최소화하여 사용자 경험을 개선
웹폰트(web font)를 사용하면 사용자의 컴퓨터에 설치된 폰트뿐만 아니라 웹에서 다양한 폰트를 불러와서 웹사이트에 적용할 수 있습니다. 뿐만 아니라, 사용자가 어느 플랫폼에서 웹사이트를 이용하든 항상 동일한 글꼴로 텍스트 컨텐츠를 보여줄 수는 있다는 장점도 있습니다. 이번 포스팅에서는 Google Fonts를 통해서 웹폰트를 웹사이트에 적용하는 방법에 대해서 알아보겠습니다. 웹폰트 선택하기 웹사이트에 웹폰트를 적용하려면 우선 사용하고 싶은 웹폰트를 골라야겠죠? 유료로 웹폰트를 구매할 수도 있겠지만 본 포스팅에서는 무료 웹폰트를
이번 포스팅에서는 화면의 한 곳에 고정되어 있는 UI를 구현할 때 사용되는 CSS의 고정 배치(fixed positioning)에 대해서 알아보도록 하겠습니다. Fixed Position CSS의 고정 배치(fixed positioning)를 사용하면 브라우저의 전체 화면(viewport)을 기준으로 HTML 요소를 배치할 수 있습니다. CSS의 position 속성은 HTML 요소가 어떻게 배치되는가를 결정하는데, 이 속성의 값을 fixed로 지정해주면 고정 배치가 적용됩니다. HTML 문서 상에서 고정 배치가 적용된 요소는 부모
웹 개발을 하다보면 <script> 요소를 이용해서 HTML 문서 안에 자바스크립트 코드를 삽입하는 경우가 필연적으로 생기기 마련인데요. 이번 글에서는 이렇게 정말 자주 사용하게 되는 <script> 요소를 좀 더 효과적으로 사용하는 방법에 대해서 알아보겠습니다. script 요소의 위치 혹시, 브라우저가 <script> 요소를 어떻게 처리하는지 생각해보신 적이 있으신가요? 당연한 얘기처럼 들리기시겠지만 브라우저는 HTML 문서를 처리하다가 <script> 요소를 만나면 src 속성에 명시된 경로의 파일을 내려받아 자바스크립트 코드
CSS로 웹사이트의 레이아웃을 잡다보면 브라우저 화면 맨 중앙에 어떤 HTML 요소를 배치해야 할 경우가 자주 생기지요? 이번 글에서는 CSS의 Flexbox나 Grid를 활용하여 얼마나 쉽게 HTML 요소를 브라우저 화면에 중앙에 위치시킬 수 있는지 알아보겠습니다. 기본 HTML/CSS 중앙에 위치시킬 컨텐츠(content) 요소와 이 요소를 감싸는 래퍼(wrapper)요소에 대한 HTML 마크업을 하겠습니다. 그 다음 각 요소를 구분하기 쉽도록 CSS로 약간의 스타일을 해주겠습니다. 여기서 주의 깊게 보실 부분이 바로 래퍼 요소
CSS를 사용하다 보면 정말 간단한 정렬이 생각처럼 되지 않아서 애를 먹는 경우가 있습니다. 특히 초보자들이 많이 겪는 문제가 HTML 요소(element)를 우측으로 정렬하는 것입니다. HTML 웹페이지의 레이아웃에서 HTML 요소를 우측으로 정렬해야 하는 대표적인 경우는 헤더 영역입니다. 예를 들어, 다음과 같이 사이트명과 네비게이션으로 이루어진 간단한 헤더를 생각해보겠습니다. <h1> 요소와 <nav> 요소가 같은 줄에 나란히 배치될 수 있도록, CSS의 display 속성값을 변경해주겠습니다. 지금부터 <nav> 요소로 마크