WEBPI's Markup && Css Developer

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("클릭!"); } });

CSS 호버 문제는 일반적으로 장치마다 :hover 의사 클래스를 서로 다른 방식으로 해석할 때 발생합니다.가장 일반적인 문제 중 하나는 사용자의 포인터가 더 이상 요소 위에 있지 않은 후에도 :hover 스타일이 계속 적용되는 "고정 호버"문제입니다.이 문제를 해결하려면 인접한 형제 선택기(+)를 사용하여 사용자의 포인터가 요소 위에 있을 때만 활성화되는 호버 리스너를 만들 수 있습니다.또 다른 해결책은 사용자가 요소 위에 마우스를 올려놓을 때만 호버 클래스나 스타일을 적용하는 @media(hover:호버)및 (pointer:fine)와 같은 미디어 쿼리를 사용하는 것입니다.마지막으로,호버 동작이 필수적이지 않은 경우 포인터-이벤트 속성을 사용하여 모바일 장치에서 호버 효과를 비활성화할 수 있습니다. ..

jpg xl(jxl)은 압축률 매우 우수하나 지원하는 브라우저가 거의 없다 webp는 대부분 지원중이며 jpg png gif 대체 가능하다 jpg에 비해 파일크기가 25-34프로 작다 avif는 avi1 코덱에서 파생되었으며 일부 테스트에서 jpg에 비해 최대 50프로까지 작아진다 애니메이션 지원도 가능하여 gif 대체도 가능하며 투명도 지원함으로 png 대체도 가능하다 webp 만큼의 브라우저 지원은 아니지만 늘어나고 있는 추세이다 webp는 자주는 아니지만 이유중이고 avif가 애니메이션 지원이 가능 하기에 필요에 따라서 유용하게 쓰일 수 있어 보인다