반응형 단위와 미디어쿼리를 적극 활용해 진행한 프로젝트입니다. 태블릿, 모바일, PC 모두 대응해보았고 보다 직접적인 예제를 통해 반응형 CSS에 대한 감을 익힐 수 있었습니다.
기여도 : 개발 100%
글꼴 : NOTOSANS
1. padding top, padding bottom은 요소의 width를 참고한다.
2. width가 100px 일 시 padding top을 20%을 줄 시 height은 20px이 된다.
3. 이를 이용해 16/9를 환산해 padding bottom 56.25%를 할당한다.
1. 미디어 쿼리 선언하기
2. vw 설정으로 유기적으로 변하도록 변경하기
1. new Date() 변수에 담기
2. 시간, 분, 초 변수에 할당
3. innerHtml로 바인딩
1
2
3
4
5
6
// html
<div class="timeout-wrap">
.timeout-wrap {width: 100%;
padding-bottom : 92.59% // 1.08 종횡비로 가로가 조금 더 긴 직사각형 형태
}
@media screen and (max-width: 480px) {
.gallery1 .swiper-slide .info-text > h2 {
font-size: 6.6vw;
7
const dpTime = function () {
const now = new Date();
let hours = now.getHours(); let minutes = now.getMinutes(); let seconds = now.getSeconds();
document.querySelector(".live-time").innerHTML =
ampm + hours + ":" + minutes + ":" + seconds;
setInterval(dpTime, 1000); /* 1초마다 해당 함수 실행해서 업데이트하기 */
8
.link-set > li a::before { 부모와 같은 역할을 할 수 있도록 지정
content: "";
background-image: url(../images/icon_set_service.png);
.link-set li.link1 a::before {
background-position: -360px 0; 해당 값으로 position 변경
9
10
11
12
var carformSlides; // 슬라이드
var clickModel // 클릭된 슬라이드 변수
carformSlides.click(function() {
clickModel = $(this).find('p').text(); // 클릭된 (this)의 텍스트 값 변수 할당
$('.clicked-model').text(clickModel); // 해당 값 바인딩
localStorage.setItem('choose', clickModel); // 로컬스토리지에 값 저장
});
저장소에 있는 값 다른 브라우저에서 가져오기
var clickSub = localStorage.getItem('choose');
