반응형 Vuejs_JS_CSS(3)11 css - 반응형, 모바일 레이아웃, 화면 사이즈별 레이아웃 크기, 폰트 사이즈로 간단히 조절 css, 폰트사이즈(font-size)로 전체적인 레이아웃의 크기 조절 common.css 같은 최상위 공통 css에 폰트의 기본 사이즈를 지정 html{font-size:10px;} html tag에 대한 스타일을 적용할 때 rem 을 사용(px (x)) rem은 기본 사이즈인 10px이 기준. 1rem = 10px em은 감싸는 태그에 있는 px이 기준이 되어서 깊이 들어갈수록 복잡하고 불편해짐 px은 1px 이 아니면 사용할 필요가 없음 /* ......*/ .somewrap{margin-top:3rem;...} .somediv{width:10rem;...} .somep{font-size:2rem;...} /* ......*/ 스크린 사이즈, 해상도, 브라우저 넓이 등에 맞게 "전제적으로" 레이아웃.. 2022. 9. 29. 자바스크립트 관련 - 일반 슬라이드, requestAnimationFrame 자바스크립트를 사용한 슬라이드, requestAnimationFrame 사용, setTimeout / setInterval 사용하지 않음 좌우 버튼을 클릭해서 슬라이드 형태로 내용이 바뀌는 스크립트 html 제목1 사용자1 제목2 사용자2 제목3 사용자3 제목4 사용자4 {{info.imgNo + 1}} / {{info.imgLen}} css ...... .btn_progress::after{content:"";position:absolute;left:0;top:0;display:flex;align-items:center; justify-content:center;width:100%;height:100%; background:url(/pause_img.svg) no-repeat center;opacity.. 2022. 9. 26. 자바스크립트 관련 - 무한 슬라이드, requestAnimationFrame 자바스크립트와 css를 사용해서 무한 슬라이드, requestAnimationFrame, cancelAnimationFrame 간단히 왼쪽에서 오른쪽으로 무한하게 움직이지만 해당 영역에 마우스를 가져가면 멈추고, 영역에서 나가면 다시 움직이는 슬라이드 효과를 만들어보자. html css /* slide가 되려고 컨텐츠들 가로 정렬 */ .slider_area{display:flex;}/* translateX가 0%가 되면 다시 -50%로 가도록 */ .slider_wrap{display:flex;} js(vue) const {createApp, ref, computed, onMounted} = Vue; const slide = { setup() { // ref() 를 사용하면 js에선 .value로 찾아.. 2022. 9. 23. html - 기본구조, 메타태그 세팅 html 메타태그 세팅 html 2022. 9. 2. 이전 1 2 3 다음 반응형