미디어 쿼리 미디어 쿼리는 웹 페이지, 앱의 뷰 포트 크기, 장치 종류, 화면 방향 등 미디어의 특성에 따라 스타일을 적용할 수 있게 해주는 CSS입니다. @media 미디어 유형 and 조건 { } 미디어 유형의 종류 all print screen tv aural braille handheld projection tty embossed breakpoint(중단점) : 서로 다른 css를 적용할 화면 크기 스마트폰 portrait(세로) 320px, landscape(가로) 480px 태블릿 세로 768px 가로 1024px 데스크톱 1024px
slick 플러그인 연결 https://bagun-coding.tistory.com/entry/JavaScript-slick-%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8-%EC%97%B0%EA%B2%B0%ED%95%98%EB%8A%94-%EB%B2%95 [JavaScript] slick 플러그인 연결하는 법 slick이란 slick은 웹 사이트에서 반응형을 구현하는 jQuery의 플러그인 입니다. 웹 페이지의 이미지 슬라이드에 많이 활용됩니다. https://kenwheeler.github.io/slick/ slick - the last carousel you'll ever need slick is bagun-coding.tistory.com html 구조 ( slick 버튼은 a태..
box-sizing: border-box box-sizing: border-box 사용하는 이유 반응형 웹을 만들 때, 영역의 너비값을 %로 처리해야 하는 경우가 많습니다. width: 100%; padding: 20px; 해당 태그의 가로 길이는 부모태그의 길이 100% + 가로 padding 40px 부모 태그보다 더 길어져서 부모태그의 길이를 벗어나게 됨 width: 500px; padding: 20px; border: 5px 총 가로 영역: 550px width: 500px; padding: 20px; border: 5px; box-sizing: border-box; 총 가로 영역: 550px 'box-sizing: border-box'를 해주면 패딩, 테두리 포함해서 길이가 계산이 됩니다.
translate 함수 : 이동, px사용 x: 양수-오른쪽, 음수-왼쪽 y: 양수-아래쪽, 음수-위쪽 z: 양수-가까워짐, 음수-멀어짐 (y축은 수학이랑 반대! 헷갈리지 않기!) transform: translate(x, y) transform: translate3D(x, y, z) transform: translateX(x) transform: translateY(y) transform: translateZ(z) scale 함수 : 크기 확대/축소, 배수 사용 ex) scale(0.5) 요소의 크기가 0.5배로 작아짐 transform: scale(n) transform: scale(x, y) transform: scale3D(x, y, z) transform: scaleX(x) transform: ..
