/* 수직 스크롤바 스타일 */ ::-webkit-scrollbar { width: 12px; /* Chrome, Safari, Opera */ } ::-webkit-scrollbar-thumb { background-color: #888; /* 스크롤바 손잡이 색상 */ border-radius: 6px; /* 스크롤바 손잡이 모서리 둥글기 */ } ::-webkit-scrollbar-thumb:hover { background-color: #555; /* 스크롤바 손잡이 호버 색상 */ } /* 수평 스크롤바 스타일 */ ::-webkit-scrollbar-horizontal { height: 12px; /* Chrome, Safari, Opera */ } ::-webkit-scrollbar-thum..
#after vs box-shadow box-shadow로 그림자만 만들 줄 알았지 border를 만들다니? 라고 생각 하실 수 있지만 이게 엄청 유용했다. Why? 이 코드를 보면 바로 납득이 된다. See the Pen after vs box-shadow by dev_Sunny (@sunny_dev) on CodePen. 이렇게 글자 밑에 형관펜 같은 효과를 넣는 디자인을 본적이 있지 않은가? 예전에 ie가 있을때 after로 효과를 많이 넣어서 습관처럼 넣고 있다가 box-shadow 로 아주 쉽게 할 수 있는 것을 알아서 써먹기 시작했다. 파폭, 오페라, 크롬, 브레이브, 엣지 등등에서 아주 잘먹는다. 한줄이면 끝나는 코드를 그동안 여러줄을 써댔는대 정말 편하다. 그렇다면 inset이 뭘까? #i..
#word-break 텍스트가 글자상자를 넘어갈때 글자를 줄바꿈하는 방법 word-break: normal; word-break: break-all; //특수문자를 제외하고 강제로 줄바꿈 word-break: keep-all; //한글일 경우 띄어쓰기 기준으로 짤림 word-break: break-word; /* deprecated */ 특수문자를 포함하고 강제 줄바꿈 word-break:nowrap; //줄바꿈 하지 않음 #white-Space 공백을white-space 처리하는 방법 white-space: normal; white-space: nowrap; //스페이스로 들어간 연속공백은 통합 = pre의 효과, 줄바꿈X white-space: pre; //원문 그대로 출력 white-space: p..
#linear-gradient linear-gradient는 CSS3에서 추가된 것으로, 선형 그라데이션 효과를 만듬 🙄문법 background: linear-gradient( direction, color1, color2, …, color3 ); direction : 그라데이션 방향 to bottom : 위에서 아래로 (기본값) to top : 아래에서 위로 to left : 오른쪽에서 왼쪽으로 to right : 왼쪽에서 오른쪽으로 ndeg : n도의 방향으로 색은 여러개 입력할 수 있으며 입력한 순서로 설정한 방향으로 그라데이션을 생성함 그라데이션뿐만아니라 백그라운드가 여러가지 색상일때도 가능! See the Pen css by dev_Sunny (@sunny_dev) on CodePen. 위에 주..
블록요소를 가로로 정렬하거나 어떠한 공간에서 세로로 가운대 정렬해야 할 때가 온다. ie가 있을때는 flex와 grid가 호환이 잘 되지 않아서 display:inline-block, float, display:table-cell 등을 사용했는대 요즘은 flex나 grid로 해결한다. #차이점 Flex는 한 방향 레이아웃 = 1차원 Grid는 두 방향(가로-세로) 레이아웃 = 2차원 👀언제 사용하는게 좋을까? (개인적인 주관) 갯수가 정해져있을경우는 flex로 하면 편하고 그렇지 않을경우는 grid가 편하다. 또하나는 레이아웃안에 자식이 모두 같은 크기일 경우는 flex가 편하고 자식들이 각각 다른 사이즈로 해야할 경우는 grid가 편하다. #기본세팅 자식1 자식2 자식3 1.flex 1)부모요소 .wr..
#100vh 오류 해결 :root { --vh: 100%; } html,body,.main_box{ height: 100vh; height: var(--vh); } let vh = 0; useEffect(() => { vh = window.innerHeight * 0.01; document.documentElement.style.setProperty('--vh', `${vh}px`); }, []); const setVh = () => { document.documentElement.style.setProperty('--vh', `${window.innerHeight}px`) }; window.addEventListener('resize', setVh); setVh(); 리사이징시와 ios에서 주소창에 가..
.view_app_desc:after { content: ""; display: block; height: 50px; position: absolute; bottom: 100px; width: 100%; background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); filter: progid:..
#애니메이션_by.써니 .time_motion{ display:block; margin:0 auto; animation-name: time_s; /*애니메이션 이름*/ animation-duration: 3s; /*3초동안*/ animation-iteration-count: infinite; /*무한반복*/ animation-timing-function: linear; /*일정속도로*/ } @keyframes time_s { /*효과 애니메이션 0~100% 구간나눌수 있음*/ from {transform: rotate(0deg);} to {transform: rotate(360deg);} } /*키프레임으로 계속 회전하는 효과*/ #코드펜 애니메이션 효과더 알아보기! #그라디언트 애니메이션 .intro_..
