wazac

웹사이트나 애플리케이션의 스크롤바는 중요한 사용자 인터페이스(UI) 요소 중 하나입니다. 대부분의 기본 스크롤은 많이 사용하지만, 요즘은 스크롤의 디자인도 많이 고려되서 나오고 있습니다. 브라우저에서 기본으로 제공되는 스크롤은 어떻게 커스터마이징하면될까요~? ::scroll 이라는 선택자를 사용하면됩니다. 의외로 간단 하답니다. .scroll { &::-webkit-scrollbar { width: 7px; height: 7px; } &::-webkit-scrollbar-track { background: transparent; } &::-webkit-scrollbar-thumb { background: #3c3c3c; border-radius: 45px; } &::-webkit-scrollbar-thu..

참조1: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range 참조2: https://www.fileformat.info/info/unicode/char/26/index.htm 유니코드문자표: https://ko.wikipedia.org/wiki/%EC%9C%A0%EB%8B%88%EC%BD%94%EB%93%9C_2000~2FFF 프로젝트를 하다 보면 이런 경우가 있습니다. 한글을 나눔고딕으로 해주시고, 영문,숫자는 OpensSans로 해주세요! 아무것도 모르던 시절에는 숫자마다 클래스를 주어 font를 다르게 적용시켰습니다. 하지만 정말 쉬운 방법이 있었더리구요! 바로 unicode-range를 지정하는 방법입니다. unico..

저번 포스팅에서는 node에서 package.json으로 수작업(?)으로 자동 컴파일되는 환경을 세팅했었는데, (보러가기) 이번에는 vscode에서 제공되는 Live Sass Compiler라는 플러그인을 사용해 보도록 하겠습니다. 설치하기 VSCode를 열고 확장프로그램 다운로드하는 곳에서 sass를 검색하면 나타납니다. install을 클릭하여 설치합니다. 그리고 우측 하단에 Watch Sass를 클릭하면 실시간으로 컴파일이 됩니다. 이렇게 하면 자동으로 컴파일이 됩니다. CSS경로 설정하기 vscode setting 란에서 scss에서 css로 컴파일 시 css가 저장될 경로를 지정해 줄 수 있습니다. 왼쪽 하단 Manage 버튼에서 Setting을 들어갑니다. sass를 검색하고 방금 설치한 Li..

오랜만에 html, css, javascript로 코딩을 해야 하다 보니, 영 기존처럼 하기에는 귀차니즘이 생겨버렸습니다. 😅 그동안은 딱히 관심 갖을 만한 일은 없었으나 귀찮은 건 너무 싫으니 없던 관심이 생기게 되면서 이번 기회에 입문해보려고 합니다. 공식문서를 보고 하나씩 따라하거나 강의를 보고 공부해도 좋지만, 전반적으로 한 번 짧게 겉핥기 식으로 작성해보고 강의를 들으면 이해하는데 좀 더 도움이 되지 않을까 싶습니다. 참조: https://sass-lang.com/ 1. 환경세팅 그럴 리 없겠지만 node가 없다면 설치 기존 버전(node-sass, libsass)는 폐지되었다고 하니 Dart Sass를 사용하라고 하네요. npm install -g sass // 만약 써보고 다시 삭제하고 싶다..

참조 : https://developer.mozilla.org/ko/docs/Web/CSS/Using_CSS_custom_properties IE에서는 지원하지 않습니다. 지원이 가능하도록 도와주는css-var-ponyfill이라는 라이브러리가 있긴한데, 아무리 설정해도 해결책을 못 찾았습니다. 좀 더 파보고 해결책이 나오면 추후 포스팅하도록 하겠습니다. element와 root에서 선언함으로써 스코프(scope)를 지정할 수 있습니다. element에서 지정된 변수는 해당 element가 부모가 아니면 적용이 되지 않습니다. :root { --box-size: 50px; } .box1 { --main-color: orange; } :root는 전역을 뜻하고. box1 은. box1을 포함한 하위 ele..

1. Select CSS Customizing Select 태그의 외형은 주로 각 브라우저에서 정의 합니다. 보다 시피 크롬(왼쪽), IE(오른쪽) 이 똑같이 보이면서도 미세 하게 다름니다. 공통적으로 둘 다 그리 예쁘게 생기진 않았습니다. 각 프로젝트 별로 스타일에 맞게 css를 통해 외형을 바꿀 수 있습니다. 사이즈나 폰트 컬러 등은 변경이 가능하지만, 일부 제한적으로 통제되기 때문에 (화살표 이미지 등) 약간의 편법(?)을 통하여 외형을 변경 할 수 있습니다. 1-1. Select 기본 화살표 없애기 fruits 🍊 apple orange grape melon /* IE */ select::-ms-expand { display: none; } .select { -o-appearance: none; ..

input의 타입을 search로 지정하면 브라우저 내에서 input 초기화 버튼을 넣어줍니다. 디자인을 중요시 하는 일부 프로젝트에서는 이것마저 커스텀해주기를 원합니다. 하지만 사실상 브라우저 내에서 생성하기 때문에 저 자체를 커스텀 할 수는 없고, 이를 보이지 않게 한 뒤 추가로 디자인과 기능을 넣어주면 됩니다. 약간은 번거로운 작업일 수 있지만 생각보다 간단합니다. 우선 브라우저 내에서 생성한 초기화 버튼을 없애려면 단순히 input의 타입을 text로 지정하거나 css에서 해결해 줄 수 있습니다. /* IE의 경우 */ input::-ms-clear, input::-ms-reveal{ display:none; } /* 크롬의 경우 */ input::-webkit-search-decoration, ..

메뉴를 hover 했을 때 아래에서 underline이 가운데부터 열리는 모션을 구현해 보고 싶어서 만들어봤습니다. 다음과 같은 모션입니다. 😊 해당 모션은 border 나 text-decoration 으로는 구현할 수없고, a 태그의 :after를 사용하여 만들었습니다. HOME ABOUT Q&A 먼저 마크업은 간단합니다. 어차피 :after 를 사용할 꺼라 별다른 태그가 추가로 필요하진 않습니다. 먼저 a:after 에 absolute 속성을 주어 a 보다 아래에 위치시켜줍니다. 그리고 transform의 scale을 사용 하는게 핵심입니다. scale 속성은 현재의 element를 확대 시켜주는 기능을 합니다. .wrap { padding: 15px; } .wrap > a { position: re..

체크박스는 대부분 그대로 사용하지 않고 디자인하는 경우가 많습니다. input 타입을 checkbox로 사용시 브라우저에서 제공되는 체크박스의 형태는 변형하는 것에 한계가 있습니다. CSS에서 셀렉터와 label태그를 이용하면 쉽게 커스텀이 가능합니다. 1. 마크업 input의 id와 label의 for 속성 갑을 동일하게 해야 input의 체크 여부가 작동합니다. 체크박스 2. 스타일 커스텀 방식을 이렇습니다. - 기존 checkbox를 숨김 - checkbox + label을 통해 체크박스 형태를 만듦 - checkbox:checked + label 을 사용하여 체크했을 때에 형태를 만듦 .checkboxwrap .checkbox{display: none!important;} .checkboxwrap..

1. SMACSS ( Scalable and Modular Architecture for CSS ) : CSS를 [기본(base), 레이아웃(layout), 모듈(module), 상태(state), 테마(theme)]5가지를 범주화로 패턴화 하고자 함 = categorization 1. Base.css [= reset.css] body, p, table, form, fieldset, legend, input, button ... { margin: 0; padding: 0; } 2. layout : 주요소(id) + 하위요소(class) 예 : 2개의 레이웃 스타일을 사용할경우 [ 1.유연한레이아웃 2.고정적레이아웃 ] #header { width: 400px; } #aside { width: 30px; ..