documenting and archiving

프론트엔드 개발을 하다 보면 Flex를 사용하여 레이아웃을 구성하는 경우가 많다.특히 리스트나 테이블 형태의 UI에서 왼쪽에는 텍스트를, 오른쪽에는 날짜를 배치하는 등의 디자인은 매우 흔하게 사용된다.이때 텍스트가 너무 길어질 경우 말줄임 처리를 해줘야 하는데, Flex 레이아웃 안에서 이 속성들만 적용하면텍스트가 부모 컨테이너를 벗어나버리는 문제가 발생한다.왜 이런 현상이 발생하는 걸까? 이 문제가 발생하는 이유는 Flex 아이템의 기본 동작 방식 때문이다.Flex 아이템의 기본 min-width 값은 automin-width: auto일 경우, Flex 아이템은 자신의 콘텐츠가 줄어드는 것을 방지하려고 한다.따라서 텍스트가 길어지면 부모 컨테이너의 크기를 무시하고 콘텐츠 크기만큼 늘어나버린다.이 문제..

크롬에서 제공하는 자동완성 기능을 사용하면, 이렇게 input의 배경색이 파란색으로 바뀐다.자동완성의 배경컬러를 없애기 위해서는 input:autofill에 스타일을 적용해주면 된다. input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active { -webkit-text-fill-color: #000; -webkit-box-shadow: 0 0 0px 1000px #fff inset; box-shadow: 0 0 0px 1000px #fff inset; transition: background-color 5000s ease-in-out 0s;}in..

아이폰에서 웹뷰로 웹페이지를 보게 되는 경우, 노치 영역때문에 실제 컨텐츠의 영역을 침범하게 되는 경우가 많았다. 특히 하단에 gnb 형태의 메뉴가 들어가는 경우에는 메뉴 영역까지 노치가 침범해서 클릭 범위가 많이 작아지게 되는 경우가 있었다. 그래서 찾아보다가 알게된 것이 env(safe-area-inset..) 속성이다. bottom-area의 높이를 80px로 준 상태인데, 노치 영역을 제외하고 80px인 상태가 아니라 노치까지 포함되어 버린다. .bottom-area { padding-bottom: env(safe-area-inset-bottom); } bottom-area의 padding-bottom에 env(safe-area-inset-bottom)을 주었더니, 노치 영역을 제외하고 80px이..

input type="text"에 입력이 되었을 때, input 옆에 있는 '작성' 버튼의 컬러가 변경되도록 구현하고자 했다. input의 입력값을 감지하여 어떤 이벤트를 추가하는 것은 보통 JS로 많이 구현하지만, CSS :placeholder-shown 가상 클래스를 사용하여 구현했다. :placeholder-shown은 placeholder가 보여지고 있을 때, 즉 input에 아무것도 입력되지 않았을 때 스타일을 줄 수 있는 가상 클래스이다. button의 기본 컬러는 그레이 컬러로 적용하고, :not과 인접 형제 결합자를 사용해서 input에 placeholder-shown이 아닐 때, 즉 무언가가 입력되어 있을 때 버튼의 텍스트 컬러가 보라색이 되도록 적용해주었다. Can I use에서 확인했..

참고 https://codepen.io/mike-schultz/pen/NgQvGO Animated CSS Gradient Border Inspired by the github universe alert: https://s3-us-west-2.amazonaws.com/s.cdpn.io/173256/github-universe.png... codepen.io https://www.julienthibeaut.xyz/blog/create-animated-gradient-borders-with-css Julien Thibeaut - front-end developer 🌐 I'm Julien Thibeaut, a freelance front-end developer based in Paris. I love to w..

1. 모바일 사파리에서 font-size가 적용되지 않는 경우 미디어쿼리로 모바일에서 font-size를 작게 설정하는 경우, 개발자 도구에서 봤을때는 정상적으로 적용되어 있는데도 실제로는 적용이 안되어 있는 경우가 있었다. 예를 들면 font-size: 10px 등으로 작은 수치로 설정했을 경우 적용되지 않는 경우가 발생했다. 아이폰은 화면 비율에 따라 폰트 사이즈를 자동으로 세팅하는 경우가 있어 발생한 이슈. -webkit-text-size-adjust: none; 적용해서 해결 2. 아이폰에서 a / button 태그의 폰트 컬러가 파란색으로 보이는 경우 a나 button에 폰트 컬러를 명시적으로 적용해주면 해결. 3. 모바일 사파리에서 input type="date" 텍스트 좌측정렬 하는 법 모바..

말줄임표 처리 시 너무 일찍(?) 말줄임 되는 경우 text-overflow: ellipsis; 속성으로 말줄임표 처리를 했을 때, width 값을 부모 요소의 100%로 가지도록 해도 말줄임이 너무 빨리(?) 되어서 위와 같이 노출되는 텍스트가 너무 짧아지는 경우가 있었다. div { width: 100%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; word-break: break-all; } 이럴 경우에는 word-break: break-all; 속성을 같이 써주면 해결되었다. 텍스트 길이로 요소의 width가 변경되어야 하는 경우 요소의 텍스트 길이로 그 요소의 width값이 늘었다 줄었다 변경되어야 하는 경우가 있다. 그런데 ..

1줄 말줄임표 적용 .text { width: 100%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } 반드시 width 값이 들어가야한다. 2줄 이상 말줄임표 적용 .text { display: -webkit-box; width: 100%; height: 60px; text-overflow: ellipsis; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } -webkit-line-clamp는 몇 줄까지 나올지를 정한다. 위의 예시는 3이므로 3줄까지 나오도록 한다. width / height값이 들어가야한다.

line-height(행간) css로 변환 ((행간 - 폰트사이즈) / 2) ex) 행간 20px, 폰트사이즈 10px인 경우 (20 - 10) / 2 = 5 -> css에 line-height: 5로 적용 letter-spacing(자간) css로 변환 포토샵에서는 1/1000em으로 측정됨. ex) 포토샵에서 letter-spacing 수치가 -40인 경우: -0.04em 포토샵에서 letter-spacing 수치가 100인 경우: 0.1em 참고 사이트 https://www.benmarshall.me/convert-photoshop-letter-spacing-to-css/ Convert Photoshop Letter Spacing to CSS - Ben Marshall Convert Photosho..