본문 바로가기

UX 개발/CSS

[CSS] webkit 브라우저 input 텍스트 필드의 색상 변경하기 크롬, 사파리 등에서 텍스트필드의 글자색이 회색으로 나타날 때... 브라우저별로 input 텍스트필드에 대한 에이전트 스타일은 상이합니다. 사파리, 크롬에서 원하는 색상으로 텍스트 색상을 설정하려면 별도의 속성 정의가 필요합니다(특히 #000, #FFF 등의 색으로 변경할 때 조금 회색빛이 도는 이슈를 방지할 필요가 있을 때). 이런 상황은 iOS 및 Safari 또한 스타일 강제성이 다소 높은 편입니다. 특히 Disabled 속성이 부여된 input 요소에 대한 강제성이 강한 편인데, 기본적으로 40%의 투명도를 갖는 회색으로 표현이 됩니다. 이를 수정하기 위해서는 별도 Webkit 브라우저(Safari, Chrome, Edge)용 속성을 사용하고, opaicty를 함께 부여해 주어야 합니다. 하기 코..
CSS 클래스 네이밍 시 container vs wrapper 차이 구분하기 콘테이너로 정할까, 랩퍼로 정할까... container와 wrapper 모두 일반적으로 엘레먼트를 포괄하는 요소로서의 의미를 지니고, 클래스 이름으로 많이 사용되는 단어들입니다. 무언가를 포함한단는 데에서 같은 의미의 단어로 사용할 수 있고, 작성자와 해독자 입장에서 구분 없이 해당 내용을 받아들이는 데에 큰 문제가 없을 것입니다. 다만 보다 엄격하게 두 단어를 구분하여 사용한다고 하면 다음과 같은 내용을 참고하여 의미 구분을 할 수 있을 것으로 보입니다. 본 내용은 스택오버플로우에서 2010년 논의된 'CSS Language Speak: Container vs Wrapper?'의 내용을 기반으로 작성되었습니다. 해당 논의 내용을 보면, 기보적으로 차이를 두지 않고서 사용해도 무방하지만, 엄격하게 구분..
Border 속성이 부여된 박스 내부에 absolute 포지션 사용하기 Border는 CSS 박스의 콘테이닝 영역에서 제외되는 특징을 지닙니다 Border 속성은 CSS 박스 모델에서 별도의 고유 구성체계를 지니는 것처럼 보입니다. 값이 지정되면 border가 속하는 박스의 width와 height 값에 상관없이 영역을 차지하지만, 박스에 종속된 것이 아닌 별도의 개체처럼 활용이 됩니다. Border 속성의 개별성이 가장 잘 드러나는 특징은 border가 속하는 박스의 실제 콘텐츠를 감싸는 콘테이닝 영역에서 제외된다는 점입니다. 100px x 100px의 박스를 만들고 2px의 border를 부여한 박스가 있다고 했을 때 border는 콘테이닝 영역에서 분리됩니다. 이것은 박스 내부에 자식 엘리먼트의 위치를 정하는 데에 불편요소로 작용할 수 있습니다. Absolute 등의 ..
display: none에 애니메이션 추가하기 display: none을 활용한 element의 숨김/표시는 가장 기본적인 방식의 show/hide 처리방법입니다. 다만 CSS transition이 적용되지 않기 때문에 자연스러운 애니메이션을 구현하기 위해서는 약간의 추가적인 작업을 필요로 합니다. 간단한 클래스 추가 과정을 통해서 display: none을 활용한 show/hide 처리에 애니메이션을 추가하는 방법을 알아보고자 합니다. 기본적으로 animation을 display 개체에 추가해서 애니메이션을 추가함과 함께 display: none 속성을 애니메이션 재생 이후에 딜레이를 주어 추가함으로써 자연스러운 트랜지션이 가능하게 하는 방식입니다. [2022-02/2022-06 내용 추가] 본 내용은 display: none에 애니메이션을 추가하..
CSS 한글 웹폰트 자간(letter-spacing) 자동으로(상대적으로) 조정하기 (내용수정, 2020-04-21) em의 수치가 %와 비슷하게 작동한다는 내용 추가 타이포그래피라는 단어가 영어라는 점에서 알 수 있듯 기본적인 이론과 기술의 근원이 영어 즉, 라틴문자를 중심으로 구성이 되어 있습니다. 하지만 한글은 기본적으로 영어와는 전혀 다른 특성을 가지고 있는 글자체계이기 때문에 적용 기술이 영어를 대상으로 하는 것과는 달라야 합니다. 그 중에 특히 차이가 심한 요소가 자간입니다. 한글 웹폰트의 자간 웹폰트를 떠나서 대부분 한글 디지털타입페이스는 자간이 다소 넓습니다. 글자 요소별 kerning이 이루어져 있는 영어와 달리 기술적 제약이 있는 것인지 모르겠지만, 대부분의 디지털타입페이스가 그러합니다. 그래서 한글의 경우 자간조정이 거의 필수적으로 이루어지는 경우가 많습니다. CSS..
Reduced/비애니메이션 이슈/디바이스 대응 CSS 작성법 CSS 애니메이션 테스팅 in 애니메이션 저하 환경 디바이스 및 OS의 설정에서 애니메이션을 감소시키는 설정이 켜져 있는 경우가 있습니다. 이 경우 웹브라우저에도 영향을 주어 CSS 애니메이션이 일부 작동하지 않게 됩니다. 특히 opacity를 0에서 1로 바꿔서 컨텐츠를 표시하는 애니메이션을 구성한 경우, 자칫 웹사이트의 컨텐츠 자체가 표현되지 않는 문제가 발생할 수 있습니다. 특히 유명한 라이브러리 중 하나인 animate.css를 활용한 애니메이션을 구성할 때 이러한 구성이 자주 발생합니다. 이같은 문제에 대응하기 위해서는 애니메이션이 저하된 디바이스에 대응하기 위해 구성된 미디어쿼리를 설정해 주어야 합니다. 이는 다음 코드에서 확인하실 수 있습니다. 비애니메이션 대응은 단순히 특정 환경이라고 치부..
CSS 기본 시스템 폰트 설정 (2019) 각 운영체제 별로 기본 시스템 폰트를 로드하는 CSS 코드. 영문 시스템 폰트를 로드하는 것을 기본으로 되어 있기에 특정 국가에 대한 폰트 설정을 목표로 한다면, 폰트 리스트를 추가적/구체적으로 정의해줄 필요가 있다. 운영체제가 업그레이드되면서 기본 시스템 폰트가 변경되는 경우가 있기 때문에, 이 경우에도 새로운 폰트로 정의하는 작업이 필요하다. CSS 코드 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; ..
CSS 리셋 - Normalize.css & Reset.css Normalize 또는 Reset이라고 불리우는, 다양한 브라우저의 기본 설정을 일반적으로 사용되는 스타일로 '초기화'하는 역할을 하는 라이브러리에 대한 소개를 하고자 한다. Normalize를 기반으로 다양한 파생 버전이 등장하고 있다. 대표적인 것이 부트스트랩의 Reboot이 있다. Normalize는 최소한의 리세팅만 제공하므로, 조금 더 편의성이 높은 라이브러리를 찾는다면 좋은 선택이 아닐 수 있다. 다만 미니멀한 코딩이 우선시된다면 Normalize.css를 세팅하고 이를 지속적으로 업그레이드받는 것이(브라우저가 지속적으로 변하듯 이에 대한 Normalize.css도 지속적으로 업데이트되고 있다) 좋은 방법일 수 있다. 좀 더 어드밴스드한 리세팅 옵션을 설정하고 싶다면, 유명 프레..