55,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결플렉스(Flex) 반응형 웹사이트 포트폴리오(The World's Best Cities)
flex 레이아웃 배치 질문있습니다.
안녕하세요~ 여쭤볼게 있는데요 flex로 가로배치 할때 자식요소에 가로배치할 태그를 입력하고 부모요소에 display: flex 줘서 가로배치하는건데 볼록요소들을 가로배치할려하면 무조건 부모요소 만들어서 display: flex를 주고 부모요소안에 자식태그 만든다고 생각하면 되나요?
- 미해결플렉스(Flex) 반응형 웹사이트 포트폴리오(The World's Best Cities)
미디어쿼리 반응형 만들때 사이즈 질문있습니다.
안녕하세요~ 미디어쿼리 반응형 만들때 사이즈 질문있는데요 강사님이 미디어쿼리 모바일 사이즈를 max-width: 768px 로 하시는데 768px가 모바일의 최적화 사이즈인가요? 왜 768px로 하시는지 궁금합니다.
- 미해결플렉스(Flex) 반응형 웹사이트 포트폴리오(The World's Best Cities)
인라인요소인 label 에 margin-bottom 이 되다니... 어렵습니다.
안녕하세요? 이름 label 은 인라인 요소인데 상하 margin 못갖는것아닌가요? ..row .field label { margin-bottom: 5px; } display:inline으로 입력 후에도 margin-bottom: 5px; 이 적용되니 이해하기 어렵습니다.
- 미해결플렉스(Flex) 반응형 웹사이트 포트폴리오(The World's Best Cities)
태블릿부분에서 사진이 삐져나오는 부분 질문
안녕하세요 16:25초 할머니 그림부분에 아랫쪽에 이미지가 삐져나오는데 이부분은 어떻게 맞추나요? 알려주시면 감사하겠습니다.
- 미해결플렉스(Flex) 반응형 웹사이트 포트폴리오(The World's Best Cities)
모바일 버전 관련 질문있습니다.
선생님 강의 덕분에 모바일버전까지 무사히 완성하고 배워가는 계기가 되었습니다. 다름이 아니라 궁금한게 있어서 여쭤보고자 글을 남깁니다. 저는 intro영역을 이미지가 아닌 동영상으로 만들었습니다.(선생님 강의 참고해서 만들었습니다.) 모바일버전에서는 화면이 짤리는 현상이 발생하는데 이미지처럼 크기가 조절된 상태로 동영상이 들어오는 방법이 있는지 궁금합니다. <main class="intro"> <div class="inner"> <div class="heading"> <h1>The World’s Best Cities</h1> <p>It’s not just about good weather or great food and nightlife. Unlike other best-of lists, Resonance’s annual ranking also considers a city’s diversity.</p> </div> </div> <video src="video/Aerial - 26571.mp4" autoplay muted loop></video> </main> <!-- intro --> pc ver css .intro{ height: 100vh; width: 100%; position: relative; overflow: hidden; display: flex; align-items: center; } .heading{ color: #fff; text-align: center; } .heading h1{ font-size: 56px; margin-bottom: 40px; } .heading p{ font-size: 22px; line-height: 1.8em; padding: 0 150px; font-weight: 200; } video{ position: absolute; top: 0; left: 0; min-width: 100%; min-height: 100%; z-index: -1; }
- 미해결플렉스(Flex) 반응형 웹사이트 포트폴리오(The World's Best Cities)
justify-content :center
선생님 저는 html의 통일성을 우선시해서 inner를 지우지 않고 각 섹션별로 지우지 않았습니다. 이후 각 section에 flex를 넣었는데 justify-content가 적용이 안되어서 우선은 text-align : center로 가운데 맞췄는데 왜 안되는지 알 수 있을까요? <section class="callaction"> <div class="inner"> <h2>The Most Simple & Powerful Way<br> to book your trip</h2> <a href="#">GET EARLY ACCESS</a> </div> </section> <!-- callaction --> .callaction{ background: url(../img/scenery-g46a0830e8_1920.jpg) no-repeat bottom center; height: 600px; background-size: cover; position: relative; display: flex; justify-content: center; align-items: center; text-align: center; } .callaction > .inner{ position: relative; } .callaction h2{ color: white; font-size: 48px; line-height: 2; margin-bottom: 20px; font-weight: 300; } .callaction::before{ content: ""; background: linear-gradient(to right bottom, transparent, skyblue); width: 100%; height: 100%; position: absolute; } .callaction a{ font-size: 20px; background: white; color: dodgerblue; padding: 10px 20px; border-radius: 20px; } .callaction a:hover{ background: dodgerblue; color: white; } * 선생님 푸터영역도 강좌를 보다가 flex를 1: 1: 2비율로 했는데 community영역이 1/4의 영역을 넘어 너무 크게 나오는데 이것도 추가적으로 코드랑 화면 올리겠습니다. 감사합니다. <footer> <div class="inner"> <div class="footer_content"> <ul class="community"> <li><a href="#">Community</a></li> <li><a href="#">Subscribe</a></li> <li><a href="#">Give A Gift</a></li> <li><a href="#">Customer Service FAQ</a></li> <li><a href="#">Access Your Subscription</a></li> </ul> <ul class="netowrk"> <li><a href="#">Network</a></li> <li><a href="#">Privacy Policy</a></li> <li><a href="#">Terms Of Service</a></li> <li><a href="#">Advertise</a></li> <li><a href="#">Jobs</a></li> </ul> <ul class="'help"> <li>Help Preserve This Project</li> <li>We may earn a commission if you purchase an item </li> <li>featured on our site.</li> <li>Copyright © 2020 CodingWorks. All rights reserved.</li> </ul> </div> <!-- footer_content --> </div> <!-- inner --> </footer> footer{ background: black; } .footer_content{ display: flex; } .footer_content ul{} .footer_content ul li{ text-align: center; border: 1px solid white; } .footer_content ul li a{ color: #959595; } .community{ flex: 1; } .network{ flex: 1; } .help{ flex: 2; } .footer_content ul li:first-child a{ color: white; }
- 해결됨플렉스(Flex) 반응형 웹사이트 포트폴리오(The World's Best Cities)
cdn 주소 앞에 https:
선생님 안녕하세요 slick slider 플러그인 cdn 으로 링크하고 라이브 프리뷰는 작동이 되는데 index.html 을 열었을때는 작동이 안되는데 cdn 주소 앞에 https: 가 붙어야만 작동이 되더라구요 이유가 뭘까요?ㅠㅠ
- 해결됨플렉스(Flex) 반응형 웹사이트 포트폴리오(The World's Best Cities)
flex-wrap: wrap, flex-direction: column
안녕하세요 선생님 강의 2:53 에서 section 에다가 flex-wrap:wrap 으로 테블릿 버전 줄바꿈 해주셨는데 저는 flex-direction: column 으로 줄바꿈 했더니 .desc 에 height: 100% 주니까 컨텐츠만큼 줄어들더라구요 flex-direction: column 으로 줄바꿈 했을때 .desc 의 height 를 가득차게 하는 방법은 없을까요?
- 미해결플렉스(Flex) 반응형 웹사이트 포트폴리오(The World's Best Cities)
div를 만들고 거기 안에 작성했는데요
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. <div class="Group"> <img src="img/woman.png" class="Ellipse"> <span class="Sed-ut-perspiciatis"> Sed ut perspiciatis </span> <span class="Nemo-enim-ipsam-voluptatem-quia-voluptas-sit-aspernatur-aut-odit-aut-fugit-sed-quia-consequuntur-ma">Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem.</span> <span class="Learn-more">Learn more</span> </div> 이렇게 Group 이라는 div안에 적어놨는데 live로 열어보면 밖으로 튀어나오는데 어떻게 하죠??
- 미해결플렉스(Flex) 반응형 웹사이트 포트폴리오(The World's Best Cities)
반응형 헤더 네비게이션(3) 질문
안녕하세요. 수업을 듣다가 궁금한게 있어서 글을 남기게 되었습니다. 1. CSS에서 nav에 width를 1280px;로 잡을 경우 아래와 같이 나오고 있습니다. <1280px> 그래서 저는 1100px로 잡아서 선생님께서 만드신 화면과 비슷하게끔 만들었는데 선생님이 만드신 거와 다르다보니 뭐가 잘못된 건지 궁금합니다. 현재 노트북으로 작성하고 있습니다. <1100px> 2. 미디어 쿼리 부분에서 .gnb li가 가로방향 전체가 아닌 .gnb li a 주변에 border가 만들어지는데 뭐가 잘못된건지 봐주시면 감사하겠습니다. 아래는 코드 입니다. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Flex UI 실전 제작 - 반응형 헤더 네비게이션</title> <style> @import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500&display=swap'); @import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); body{ font-family: 'Montserrat', sans-serif; background-color: eee; font-size: 15px; color: #222; margin : 0; } /* reset css */ a { text-decoration: none; color: #222; } h1, h2, h3, h4, h5, h6 { font-weight: normal; margin: 0; } button { cursor :pointer; outline : none; } /* Header */ header { background-color: #74b9ff; display: flex; justify-content: center; height: 60px; align-items: center; } nav { display: flex; justify-content: space-between; width: 1100px; } .logo {} .logo img{ filter:invert() } .gnb { margin: 0; padding : 0; list-style: none; display: flex; } .gnb li{} .gnb li a { color: white; margin: 10px; } .sns {} .sns a { color: white; margin: 5px; } .gnb li a:hover, .sns a:hover{ color: black; } @media screen and (max-width: 768px){ header{ height: auto; } nav { width: 100%; display: flex; flex-direction: column; } .logo { padding: 10px; } .gnb { display: flex; flex-direction: column; align-items: center; } .gnb li { border: 1px solid white; } .gnb li a { border: 1px solid #000; display: block; padding: 7px; margin: 0; } .sns { text-align: center; background-color: dodgerblue; padding: 10px; } .sns a { color: black; } } </style> </head> <body> <header> <nav> <div class="logo"><a href="#none"><img src="Flex UI 실전 제작(3) – 반응형 헤더 네비게이션/images/logo.png" alt=""></a></div> <ul class="gnb"> <li><a href="#none">Home</a></li> <li><a href="#none">About</a></li> <li><a href="#none">Project</a></li> <li><a href="#none">Plan & History</a></li> <li><a href="#none">Awards</a></li> <li><a href="#none">Location</a></li> <li><a href="#none">Contract</a></li> </ul> <div class="sns"> <a href="#none"><i class="fa fa-facebook-square"></i></a> <a href="#none"><i class="fa fa-twitter-square"></i></a> <a href="#none"><i class="fa fa-youtube-play"></i></a> </div> </nav> </header> </body> </html>
- 해결됨플렉스(Flex) 반응형 웹사이트 포트폴리오(The World's Best Cities)
버튼문제
선생님 facebook, twitter, google 버튼이 활성화가 안되고 있어서 글남기게 되었습니다. 현재 이상태로 실행하게 되면 모양은 나오는데 버튼이 활성화가 안되어있습니다. 그래서 btn faceboook이라는 클래스 이름 대신 btnfacebook으로 수정 후 css도 맞게 수정하는 경우엔 버튼이 생기고 있습니다. 또한 아이콘을 넣을 때도 html 태그 안에 넣었음에도 아이콘이 생기지 않고 있습니다. 제가 잘못건드린게 있는건가요? .btn { flex: 1; margin: 3px; padding: 8px; border: none; font-size: 13px; border-radius: 10px; color:white; } .btn.facebook{ background: #1877F2; } .btn.twitter{ background-color: #1DA1F2; } .btn.google{ background-color: #ea4335; } <div class="login-form"> <h2>Registration</h2> <div class="sns-login"> <button class="btn facebook">Log in with Facebook</button> <button class="btn twitter"> Log in with Twitter</button> <button class="btn google">Log in with Google</button> </div>
- 미해결플렉스(Flex) 반응형 웹사이트 포트폴리오(The World's Best Cities)
text 아래 공백
안녕하세요 a태그에 reset css 로 text-decoration: none 이 적용되어 있는데, a태그의 underline이 눈에 보이지만 않을 뿐 그 두께가 그대로 남아 있어서, a태그 text 위의 공백보다 간격이 넓은 공백이 text 아래에 생기는 것 같습니다. (원인이 이게 맞나요?) 강의 내용처럼 padding을 줘도 그 공백이 없어지지 않고, inline-block으로 높이값을 주고 line-height로 중심에 보내봐도 없어지지 않는데, 검사창에서는 margin 이든, padding 이든 아무것도 안 잡힙니다. 어떻게 해야 이 공백을 없앨 수 있는 건가요 ? 관련강의는 callaction section 상세 퍼블리싱 입니다.
- 미해결플렉스(Flex) 반응형 웹사이트 포트폴리오(The World's Best Cities)
부드럽게 스크롤이 안됩니다..
(주석을 다 풀어서 캡쳐했습니다! ) 1)js로 넣었을경우: 선생님께서 밑에 글로 적으신 스크립트 그대로 붙여넣기했는데 부드럽게 스크롤이 되지만 상단으로만 이동합니다.. 2)순수css경우 : 스크립트랑 js src부분을 지우고 smooth로 넣었는데 메뉴를 클릭하면 이동은 하나, 부드럽게 스크롤이 안됩니다... 브라우저는 크롬,엣지이고 완성본 선생님 index를 확인해보니 완성본 파일도 부드럽게 스크롤이 안되던데 뭐가 문제인지 모르겠네요ㅠㅠㅠㅠ
- 미해결플렉스(Flex) 반응형 웹사이트 포트폴리오(The World's Best Cities)
hover last-child() 인식이 되지 않습니다.
<style> .contents{ position: relative; padding-bottom: 50px; z-index:9; } .sb_menu{ position: absolute; margin-top:-25px; display: table; border-collapse: collapse; table-layout : fixed; width:100%; font-size: 1.1em; /* background-color: aqua; */ } .sb_menu li{ display: table-cell; border:1px solid #dcdcdc; background-color: #fff; border-top:none; text-align: center; } .sb_menu li.on{ background-color: #2d3c47; border-left:none; } .sb_menu li a{ display: block; width:100%; padding:17px 0; /* border:1px solid red; */ } .sb_menu li.on a{ color: #fff;; } .sb_menu li a:hover{ background-color: #2d3c47; color: #fff;; } .sb_menu li a:hover:last-child(){ border-right:none; } </style> <section class="contents inner"> <div class="sb_menu"> <li class="on"><a href="#" >사업개요</a></li> <li><a href="#">브랜드소개</a></li> <li><a href="#">오시는길</a></li> </div> </section> /*****************************************/ 아래 부분이 인식이 되지 않습니다. .sb_menu li a:hover:last-child(){ border-right:none; } 마지막 박스 에 마우스 올리면 오른쪽 줄이 나오지 않게 하려고요.. a:hover:last-child() 이렇게 사용하면 안되는건가요?
- 미해결플렉스(Flex) 반응형 웹사이트 포트폴리오(The World's Best Cities)
신기한 가운데 정렬에 대해
선생님 11:18 에서 가운데 정렬에 대해 질문 있는데요 .left 에 flex를 지정하면 [Aside #1]가 차일드가 된다는 말씀 조금만 더 설명해 주세요.
- 미해결플렉스(Flex) 반응형 웹사이트 포트폴리오(The World's Best Cities)
한가지 질문드려요! 크로스브라우징관련해서입니다.
선생님의 주옥같은 강의들로 자신감도 많이 생기고,이제는 html css는 자신감이 가득하고,JS나 제이쿼리를 집중적으로 공부하고 있습니다. 그동안 개인포트폴리오 만들고 했는데,하다보니 크로스브라우징을 했을 때,이 강의에서 만들었던 포폴도 포함해서, slick.js 나 다른 슬라이더 swiper.js를 적용하고 했는데,크롬, 엣지, 오페라, 파이어폭스 다 이상 없이 잘 돌아가는데,IE에서만 slick이나 swiper가 적용이 안되더라구요.그래서 구버전을 다운받아서도 해봤는데, 먹히질 않았고, <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 혹은<meta http-equiv="X-UA-Compatible" content="IE=Edge" /> 혹은 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 를 적어도 소용이 없더라구요.아무래도 이제 IE를 사용하는 사람들이 거의 없다고 보는데,현업에서는 IE를 이제는 고려하지 않는 추세인가요? 그냥 IE는 완전히 무시하고 작업해도 되는지가 걱정이네요.다 잘 되는데, IE만 또 신경써야하니 그때 그때, can I use 사이트 보면서 알아보는것도 은근히 스트레스고 그러네요.마음편하게 말씀해 주시면 좋겠습니다.감사합니다.
- 미해결플렉스(Flex) 반응형 웹사이트 포트폴리오(The World's Best Cities)
비주얼 스튜디오 코드 사용관련 pdf 파일은 어디에서 받을수 있나요?
비주얼 스튜디오 코드 사용 관련 pdf 파일은 어디에서 받을수 있나요?
- 미해결플렉스(Flex) 반응형 웹사이트 포트폴리오(The World's Best Cities)
gnb 및 nav 스크립트 및 modal 질문입니다.
안녕하세요 선생님의 수업을 듣고 난 뒤 질문이 있어서 이렇게 문의 드립니다. 선생님의 flex 반응형 웹을 듣고, 개인적으로 만들면서 어려운 점이 있어서 이렇게 질문드립니다. 1. about 부분에 내용을 추가하면서 nav 부분에 지속적으로 오류가 생깁니다. 선생님의 웹처럼 크기를 줄였을 때 nav 부분이 오른쪽에서 저렇게 펼쳐져서 나와야하는데 손을 댈수록 하단의 사진 처럼 저런식으로 나옵니다. 건들인 부분은 html부분과 css부분 뿐이고 js 부분은 만지지 않았습니다. 어떤 부분에서 오류가 있는지 알려주실 수 있나요? 참고로 responsive.css 부분은 수정 작업을 거치면서 아직 수정하지 않았습니다. 이 부분이 문제가 될 수도 있나요? 선생님의 웹 2. 선생님의 수업 도중 modal 부분도 유튜브 강의를 들었습니다. 그런데, flex 웹 사이트에 modal 부분도 넣어봤는데, 화면의 중간에 있던 a태그들이 모조리 눌러지지 않았습니다 (정확히 모달 바깥부분 같습니다. 바깥부분의 경우 a 태그가 인식이 되었습니다.) 또한 testimonial 부분의 js까지 덩덜아 작동되지 않았습니다. header 부분의 active와 겹쳐서 그런건가 싶기도 한 거 같은데 어려워서 질문 드립니다. 수정을 한 뒤 제가 손을 댄 맵
- 미해결플렉스(Flex) 반응형 웹사이트 포트폴리오(The World's Best Cities)
scroll-behavior: scroll-behavior
html { scroll-behavior: smooth; } 분명히 이렇게 적용 하였는데요 ㅜㅜ 적용이 안됩니다 이유가 뭘까요
- 미해결플렉스(Flex) 반응형 웹사이트 포트폴리오(The World's Best Cities)
스크롤이 없는 레이아웃의 장점은 무엇인가요?
안녕하세요, 강사님 차근차근 이해할 수 있게 설명해주셔서 잘 배우고 있습니다. 정말 감사합니다! 스크롤이 없는 레이아웃의 장점이 구체적으로 어떤 부분에 있는지 궁금합니다. 다른 강의들을 몇 개 보다가 들은 내용으로는 "반응형 작업을 위해서 스크롤이 없어야 한다"는 설명도 얼핏 들었던 것 같기도 한데, 일반적인 사이트에서는 보통 스크롤(세로)이 있잖아요? 그래서 이번 편에서 배운 예시가 실제로는 주로 어느 페이지 레이아웃에서 쓰이는지 궁금합니다! 감사합니다.