HTML
[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..
[HTML/CSS] Tailwind CSS 다이나믹 클래스 사용시 주의할 점
[HTML/CSS] Tailwind CSS 다이나믹 클래스 사용시 주의할 점
2024.05.08Tailwind CSS는 클라이언트 사이드 런타임을 포함하지 않는다. 이는 클래스 이름을 빌드 타임에 추출하여 정적인 CSS 파일만 브라우저로 전송하는 것을 의미한다. 즉, 브라우저에선 Tailwind CSS 관련 자바스크립트 코드를 실행하지 않는다. 때문에 Tailwind CSS는 런타임에 동적으로 변경되는 값에 의존할 수 없다. 런타임에 동적으로 값을 변경해야 하는 경우 Emotion 같은 CSS-in-JS 라이브러리 등을 활용해야 한다.Tailwind doesn’t include any sort of client-side runtime, so class names need to be statically extractable at build-time, and can’t depend on any sor..
[HTML/CSS] select 태그의 화살표 아이콘 변경하기
[HTML/CSS] select 태그의 화살표 아이콘 변경하기
2024.05.05요소는 과 함께 사용하여 옵션을 선택할 수 있는 드롭다운을 표시한다. 우측에 있는 드롭다운 화살표 아이콘은 브라우저마다 스타일이 조금씩 다르다. 어떤 브라우저에서든 똑같은 아이콘으로 표시하고 싶다면 background 스타일 속성을 이용해서 변경할 수 있다.Select your device Apple Oppo Xiaomi appearance 속성 수정appearance CSS 속성은 운영체제의 테마를 기반으로 하는 UI 컨트롤의 기본 외형(appearance)을 제어할 때 사용한다. appearance: none 속성을 적용하면 input progress 등의 요소가 기본적으로 가지는 스타일을 해제할 수 있다. select 요소에 사용하면 우측 화살표 아이콘이 사라진다.select[id="sele..
[HTML/CSS] Tailwind CSS 클래스 패턴 재활용 / 기본 테마 수정&확장
[HTML/CSS] Tailwind CSS 클래스 패턴 재활용 / 기본 테마 수정&확장
2024.05.05반복적으로 사용하는 Tailwind CSS 클래스 패턴을(특정 요소에 정의한 클래스 그룹을 여러 곳에서 사용할 때) 하나의 커스텀 클래스로 추출해서 사용할 수 있다 배경 지식 — Tailwind CSS 3계층Tailwind는 CSS 우선순위를 제어하기 위해 base, components, utilities 3개의 계층(layer)으로 구분한다. 이렇게 계층을 구분해두면 각 스타일이 어떻게 상호작용하는지 더 쉽게 이해할 수 있으며, @layer 지시문(해당 스타일이 어떤 계층에 속할지 지정)을 사용해 원하는 방식으로 선언 순서를 제어할 수 있게 된다. — 참고 base일반 HTML 요소에 적용되는 재설정 규칙(reset rules) / 기본 스타일을 위한 레이어. base 계층엔 특정 엘리먼트의 기본 스타..
[HTML/CSS] width 속성 작동 매커니즘
[HTML/CSS] width 속성 작동 매커니즘
2024.05.05엘리먼트의 너비를 제어하기 위해 CSS의 width 속성을 사용한다. 평소에 자주 사용하는 속성이지만 종종 생각한대로 작동하지 않을 때가 있다. width는 ➊절대값 ➋상대값 ➌키워드 크게 3가지 설정으로 구분되며, 각 설정에 따라 너비가 다르게 결정된다. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua 절대값section { width: 200px; height: 200px; border: 1px solid gray;} /* 부모 */p { width: 300px; background: Khaki; mar..
[HTML/CSS] 아이폰 사파리 100vh 이슈 해결
[HTML/CSS] 아이폰 사파리 100vh 이슈 해결
2024.05.03iOS의 사파리에선 100vh 속성 값이 다소 다르게 작동한다. 데스크탑 크롬에서 100vh는 현재 화면에 보여지는 뷰포트를 기준으로 하지만, iOS의 사파리에선 하단 주소창 영역까지 포함한다. 뷰포트를 기준으로 아래 비율로 화면을 나눴다면 아이폰 사파리에선 footer 일부분은 하단 주소창 때문에 가려진다.header : 15%main : 70%footer : 15% 해결 방법다행히 이 문제는 순수 CSS만으로 해결할 수 있다. -webkit-fill-available 속성을 이용하는 방법이다. 기능 쿼리(@supports) 인자에 명시한 -webkit-touch-callout은 iOS에서만 지원하는 속성이다. 따라서 아이폰 사파리에서 접속할 땐 -webkit-fill-available 스타일 값이 적..
[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 선택자(셀렉터)를 지원하는지도 판별할 수 있다./* 브라우저가 > 자식 셀렉터를 지..