WEBPI's Markup && Css Developer

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(#..

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는 글자의 너비를 기준으로 계산되기 때문에, 텍스트가 너무 길어지는 것을 방..

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

현재 쓰고 있는 익스텐션들 andromeda 테마 ChatGPT - EasyCode CodeQue - Multiline and Structural Code Search CodeSnap Color Highlight colorize CSS Initial Value CSS Peek Custom CSS and JS Loader Debugger for Firefox Error Lens Figma for VS Code Git Graph Git History GitLens — Git supercharged Highlight Matching Tag HTML CSS Support HTML End Tag Labels Image preview Inline Parameters for VSCode IntelliCode Inte..

[role="tablist"] { list-style: none; margin: 0; padding: 0; display: flex; gap: 1rem; } [aria-selected="true"] { text-decoration-thickness: 0.25em; text-underline-offset: 0.5em; color: orangered; } .tabs-container { padding: 2.5rem; border-radius: 0.5rem; background: hsl(0 0% 50% / 0.1); } .visually-hidden { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: abs..

주어진 하나 이상의 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; } }

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를 이용할때 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 대신 고정된 크기라면 해당 크기를 넣어주..

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

jquery는 .on을 이용할 수 있으나 jquery를 쓰지 않을경우 일반적인 "addEventListener"로는 이벤트를 주기가 어렵다 이럴때 이용할 수 있는 방법으로 ".matches"가 있다 document.addEventListener("click", e => { // 이벤트 버블링 e.target 비교 const target = e.target.matches(".target"); if (!target)return; if (target) { alert("클릭!"); } });