CSS
[HTML/CSS] 알아두면 유용한 CSS 최신 기능 6가지
[HTML/CSS] 알아두면 유용한 CSS 최신 기능 6가지
2024.05.01@supports@supports를 이용해 브라우저가 특정 CSS 속성을 지원할때와, 지원하지 않을 때의 스타일을 각각 지정할 수 있다. @supports (속성명: 값) {...} 형태로 사용한다. 지원하지 않을 땐 not 연산자를 추가한다./* 브라우저가 display: grid를 지원하면 적용 */@supports (display: grid) { div { display: grid; }}/* 브라우저가 display: grid를 지원하지 않으면 float 적용 */@supports not (display: grid) { div { float: right; }} CSS 스타일 속성뿐만 아니라 CSS 선택자(셀렉터)를 지원하는지도 판별할 수 있다./* 브라우저가 > 자식 셀렉터를 지..
[JS] 정규식으로 검색어 하이라이트 / 문자열 링크 걸기(Linkify)
[JS] 정규식으로 검색어 하이라이트 / 문자열 링크 걸기(Linkify)
2024.04.30검색창에 입력한 키워드와 일치하는 단어를 하이라이트(강조) 하기 위해 split, join 등을 사용할 수 있지만 코드가 다소 복잡해진다. 정규식을 사용하면 깔끔하게 구현할 수 있다. 하이라이터 함수 정의 ▼const getHighlightedText = (text, query) => { const re = new RegExp(`(${query})`, 'gi'); if (query !== '' && text.match(re)) { const parts = text.split(re); return ( {parts.map((part) => part.toLowerCase() === query.toLowerCase() ? ( {part} ..
[HTML/CSS] 폼 필드(input) 색상 변경하기 — accent-color
[HTML/CSS] 폼 필드(input) 색상 변경하기 — accent-color
2024.04.29폼 필드(input) 스타일은 디바이스, OS, 브라우저에 따라 달라지므로 원하는 스타일을 지정하기 힘들다. 하지만 accent-color CSS 속성을 이용하면 폼 필드의 강조 색상을 손쉽게 변경할 수 있다. accent-color 속성은 input 태그의 checkbox radio range 타입에 적용할 수 있다. CSS 셀렉터에 input만 명시했다면 checkbox radio range 타입에 모두 적용된다.input { }input[type="radio"] { }input[type="checkbox"] { }input[type="range"] { } accent-color 속성은 Chrome, Firefox 최신 버전에서 지원한다. 아쉽게도 사파리에선 지원하지 않는다. 예시HTML ▼ ..
[HTML/CSS] focus-within — 자식 요소가 포커스 됐을 때 부모 스타일 지정
[HTML/CSS] focus-within — 자식 요소가 포커스 됐을 때 부모 스타일 지정
2024.04.25focus-within 살펴보기:focus-within은 포커스를 받은 요소 혹은 포커스를 받은 요소(주로 input 태그)를 포함하는 부모 요소를 가리킨다. input 같은 하위 요소가 focus 됐을 때 부모 요소의 스타일을 변경하고 싶을 때 사용하면 유용하다. 아래 예제에서 input 태그를 자식으로 포함하는 .wrapper 클래스 이름의 부모 요소가 있다. Lorem Ipsum ist ein einfacher Demo-Text für die Print- und Schriftindustrie. Choose text color input 태그를 선택해서 활성화되면(포커스를 받으면), 해당 input 태그를 포함하는 부모 요소인 .wrapper 클래스에 focus-within 의사클래..
[HTML/CSS] CSS 팝업 애니메이션 만들기
[HTML/CSS] CSS 팝업 애니메이션 만들기
2024.04.25요소 숨김 방식 차이점 렌더 트리리플로우리페인트이벤트 핸들러DOM 트리`display: none`제외발생발생비활성유지`visibility: hidden`유지발생 안함발생비활성유지`opacity: 0`유지발생 안함발생활성유지display: none렌더 트리 : 제외리플로우 : 발생 (렌더트리 상태가 변경됐으므로)리페인트 : 발생 (리플로우 발생시 리페인트도 함께 발생)이벤트 핸들러 : 비활성DOM 트리 : 유지 (자바스크립트로 조작 가능)visibility: hidden렌더 트리 : 유지 (화면에선 안보이지만 공간은 차지함)리플로우 : 발생 안함 (레이아웃에 영향을 미치지 않으므로)리페인트 : 발생 (요소가 보이지 않도록 변경했으므로)이벤트 핸들러 : 비활성DOM 트리 : 유지 (자바스크립트로 조작 가능)..
[HTML/CSS] 아이폰 사파리에서 입력창 자동확대 방지
[HTML/CSS] 아이폰 사파리에서 입력창 자동확대 방지
2024.04.25, , 태그를 모바일에서 터치하면(포커스하면) 화면이 자동으로 확대될 때가 있다. 입력창의 폰트 크기가 16px보다 작으면 자동으로 확대되기 때문에 발생하는 현상. 대표적으로 아래 3가지 해결 방법이 있다. 확대 금지 — 모바일용으로 적절하게 디자인된 경우폰트 크기를 16px 이상으로 변경 — 추천폰트 크기를 16px로 변경하고 `transform: scale()`을 이용해 원하는 만큼 줄이는 방법 — 복잡함 방법1 — 확대 금지html 파일 메타 태그의 content 속성에 최대 확대 배율을 1배수만 허용하고, 단말기 확대 기능을 사용하지 못하도록 명시하면 방법. 작은 글씨를 잘 보지 못하는 사람들은 확대할 수 없기 때문에 접근성이 떨어지는 단점이 있다. initial-scale 초기 화면 배율max..
[HTML/CSS] 줄바꿈(개행문자) 표시 / 넘치는 텍스트 생략 기호 표시 방법
[HTML/CSS] 줄바꿈(개행문자) 표시 / 넘치는 텍스트 생략 기호 표시 방법
2024.04.25💡 미립자 팁 : textarea 태그에 readonly 속성을 추가하면 읽기만 가능하고 쓰기는 불가능하다. 로그인하지 않은 유저는 댓글을 쓰지 못하게할 때 유용하다. `` 줄바꿈 적용하기 textarea 태그에 엔터키(개행문자)를 눌러 줄바꿈을 적용해도, 입력한 value를 p 태그 등에 출력해보면 줄바꿈이 하나도 적용되지 않는다. 가장 간단한 해결 방법은 텍스트를 표시할 태그의 스타일에 white-space 속성을 추가하는 것. white-space는 공백 문자를 어떻게 처리할지 결정하는 속성이다. white-space: normal — 기본값 여러 공백 : X (1개로 표시)改行문자 \n 표현 : XWrap : O white-space: nowrap — normal과 동일하나 wrap이 안됨 여러..