반응형 작업을 위해서 모바일을 작업하는 중에 a 태그 또는 button 요소를 터치 시 영역의 색상이 변화하는 문제를 발견했다. 기능적인 문제는 아니지만 페이지를 보는 입장에서는 거슬리고 불완전하다고 느낄 수 있었다. ( 이것을 디자인적인 요소로 배치한다면 몰라도 의도치 않은 경우라면! ) 이것을 해결하기 위해서 -webkit-tap-hightlight-color 를 사용했다. .link { -webkit-tap-hightlight-color: transparent } transparent 속성을 줘서 간단하게 제거가 가능하다. 그 외에도 색상을 준다면 해당 색으로 영역을 변화시킬 수 있다.

웹 사이트를 디자인하다보면 글자색에 배경 이미지가 들어가는 경우가 있다. 해당 기능을 구현하는 것은 생각보다 간단한데, 알아보자 필요 속성 ▶ color : 배경 색을 넣어야하기 떄문에 당연 필요! ▶ background-image : 이미지를 넣어서 배경을 꾸미기 때문에 사용한다. ▶ background-clip : 텍스트를 이미지로 표현할 수 있다. ▶ -webkit-background-clip : -webkit 은 웹 브라우저 엔진으로 구글, 사파리 등에서 css 속성을 사용할 수 있게 한다. 이제 이것으로 적용을 해보자 .image_text { color: transparent; background-image: url("이미지 경로"); background-clip: text; -webkit-ba..

메뉴, 리스트 등을 여는 애니메이션을 구현하기 위해서 hight 값을 조작하는 경우가 많다. 하지만 height 값에 변화는 생기지만 transition이 적용되지 않는 경우가 발생했다. .menu { height: 0; overflow: hidden; transition: all 0.8s } .menu_active { heigth: auto } 이론상 menu 클래스만 가지고 있는 엘리먼트가 menu_active 클래스를 가지게 된다면 자식 엘리먼트의 height 값 만큼 커지면서 애니메이션이 발생되어야 한다. 하지만 display: none을 했을 때 애니메이션이 발생하지 않는 것처럼 아무런 애니메이션이 작동하지 않았다. 그 이유는 height 값이 auto라면 transition이 작동하지 않는다고..

이미지와 같은 요소는 너비 값을 px 등의 단위로 고정하기 쉽지 않다. 반응형 환경에서 고정으로 두면 화면의 크기에 따라 너무 커지거나 작아지기 때문이다. 그래서 %로 설정하는 경우가 있는데, 원본 사이즈가 1 : 2인 요소를 1 : 1 비율로 화면에 나타내야 하면 어떨까? 생각만 해도 머리가 아픈 상황이다. 기본적으로 이미지를 비율에 맞춰 자르려면 object-fit을 사용해서 본인은 처리하는데, object-fit을 사용하려면 고정적인 size를 가져야한다. 하지만 앞서 말한 것처럼 고정적인 값을 가지면 반응형 환경에서 문제가 생긴다. 이도저도할 수 없는 최악의 상황이다. 여기서 도움을 주는 것이 aspect-ratio이다. aspect-ratio 요소의 크기를 비율대로 조정할 수 있는 css 속성이..

IE 환경의 고민이 사라졌다고 프론트엔드 개발자는 쉽게 마음을 놓으면 안된다. 바로 사파리 환경이 있기 때문이다. ( 모든 환경의 기본 스타일이 통일되길 기원합니다... ) 크롬과 사파리의 스타일이 다른 부분은 많지만 이번에 input을 작업하면서 다른 스타일로 내가 설정한 디자인이 깨지는 것을 발견했다. 사파리에서는 input이 기본적으로 둥근 모서리와 그림자를 가지고 있다. 그래서 따로 초기화를 하지 않으면 내가 설정한 스타일에 둥근 모서리와 그림자가 추가된다.. input { -webkit-border-radius: 0; -webkit-appearance: none; } 다음과 같이 설정해주면 input의 스타일이 초기화된다. radius는 둥근 모서리에 대한 설정이며, appearance는 그림자..

디자인이 너무 이쁜 Toggle 버튼이 있어서 해당 코드를 베이스로 CSS 공부를 하려고 한다. 컴포넌트 분석 // components/toggle import { useState } from "react"; import "./toggle.style.css"; const Toggle = () => { const [toggle, setToggle] = useState(false); const handleClickToggle = () => { setToggle((prev) => !prev); }; const btnClassName = [ "toggle-btn", toggle ? "toggle-btn-on" : "toggle-btn-off", ].join(" "); return ( ); }; export de..

CSS를 사용하다보면 가상 클래스 또는 가상 요소 선택자를 사용한다. 사용하면서 우리는 두 개가 같은 거라고 생각하며 사용하고 있지만 실제로는 둘은 다른 녀석들이다. 가상 요소 실제로 존재하지 않는 가상의 요소를 만들어서 스타일을 주는 것을 말한다. 사용할 때 콜론( : )을 사용할 수 있지만 가상 클래스와 구분하기 위해서 이중 클론( :: )을 권장한다. 대표적인 가상 요소들을 나열하자면, ▶ ::before : 지정된 요소의 앞에 가상의 요소 생성 ▶ ::after : 지정된 요소의 뒤에 가상의 요소 생성 ▶ ::placeholder : Input 필드의 힌트 텍스트에 스타일을 적용한다. ▶ ::selection : 사용자에 의해서 선택(드래그)된 텍스트 영역의 속성을 변경한다. ▶ ::first-l..

브라우저에서 텍스트를 드래그하거나 더블 클릭해서 선택할 수 있다. 그런데 이것을 막으려면 자바스크립트로도 가능하겠지만 CSS를 사용해서도 막을 수 있다. 바로 user-select를 사용해서! 사용 방법은 다음과 같다. user-select: auto | all | none | text user-select는 4가지 설정을 줄 수 있으며, 기본 값은 auto이다. 각 옵션의 기능은 다음과 같다. ▶ auto : Default 값, 브라우저 허용 시 텍스트 선택 가능 ▶ all : 더블클릭이 아닌 클릭 만으로도 선택이 가능 ▶ none : 텍스트 선택 불가 ▶ text : 텍스트 선택 가능 -webkit-user-select: none; -moz-user-select: none; -ms-user-selec..