가끔 브랜드 웹페이지 랜딩페이지에 스크롤을 유도하는 가이드선을 볼 때가 있어 간력하게 구현해 보았다.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 로 적용..

영역에 비해 글자 수가 넘치면 ( "..." ) 로 말줄임표를 사용하는 경우가 있다. javascript로 일정글자 수 이상일 때 slice 함수를 활용 할 수도 있지만 css로도 제어 말줄임표를 줄 수 있다. 아래 코드와 이미지는 글자들이 width값에 맞춰 자동으로 줄바꿈이 이뤄지고 있는 상태이다. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc. The generated Lorem Ipsum is therefore always free from repetition, inje..

useState의 상태 값이 css에 적용 해야 될 때가 있다.문제는 tailwind에서 “ w-[${width}px] “ 이런 식으로 지정하면 class는 정상적으로 render되었지만, css가 적용되지 않는다.이러한 경우 **style(인라인 스타일)**을 이용해야 한다.한 개 이상의 스타일을 지정해야 할 경우 { } 안에 다 적용하면 된다. style(인라인 스타일) export default function Item() { const [imageSize, setImageSize] = useState({ width: 100, height: 100 }); const containerStyle = { height: imageSize.height width: imageSize.wi..

tailwind 폰트 적용하는 방법styles 폴더 하위에 fonts폴더에 notoSansKR.css 파일 생성 후  font-face 붙여놓는다// notoSansKR.css@font-face { font-family: 'NotoSansKR'; font-weight: 100; font-style: normal; src: url('/fonts/NotoSansKR-Thin.ttf') format('truetype');}@font-face { font-family: 'NotoSansKR'; font-weight: 200; font-style: normal; src: url('/fonts/NotoSansKR-ExtraLight.ttf') format('truetype');}@font-face {..