RAMY, LEE - 은은한 조약돌이 되기 위한 정진의 길.

안녕하세요! 레미입니다. 4년전 작업했던 앱에서 본문을 스크롤링하면 상태바와 홈버튼 영역에 컨텐츠가 그대로 노출되는 이슈가 발생하였습니다. 홈버튼 영역의 경우 스크롤링을 하지 않아도 화면 로드시 컨텐츠가 노출이 되어 하단 버튼이 붕 - 떠보이는 현상이 있었습니다. 해당 앱은 특정 서비스가 메뉴로서 들어간 화면이었습니다. 그래서 다른 메뉴의 화면은 정상적으로 표현되나, 저희 화면만 문제가 있어서 해결하는데 좀 더 집중한 작업입니다. 그래서 기록차 글로 남겨봅니다. 1차 테스트 01정상적으로 표현되는 다른 화면과의 차이점 찾기 - safe area 이슈를 구글링하면, meta viewport 태그에 "viewport-fit:cover" 속성을 추가하라는 글을 찾을 수 있습니다. head 태그도 따로 관리가 ..

안녕하세요~ 레미입니다. 오늘은 매우 간단한 css 팁을 데려왔어요. 웹사이트에서 기사와 같은 텍스트를 드래깅하면 아래 이미지와 같은 파란색의 배경 + 흰색 글자 색상을 볼 수 있습니다. 브라우저에서 기본적으로 제공되는 스타일이에요. 그 색상을 "::selection" 이라는 선택자로 손쉽게 변경할 수 있는데요. 배경, 글자색 뿐만아니라 더 다양한 항목의 색상과 모양을 바꿀 수 있다는 점이 재밌어요. 저도 이 글을 포스팅 하기 위해 찾아보며 더 자세히 알게 되었습니다. "::selection" 소개 - 글자를 마우스로 선택하거나 드래깅했을 때 특정 태그에 스타일을 적용할 수 있는 가상 선택자입니다. 사용 방법 - css에 아래 예시와 같이 설정할 수 있습니다. "::selection"만 사용 시 모든 태..

안녕하세요! 레미입니다. select 박스 디자인을 변경하는 3가지 방법을 소개해드리려고 합니다. 구글에서 검색하면 아주 손쉽게 방법을 찾으실 수 있는데요. 제가 직접 겪은 디자인 변경 이슈 해결 방안도 함께 공유해 드리겠습니다. 눈에 잘 띄도록 핑크색 화살표로 변경해보았습니다 :) 1. select 박스 자체의 디자인을 제거 후, background를 활용하여 새로운 화살표 이미지 적용하기. - 제일 간단하게 사용할 수 있고, 제일 많이 쓰이는 방법입니다. 위 이미지의 핑크색 점선으로 표시한 속성이 핵심입니다. ① select 박스 자체의 화살표 appearance를 제거합니다. IE 대응을 위하여 스타일 추가 적용이 필요합니다. EX. select { -webkit-appearance:none; /*..

안녕하세요! 레미입니다. 오늘은 수평정렬에 대한 내용을 가져왔어요. display:inline-block; 실무에서 참 많이 사용합니다. 하지만, 큰 단점 하나를 꼽으라면 자체적으로 3~4 픽셀의 여백을 가지고 있다는 점입니다. 수평 정렬을 시킬 땐 1~2픽셀 차이만 나도 조금 분산되어 보이는 느낌이 드는데요. 3픽셀 이상 차이가 나면 반듯한 느낌을 주기 힘들답니다. 그래서, inline-block으로 지정했을 때 여백을 없애는 방법 3가지+flex layout을 소개해 드리려고 합니다. 위 이미지는 display:inline-block;으로 지정 후, 생기는 3~4픽셀 가량의 여백 예시입니다. 꽤 넓지요? 위 이미지는 아래 소개되는 방법으로 여백을 제거한 예시입니다. 1. float 속성 사용하여 강제..

안녕하세요! 레미입니다. 오늘은 nth-child의 효율적인 사용법에 대한 글을 써보고자 합니다. 근래에는 최신 브라우저 지원을 주로 하며 flex를 많이 사용하게 되었어요. 그러면서 자연스레 nth-child나 only-child 등의 사용이 늘어났습니다. nth-child를 사용하기 전에는 일일히 태그에 클래스를 부여해서 사용하는 경우가 대부분이었는데, (first-child, last-child 이 외의 항목을 선택해야 하는 경우) 요즘엔 좀 더 랩업한 느낌이 들기도 합니다. 허허 좋은건 공유해야지요. 1. 홀수, 짝수 - 홀수 선택자 : nth-child(odd) - 짝수 선택자 : nth-child(even) 2. n의 배수 - 3의 배수 선택자 : nth-child(3n) 3. n번째부터 n번..

안녕하세요 ~ 레미입니다. 이번 내용은 파이어폭스 브라우저에서 select 선택 시, option 박스에 점선이나 실선이 생기는 현상에 대해 이야기해보려고 해요! 이 현상은 단순하게 outline:0 속성으로 해결될 줄 알았으나! 해결되지 않더라고요. 그래서 구글링 하여 찾은 아래와 같은 방법으로 해결했습니다. select { color: transparent !important; text-shadow: 0 0 0 #000 !important; } 위처럼 추가하고, select option { color:#333; } 옵션에 컬러 재지정하지 않으면 option 컬러가 안 나올 수 있으니 꼭 지정해주세요. 그러나, 웹 접근성 준수할 시엔 outline을 살려야 합니다. 웹 접근성 미준수 시에만 사용해 주세..

안녕하세요~ 레미입니다. 이번에도 FLEX layout과 관련된 글을 데려왔습니다. 바로 본론으로 들어갈게요! IE에서 수직 중앙 정렬이 안되는 경우가 있습니다. (하,, 또 IE가,,,) 이런 경우 해결 방안은 center 정렬이 될 자식의 부모 태그에 고정 높이가 있어야만 center 정렬이 됩니다. min-height, max-height가 설정되어 있어도 전부 무시되며, height가 적용 된 경우에만 속성이 적용되어야 합니다. 사용예는 아래와 같아요. .box-wrap { display:-ms-flexbox; display:flex; justify-content:space-between; align-items:center; height:300px; } .box { flex:0 0 calc(50%..

flex layout 사용시, flex content의 초기 너비 설정 속성인 flex-basis는 IE에서 제대로 적용하려면 세심하게 조정해야 합니다. Chrome, Firefox, Edge 등 타 브라우저의 flex basis의 너비 값 계산은 큰 문제 없이 참 잘되요. 일단, 이해하기 쉽도록 예를 먼저 들어보겠습니다! 만약 IE 브라우저에서 content의 너비가 100px 일 경우, flex-basis:100px;을 지정했다면 padding, border, margin의 값을 제외한 오직 content의 너비여야 합니다. padding이 양옆으로 10px씩 들어가 있으면 IE 브라우저는 너비를 120px로 인식해요. 잠깐! 그럼 box-sizing의 border-box 주면 되는거 아니에요? 라고..