/* visual */ .section--visual{ background-image: url("../img/bg-small.jpg"); } .section--visual .inner{ display: block; max-width: none; padding: 80px 20px; } .section--visual .summary{ text-align: center; margin-right: 0; margin-bottom: 50px; } #sign-form{ width: auto; max-width: 500px; margin: 0 auto; } 지금까지 미디어 쿼리 코드 전체 /* MEDIA */ @media (max-width: 1024px){ header.section .inner{ /* 원래 max-..

(function(window, document){ 'use strict'; const $toggles = document.querySelectorAll('.toggle'); const $toggleBtn = document.getElementById('toggle-btn'); // 사용자가 클릭하는 이벤트가 발생하면 $toggleBtn.addEventListener('click', function(){ toggleElements(); }); // 뷰포트를 resize할때 무엇인가를 하겠다. window.addEventListener('resize', function(){ if(window,innerWidth>1024){ //Off toggle element // 브라우저가 1024보다 크면 토글을 꺼라..

2021.04.22 - [무작정 따라하기/패스트캠프(프론트)] - [깃허브 예제] 미디어 쿼리 / @media / 미디어 타입/ 미디어 특성/ max-width정의/ float 해제/ toggle버튼 생성 [깃허브 예제] 미디어 쿼리 / @media / 미디어 타입/ 미디어 특성/ max-width정의/ float 해제/ toggle버튼 반응형 - 뷰포트의 크기에 따라 화면이 달라진다. 전체 화면일때 @media 미디어타입 and (미디어 특성){ css코드 } 미디어 타입 all : 모든 미디어 타입에 적용 screen: 컴퓨터 화면, 타블렛, 스마트폰 prin sso-feeling.tistory.com 지금 display: none;을 없애면 이런 형태로 보인다. 하지만 이렇게 세로로 정렬 되어있어야..

반응형 - 뷰포트의 크기에 따라 화면이 달라진다. 전체 화면일때 @media 미디어타입 and (미디어 특성){ css코드 } 미디어 타입 all : 모든 미디어 타입에 적용 screen: 컴퓨터 화면, 타블렛, 스마트폰 print: 인쇄 전용 미디어 특성 width max-width min-width height max-height min-height orientation - 뷰포트의 방향(portrait, landscape) - portrait : 세로가 더 긴 상태 - landscape: 가로가 더 긴 상태 .container{ width:100px; height:100px; background: tomato; } @media screen and (max-width: 700px){ .containe..

개발자 도구로 보면 Contact GitHub API Training Shop Blog About © 2016 GitHub, Inc. Terms Privacy Security Status Help /* footer */ footer{ } footer .inner{ padding: 50px 0; border-top: 1px solid #eee; } footer .site-links{ display: flex; } footer .site-links li{ font-size: 12px; margin-right: 10px; color: #767676; } footer .site-links li a{ color: #4078c0; } footer .site-links li a:hover{ text-decoratio..