전체 글 496

라이트, 다크모드 쉬운 적용 light-dark()

light-dark() 함수를 이용해 라이트 다크모드를 쉽게 적용해보자https://caniuse.com/?search=light-dark "light-dark" | Can I use... Support tables for HTML5, CSS3, etcprefers-color-scheme media query Media query to detect if the user has set their system to use a light or dark color theme.caniuse.com삼성인터넷 브라우저를 제외하고 무난히 사용가능하다mdn web docs의 내용이다아래의 형태로 사용할 수 있다:root { color-scheme: light dark;}body { color: light-dark(#..

Web story/CSS 2024.10.04

최신 css 추가로 재설정

1. 텍스트 균형 맞추기 (Text Wrap Balance)text-wrap: balance 속성은 텍스트를 더욱 균형 있게 배치해주며, 특히 제목에서 한 줄이 어색하게 길거나 짧지 않게 만듭니다.CSS 예시:css코드 복사h1, h2, h3, h4 { text-wrap: balance; }이 속성을 사용하면 제목이 더 균형 잡혀 보입니다. 특히 짧은 텍스트에 유용하며, 3줄 이하의 텍스트에만 작동합니다. 최근에는 브라우저 지원도 꽤 좋은 편입니다.2. 문단 너비 제한 (Max Width in ch)긴 문장이 너무 넓게 퍼져서 가독성이 떨어지는 것을 방지하기 위해 max-width 속성을 ch 단위로 설정하는 것이 좋습니다. ch는 글자의 너비를 기준으로 계산되기 때문에, 텍스트가 너무 길어지는 것을 방..

Web story/CSS 2024.09.06

빌드 자동화 툴 gulp를 사용하자

gulp란 프론트엔드 자동화 빌드 툴이다 흔히 webpack이 하나의 파일로 모아주는 번들링 툴이라면 gulp는 테스크 실행형이다 프론트 엔드 개발이 목적이 아니라면 gulp를 이용하는 것이 효율적이라 생각한다 gulp 설치는 https://webpi.tistory.com/544 여기를 참조하고 gulp를 사용함에 있어 추천하는 모듈들을 알아보자 gulp-notify - 오류 처리 할 때 메세지로 보여줄 수 있음 gulp-plumber - 스트림에 문제가 있을 경우 파이프를 해제하고 상세 에러 처리를 가능 gulp-debug - 파이프라인을 통해 실행되는 파일을 확인하기 위해 파일 스트림을 디버그 gulp-dart-sass - Sass의 공식 구현체 중 하나로서, 이전 gulp sass보다 더욱 빠르고 ..

Web story/Web 2023.07.11

@supports () {}

주어진 하나 이상의 CSS 기능을 브라우저가 지원하는지에 따라 다른 스타일 선언을 할 수 있는 방법을 제공 예시로 flexbox나 grid의 gap 속성은 ie11이하는 지원하지 않는다 (https://caniuse.com/?search=gap) 이때 @supports 기능 쿼릴 이용하면 예외 처리를 쉽게 할 수 있다 // html // css div { display: grid; gap: 20px; } // gap을 지원하지 않는 경우를 위한 margin 속성 div div ~ div { marign-top: 20px; } @supports (gap: 20px) { // 지원하지 않는 경우를 위한 margin 속성을 삭제 (gap과 중복적용) div div ~ div { marign-top: 0; } }

Web story/CSS 2023.06.22

grid를 이용한 아코디언 메뉴

jquery를 이용하면 slideup, slidedown 함수를 이용해서 쉽게 아코디언 메뉴를 만들 수 있다 그렇지 않을때 max-height를 이용하거나 내부 컨텐츠의 height를 체크하여 아코디언 메뉴를 만들 수 있으나 더욱 간단하게 쓸 수 있는 방법이 있다 //css .accordion-content { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s; } .accordion-content[aria-hidden="false"] { grid-template-rows: 1fr; } .accordion-content > div { overflow: hidden; } // html 버튼 { const activePane..

grid 이용시 유동적으로 자동 채우기

grid를 이용할때 lnb width 고정 container width 유동 또는 header, footer height 고정 container height 유동적으로 만들때 쉽게 하는법 // lnb 고정, container 유동 // css .main { display: grid; grid-template-columns: auto 1fr; } // header, container, footer // css html, body { // 전체높이를 채워줌 min-height: 100%; } .wrap { // 전체높이를 채워줌 min-height: 100%; grid-template-rows: auto 1fr auto; } grid-template-xxx: auto 대신 고정된 크기라면 해당 크기를 넣어주..

Web story/CSS 2023.06.08

<dialog> 요소 사용하기

2022년 상반기 모든 메이저 브라우저에서 이제 태그를 쓸 수 있게 되었다 일부 브라우저는 아직 미지원 이었지만 하반기에 드디어 호환성을 신경쓰지 않고 커스텀 대화 상자를 버릴 수 있게 되었다 그럼 어떻게 써야 하나 제목 내용 닫기 간단하게 쓸 수 있다 css로 스타일도 당연히 가능하다 주의할점은 일부 모바일앱의 하이브리드 웹뷰에서 버전에 따라 지원하지 않기 때문에 모바일앱의 웹뷰에 사용시 확인 후 사용하기 바란다

Web story/html5 2023.06.08
반응형