CSS
[HTML/CSS] 아이폰 사파리 테마 컬러 변경 방법
[HTML/CSS] 아이폰 사파리 테마 컬러 변경 방법
2024.05.03아이폰 iOS 15 부터 사파리 브라우저 탭 막대에 테마 색상을 추가할 수 있다. 탭 막대 색상은 콘텐츠를 기반으로 자동 선택되지만 태그를 이용해서 원하는 색상으로 변경할 수 있다. 참고로 content 속성 값엔 컬러코드 대신 CSS 변수를 사용할 수도 있다. e.g. content="var(--bg-black)" 테마 색상 변경 전 ▼ 테마 색상 변경 후 ▼ Light/Dark 모드 컬러라이트/다크 모드에서 각각 다른 색을 보이고 싶으면 미디어 쿼리를 사용하면 된다. 아래 예시에서 라이트 모드일 때 탭 막대 색상은 #ffffff(하얀색), 다크 모드일 땐 #28231c 색으로 표시된다. 레퍼런스Safari 15 Theme ColorMeta Theme Color and Trickery | CSS-Tr..
[HTML/CSS] 유용한 HTML 태그 모음
[HTML/CSS] 유용한 HTML 태그 모음
2024.05.03— 진행 상태 막대 태그는 작업의 완료 정도를 나타낸다. progress 태그에서 최소값은 항상 0이며, 다른 값으로 지정할 수 없다. 따라서 굳이 min 속성을 명시하지 않아도 된다(반면 meta 태그에선 min속성을 지정해야 한다). See the Pen <progress> element by ColorFilter (@colorfilter) on CodePen." data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 속성File progress min 속성 : 최소값 / 기본값 0 / 사용자 지정 불가max 속성 : 최대값(0보다 커야함) / 기본값 1value 속성 : 현재값 / 0 이상 max 이하 커스텀 스타일progress 태그는 각 브라우저마다 기본 ..
[HTML/CSS] CSS 인접하는 엘리먼트들의 border 겹침 문제 해결
[HTML/CSS] CSS 인접하는 엘리먼트들의 border 겹침 문제 해결
2024.05.03위 UI에서 상단/하단 박스의 토글이 활성화 되면 border 색상이 파란색으로 변경된다. 하지만 ➊상단 박스 아래 border와 ➋하단 박스 윗쪽 border가 겹쳐서 1px border가 2px 처럼 보이게 된다(주황색 화살표 부분). 토글이 활성화된 상태에선 상단 박스의 margin-bottom 하단 여백 값을 -1px 주는 방식으로 해결할 수 있지만, 다른 박스의 모든 토글 상황에 일일이 적용하는건 번거롭다. 게다가 토글이 3개 혹은 4개가 활성화 되는 상황도 고려해야되므로 복잡하다. 이땐 display: table;을 활용해서 해결할 수 있다. 테이블 구조 변경 작업구조 변경💡 border-collapse: collapse 속성은 table 태그를 사용했을 때만 유효하다. 테이블 태그에 관한 ..
[HTML/CSS] 이메일 템플릿 작성법 (feat. 테이블 코딩)
[HTML/CSS] 이메일 템플릿 작성법 (feat. 테이블 코딩)
2024.05.03이메일 포맷은 표준이 없다. 다양한 이메일 클라이언트에서 정상적으로 보이기 위해선 태그를 사용하지 않고 , , 만 이용해서 작성하는게 좋다. 일명 테이블 코딩이라고 불린다. 여백을 지정할 때 보통 margin을 사용하는데, 이 또한 padding 등으로 대체한다. 스타일은 인라인 방식을 사용한다. DOCTYPE이메일 클라이언트에게 HTML 유형을 알려준다. XHTML 1.0 Transitional doctype 을 사용하면 이메일 클라이언트가 유효성을 검사하고 이메일을 렌더링하는데 도움이 된다. Head텍스트와 특수 문자를 올바르게 표시할 수 있도록 문자 인코딩 방식을 UTF-8로 설정한다. DOCTYPE을 XHTML로 설정했기 때문에 Content-Type 선언도 포함해야 한다. Style ..
[HTML/CSS] 줄바꿈 제어 속성 word-break / word-wrap(overflow-wrap)
[HTML/CSS] 줄바꿈 제어 속성 word-break / word-wrap(overflow-wrap)
2024.05.01TL;DR박스 영역을 벗어나거나, 불필요한 공백이 생기는 등 대부분의 줄바꿈 문제는 아래 두 속성으로 해결할 수 있다.word-break: break-all; /* 음절(글자)를 기준으로 줄바꿈 */word-wrap: break-word; /* 영역을 넘친 단어 분리(줄바꿈) */ word-break💡 줄바꿈할 중단점의 기준을 바꿀 수 있는 속성 word-break 속성은 글자를 어떻게 분리해서 줄바꿈할지 결정하는 속성이다. CJK는 음절(글자), non-CJK는 공백과 - 하이픈이 기본 중단점이다. word-break 속성으로 줄바꿈할 중단점의 기준을 바꿀 수 있다. 아래는 언어별 속성 값에 따라 달라지는 중단점을 정리한 표 — WIT 블로그 참고 normal (기본값)break-allkeep-a..
[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이 안됨 여러..