어제보다 더 나은 오늘

부모 요소의 state에 따라 특정 자식 요소의 스타일을 지정해야 하는 경우, 먼저 부모 요소에 `group` 클래스를 작성하고, target 요소에는 `group-hover` 등 `group-*` modifier를 사용해 스타일을 지정할 수 있다.  예를 들어 다음과 같은 책 상세 페이지에서 한 줄 평 영역에 마우스를 hover할 때 편집 버튼이 나타나게 하고 싶다면 다음과 같이 코드를 작성할 수 있다.   이 동작을 css에서 직접적으로 구현하려면 다음과 같은 방식으로 할 수 있다.   즉, Tailwind CSS의 `group`은 css의 가상 클래스와 자식 선택자를 활용해 부모 요소의 상태에 따라 자식 요소의 스타일을 지정하는 기능을 제공하는 것이다.  실제로 빌드 파일을 살펴보면 다음과 같은 라..

1. 요소의 indeterminate 상태 :indeterminate - CSS: Cascading Style Sheets | MDNThe :indeterminate CSS pseudo-class represents any form element whose state is indeterminate, such as checkboxes that have been set to an indeterminate state with JavaScript, radio buttons which are members of a group in which all radio buttons are uncheckdeveloper.mozilla.org 체크박스 그룹이 있을 때 한 개 이상의 아이템에 체크가 되었을 때 Check al..

input 요소의 focus 여부에 따른 스타일 속성을 정의하던 중 input 안의 placeholder가 미세하게 튀는 현상이 나타났다. input의 border 속성이 레이아웃에 영향을 주는 reflow를 유발하기 때문이었다. - reflow가 일어나는 속성: border - repaint만 일어나는 속성: border-radius, border-style, outline 📍 outline의 특징: - 요소의 콘텐츠 밖에 그려지며 절대 공간을 차지하지 않는다. - border와 달리 상하좌우 모든 테두리에 적용된다. (border-top 등 한쪽 부분에만 적용할 수 있는 것과 대비됨) - IE7 이하에서 지원되지 않는다. 📍 해결책: outline으로 제어가 가능한 경우라면 reflow를 일으키는 b..

며칠 전 아래의 아티클을 읽었다. 잘못된 css 코드의 몇 가지 유형에 대한 글이었다. css는 정말 어렵다. 맨처음 프론트엔드의 세계에 첫 발을 들여놓았을 때는 자바스크립트의 벽을 느끼지만 시간이 조금만 지나면 오히려 css가 통곡의 벽이라는 걸 느끼게 된다. (통대 입시를 준비할 때는 AB 통역, 즉 모국어를 듣고 외국어로 발화하는 통역이 어렵게 느껴지지만 필드에 나오면 BA 통역이 더 어렵다는 걸 느끼는 것과 똑같다.) [번역] CSS 코드 냄새 원문은 Code smells in CSS다. Code smell은 리팩토링에서 사용하는 단어다. 코드에 이상한 부분이 생기면 냄새가 난다고 표현하는 것이다. 크리스 코이어는 최근 누군가의 질문에 답했다. 질문은 이거 mytory.net 위의 아티클에서 언급..

