아직 강의보기전인데

넷플릭스 반응형부분에서 막혔습니다.

(사진)

넷플릭스 반응형부분에서 막혔습니다.

@media (max-width: 768px) { body { font-size: 16px; } .logo img { width: 140px; } header { padding: 35px 25px; } /* common css */ section { padding: 20px; } /* section : selcome */ .welcome { height: 100vh; } /* heading */ .heading { width: 100%; } .heading h1 { font-size: 34px; } /* getstarted */ .getstarted { width: 90%; } .getstarted input[type=email] { width: 100%; margin-bottom: 15px; } /* section : enjoy, download, watch, create */ .enjoy, .download, .watch, .create { height: auto; position: static; transform: translate(0); } .inner { width: 100%; position: static; transform: translate(0); } /* change order */ .download .inner, .create .inner { border: 10px solid red; display: flex; flex-direction: column; } .download .inner .desc, .create .inner .desc, { order: 1; } /* 수정 */ .inner > div { float: left; width: 50%; } .desc h2 { font-size: 26px; } /* 수정 */ .download .inner .preview .create .inner .preview { order: 2; } .desc, .preview { float: none; width: 100%; text-align: center; } .preview img { width: 100%; height: auto; } desc h2 { font-size: 30px; } /* section: faq */ .faq { padding: 80px 20px; } .faqinner { width: 100%; } .faqinner h1 { font-size: 30px; line-height: 1.2em; } /* footer */ .footer-inner { width: 100%; } .items { width: 48%; margin-bottom: 20px; } /* modal */ .login { width: 100%; } }

넷플릭스 반응형부분에서 막혔습니다.

반응형css @media (max-width: 768px) { body { font-size: 16px; } .logo img { width: 140px; } header { padding: 35px 25px; } /* common css */ section { padding: 20px; } /* section : selcome */ .welcome { height: 100vh; } /* heading */ .heading { width: 100%; } .heading h1 { font-size: 34px; } /* getstarted */ .getstarted { width: 90%; } .getstarted input[type=email] { width: 100%; margin-bottom: 15px; } /* section : enjoy, download, watch, create */ .enjoy, .download, .watch, .create { height: auto; position: static; transform: translate(0); } .inner { width: 100%; position: static; transform: translate(0); } /* change order */ .download .inner, .create .inner { border: 10px solid red; display: flex; flex-direction: column; } .download .inner .desc, .create .inner .desc, { order: 1; } .download .inner .preview .create .inner .preview { order: 2; } .desc, .preview { float: none; width: 100%; text-align: center; } .preview img { width: 100%; height: auto; } desc h2 { font-size: 30px; } /* section: faq */ .faq { padding: 80px 20px; } .faqinner { width: 100%; } .faqinner h1 { font-size: 30px; line-height: 1.2em; } /* footer */ .footer-inner { width: 100%; } .items { width: 48%; margin-bottom: 20px; } /* modal */ .login { width: 100%; } }

넷플릭스 반응형부분에서 막혔습니다.

