Next.js 에 있는 module.css 사용법에 대해 정리해보았다.CSS mosulesCSS mosules는 css를 모듈처럼 사용할 수 있는 장점이 있으며 클래스 명에 해쉬 값을 붙여 다시 생성하고, 그 값을 모듈로 내보내서 사용하는 방식으로 클래스 명이 충돌하는 단점을 극복할 수 있다. 파일 명파일 명은 대문자로 시작하는 이름.module.css 로 명하면 된다. ex) Home.module.css{이름}.module.css 사용법사용할 module.css 파일을 import 해와 className에 적용하면된다.// index.jsximport styles from "@/styles/Home.module.css";export default function Home() { return ( ..

tailwind에 대해 처음 알아봤을 때 더욱 쉽게 작성하고 사용할 수 있도록 해주는 twin.macro(Tailwind와 emotion 또는 Styled Components를 혼합 - 포스팅된 글은 emotion을 사용했다)에 대해 알아보았다.twin.macro?twin.macronpm : https://www.npmjs.com/package/twin.macrogithub : https://github.com/ben-rogerson/twin.macro#readme NextJS 에서 사용 방법설치tailwind, emotion, twin.macro 설치//emotionnpm i @emotion/react @emotion/styled @emotion/css @emotion/server @emotion/ba..

대량 데이터를 테이블에 적용하면서 헤더를 고정 시켜야 사용성이 편해져 헤더를 고정하는 방법을 알아보았다.position: stickyposition: sticky를 활용하면 테이블이 가로스크롤에 대해서는 자연스럽게 스크롤되면서 세로스크롤에서는 헤더가 고정이 된다.See the Pen table thead fix by pminsun (@pminsun) on CodePen.

가끔 브랜드 웹페이지 랜딩페이지에 스크롤을 유도하는 가이드선을 볼 때가 있어 간력하게 구현해 보았다.scroll guide 구현HTML  CSS⭐ 스크롤할 수 있게 유도하는 것이 중요함으로 적절한 애니메이션 효과를 사용하면 좋다.*{ margin: 0; padding: 0;}section { width:100%; height:100vh; position:relative; background-color: #1c1c1b;}.scroll_guide { opacity: 1; position: absolute; bottom: 0; left: 50%; width: 1px; height: 160px; background: rgba(255, 255, 255, 0.3); transform: t..

반응형 웹을 만든 프로젝트가 여럿 있어 반응형 분기점에 대해 정리해 보았다. 각각의 범위는 일반적일 뿐이지 절대적인 것은 아니다.일반적인 Breakpoint~ 480px : Mobile세로481px ~ 768px : Mobile가로, Tablet 세로769px ~ 1024px 또는 1280px : Tablet 가로, 노트북1025px 및 1281px ~ : PC/* 노트북 & 테블릿 가로 (해상도 1024px ~ 1279px)*/@media all and (min-width:1024px) and (max-width:1279px) { 스타일 입력}/* 테블릿 가로 (해상도 768px ~ 1023px)*/@media all and (min-width:768px) and (max-width:1023px) ..

프로젝트를 진행하다보면 컨셉에 따라 체크박스의 기본 디자인 대신에 다른 디자인으로 변경해야 하는 경우가 있다. 그래서 input태그의 checkbox를 커스텀하는 방법에 대해 정리해보았다. ⭐ 주요 포인트input 태그의 id, 와 label태그의 for 에 같은 값을 할당해야 label 클릭 시 input 체크에 영향이 미친다.checked 속성을 활용하여 체크 전 후 스타일링을 다르게 줄 수 있다.  Html 전체   Css label{ cursor: pointer;}.input_area input[type="checkbox"] { width: 16px; height: 16px; border-radius: 50%; border: 1px solid #0..

gnb메뉴에 호버 시 서브메뉴(dropdown) 구현하는 방법에 대해 정리해보았다. ⭐ 중요 포인트서브메뉴 리스트( = ul.sub_menu )는 gnb메뉴( = li.gnb_menu ) 안에 배치 하며 기존에 서브메뉴는 opacity: 0; visibility: hidden; 상태이다가 gnb_menu:hover 시 opacity: 1; visibility: visible; 상태로 변경되면 된다.Html MenuOne MenuTwo submenu1 submenu2 ..

스크롤 바를 숨기거나 커스텀 하는 일이 종종 있어 정리했다. 스크롤바 숨기기스크롤 기능만 남기고 스크롤 바는 없애려면 스크롤 되는 영역에 아래 css를 적용하면 된다./* 스크롤바 숨기기 */.scroll { -ms-overflow-style: none; /* IE */ scrollbar-width: none; /* Firefox */}.scroll::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera, Edge */} See the Pen scrollbar - none by pminsun (@pminsun) on CodePen.  스크롤바 커스텀스크롤 바 커스텀 하기 위해서는 스크롤 되는 영역에 3가지 css를 적용하면 된다.::-webk..

레이아웃을 구성할 때 자주 사용한 flex에 대해 정리하고자 한다.flexbox는 grid와 다르게 1차원 레이아웃으로 레이아웃을 다룰 때 한 번에 하나의 차원(행이나 열)만을 다룬다.display : flexdisplay : flex 를 적용하면 일렬로 아이템들이 배치된다.See the Pen flex by pminsun (@pminsun) on CodePen.flex-directionflex-direction으로 배치 방향을 변경 할 수 있다.row : 가로 방향 정렬row-reverse : 가로 방향 반대 순으로 정렬column : 세로 방향 정렬column-reverse : 세로 방향 반대 순으로 정렬See the Pen flex-direction by pminsun (@pminsun) on ..

CSS의 길이 단위 중 상대적으로 크기를 정하는 em과 rem에 대해 정리하고자 한다.em / rem 차이점em해당 요소의 글꼴 크기를 1em으로 사용하지만 만약 해당 요소의 폰트 크기 가 없으면 부모 요소의 글꼴 크기를 1em을 갖는다.remHTML 최상위 요소인 font-size 속성 값이 기준으로 html 글꼴 크기를 1rem으로 사용한다. See the Pen em,rem by pminsun (@pminsun) on CodePen.html { font-size: 62.5%; }px 값을 rem으로 바꾸면 계산이 어렵고 사용자 접근성 옵션(accessibility options)을 고려해 10px로 바꿔주는 html 에 font-size: 62.5% 를 설정하기도 한다. ( 고정 10px 로 적용..