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: ..
overflow 속성 웹 개발에서 자주 사용되는 CSS의 속성 'overflow: hidden'에 대해서 알아보겠습니다. 우선, 'overflow' 속성이란 요소의 내용이 요소의 크기를 넘어가게 되면 어떻게 처리할지를 지정하는 역할을 합니다. hidden: 넘치는 부분이 보이지 않도록 숨깁니다. visible: 요소의 외부로 표시됩니다. scroll: 요소에 스크롤 바가 추가되어 넘치는 내용을 볼 수 있습니다. auto: 내용이 넘칠 경우에만 스크롤 바를 추가합니다. ex) overflow: hidden ex) overflow: visible
slick 옵션 autoplay : true : 자동재생 autoplaySpeed : 5000 : 자동재생 속도 5초 speed : 1000 : 재생 속도 1초 slidesToShow : 3 : 화면에 한 번에 3개를 보여줌 slidesToScroll : 3 : 슬라이드 넘길때 3개씩 넘어감 centerMode : true : 캐러셀 센터 모드 vertical : true : 세로방향 슬라이드 arrows : false : 버튼 없애기 variableWidth: true : 너비값 다양하게 주기 (안하면 각 이미지 너비값 동일함) ( slick 버튼 영역에는 a태그 사용금지 악먹히게 만들어놨음)