프로젝트를 진행하면서 공통 UI 컴포넌트를 제작해서 사용했고, 그 중 대표적인 UI 컴포넌트가 버튼이었다. 먼저 프로젝트 진행 과정 중 버튼 컴포넌트의 변천사를 간단하게 정리한 다음, 프로젝트가 끝난 후 새로 알게 된 스타일 컴포넌트의 theming 기능을 적용해 보는 과정까지 기록하고자 한다. 1. styled-components로만 만든 버튼 프론트 팀원 중에서 한 분이 공통 ui 컴포넌트 제작을 맡아주셨다. 처음 만든 공통 ui 버튼 컴포넌트는 활성화/비활성화 느낌으로 두 종류의 다른 색상의 버튼을 컴포넌트명을 달리 해서 사용하는 방식이었다. 이후 다음의 두 가지 이유에서 해당 컴포넌트의 리팩토링 필요성을 느꼈다. 기본 파란색 버튼과 회색 버튼이 아닌 다른 색상의 버튼이 필요해졌다. (카카오톡 로그..

지난 1편에 이어 이틀 전 사전 프로젝트를 마무리한 시점에서 2편을 작성해 본다. 배운게 너무 많아서 어떻게 정리를 해야할지 모르겠지만 일단 하나씩 짧게라도 기록을 남겨본다. 최종편이 몇 편이 될 지는 나도 모름...😇 서버 쪽 배포 환경 유지가 아마 내일까지 밖에 안 될 거 같지만 그래도 남겨보는 배포 링크 https://seb42-pre-025-seb42-pre-025.vercel.app/questions 뉴진스의 Ditto요 seb42-pre-025-seb42-pre-025.vercel.app 클릭하자마자 시선을 강탈하는 빨간 화면이 떠서 깜짝 놀라실 텐데요. 이에 대한 원인은 현재까지 파악하기로는 클론을 너무 똑같이 해서... 구글이 사기성 사이트로 필터링을 하고 있는 것으로 짐작 중입니다. (아..

context 설명: create-react-app을 사용해 프로젝트를 진행 중입니다. 1. 컬러 팔레트 사용 App.css 에 컬러 팔레트를 만들어두고 css 변수를 불러와서 색상을 지정하고 있다. 혼자 과제를 할 때는 색상 팔레트의 편리함을 크게 느끼지 못했는데 여러 명이서 같이 작업할 때 훨씬 더 빛을 발하는 것 같다. App.css가 아닌 index.css 에 컬러 팔레트를 지정하면 var()로 불러올 수가 없던데 왜 안 되는건지 잘 모르겠다. (아직 안 찾아봄..🥲) 📚 참고자료: - CSS 변수 합성의 강력함 - CSS 변수와 웹사이트 테마 2. 공통 ui 컴포넌트 (버튼) 작성 위와 같이 버튼 컴포넌트를 생성하고, 버튼이 필요한 곳에 아래와 같이 컴포넌트를 호출해서 사용하면 된다. 기본 버튼..

1편에 이어 간단하게 정리해 두려고 한다. 1. a tag 초기화 : css 초기화의 경우 일괄적으로 reset을 할 수 있는 코드 뭉치들이 있지만 일단 지금 단계에서는 user agent(브라우저)에서 어떤 세팅들이 있는지, 그게 내가 작성하고자 하는 레이아웃에 어떤 영향을 주는지 알고 싶어서 일괄 적용은 하지 않으면서 css를 작성해보고 있다. a { color: #292827; // theme color 등 원하는 색상 지정 text-decoration: none; outline: none } a:hover, a:active { color:#292827; text-decoration: none; } 2. div 태그 가운데 정렬 태그로 구분선(.divider)을 만들었다. 이제까지 가운데 정렬을 보..

1. Column Grid System Column Grid System이란 컴포넌트들을 화면에 어떻게 배치할 것인지를 정하는 UI 레이아웃 구성법 중에서 화면을 세로로 몇 개의 영역으로 나눌 것인가에 초점을 맞춘 방법론이다. 모바일, 태블릿, PC 등 화면의 크기가 다른 기기에서 화면 구성을 어떻게 할 것인지를 같이 생각할 수 있기 때문에 반응형 웹 디자인에 적합한 레이아웃이라고 할 수 있다. 위의 pocket 사이트의 UI 레이아웃을 대략적으로 클론해 보는 것이 이번 실습의 목표다. 2. 실제 구현 방법 먼저 PC / 태블릿 / 모바일 등 세 가지로 분기로 나눠 화면 구성에 대한 와이어프레임을 파악했다. 오늘도 이렇게 듬성듬성... (피그마 따위 내 사전에 없...) 빨간색으로 표시한 영역이 다른 아..

1. input 초기화 input { border: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; } input:focus { outline: 0; } 2. color 변수 지정 및 사용 /* color palette */ :root { --main-blue: #2563cf; --font-color-primary: #292827; --bg-shadow: rgba(0, 0, 0, 0.1); --bg-hover: rgb(239, 246, 252) } // 사용할 때는 var()로 .task { color: var(--font-color-primary); } 3. svg 파일 색상 변경 - svg 파일에서 fill="currentC..