Tailwind는 최근 웹 개발 분야에서 상당히 인기를 끌고 있는 차세대 CSS 프레임워크인데요. 워낙 호볼호가 많이 갈리다보니 개발자 커뮤니티에서 단골 논쟁거리가 되기도 합니다. Tailwind에 대한 첫 번째 포스팅으로 이번 글에서는 Tailwind에 대한 기본 개념과 기존에 우리가 스타일링해온 방식과 비교해서 무엇이 다른지에 대해서 간략하게 알아보겟습니다. Tailwind란? Tailwind는 쉽게 말해 엄청나게 많은 유틸리티(utility) 클래스로 이루어진 CSS 프레임워크입니다. Tailwind가 제공하는 유틸리티 클래스
많은 웹 개발자분들이 HTML 문서 내에서는 띄어쓰기를 여러 번 하더라도 한 번만 띄어쓰기가 되고, 들여쓰기나 줄바꿈이 무시되는 현상을 한 번쯤은 경험하셨을 텐데요. 사실 이러한 HTML 요소 내의 공백 처리 방식은 CSS의 white-space 속성을 이용하여 쉽게 변경할 수가 있다는 사실을 알고 계셨나요? 공백 문자 우선 HTML에서 어떤 문자를 이용해서 공백을 나타낼 수 있는지 이해할 필요가 있는데요. 바로 띄어쓰기, 들여쓰기(t), 줄바꿈(n)이 대표적으로 공백을 나타내는 문자지요? 이러한 문자들을 아무리 연속해서 많이 사용
웹 개발을 하다 보면 아래와 같이 종종 영단어가 너무 길어서 모바일 환경과 같이 좁은 뷰포트(viewport)에서 부모 요소 밖으로 밀려나오는 경우를 접할 수 있는데요. 꼭 영문 웹사이트가 아니더라도 요즘에는 한국어 콘텐츠에도 워낙 외래어가 많이 사용되고, 게다가 인터넷 URL과 이메일 주소가 대부분 영어로 되어 있어서 의외로 한국어 웹사이트를 구현할 때도 쉽게 겪을 수 있는 문제입니다. 이번 포스팅에서는 웹에서 이렇게 원치 않게 부모 요소 밖으로 삐져나오는 영단어를 처리하는 다양한 방법을 알아보겠습니다. 영어와 한국어의 줄바꿈 차
우리는 보통 웹페이지를 2차원 공간으로 생각하고 웹 개발을 하는 경우가 많은데요. 하지만 복잡한 웹페이지를 구현할 때는 마치 3차원 공간처럼 요소를 앞뒤로 겹쳐서 배치해야 경우가 생기기 마련이죠. 이번 포스팅에서는 이렇게 웹에서 요소의 Z축 방향의 깊이를 결정하는 CSS의 z-index 속성에 대해서 배워보겠습니다. z-index가 없을 때 요소 간 상대적 깊이 z-index 속성에 대해서 본격적으로 배우기 전에 먼저 z-index가 없을 때 어떻게 요소(element) 간의 상대적 깊이가 결정되는지에 대해서 이해하는 것이 중요한데
웹에서 체크박스는 사용자로부터 어떤 동의를 받거나 하나 이상의 옵션을 선택받기 위해 사용되는데요. 양식(form)이나 설문(survey)과 같은 UI를 구현할 때 빠질 수 없는 핵심적인 요소입니다. 이번 포스팅에서는 체크박스(checkbox)를 사용하여 사용자와 다양하게 상호작용을 할 수 있는 React 컴포넌트를 작성해보도록 하겠습니다. Checkbox 컴포넌트 구현 웹에서 체크박스가 쓰이는 가장 흔한 사례는 사용자로 부터 어떤 동의를 받기 위함일텐데요. 이렇게 서로 관련이 없는 체크박스가 하나 이상 필요할 때 유용하게 쓸 수 있
이번 포스팅에서는 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에 비교적 최근에 추가된 의사 클래스(pseudo class) 함수인 :where()에 대해서 알아보겠습니다. 기본 문법 :where() 의사 클래스 함수는 인자로 여러 개의 선택자를 쉼표(,)로 구분하여 넘길 수 있습니다. 위와 같은 CSS 규칙은 마치 아래와 같이 CSS 코드를 작성한 효과가 발생하게 되는데요. 여기까지만 보면 뭐하러 굳이 :where() 함수를 사용해야될까 싶죠? 😅 지금부터 사례를 통해서 :where()를 사용하면 어떠한 이점이 있는지 살펴보겠습니다. 여러 상태 스타일링 :where(
이번 포스팅에서는 CSS Reset(리셋)과 CSS Normalize(노멀라이즈)에 대해서 알아보도록 하겠습니다. CSS Normalize와 CSS Reset의 필요성 세상에서는 여러 가지 브라우저가 있으며 우리가 만든 웹사이트나 웹 애플리케이션이 이 중 어떤 브라우저에서 돌아갈지는 알 수 없습니다. 여기서 문제는 소위 User Agent Stylesheet라고 불리는 브라우저 내장 스타일이 브라우저마다 조금씩 다르다는 것 인데요. 다시 말해서, 우리가 만든 UI가 크롬(Chrome)에서 열었을 때와 사파리(Safari)에서 열었을
이번 포스팅에서는 순수하게 HTML과 CSS만을 이용하여 아래와 같이 웹에서 어렵지 않게 볼 수 있는 토글 스위치 UI를 만들어보겠습니다. 토글 스위치란? 먼저 웹에서 토글(toggle) 혹은 토글 스위치(toggle switch)라고도 불리는 스위치(switch) UI 대해서 짚고 넘어가겠습니다. 마치 우리가 집 안에서 조명을 켜고 끌 때 사용하는 벽에 붙어있는 스위치를 상상하면 쉬울 것 같은데요. 웹에서도 이렇게 사용자가 어떤 기능을 켜거나 끌 수 있도록 해야하는 경우가 생기기 마련입니다. 좋은 사례로, 알람(notificati
웹에서 라디오 버튼은 사용자로부터 여러 가지 옵션 중 하나를 선택받기 위해 사용되며, 양식(form)이나 설문(survey)과 같은 UI를 구현할 때 빠질 수 없는 핵심적인 요소입니다. 이번 포스팅에서는 React를 사용하여 여러 개의 라디오 버튼으로 이루어진 라디오 그룹 UI를 어떻게 구현할 수 있는지 알아보겠습니다. HTML과 CSS만으로 라디오 버튼을 사용하는 방법은 관련 포스팅을 참고 바랍니다. Radio 컴포넌트 작성 먼저 개별 라디오 버튼을 그리기 위한 React 컴포넌트를 작성해보겠습니다. 라디오 버튼은 HTML에서 <
지난 포스팅에서는 HTML 문서에 SVG로 다양한 그림을 그리는 방법에 대해서 알아보았습니다. 이번 포스팅에서는 HTML 문서에 삽입된 SVG 요소를 CSS로 스타일하는 방법에 대해서 알아보겠습니다. SVG 요소 우선 스타일할 SVG 요소가 있어야겠죠? 아래 SVG 요소는 로그인이 필요한 웹사이트에서 흔히 볼 수 있는 사용자 아이콘인데요. 이 요소를 상대로 간단한 실습을 해보려고 합니다. 크기 조정 위의 사용자 아이콘이 너무 작은 것 같은데요. 먼저 크기를 좀 키워볼까요? SVG 요소를 크기를 조정할 때는 viewBox 속성을 고려
이번 포스팅에서는 CSS를 이용하여 라디오 버튼을 스타일하는 요령에 대해서 알아보겠습니다. 차근차근 따라오시다보면 아래와 같은 라디오 버튼을 만드실 수 있으실 거에요. 🍅😄 왜, 라디오 버튼을 스타일할까? 먼저 웹사이트를 만들 때 라디오 버튼(radio button)을 뭐하러 직접 스타일하는지에 대해서 잠깐 짚고 넘어가겠습니다. 일반적으로 웹사이트에서 라디오 버튼은 브라우저나 운영체제, 디바이스에 따라서 미묘하게 다르게 표현이 됩니다. 그래서 플랫폼에 구애받지 않고 일관적인 사용자 경험을 제공하기 위해서 라디오 버튼에 커스텀 스
모바일 우선(mobile-first) 웹디자일 할 때 컨텐츠를 위에서 아래로 배치하는 화면 레이아웃을 제일 먼저 고려하게 되는데요. 이 때 대부분의 경우 컨텐츠 (특히, 텍스트 컨텐츠)를 수평 중간에 위치시켜야 하죠? 이번 포스팅에서는 CSS로 레이아웃 잡을 때 컨텐츠를 수평 중간에 정렬하는 요령에 대해서 알아보려고 합니다. 수평 중간 정렬 컨텐츠를 수평에 정렬하는 작업은 웹페이지의 여러 부분에 걸쳐서 일어나게 되므로 보통 클래스로 스타일하는 경우가 많습니다. 관례적으로 container나 max-width-wrapper와 같은 클
이번 포스팅에서는 화면(viewport) 너비에 따라서 적절히 반응하는 글꼴을 CSS로 어떻게 스타일하는지 알아보겠습니다. Media Queries 반응형 글꼴하면 가장 쉽게 떠올리리 수 있는 방법이 바로 미디어 쿼리(media query)를 사용하는 것입니다. 예를 들어, 화면 너비가 480px 이상과 1024px 이상이 되었을 때 HTML의 여러 요소(element)와 클래스(class)에 적용된 글자 크기가 자동으로 늘어나게 스타일해볼까요? 오래전 부터 쓰이던 이 방법은 보시다시피 동일한 CSS 선택자에 대해서 여러 번 스타일
웹이 지금과 같이 대중적인 플랫폼이 되는데 서로 다른 웹페이지를 무한대로 연결해주는 HTML의 링크(link)가 중요한 역할을 했을텐데요. 이번 포스팅에서는 HTML의 <a> 요소로 마크업이 되는 링크(link)를 CSS로 스타일하는 방법에 대해서 알아보겠습니다. 브라우저 기본 링크 스타일링 우리가 굳이 링크를 스타일해주지 않더라도 대부분의 브라우저에서는 링크를 유관으로 구분하기 쉽도록 기본적으로 스타일을 제공하는데요. 보통 이렇게 브라우저 자체에서 지원하는 기본 스타일을 User Agent Stylesheet이라고 합니다. 크롬
React에서는 컴포넌트 스타일링을 위해서 CSS-in-JS 라이브러리가 매우 많이 사용되고 있는데요. 이번 포스팅에서는 Styled Components와 함께 CSS-in-JS 라이브러리의 양대산맥으로 손꼽히는 손꼽히는 이모션(Emotion)을 사용해서 React 컴포넌트를 스타일하는 방법에 대해서 살펴보겠습니다. 외부 라이브러리 없이 React 컴포넌트를 스타일링하는 방법은 React 컴포넌트 CSS 스타일링 기본을 참고 바랍니다. 패키지 설치 자바스크립트 패키지 매니저인 npm을 이용하면 React 프로젝트에 Emotion을
사이트 네비게이션(site navigation)은 웹사이트에서 사용자가 효과적으로 페이지 사이를 이동을 할 수 있도록 도와주는 매우 흔하면서도 중요한 UI 입니다. 이번 포스팅에서는 React와 Styled Components를 이용하여 아래와 같은 다단계 사이드 네비게이션 UI를 한 번 구현해도록 하겠습니다. 컴파운트 컴포넌트 HTML에는 부모없이는 단독으로 쓰이지 않는 요소들이 있습니다. 대표적인 예로 <option> 요소는 항상 <select> 요소 안에서 사용되며, <li> 요소는 항상 <ul>이나 <ol> 요소 안에서 사용