CSS
[DevTools] Tailwind CSS 유틸리티 클래스 자동 정렬 플러그인
[DevTools] Tailwind CSS 유틸리티 클래스 자동 정렬 플러그인
2024.05.13prettier-plugin-tailwindcss 플러그인을 사용하면 TailwindCSS의 유틸리티 클래스 정렬 규칙에 따라 클래스를 자동 정렬해준다. 이전까진 Tailwind Formatter 같은 IDE 플러그인을 사용해서 정렬이 필요할 때마다 부가기능을 실행(⌃ ⇧ H)했는데 그럴 필요가 없어졌다. prettier-plugin-tailwindcss 플러그인을 설치하고 파일 저장시 자동 포매팅 되도록 IDE를 설정하면, 유틸리티 클래스도 함께 정렬돼서 편하다. 참고로 클래스 자동 정렬 외에도 잘못 입력한 클래스 오류 표시, 축약(shorthand) 사용 강제, 임의(arbitrary) 값 사용 금지 같은 규칙이 적용된 eslint-plugin-tailwindcss ESLint 플러그인도 있다. 설정..
[JS] 인라인 스타일 정의 - cssText
[JS] 인라인 스타일 정의 - cssText
2024.05.13cssText는 새로운 요소에 여러 스타일을 추가해야 할 때 유용하다. 기존 인라인 스타일을 완전히 교체하므로 그 외 상황에선 잘 사용하지 않는다. 자바스크립트를 이용해 엘리먼트 스타일을 수정할 땐 elem.style.propertyName(프로퍼티 이름은 카멜 케이스 사용) 으로 접근한 뒤 원하는 스타일 값을 할당하는 방식을 사용한다. 하지만 여러 스타일을 추가할 때마다 일일이 propertyName으로 접근하기엔 조금 번거롭다.// CSS 파일에 width, height, margin, font-size 등의 스타일이 적용된 엘리먼트const $header = document.querySelector('.header');$header.style.fontSize = '20px'; 🔍 엘리먼트의 sty..
[HTML/CSS] form 외부에서 form 연결 / document 객체로 form 접근하기
[HTML/CSS] form 외부에서 form 연결 / document 객체로 form 접근하기
2024.05.11form 외부에서 form 관련 요소 연결form 관련 요소(button, input 등)의 form 속성으로 어떤 form에 속할지(연결) 지정 할 수 있다. 주로 form 외부에 있는 form 관련 요소를 form에 연결할 때 사용한다. 이때 form 요소의 id 값과 form 관련 요소의 form 속성 값이 동일해야 하고, 같은 문서(document)에 있어야 된다. form 내부에 있는 form 관련 요소는 자동으로 해당 form에 속하므로 form 속성으로 명시하지 않아도 된다. Submit 💡 button 요소의 type 속성 기본 값은 submit이며, 클릭해서 양식을 제출하면 새로고침하는 기본 동작을 가진다. 새로고침을 방지하려면 form 요소 onsubmit 핸들러에 event.p..
[HTML/CSS] Tailwind CSS에서 형제 셀렉터(~) 사용하기
[HTML/CSS] Tailwind CSS에서 형제 셀렉터(~) 사용하기
2024.05.11Tailwind CSS 2.2 버전부터 peer-* variants로 형제 요소를 선택할 수 있다. input 요소에 peer 클래스를 정의해두면, 형제 요소에서 peer 클래스를 이용해 input 요소를 선택할 수 있다. 주로 peer-checked 처럼 요소의 특정 상태를 선택할 때 사용한다. peer-checked는 (체크박스 등)요소가 체크된 상태일 때 적용된다. 이외에도 다양한 가상 클래스 셀렉터를 사용할 수 있다. e.g. peer-hover peer-focus peer-disabled 참고로 위 peer-checked 클래스는 ~ 형제 셀렉터를 사용한 CSS 코드로 변환된다..peer:checked ~ .peer-checked\:bg-blue-500 { background-c..
[HTML/CSS] 스크롤바 표시로 인한 레이아웃 변형 방지하기 - Scrollbar Gutter
[HTML/CSS] 스크롤바 표시로 인한 레이아웃 변형 방지하기 - Scrollbar Gutter
2024.05.11화면에 다 표시할 수 없을 정도로 콘텐츠가 길다면 세로 스크롤바가 생긴다. 그럼 세로 스크롤바의 폭 때문에 콘텐츠를 표시할 영역이 줄어들어 위 이미지처럼 레이아웃이 변형된다. 스크롤바가 생겨서 레이아웃이 변형되는 것을 방지하고 싶다면 scrollbar-gutter 속성을 사용하면 된다. scrollbar-gutter는 브라우저가 스크롤바 영역을 미리 확보하도록 하는 속성이다. 스크롤바 영역을 미리 확보했으므로 스크롤이 생겨도 레이아웃 변형이 없다. scrollbar-gutter: auto | stable && both-edges?.box { padding: 1rem; max-height: 220px; overflow-y: auto; scrollbar-gutter: stable; /* sc..
[TS] 타입스크립트에서 CSS Module 사용하기
[TS] 타입스크립트에서 CSS Module 사용하기
2024.05.11타입스크립트 CSS Module 오류 해결타입스크립트에서 CSS Module을 사용하면 모듈/선언을 찾을 수 없다는 타입 에러가 나온다. src 혹은 컴포넌트 폴더에 아래 내용이 담긴 typings.d.ts 파일을 추가하면 해결할 수 있다. via StackOverFlow// Toggle/typings.d.tsdeclare module '*.module.css' { const classes: { [key: string]: string }; export default classes;} CSS Module 사용법❶ [name].module.css 형태로 CSS 모듈 파일을 작성하고/* Toggle/Toggle.module.css */.toggle-bg:after { /* ... */} ❷ 컴포넌트에서 ..
[HTML/CSS] 펼침/접힘 Transition 효과와 요소 숨김 방식 차이점
[HTML/CSS] 펼침/접힘 Transition 효과와 요소 숨김 방식 차이점
2024.05.10상황 설명 및 해결 방법CSS의 transition 속성은 요소의 상태 변화에 따른 시각적인 변화를 점진적으로 보여주기 위해 사용한다. 그러나 display 속성이 none에서 block 으로 변경될 때는 transition 속성을 사용해서 이 변화를 표현할 수 없다.display: none 속성은 렌더 트리에서 요소를 완전히 제거하여 화면에서 사라지게 만들고, 이로 인해 어떠한 CSS 속성도 적용되지 않는다. 렌더 트리에서 사라지면 요소의 상태 변화를 추적할 수 없기 때문에 transition 변화가 시작되는 지점 역시 찾을 수 없다.이 문제는 2가지 방법으로 해결할 수 있다.animation + display 사용 : animation 속성은 요소의 상태 변화와 상관없이 애니메이션 실행transiti..
[HTML/CSS] 구글 폰트 사용 방법 / CSS에서 웹폰트 사용하기
[HTML/CSS] 구글 폰트 사용 방법 / CSS에서 웹폰트 사용하기
2024.05.10CSS 파일 최상단에 @import 구문을 사용해서 폰트를 불러오면 CSS 파일이 완전히 로드되고 파싱될 때까지 리소스 로드가 지연돼서 성능 저하를 초래할 수 있다. 반면, HTML 안에서 태그를 통해 폰트를 불러오면 여러 리소스를 병렬로 로드할 수 있어 더 효과적이다. 실제로 방식이 @import 보다 1.3~1.6초 정도 더 빠르게 폰트를 로드한다고 한다. 구글 폰트 CSS 파일 가져오기 팁사용하고 싶은 구글 폰트 이름을 주소의 family 값에 입력하면 Font Family CSS 파일을 가져올 수 있다. 참고로 display=swap 파라미터는 폰트 파일 로드를 기다리는 동안 텍스트가 보이지 않는 현상을 방지 하기 위해 대체 폰트를 보여주는 옵션이다. 그 외에 wght, italic 등 여..
[HTML/CSS] 스크롤 기능은 유지하면서 스크롤바 숨기기
[HTML/CSS] 스크롤 기능은 유지하면서 스크롤바 숨기기
2024.05.09overflow: hidden 속성으로 스크롤바를 숨길 수 있지만 스크롤 기능이 작동하지 않는다. 스크롤 기능은 작동하면서 스크롤바만 시각적으로 숨기려면 아래 스타일을 적용하면 된다(더 자세한 내용은 W3Schools 참고)./* Chrome, Safari, Edge, ... */.no-scrollbar::-webkit-scrollbar { display: none; }.no-scrollbar { -ms-overflow-style: none; /* IE */ scrollbar-width: none; /* Firefox */}::-webkit-scrollbar : Blink, WebKit 렌더링 엔진 기반의 브라우저에서만 사용할 수 있다.⚠️ 아직 표준이 아니므로 Production에서 사용할..
[HTML/CSS] 요소 왼쪽/위쪽 변부터 클릭 지점까지 거리 구하기
[HTML/CSS] 요소 왼쪽/위쪽 변부터 클릭 지점까지 거리 구하기
2024.05.08// left = clientRect.x, top = clientRect.yconst { height, width, top, left } = element.getBoundingClientRect();// event.clientX, event.clientY는 마우스 이벤트 속성const x = event.clientX - left;const y = event.clientY - top; mouseEvent.clientX, mouseEvent.clientY : 브라우저 화면 왼쪽 최상단을 기준으로 이벤트가 발생한 지점까지 얼마나 떨어져 있는지 나타내는 좌표. 브라우저 화면이 기준이므로 스크롤해도 값이 변하지 않음.clientRect.x, clientRect.left : 화면 좌측부터 해당 엘리먼트의 왼쪽 변까..
[HTMl/CSS] 엘리먼트의 모든 CSS 스타일 속성 / 값 조회하기
[HTMl/CSS] 엘리먼트의 모든 CSS 스타일 속성 / 값 조회하기
2024.05.08인자로 넘긴 요소에 적용된 모든 CSS 속성 조회Window.getComputedStyle(element, [pseudoElt]) const styles = getComputedStyle(element);// {0: 'accent-color', 1: 'align-content', 2: 'align-items', ...}console.log(styles); 인자로 넘긴 CSS 속성에 대한 값 조회CSSStyleDeclaration.getPropertyValue(property) const styles = getComputedStyle(element);// 'normal' (align-items에 대한 속성 값 normal 반환)styles.getPropertyValue('align-items'); // '..
[HTML/CSS] backdrop-filter vs filter 속성 비교
[HTML/CSS] backdrop-filter vs filter 속성 비교
2024.05.08TL;DRbackdrop-filter : 속성을 적용한 요소의 배경에만 효과가 적용됨. 콘텐츠는 영향 안받음Tailwind : backdrop-blur-smCSS : backdrop-filter: blur(4px);filter : 속성을 적용한 요소 전체(자식요소 포함)에 효과가 적용됨. 주로 이미지 태그에 사용함Tailwind : blur-smCSS : filter: blur(4px);💡 콘텐츠가 없거나 배경색이 지정되어 있지 않으면 효과 적용 안되므로 주의 Blur 배경 구현두 속성 모두 적용되는 효과는 동일하나 filter 속성은 자식 요소를 포함한 요소 전체에 적용되므로 Blur 효과가 들어간 배경을 구현하려면 background 추가 요소를 별도로 만들어야 한다 — 참고글 .bac..