📋 reset.css ? 웹 표준, HTML5를 마크업 하면서 크로스 브라우징을 위해 기본적으로 css를 설정하는것을 말합니다. ✔ reset css 코드 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody..
📋 Swiper swiper는 slick과 같은 슬라이드 라이브러리이지만 jQuery가 아닌 JavaScript를 사용하며 다양한 옵션을 지원해서 사용하기 편합니다. 그리고 하위 브라우저(IE9)에서도 동작하기 때문에 크로스 브라우징 측면에서도 뛰어납니다. 1. 설치 방법 swiper를 사용하려면 여러가지 방법이 있습니다. 원하는 방식으로 사용하시면 됩니다. CDN으로 사용하는 방식 swiper 파일을 직접 다운받아 사용하는 방식 npm으로 설치하여 사용하는 방식 CDN 2. 기본 사용법(구조) 사용법은 매우 간단합니다. 슬라이더를 사용하기위해 만들어 놓은 html문서 안에 swiper의 기본 구조에 맞는 class를 넣어주면 됩니다. 주의할 점은 swiper에서 정해 놓은 class명을 지정해줘야 합니..
📋 mix-blend-mode 란? 어느 요소의 콘텐츠가 자신의 배경 및 부모와 어떻게 혼합되어야 하는지 지정하는 속성입니다. mix-blend-mode에는 다양한 속성이 있습니다. 하나하나 직접 사용해보는걸 추천드립니다. .item{ mix-blend-mode: normal; mix-blend-mode: multiply; mix-blend-mode: screen; mix-blend-mode: overlay; mix-blend-mode: darken; mix-blend-mode: lighten; mix-blend-mode: color-dodge; mix-blend-mode: color-burn; mix-blend-mode: hard-light; mix-blend-mode: soft-light; mix-b..
📋 스크롤바 스타일 커스텀(Scrollbar Style Custom) 스크롤바 스타일에 대한 웹표준은 존재하지 않습니다. webkit 브라우저(크롬, 오페라, 사파리)에 한해서 가상요소를 사용하여 커스텀을 해줍니다. 스크롤바와 관련된 가상요소는 여러가지가 있지만 주로 사용하는 아래 3가지가 있습니다. ::-webkit-scrollbar : 스크롤바 전체 영역에 대한 설정 ::-webkit-scrollbar-thumb : 스크롤바 막대에 대한 설정 ::-webkit-scrollbar-track : 스크롤바 뒷 배경에 대한 설정 각 스크롤 영역 전체, 막대(thumb), 여백(track)을 뜻합니다. 작성된 코드로 확인해보겠습니다. 현재 제 티스토리에 적용되어있는 코드입니다. body::-webkit-scr..
📋 마우스 커서 모양 바꾸기 커서 모양을 바꾸는 원리는 간단합니다. html에 비어있는 태그를 만들어준 후에 css로 사용할 커서 모양을 커스텀 해준 후에 script로 마우스를 따라다니게 하는 원리입니다. 아래 태그를 살펴보겠습니다. html에 커서로 사용할 빈 태그를 만들어 줍니다. css로 커서로 사용할 모양을 커스텀 해줍니다. position: absolute 로 만들어진 div 태그를 띄워줍니다. body에 cursor: none 으로 기존 커서를 없애줍니다. body{cursor: none;} .cursor{ width: 20px; height: 20px; background-color: #000; border-radius: 10px; position: absol..
📋 script 태그 위치? script 태그는 보통 html 문서의 /*스크립트 파일 3*/ script 파일1 document.body.prepend('script_1.js'); console.log('script_1.js'); script 파일2 document.body.prepend('script_2.js'); console.log('script_2.js'); script 파일3 document.body.prepend('script_3.js'); console.log('script_3.js'); script파일 1과 2는 /*스크립트 파일 3*/ script태그에 defer 속성을 사용하게 되면 브라우저가 html문서를 읽을 때 script 태그를 만나더라도 DOM생성을 멈추지 않고 계속해서 ht..
크롬은 이미지 랜더링 문제가 있습니다. 웹에 게시된 이미지 해상도가 원본 해상도와 일치한다면 괜찮지만 원본 해상도보다 확대, 축소 되는 경우에는 이미지가 흐려집니다. 📋 image-rendering image-rendering이란 브라우저의 이미지 스케일링 방식에 대한 힌트를 제공합니다. 크기가 변경된 이미지에 적용됩니다. ✔ -webkit-optimize-contrast 이미지 랜더링 방식을 변경해줍니다. 크롬, 사파리 등의 브라우저에서 대비를 최적화하여 흐려지는 문제를 어느정도 해결해줍니다. 제가 사용해 봤을 때 이 방식이 제일 효과 있었습니다. 📋 transform ✔ translateZ transform: translateZ(0)을 이용하여 깊이감을 없애줍니다. 약간의 효과는 있었지만 image-..
📋 slick-slider slick-slider 는 반응형 웹을 지원하는 jQuery 슬라이더 라이브러리입니다. 기본 사용법과 반응형 작업방법을 설명 드리겠습니다. 1. slick 다운로드 및 css,js 파일 로드 slick 메인 홈페이지 오른쪽 상단에 get it now를 클릭한 후 다운로드를 진행하거나 그 아래의 CDN주소를 복사해서 태그안에 넣어서 사용하면 됩니다. 그리고 slick-slider는 jQuery 기반으로 만들어졌기 때문에 jQuery가 필요합니다. CSS JS 2. 기본 사용법 slick-slider의 기본 구성은 아래 코드 처럼 div형태로 구성되어 있는 html문서를 슬라이더 형태로 변경해줍니다. 1 2 3 4 5 $(function(..
📋CSS 선택자(selector) 란? 어느 요소에 스타일을 적용할지 알려주는 방식이 css 선택자 입니다. ✔ 선택자의 종류 1. 전체 선택자 전체 선택자는 *을 사용하여 나타냅니다. html 모든 태그에 적용됩니다. *{ margin: 0 auto; } 2. 태그 선택자 태그 선택자는 태그의 이름을 사용하여 나타냅니다. 태그명이 선택자와 같은 태그들에 적용됩니다. div{ margin: 0 auto; } 3. 클래스 선택자 클래스 선택자는 .클래스명을 사용하여 나타냅니다. 클래스명이 같은 태그들에 적용됩니다. .className{ width: 100%; } 4. ID 선택자 ID 선택자는 # 아이디명을 사용하여 나타냅니다. ID명이 같은 태그들에 적용됩니다. #IdName{ color: #ff0 } ..
