어제보다 더 나은 오늘

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..

CSS에서 처음 width, height 속성을 배우면서 max-width라는 속성을 알게 되었을 때 바로 머릿속을 스쳐 지나간 것이 하나 있었다. 바로 아이메시지의 말풍선 크기! 기본적으로 메시지 입력값의 크기만큼 말풍선이 감싸지지만 일정 크기 이상 되면 그 이상으로 커지지는 않고 아랫줄로 넘어가는 것이 max-width를 적용한 레이아웃이었구나. (무릎 탁! 🧐) 그래서 바로 따라서 만들어 본 아이메시지 화면. 짠! 자막이랑 뭘로 작업했대? ㅋㅋ 앗 첫번째 구독자다 영광 ㅋㅋㅋㅋ 가족단톡방에 공유 ㅋㅋ 구독자 5명 확보 캬캬캬 Vllo? 예전에 회사서 영상 몇 개 만들때 썼는데 걍 대충 어플 뚝닥이다 한겨 오 모바일 앱인가보네 웅 ㅋㅋㅋㅋ 하 짱귀... 3번 반복 재생 들어간다 어플 편하드라고 ㅋㅋ ..

부트캠프에서 회원가입 페이지의 유효성 검사를 하는 과제가 주어졌다. 요구사항은 아주 간단했다. 아이디가 4글자 이상이어야 함 비밀번호와 비밀번호 확인창의 두 값이 일치해야 함 아이디 길이와 비밀번호 일치 여부에 따른 메시지를 각각의 상황에 적합하게 화면에 출력해야 함 기본 과제는 1) 위의 두 가지 요구사항을 확인하기 위해 true, false 두 가지 boolean 값을 반환하는 함수를 각각 만들고, 2) 해당 유효성 검사 함수 통과 여부에 따라 화면에 적합한 메시지를 출력하는 핸들러 함수를 만들어서 3) 아이디 입력창과 비밀번호 확인 입력창에 2)의 핸들러가 동작하게 하는 keyup 이벤트 리스너를 달면 통과였다. 이벤트 리스너를 달지 않고 onkeyup 으로 처리해도 과제 통과가 되긴 했는데, 기본..