55,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결플렉스(Flex) 반응형 웹사이트 포트폴리오(The World's Best Cities)
상위 태그 영역 무시 하는 방법
<div className="할아버지"> <div className="아버지"> <div className="본인"></div> </div> </div>;분명 이 강의 어디에서 배웠는데 기억이 안나서 질문을 올립니다.classname="본인"이 아버지의 영역을 무시하고할아버지의 영역을 기준으로 본인의 영역을 설정하는 방법이 있었는데요 기억이 안나네요분명 아버지 class에 어떤 css 속성을 설정을 해주면 아버지의 영역을 무시할 수 있었던 것으로 기억을 하는데 도움 부탁드립니다!
- 해결됨플렉스(Flex) 반응형 웹사이트 포트폴리오(The World's Best Cities)
반응형 적응형 구분
안녕하세요 선생님!플렉스 강의 너무 잘 듣고 있습니다.최근 플렉스 강의를 중반부 이상듣고 다른 사이트들 브라우저 검사로 스타일시트 염탐? 하고 있는데 궁금한점이 생겨서 문의드립니다.인프런 메인화면의 경우 브라우저 가로 사이즈를 줄이면 반응형으로 컨텐츠 영역이 크기에 맞게 줄어드는데크몽, 당근마켓 메인화면의 경우 브라우저 가로 사이즈를 줄이면컨텐츠 1200px 영역 양옆 마진만 줄어들면서 모바일 태블릿 영역까지 가면 가로스크롤이 길게 생기는데요...요런 사이트들은 브라우저 검사-> 토글디바이스툴바 로 아이폰12pro 선택하고 새로고침을 해야 모바일 레이아웃이 나오고 있는데해당 사이트들은 반응형 사이트가 아닌건가요? 적응형 웹 사이트의 경우 카카오뱅크, 다방 으로 pc, mobile 따로 사이트가 있는 적응형 사이트로 알고 있습니다.(실제로 위에 토글디바이스툴바 방식으로 새로고침 하면 m.***.com || ***.com/mobile)크몽, 당근마켓이 적응형일 경우 주소가 변경되야 될꺼 같은데 주소 변동이 없어서 더 궁금합니다;;제가 잘못 이해하고 있을 수도 있습니다.ㅠ답변 부탁드립니다. 감사합니다.
- 미해결플렉스(Flex) 반응형 웹사이트 포트폴리오(The World's Best Cities)
flex가 적용되면 하위에 있는 인라인의 속성은?
'반응형 헤더영역'을 다시 보는 중이었는데요..gnb a 에 상하마진이 먹히는걸 보면서. 어? a태그는 인라인인데 왜 상하마진이 먹힘? 그래서 제가 이것저것 테스트를 해 봤더니.flex가 적용되면 하위에 있던 인라인 요소들은 자동적으로 인라인블록으로 변하는 것 같습니다.포지션 속성을 주면 인라인블록으로 변하는 것 처럼요.
- 미해결플렉스(Flex) 반응형 웹사이트 포트폴리오(The World's Best Cities)
슬릭 슬라이더 버튼
선생님 안녕하세요슬릭 슬라이더 버튼을 none처리 안했더니모바일에서 가로 스크롤이 생겼습니다 코드 확인 하는 중에 선생님 주석을 확인했는데..모바일에서 버튼을 사용하고 싶으면 안쪽으로 넣으라고 하셔서left:3px; 처리를 해서 스크롤을 없앴는데제 코드가 맞는걸까요??.myslider button { /* display: none !important; */ left: 3px; }
- 해결됨플렉스(Flex) 반응형 웹사이트 포트폴리오(The World's Best Cities)
slick 모바일로 변환했을때..
안녕하세요 선생님!강의 들으면서 슬릭 슬라이더 모바일로 작업하고 있는데요~! F12 개발자도구 눌러서 반응형 확인해보면 이렇게 정상적으로 확인이 되는데,, 토글 디바이스 툴바로 확인해보면 이렇게 뜹니다 ㅠㅠ 선생님 강의에선 아이폰6/7/8로 체크하실때 정상으로 나오던데 저는 왜 이렇게 나오는걸까요..?!?!ㅠ
- 미해결플렉스(Flex) 반응형 웹사이트 포트폴리오(The World's Best Cities)
x scroll 이 왜 생기는 걸까요?
강좌 따라할때 처음 header 만들고 main만들 때부터 생겼었어요 나중에 없애는거 알려주겟지 하면서 보고있는데 샘꺼는 어느순간 해결이 되있더라고요 저로서는 아직 이게 왜 생기는건지,, overflow-x: hidden; 으로 없애고 싶다기보다 근본적인 원인을 알고싶습니다!! box-sizing:border-box;는 적용되어있는 상태입니다 물론 코드를 봐야 아시겠지만 혹시 짐작가시는 부분이 있다면 부탁드리겠습니다. 고민중인데 해결이 안되는군요 import { createGlobalStyle } from "styled-components"; const GlobalStyle = createGlobalStyle` html { box-sizing: border-box; scroll-behavior: smooth; margin: 0; padding: 0; } *, *::before, *::after { box-sizing: border-box; font-family: 'Noto Sans KR', sans-serif; font-style: normal; } body { color: #222; width: 100vw; height: 100vh !important; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; /* overflow: auto; */ } dl, menu, li { list-style: none; } h1, h2, h3, h4, h5, h6 { font-weight: normal; font-size: 28px; margin: 0; padding: 0; } a {color: #222; text-decoration: none;} a:hover {color: #390;} button { cursor: pointer; outline: none; } input , textarea , select { outline: none; } button, input , textarea , select { font-family: 'Noto Sans KR',sans-serif; } `; export default GlobalStyle; const RootLayout = styled.div` width: 100vw; height: 100vh; /* min-width: 100vw; */ /* min-height: 100vh; */ /* position: relative; */ `; function App() { return ( <ThemeProvider theme={Theme}> <GlobalStyle /> <RootLayout> <Resume /> </RootLayout> </ThemeProvider> ); } 저 <Resume/>가 강의 내용의 css가 담겨있습니다 상위 엘리먼트에서 css 설정에 문제가 있을까요..?
- 미해결플렉스(Flex) 반응형 웹사이트 포트폴리오(The World's Best Cities)
영상 16분 field margin-left 문제 (다운로드 교재도 동일한 문제)
영상 16분 field margin-left 문제가 있는데요 어떤 문제냐면 다음과 같은 문제가 있습니다 이건 다운로드 교재 역시 마찬가지입니다. 이건 어떻게 해결해야 하나요   넣던가 태그를 하나 넣던가 해결이야 어떻게든 하겟지만 샘의 해결이 궁금합니다
- 미해결플렉스(Flex) 반응형 웹사이트 포트폴리오(The World's Best Cities)
모바일에서 이미지 짤림 현상
= 모바일 버전 최상단 스크롤을 해도 이렇게 이미지가 짤리네요 저 화면 위로 스크롤이 안되요 예제 복붙 그대로 한 상태입니다. 리셋 css부터 html body 전부 똑같이 한 상태입니다 다만 react와 styled-components로 그리고 있습니다. 하지만 html / css 속성은 동일한데 이렇게 짤리는 문제가 있습니다 왜 이런지 현재 원인을 찾지 못하고잇는데 짐작가는 부분이 있으실까요?>
- 미해결플렉스(Flex) 반응형 웹사이트 포트폴리오(The World's Best Cities)
질문 있습니다
사이트를 만들면서 아래처럼 flex를 적용했는데요 위처럼 자식 요소의 내용물이 두개 이상 들어가면 세로중앙 정렬이 안되는데 이럴 경우엔 어떻게 해야되나요? 각 박스에 값을 줄 경우 위처럼 내용물은 꽉 차나 중앙 정렬이 안되고 각 박스마다 값을 안 줄 경우 내용물이 중앙정렬은 되나 역시 값을 주지 않았기에 내용물만큼만 배경을 채워 지저분해 보입니다...ㅠㅠ 박스에 값을 줄 경우 box-sizing과 padding을 이용해 중앙정렬을 맞출 수 밖에 없는 건가요? 이 경우 모든 박스의 내용물이 다른데 박스마다 일일이 다른 패딩값을 줘야하나요?
- 미해결플렉스(Flex) 반응형 웹사이트 포트폴리오(The World's Best Cities)
안녕하세요
■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다. 안녕하세요 해당 강의 들으면서 실습하고 있었는데 왜 자꾸 .gnb li 영역 왼쪽에 공백이 생기는지 왜 안없어지는지 모르겠습니다. ㅠㅠ 저 알수없는 공백 때문에 중앙정렬도 안되고 있습니다. 혹시 어디가 잘못되었는지 알수있을까요? 맥을 사용하고 있습니다. 하단에 소스코드 올려드립니다. ---------------------------------------- <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Flex UI 실전제작- 반응형 헤더 네비게이션</title> <link rel="stylesheet" href="../css/style58.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- XEIcon CDN --> <link rel="stylesheet" href="http://cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css"> <!-- jQuery CDN --> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <!-- Custom CSS & JS --> </head> <body> <header> <nav> <div class="logo"> <a href="#none"><img src="../images/logo-naver.png"></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</a></li> <li><a href="#none">Awards</a></li> <li><a href="#none">Location</a></li> <li><a href="#none">Contact</a></li> </ul> <div class="sns"> <a href="#none"><i class="fa fa-facebook"></i></a> <a href="#none"><i class="fa fa-twitter"></i></a> <a href="#none"><i class="fa fa-youtube-play"></i></a> </div> </nav> </header> </body> </html> /* Google Web Fonts CDN */ @import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:300,400,500,700,900&display=swap'); @font-face { font-family: 'InfinitySans-RegularA1'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/InfinitySans-RegularA1.woff') format('woff'); font-weight: normal; font-style: normal; } /* FontAwesome CDN 4.7*/ @import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); /* 사파리 인풋스타일 제거 */ input:checked[type="checkbox"] { background-color:rgb(255, 255, 255); -webkit-appearance:checkbox; } input[type="text"], input[type="password"], input[type="email"], input[type="search"], input[type="image"], input[type="tel"], input[type="submit"], button, select, textarea { -webkit-border-radius:0; -webkit-appearance:none; } input, button { outline: none; } /* Safari Table reset CSS */ table, tr, td, th { margin: 0; padding: 0; border-collapse: collapse; border: none; } body { background-color: #eee; margin: 0; font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: 15px; } /* Reset CSS */ a { text-decoration: none; color: #222; } h1,h2,h3,h4,h5,h6 { font-weight: normal; margin: 0; } button { cursor: pointer; outline: none; } * { box-sizing: border-box; } /* Header */ header { background-color: rgb(255, 255, 134); display: flex; justify-content: center; height: 60px; align-items: center; } nav { width: 1280px; display: flex; justify-content: space-between; } .logo { /* border: 1px solid #000; */ transform: translateY(10px); } .logo img { width: 150px; } .gnb { display: flex; list-style: none; } .gnb li {} .gnb li a { margin: 10px; } .sns { /* border: 1px solid #000; */ display: flex; } .sns a { margin: 5px; line-height: 35px; /* border: 1px solid #000; */ } @media screen and (max-width: 768px) { /* Header */ header { height: auto; } nav { width: 100%; flex-direction: column; } .logo { padding: 10px; } .gnb { border: 1px solid #000; flex-direction: column; width: 100%; } .gnb li { width: 100%; margin: 0; /* border: 1px solid red; */ } .gnb li a { margin: 0; border: 3px solid #000; display: block; padding: 7px; } .sns { justify-content: center; } }
- 미해결플렉스(Flex) 반응형 웹사이트 포트폴리오(The World's Best Cities)
모바일버전에서 스크롤이 생겨서요 ㅜㅜ
안녕하세요 수강생 입니다.반응형 퍼블리싱 강좌 리스트를 공부하는 중인데요. 제가 레이아웃을 비슷하게 해서 응용해서 코딩을 해 보았는데아래쪽에 스크롤이 생겨서는 없앨수가 없습니다. ㅜㅜ어디가 잘 못 된것인지 조언을 부탁 드립니다. 코드 업로드 하는게 잘 안되어서 서버 링크로 알려 드립니다. http://sansok.dothome.co.kr/daechung/namul.html감사합니다.
- 미해결플렉스(Flex) 반응형 웹사이트 포트폴리오(The World's Best Cities)
반응형 헤더 네비게이션 공부중인데요. 궁금한것이 있어서요.
이미지로 올려 드릴께요^^
- 미해결플렉스(Flex) 반응형 웹사이트 포트폴리오(The World's Best Cities)
슬라이딩 스크롤이 이상하게 먹혀요!
■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다. html 아이디를 전부 따로 주었는데도 about이나 blog를 누르면 해당 섹션으로 이동하는게 아니라 자꾸 맨처음 지점으로 올라가게 됩니다! 스크립트와 html 중에 뭔가 문제가 있는건가요? 스크립트를 주기 전까지는 해당 섹션으로 잘 이동했었습니다 <!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"> <!-- js 첫번째줄 필수--> <script src="js/jquery-3.5.1.min.js"></script> <!-- sliding jQuery --> <script src="js/jquery.scrollTo.min.js"></script> <script src="https://kit.fontawesome.com/a947f92a9e.js" crossorigin="anonymous"></script> <!-- slick.js --> <script src="slick/slick.min.js"></script> <link rel="stylesheet" href="slick/slick.css"> <link rel="stylesheet" href="slick/slick-theme.css"> <script src="https://kit.fontawesome.com/a947f92a9e.js" crossorigin="anonymous"></script> <!-- 공식 홈페이지에 CDN으로 가볍게 가져오는 것도 방법 중 하나 --> <!-- 순서 맨아래에 있는게 중요 --> <link rel="stylesheet" href="style.css"> <script src="js/custom.js"></script> <title>반응형 웹사이트 연습</title> </head> <body> <!-- width가 100%가 아닌 박스는 inner라는 공통 클래스를 넣어 가로너비와 마진을 정해놓는다 --> <!-- slide 작업할 때 slick.js 사이트 참고하면 좋다 --> <div class="container"> <!-- header --> <!-- active가 들어갔을때 어떻게 나오는지 실험하기 위해 클래스 미리 넣어보기 --> <header> <div class="banner"> <div class="lnb"> <a href="#none"><em>for</em> member</a> <a href="#none"><em>for</em> clients</a> <a href="#none"><em>for</em> inquire</a> </div> </div> <nav> <div class="logo"><img src="images/logo.png" alt="-"></div> <ul class="gnb"> <li><a href="#">HOME</a></li> <li><a href="#about">ABOUT</a></li> <li><a href="#ranking">RANKING</a></li> <li><a href="#testimonial">TESTIMONIAL</a></li> <li><a href="#blog">BLOG</a></li> </ul> </nav> </header> <!-- main --> <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 grea t food and nightlife. Unlike other best-of lists, Resonance’s annual ranking also considers a city’s diversity.</p> </div> </div> </main> <!-- about --> <!-- a태그와 아이디 태그 이름이 같은 걸 찾아감 --> <section class="about" id="about"> <div class="inner"> <div class="about-content"> <div class="desc"> <h2>About Best Cities in the world</h2> <p> Factors including its highly rated nightlife landed Madrid, Spain, 12th on this list of world’s best cities. 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 and, yes, the number of Instagram hashtags shared online to give a comprehensive view of what it’s like to visit and live in these places.<br><br> To figure out where you should travel to next, there are plenty of lists out there ranking the world’s best cities. Some use reader polls to determine which place lands at the top, while others base rankings on data like its livability or how easy it is to bike there. </p> <a href="#none">Visit the place information</a> </div> <div class="photo"> <img src="images/about-img-01.jpg" alt=""> </div> </div> </div> </section> <!-- lank --> <section class="ranking" id="ranking"> <div class="inner"> <div class="ranking-content"> <h2>The World’s 25 Best Cities of 2020</h2> <div class="itmes"> <div class="item"> <div class="up-image"> <img src="images/best-city-01.jpg" alt=""> </div> <div class="down-desc"> <span class="badge red">Must go</span> <h3>London, England</h3> <p> London’s main sights might date back millennia, but the capital’s shops, bars, hotels, and restaurants emerge and evolve on an almost weekly basis. </p> <a class="btn-explore" href="#none">Explore <img src="images/icon-arrow.png" alt=""></a> </div> </div> <div class="item"> <div class="up-image"> <img src="images/best-city-02.jpg" alt=""> </div> <div class="down-desc"> <span class="badge">Good to go</span> <h3>New York City, United States</h3> <p> New York’s performing arts scene—both on Broadway and off—is beloved by visitors and locals alike, so it’s no surprise that the Big Apple took the number one spot. </p> <a class="btn-explore" href="#none">Explore <img src="images/icon-arrow.png" alt=""></a> </div> </div> <div class="item"> <div class="up-image"> <img src="images/best-city-03.jpg" alt=""> </div> <div class="down-desc"> <span class="badge">Good to go</span> <h3>Paris, France</h3> <p> The Notre Dame fire was a devastating reminder of how well-loved Paris is by travelers worldwide, and as the capital gears up for the 2024 Olympics </p> <a class="btn-explore" href="#none">Explore <img src="images/icon-arrow.png" alt=""></a> </div> </div> </div> </div> </div> </section> <!-- test --> <section class="testimonial" id="testimonial"> <div class="inner"> <div class="test-content"> <h2>what <b>our customers</b> are saying</h2> <hr> <div class="myslider"> <div> <p class="client"> <img src="images/client-01.jpg" alt=""> <span><b>Coding Works</b>Seoul Korea</span> </p> <p class="comment"> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Praesentium fugit eos maiores placeat pariatur, possimus libero maxime quod iusto! Culpa perspiciatis adipisci enim pariatur id voluptas deserunt assumenda magni facilis quae earum, sed sint magnam eligendi consequatur, officia praesentium voluptatem nesciunt cum illo eaque accusamus mollitia. Animi ea error accusantium. </p> </div> <div> <p class="client"> <img src="images/client-02.jpg" alt=""> <span><b>Kate Whitney</b>Los Angeles, US</span> </p> <p class="comment"> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Praesentium fugit eos maiores placeat pariatur, possimus libero maxime quod iusto! Culpa perspiciatis adipisci enim pariatur id voluptas deserunt assumenda magni facilis quae earum, sed sint magnam eligendi consequatur, officia praesentium voluptatem nesciunt cum illo eaque accusamus mollitia. Animi ea error accusantium. </p> </div> <div> <p class="client"> <img src="images/client-03.jpg" alt=""> <span><b>Kelly Muvils</b>New York, US</span> </p> <p class="comment"> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Praesentium fugit eos maiores placeat pariatur, possimus libero maxime quod iusto! Culpa perspiciatis adipisci enim pariatur id voluptas deserunt assumenda magni facilis quae earum, sed sint magnam eligendi consequatur, officia praesentium voluptatem nesciunt cum illo eaque accusamus mollitia. Animi ea error accusantium. </p> </div> <div> <p class="client"> <img src="images/client-04.jpg" alt=""> <span><b>Oliver</b>Califonia, US</span> </p> <p class="comment"> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Praesentium fugit eos maiores placeat pariatur, possimus libero maxime quod iusto! Culpa perspiciatis adipisci enim pariatur id voluptas deserunt assumenda magni facilis quae earum, sed sint magnam eligendi consequatur, officia praesentium voluptatem nesciunt cum illo eaque accusamus mollitia. Animi ea error accusantium. </p> </div> <div> <p class="client"> <img src="images/client-05.jpg" alt=""> <span><b>Sophia</b>London, UK</span> </p> <p class="comment"> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Praesentium fugit eos maiores placeat pariatur, possimus libero maxime quod iusto! Culpa perspiciatis adipisci enim pariatur id voluptas deserunt assumenda magni facilis quae earum, sed sint magnam eligendi consequatur, officia praesentium voluptatem nesciunt cum illo eaque accusamus mollitia. Animi ea error accusantium. </p> </div> <div> <p class="client"> <img src="images/client-06.jpg" alt=""> <span><b>Charlotte</b>Washington, US</span> </p> <p class="comment"> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Praesentium fugit eos maiores placeat pariatur, possimus libero maxime quod iusto! Culpa perspiciatis adipisci enim pariatur id voluptas deserunt assumenda magni facilis quae earum, sed sint magnam eligendi consequatur, officia praesentium voluptatem nesciunt cum illo eaque accusamus mollitia. Animi ea error accusantium. </p> </div> </div> </div> </div> </section> <!-- call --> <section class="callaction"> <div class="callaction-heading"> <h2>The Most Simple & <b>Powerful Way</b><br>to book <b>your trip</b></h2> <a href="#none">GET EARLY ACCESS</a> </div> </section> <!-- blog --> <section class="blog" id="blog"> <div class="inner"> <div class="blog-content"> <div class="blog-header"> <h6>feature article</h6> <h2>Can Americans Visit Mexico Right Now?</h2> <p>Technically, there’s a ban on nonessential travel across the border through September 21. Then how are people on vacation in Cabo and Cancun right now?</p> <!-- 위에쓴거 재사용 --> <a class="btn-explore" href="#none">Read More <img src="images/icon-arrow.png" alt=""></a> </div> <hr class="divider"> <div class="post-content"> <div class="recent-post-items"> <h6>most recent</h6> <div class="post-item"> <div class="post-image"> <img src="images/most-recent-01.jpg" alt=""> </div> <div class="post-desc"> <h3>world ocean travel</h3> <p> The ocean provides a vast seascape for travel. Beyond the cruise ship there are other, more intimate, more environmentally sustainable ways to engage with the ocean. </p> <span>July 12, 2020</span> </div> </div> <hr class="divider"> <div class="post-item"> <div class="post-image"> <img src="images/most-recent-02.jpg" alt=""> </div> <div class="post-desc"> <h3>come to South Korea</h3> <p> While only 60 years ago South Korea was considered a developing country, it’s now one of Asia’s economic and cultural leaders. Super-chic Seoul combines modernism with ancient history </p> <span>August 22, 2020</span> </div> </div> <hr class="divider"> <div class="post-item"> <div class="post-image"> <img src="images/most-recent-03.jpg" alt=""> </div> <div class="post-desc"> <h3>Vietnam & Cambodia</h3> <p> Start in Hanoi and end in Bangkok! With the Discovery tour Best of Vietnam & Cambodia, you have a 18 days tour package taking you through Hanoi, Vietnam and 10 other destinations. </p> <span>June 30, 2020</span> </div> </div> </div> <div class="shared-post-items"> <h6>most shared</h6> <div class="post-item"> <div class="post-image"> <img src="images/most-shared-01.jpg" alt=""> </div> <div class="post-desc"> <h3>Events in NYC</h3> <p> New York City is the place to see and do everything </p> <span>May 02, 2020</span> </div> </div> <hr class="divider"> <div class="post-item"> <div class="post-image"> <img src="images/most-shared-02.jpg" alt=""> </div> <div class="post-desc"> <h3>FESTIVALS</h3> <p> Experiencing a festival together with a group of like-minded </p> <span>Jan 18, 2020</span> </div> </div> </div> </div> </div> </div> </section> <!-- festival --> <section class="festival"> <div class="festival-heading"> <h2><span>SEE ALL FESTIVALS</span> for the Best Trip Place</h2> <div class="btn"> <a href="#none">Maxico Festivals</a> <a href="#none">Barcelona Festivals</a> </div> </div> </section> <!-- footer --> <footer> <div class="inner"> <div class="footer-content"> <ul class="community"> <li>Community</li> <li><a href="#none">Subscribe</a></li> <li><a href="#none">Give A Gift</a></li> <li><a href="#none">Customer Service FAQ</a></li> <li><a href="#none">Access Your Subscription</a></li> </ul> <ul class="network"> <li>Network</li> <li><a href="#none">Privacy Policy</a></li> <li><a href="#none">Terms Of Service</a></li> <li><a href="#none">Advertise</a></li> <li><a href="#none">Jobs</a></li> </ul> <ul class="help"> <li>Help Preserve This Project</li> <li> We may earn a commission if you purchase an item featured on our site.</li> <li>Copyright © 2020 CodingWorks. All rights reserved.</li> </ul> </div> </div> </footer> </div> <!-- a태그를 #로 하면 위로 올라간다 --> <a class="gototop" href="#"><i class="fa-solid fa-angle-up"></i></a> </body> </html> $(function(){ // sliding jquery $('.gnb a').click(function(e) { e.preventDefault(); $.scrollTo(0, 800); }); // header scroll change $(window).scroll(function(){ // 윈도우 스크롤 탑이 50보다 크다면 if ($(window).scrollTop() > 50) { // 선택자 헤더에 클래스를 붙인다 'active' $('header, .gototop').addClass('active') } else { $('header, .gototop').removeClass('active') } }) // slick.js $('.myslider').slick({ dots: true, infinite: false, speed: 300, slidesToShow: 3, slidesToScroll: 3, responsive: [ { breakpoint: 1024, settings: { slidesToShow: 3, slidesToScroll: 3, infinite: true, dots: true } }, { breakpoint: 600, settings: { slidesToShow: 2, slidesToScroll: 2 } }, { breakpoint: 480, settings: { slidesToShow: 1, slidesToScroll: 1 } } // You can unslick at a given breakpoint now by adding: // settings: "unslick" // instead of a settings object ] }); });
- 미해결플렉스(Flex) 반응형 웹사이트 포트폴리오(The World's Best Cities)
slick slider 하는데 패딩이 안먹혀요
상세 퍼블리싱(3) 5분 15초 부분 참고하면서 보던 중이었는데, 위처럼 패딩을 준 상태가 저 정도입니다 100px 을 줬는데 작게 늘어나고 100px 0 을 주면 아예 안 늘어나는데 이유가 있을까요? 껐다 켜보거나 오탈자 확인, 링크연결 등 이상은 없었고 여태껏 잘 하다가 해당 파트를 시작하면서 잘 안되기 시작했어요 <!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"> <script src="https://kit.fontawesome.com/a947f92a9e.js" crossorigin="anonymous"></script> <!-- js 첫번째줄 필수--> <script src="js/jquery-3.5.1.min.js"></script> <!-- slick.js --> <script src="slick/slick.min.js"></script> <link rel="stylesheet" href="slick/slick.css"> <link rel="stylesheet" href="slick/slick-theme.css"> <!-- 공식 홈페이지에 CDN으로 가볍게 가져오는 것도 방법 중 하나 --> <!-- 순서 맨아래에 있는게 중요 --> <link rel="stylesheet" href="style.css"> <title>반응형 웹사이트 연습</title> </head> ==================================== <!-- test --> <serction class="testimonial"> <div class="inner"> <div class="test-content"> <h2>what <b>our customers</b> are saying</h2> <hr> <div class="myslider"> <div>client1</div> <div>client1</div> <div>client1</div> <div>client1</div> <div>client1</div> <div>client1</div> </div> </div> </div> </serction> ===============
- 미해결플렉스(Flex) 반응형 웹사이트 포트폴리오(The World's Best Cities)
제이쿼리 부드럽게 스크롤할때 제이쿼리에 밑줄오류가 있습니다.
제이쿼리로 네비게이션 a링크 누를때 부드럽게 스크롤 되는거 저렇게 강의영상이랑 똑같이 했는데 저렇게 click에 밑줄이 그어지면서 오류가 나는데 왜그런걸까요?ㅠㅠ
- 미해결플렉스(Flex) 반응형 웹사이트 포트폴리오(The World's Best Cities)
혹시 이 강의 싸이트를 혼자의 힘으로 만들수 있으면 어느정도 실력정도 되나요?
안녕하세요~ 저는 지금 퍼블리셔 취준생이고 퍼블리셔 국비학원 수료했고 국비학원은 진짜 너무 겉핡기식으로 가르쳤어서 오히려 코딩웍스님꺼 여러 강의로 매일 보면서 기초를 탄탄히 쌓고있는데요 이제 포트폴리오를 만들려고 하는데 제가 안되는부분이 전체적인 홈페이지 레이아웃 구조 잡는게 아직 어려워서 잘 안되는데요 혹시 이 강의 포트폴리오 싸이트를 혼자의 힘으로 구현할정도면은 다른 싸이트들도 쉽게 만들수 있을까요? 실무에서는 플렉스를 많이 쓴다해서 플렉스위주로 작성할려고 합니다. 저는 지금 웹디자인기능사 자격증은 취득한상태로 자격증처럼 정해진 사이즈 레이아웃은 잡을수있는 실력정도입니다.
- 미해결플렉스(Flex) 반응형 웹사이트 포트폴리오(The World's Best Cities)
소스랑 자료 다운로는 어디서 받을 수 있나요?
■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.
- 미해결플렉스(Flex) 반응형 웹사이트 포트폴리오(The World's Best Cities)
반응형 헤더 네비게이션 강의 질문있습니다.
<div class="trigger"> <span></span> <span></span> <span></span> </div> ---------------------------------------------------------- .trigger.active span:nth-child(1) { top: 50%; transform: rotate(45deg); } .trigger.active span:nth-child(2) { opacity: 0; } .trigger.active span:nth-child(3) { top: 50%; transform: rotate(-45deg); } } 안녕하세요~ 반응형 헤더 네비게이션 강의 궁금한게 있는데요 위에 코드가 트리거 모바일 네비게이션 모양 만드는 코드인데 html에 trigger라는 div태그에 .active 라는 클래스명을 안주었는데 저렇게 css에 .trigger.active를 주셨던데 html에 .active 클래스명을 안주었는데도 트리거를 눌렀을때 메뉴가 왜 작동되는지 궁금합니다.
- 미해결플렉스(Flex) 반응형 웹사이트 포트폴리오(The World's Best Cities)
그 반응형 질문 있습니다
■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다. 수업 마지막 즈음에 브라우저 줄이시면, 섹션칸들이 그에 맞춰서 줄어들면서 p태그 안에있는 글씨들도 같이 칸에 맞춰 줄어드는것으로 보입니다 저는 브라우저를 줄이면 section width값이 유지 되다가 미디어 쿼리 반응 부분에서만 바뀌는데요, 이 문제를 어떻게 해결할 수 있나요? 그래서 일단 section 안에 width를 100%로 줬더니 강의처럼 줄어들긴 하는데요.. 원래 이런가요? 아니면 제가 무엇을 잘못 설정했을까요? 강의 파일 받아서 아예 다른부분 따라 쳐보기도 했는데 해결이 안되네요
- 해결됨플렉스(Flex) 반응형 웹사이트 포트폴리오(The World's Best Cities)
질문드립니다 강사님
강사님 각각의 section안의 .inner 바로 밑에 class 명 주실때 - heading 과 -content가 section 마다 다르게 붙는데 그 기준이 혹시 따로 있는지 궁금해서 여쭤봅니다!