목록무작정 따라하기 (40)

뇌 채우기 공간

[깃허브 예제] 화면 줄였을 때 로그인 부분 가운데로 가게 하기/ 미디어 쿼리 / 미디어쿼리 css 파일 분리하기/ footer에 양옆으로 float으로 나눠진 요소를 수직으로 정렬하고 가운데 정렬하기

/* 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-..
무작정 따라하기/패스트캠프(프론트) 2021. 4. 22. 16:40
[깃허브 예제] toggle버튼을 화면 크기에 따라 없어지고 있게 하는 법 js코드

(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. 4. 22. 16:05
[깃허브 예제] toggle버튼 만들기/ toggle버튼에 클래스를 추가함으로써 누르면 사라지고나타나게 하는 js만들기

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;을 없애면 이런 형태로 보인다. 하지만 이렇게 세로로 정렬 되어있어야..
무작정 따라하기/패스트캠프(프론트) 2021. 4. 22. 09:18
[깃허브 예제] 미디어 쿼리 / @media / 미디어 타입/ 미디어 특성/ max-width정의/ float 해제/ toggle버튼 생성

반응형 - 뷰포트의 크기에 따라 화면이 달라진다. 전체 화면일때 @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..
무작정 따라하기/패스트캠프(프론트) 2021. 4. 22. 08:47
[깃허브 예제] footer / svg로 로고 넣기 /배치를 바꾸지 않으면서 svg로 이미지 가운데로 배치하기

개발자 도구로 보면 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..
무작정 따라하기/패스트캠프(프론트) 2021. 4. 22. 08:17
이전 Prev 1 2 3 4 ··· 8 Next 다음