뇌 채우기 공간

/* 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..

/* pricing card */ .section--pricing{ background: linear-gradient(#f5f5f5, #fff); } .section--pricing .inner{ padding: 80px 0 ; } .section--pricing .card{ display: flex; border: 1px solid #e5e5e5; border-radius: 6px; box-sizing: border-box; } .section--pricing .card .cell{ padding: 24px; display: flex; justify-content: center; align-items: center; } .section--pricing .card .cell1 btn{ height: 50..

Welcome home, developers GitHub fosters a fast, flexible, and collaborative development process that lets you work on your own or with others. 이렇게 구조를 잡아 주었다. video그냥 넣으면 반응형이 안되기 때문에 div 태그 안에 넣었다. 2021.04.21 - [WEB/html,CSS] - [html][css] 유튜브 video 16:9 비율에 맞게 삽입하기[html][css] 유튜브 video 16:9 비율에 맞게 삽입하기 [html][css] 유튜브 video 16:9 비율에 맞게 삽입하기[html][css] 유튜브 video 16:9 비율에 맞게 삽입하기 .video{ max-wid..

이부분을 만들 것임 글자 줄바꿈 하는 법 How people build software 이렇게 연결되었다 특정한 단어가 자연스럽게 줄바꿈이 된다. br태그를 왜 안쓰냐면 반응형으로 만들었을때 자연스럽게 줄바꿈이 되어야하는데 br태그를 쓰면 딱 그자리에서 줄바꿈이 되기 때문이다. How people build software Millions of developers use GitHub to build personal projects, support their businesses, and work together on open source technologies. Use at least one letter, one numeral, and seven characters. Sign up for GitHub By..

2021.04.21 - [무작정 따라하기/패스트캠프(프론트)] - [깃허브 예제] 중간부분 visual section만들기 / section의 공통 css정의 [깃허브 예제] 중간부분 visual section만들기 / section의 공통 css정의 이렇게 중간 영역을 만들 것이다. summary는 계속 반복되니까 공통css로 올려준다. 뒤에서 계속 이런식으로 반복된다. 그리고 max-width와 margin도 공통부분이므로 공통부분에 작성해준다. max-width: 980p sso-feeling.tistory.com 배경 이미지를 조금 어둡게 만들기 .section--visual::before{ content: ""; position: absolute; top: 0; left: 0; width: 10..

이렇게 중간 영역을 만들 것이다. summary는 계속 반복되니까 공통css로 올려준다. 뒤에서 계속 이런식으로 반복된다. 그리고 max-width와 margin도 공통부분이므로 공통부분에 작성해준다. max-width: 980px; margin: 0 auto; /* section & inner */ .section{ position: relative; } .section .inner{ max-width: 980px; margin: 0 auto; box-sizing: border-box; position: relative; /* position : absolute가 이 자식요소에서 사용 했을 시에 여기서 걸리게 하려고 */ } position에 대해서 잘 모르겠다면 2021.04.17 - [WEB/htm..