/* Google Web Font */ @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap'); /* font-family: 'Roboto', sans-serif; */ /* XEION CDN */ @import url('http://cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css'); * { box-sizing: border-box; font-family: 'Roboto', sans-serif; } body { background-color: #000; color: white; margin: 0; line-height: 1.6em; font-size: 26px; } a { text-decoration: none; color: white; } section { border-bottom: 10px solid gray; position: relative; } /* ///////// header ///////////// */ header { overflow: hidden; padding: 40px 50px; position: absolute; width: 100%; z-index: 10; } .logo { float: left; } .logo img { width: 170px; } .signin { float: right; } .signin button { background-color: crimson; border: none; color: white; padding: 7px 16px; border-radius: 5px; text-transform: capitalize; cursor: pointer; font-size: 18px; } /* //////////// section : welcome /////////// */ .welcome { height: 80vh; background: url(images/bg.jpg) no-repeat center center; position: relative; background-size: cover; } .welcome::before { content: ''; position: absolute; background-color: rgba(0, 0, 0, 0.7); width: 100%; height: 100%; left: 0; top: 0; } /* heading */ .heading { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; width: 800px; } .heading h1 { font-size: 64px; line-height: 1.2em; margin: 0; } .heading h5 { font-weight: normal; margin: 0; font-size: 20px; } .heading p { font-size: 20px; } .getstarted { position: relative; display: inline-block; } .getstarted input[type=email], .getstarted button { height: 60px; border: none; outline: none; vertical-align: middle; } .getstarted input[type=email] { width: 450px; font-size: 18px; padding-left: 10px; } .getstarted input[type=email] + span { color: #999; font-size: 16px; position: absolute; left: 10px; top: 10px; transition: 0.3s; pointer-events: none; } .getstarted input[type=email]:focus + span { transform: translateY(-18px); font-weight: bold; } .getstarted button { width: 220px; margin-left: -6px; cursor: pointer; color: white; font-size: 26px; background: crimson; } /* /////////// section : enjoy, download, watch, create ///////////// */ .enjoy, .download, .watch, .create { height: 500px; } .inner { width: 1150px; margin: auto; overflow: hidden; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .inner > div { float: left; width: 50%; } .desc { padding-top: 40px; width: 60% } .desc h2 { font-size: 50px; } .preview { text-align: center; width: 40%; } .preview img { height: 350px; } /* ////////////// faq /////////////// */ .faq { padding: 80px 0; } .faqinner { width: 850px; margin: auto; } .faqinner h1 { text-align: center; font-size: 50px; } input[name=faq-item] { display: none; } input[name=faq-item] + label { display: block; background: #303030; padding: 15px; cursor: pointer; } .faq-content { background-color: #303030; padding: 15px; margin-bottom: 10px; margin-top: 5px; max-height: 0; overflow: hidden; padding: 0; transition: max-height 0.5s; } /* checked fuction */ input[name=faq-item]:checked + label + .faq-content { max-height: 400px; padding: 15px; } input[name=faq-item] + label span { float: right; margin-top: 2px; transform: rotate(45deg); transition: 0.3s; } input[name=faq-item]:checked + label span { transform: rotate(0deg); } aside { text-align: center; } /* ////////// footer ///////////// */ footer { padding: 50px 0; font-size: 14px; color: #777; line-height: 1.4em; } .footer-inner { width: 850px; margin: auto; } .sitemap { border-bottom: 1px solid rgb(68, 68, 68); padding-bottom: 20px; } .sitemap h6 { font-size: 16px; margin: 0; padding-bottom: 50px; } .items { display: inline-block; margin-right: 50px; vertical-align: top; } .items a { color: #777; display: block; line-height: 2em; } .items a:hover { text-decoration: underline; } /* /////////// modal //////////// */ .modal-login { background-color: rgba(0, 0, 0, 0.4); position: fixed; width: 100%; height: 100vh; top: 0; left: 0; z-index: 100; display: none; } .login { width: 450px; height: 500px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(0, 0, 0, 0.8); font-size: 15px; color: #777; padding: 30px; font-weight: 300; } .login h1 { font-size: 30px; color: white; } .login input[type=text], .login input[type=password] { background-color: #333; padding: 20px 15px; border-radius: 5px; width: 100%; border: none; outline: none; margin-bottom: 3px; color: white; } .login input[type=button] { font-size: 16px;background-color: crimson; color: white; border: none; outline: none; border-radius: 5px; padding: 13px; width: 100%; margin-top: 5px; cursor: pointer; } .login p a { color: royalblue; } .save-info { overflow: hidden; margin-top: 10px; } .save-info label { float: left; } .save-info a { float: right; } .login a:hover { text-decoration: underline; } .btn-close { font-size: 40px; cursor: pointer; position: absolute; right: 20px; top: 20px; }