56,100원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
display:flex하면 h태그랑 p태그가 같은 줄로 붙어버려요
강의 2:00부분에서 display:flex 이거 적용하면 선생님꺼랑 다르게 되요 .hexagon .caption { position: absolute; width: inherit; height: inherit; color: #fff; transition: 0.5s; display: flex; } 이런식으로 h태그랑 p태그가 나란히 배치되어 버려요. <!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>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="frame"> <div class="hexagon"> <div class="shape"> <div class="caption"> <h2>Photographer</h2> <p> As in other arts, the definitions of amateur and professional are not entirely categorical. </p> </div> <img src="images/artist-01.jpg"> </div> </div> <div class="hexagon"> <div class="shape"> <div class="caption"> <h2>Musician</h2> <p> A composer is a musician who creates musical compositions. </p> </div> <img src="images/artist-02.jpg"> </div> </div> <div class="hexagon"> <div class="shape"> <div class="caption"> <h2>Sculptor</h2> <p> Sculpture is the branch of the visual arts that operates in three dimensions.. </p> </div> <img src="images/artist-03.jpg"> </div> </div> </div> </body> </html> /* Google Web Font */ @import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500&display=swap'); *{ box-sizing: border-box; } body { font-family: 'Montserrat', sans-serif; margin: 0; padding: 0; color: #333; display: flex; justify-content: center; align-items: center; height: 100vh; } a{ text-decoration: none; color: inherit; } .frame { display: flex; gap: 40px; } .hexagon { width: 400px; height: 450px; position: relative; } .shape { clip-path: polygon(50% 0, 100% 30%, 100% 70%, 50% 100%, 0 70%, 0 30%); width: inherit; height: inherit; position: absolute; } .shape img { width: inherit; height: inherit; object-fit: cover; object-position: right; } .hexagon .caption { position: absolute; width: inherit; height: inherit; color: #fff; transition: 0.5s; display: flex; } 뭘 잘못한걸까요 ㅠㅠ
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
넷플릭스 반응형부분에서 막혔습니다.
오랜만이네요 하도 또 놀았네요..저번주부터 열심히 다시 시작했어요.. 반응형강의 따라하다가 이렇게 나오는 이유가 뭘까요?? 푸터도요ㅠㅠ 아래로 전문 첨부합니다.
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
안녕하세요 질문드립니다.
안녕하세요. 해당 강의 2분 25초까지 따라 실습하다가.. 제 코드가 자꾸 무슨 문제인지 결과물이 강사님 결과물이랑 다르게 보여서 코드를 첨부드립니다. ㅠㅠ 보시면 아시겠지만 강사님 코드랑 동일하게 코딩을 했는데 .caption 밑의 h2, p 태그 부분이 자꾸 나란히 붙어있어서 여쭤봅니다. (미리 답변 감사합니다 ^^) /* Google Web Fonts CDN */ @import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:300,400,500,700,900&display=swap'); /* FontAwesome CDN 4.7*/ @import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); /* XEICON CDN */ @import url('http://cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.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; } /* reset CSS */ h1,h2,h3,h4,h5,h6 { font-weight: 500; margin-top: 0; } /* CSS */ * { box-sizing: border-box; } body { font-family: 'Noto Sans', sans-serif; background-color: #fff; display: flex; height: 100vh; align-items: center; justify-content: center; } .frame { display: flex; gap: 40px; } .hexagon { /* border: 1px solid #000; */ width: 400px; height: 450px; position: relative; } .shape { clip-path: polygon(50% 0, 100% 26%, 100% 71%, 50% 99%, 0 73%, 0 27%); /* border: 1px solid rgb(255, 26, 26); */ width: inherit; height: inherit; position: absolute; } .shape img { width: inherit; height: inherit; object-fit: cover; object-position: right; } .hexagon .caption { position: absolute; width: inherit; height: inherit; color: white; transition: 0.5s; display: flex; justify-content: center; align-items: center; text-align: center; } .hexagon .caption h2 { font-size: 3em; } <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>css 호버이펙트 - clip-path 이미지 오버레이(1)</title> <link rel="stylesheet" href="../css/style33.css"> <!-- jQuery CDN --> <script src="https://code.jQuery.com/jquery-3.5.1.min.js"></script> <script src="../js/jquery.scrollTo.min.js"></script> </head> <body> <div class="frame"> <div class="hexagon"> <div class="shape"> <div class="caption"> <h2>Photographer</h2> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam optio debitis aliquid, voluptatem quis nostrum! </p> </div> <img src="../images/artist-01.jpg"> </div> </div> <div class="hexagon"> <div class="shape"> <div class="caption"> <h2>Musician</h2> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam optio debitis aliquid, voluptatem quis nostrum! </p> </div> <img src="../images/artist-02.jpg"> </div> </div> <div class="hexagon"> <div class="shape"> <div class="caption"> <h2>Sculptor</h2> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam optio debitis aliquid, voluptatem quis nostrum! </p> </div> <img src="../images/artist-03.jpg"> </div> </div> </div> </body> </html>
- 해결됨HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
웹 페이지에 로딩화면 적용하는 방법
안녕하세요 선생님 완성한 로딩화면을 다른 html파일에다가 어떻게 적용 시키는거에요?? 따로 강의가 있을까요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
html로딩 관련해서 질문드립니다.
선생님 강의를 들으면서 동영상도 넣어보고 있습니다. 그런데 동영상이 들어갈 경우 html이 열리는 시간이 꽤 오리걸립니다. 이럴 경우 어떻게 하면 동영상없는 html파일처럼 열릴 수 있을까요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
재질문 드립니다 ㅠㅠ
감사합니다 !! 2번질문은 해결되었습니다 (--)(__) 꾸벅 1번 답변해주신것 적용해보았는데 캡처에서 보시는것처럼.. 컬러값을 다 다르게 적용했는데 결과물은 다 첫번째 색상으로 나오네요. ㅠㅠ 소스코드 첨부해드립니다. /* reset CSS */ h1,h2,h3,h4,h5,h6 { font-weight: 500; margin-top: 0; } /* css */ body { margin: 0; font-family: 'Noto sans KR', sans-serif; font-weight: 300; background-color: rgb(255, 255, 255); line-height: 1.6em; font-size: 18px; } a { text-decoration: none; color: #333; } /* Dropdown Navigation */ .program { /* display: flex; justify-content: center; */ } .program .inner { width: 1150px; margin: auto; } .inner h1 { border-bottom: 1px solid #ddd; padding-bottom: 30px; margin-bottom: 30px; } .inner h2 {} .items { /* border: 1px solid red; */ display: flex; gap: 40px; } .item { flex: 1; position: relative; } .item-list { /* background-color: rgb(24, 97, 206); */ color: white; text-align: center; } .item-list h4 { /* top: 10px; //궁금 */ font-weight: 300; padding-top: 20px; } .item-list:nth-of-type(1) { background-color: rgb(24, 97, 206); } .item-list:nth-of-type(2) { background-color: rgb(125, 96, 231); } .item-list:nth-of-type(3) { background-color: rgb(50, 70, 161); } .btns {} .btn { display: inline-block; width: 80px; padding: 5px 8px; margin-bottom: 30px; background-color: rgb(31, 31, 31); color: white; border-radius: 3px; } .download { width: 200px; } .item-desc { position: absolute; background-color: white; display: none; border: 1px solid #000; padding: 5px 15px; } .item:nth-child(1) .item-desc { border: 4px solid rgb(24, 97, 206); } .item:nth-child(2) .item-desc { border: 4px solid rgb(125, 96, 231); } .item:nth-child(3) .item-desc { border: 4px solid rgb(50, 70, 161); } .item-desc ul { list-style: none; margin: 0; margin-bottom: 30px; padding: 0; background-color: #eee; } .item-desc ul li::before { content: '-'; margin-right: 5px; } .item { /* border: 1px solid #000; */ } <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>한글사이트 드롭다운 네비게이션</title> <link rel="stylesheet" href="../css/style30.css"> <!-- jQuery CDN --> <script src="https://code.jQuery.com/jquery-3.5.1.min.js"></script> <script src="../js/jquery.scrollTo.min.js"></script> </head> <body> <section class="program"> <div class="inner"> <h1>다운로드 전체보기</h1> <h2>인기 다운로드</h2> <div class="items"> <div class="item"> <div class="item-list"> <h4>한컴오피스 뷰어(Windows용)<br>(통합뷰어)</h4> <div class="btns"> <a class="btn" href="#none">일반용</a> <a class="btn" href="#none">기업용</a> </div> </div> <div class="item-desc"> <p> Lorem ipsum dolor sit amet cons </p> <ul> <li>Lorem ipsum dolor sit amet</li> <li>adipisicing elit. Asperiores voluptas ipsa</li> <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li> <li>avoluptas ipsa</li> </ul> </div> </div> <div class="item"> <div class="item-list"> <h4>한컴오피스 체험판<br>(30일간 사용가능)</h4> <div class="btns"> <a class="btn download" href="#none">다운로드</a> </div> </div> <div class="item-desc"> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores voluptas ipsa consectetur numquam. </p> <ul> <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li> <li>adipisicing elit. Asperiores voluptas ipsa</li> <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li> <li>adipisicing elit. Asperiores voluptas ipsa</li> </ul> </div> </div> <div class="item"> <div class="item-list"> <h4>한컴오피스 2020 가정 및 학생용<br>(제품키배송형)</h4> <div class="btns"> <a class="btn download" href="#none">다운로드</a> </div> </div> <div class="item-desc"> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores voluptas ipsa consectetur numquam. </p> <ul> <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li> <li>adipisicing elit. Asperiores voluptas ipsa</li> <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li> <li>adipisicing elit. Asperiores voluptas ipsa</li> </ul> </div> </div> </div> <div class="temp"> <img src="../images/temp.png"> </div> </div> </section> </body> </html>
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
안녕하세요 선생님
안녕하세요 강사님 1번질문) .item:nth-child() .item-desc {} 로 설명해주셨는데 처음에 저 혼자서 .item-list:nth-of-type() 로 코드를 쳐봤더니 동일하게 아무 변화가 없었는데 적용이안되는 이유를 정확하게 알고싶습니다 ~~ㅠㅠ 저번에 처음 배울때는 정확하게 이해했다고 생각했는데 어떤 개념을 놓치고 있는 걸까요 2번질문) li 태그에 before 속성을 넣고 content: '-'; 을 한 후 자동으로 1줄이 넘어가면 왼쪽정렬이 보기싫을 때가 있는데 밑으로 넘어간 줄에 대해서 정렬을 맞추는 방법이 혹시 있을까요?
- 해결됨HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
질문 드립니다 !
안녕하세요 선생님 @@ 오랜만에 질문드려 봅니다. 캡처보시면 아시겠지만, 강의따라서 코드 그대로 실습하며 따라하고 있는데, .lnb 부분이 자꾸 nav 에서 삐져나와 하단에 머물러있네요. ㅠㅠ box-sizing 을 안넣어서 그런가 싶어 이리저리 넣어봤는데도 미동이 없어서... 캡처 첨부드리니 어디가 문제인지 알려주실 수 있을까 여쭤봅니다. :) 좋은하루 되세요! 항상 질문 받아주셔서 감사합니다.
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
넷플릭스 클론코딩하다가 막혔네요
이후에 놀기도 하고 바빠서 넷플릭스 마무리를 이제야하는디요(좀 띄엄띄엄했어요ㅠ) 강의는 여러번 봤지만 하는거랑 또 다르니까.. 아무튼 html도 혼자 짜고 하다가 막혔는데 이거 어떻게 고칠까요....... html부터 다시 짜야할까요 https://drive.google.com/drive/folders/1KMTmDn5BWiJhcZ8qIbryeqU8U81-wREL?usp=sharing 파일로 올리는게 빠를 것 같아서 그렇게 해요ㅠㅠ
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
비쥬얼스튜디오코드 설명 영상에서 pdf 다운로드는 어디에 있을까요?
안녕하세요. 선생님 강의를 새롭게 시작했습니다. 강의 중간중간에 말씀하시는 pdf 파일은 어디에서 다운받을 수 있을까요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
저는 초기에 왜 이렇게 뜨는걸까요..?
맥북으로 코딩 처음 시작한 샌애긔입니다,, 똑같이 따라서 설치하는데 저는 체크항목하는 것도 없이 바로 다운로드되고 오른쪽 클릭해도 아무것도 안나오고 저렇게만 나와요.. ㅠㅠ 제가 뭘 잘못누른걸까요...?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
이미지 자료
5분 30초대에서 welcome 섹션에 background 이미지 파일을 어디서 다운 받을 수 있을까요? 첨부 부탁드립니다 :)
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
강의 3개 구매했는데요
안녕하세요 저는 리액트 위주로 프론트엔드 공부를 하고 있고 제 개인 포폴싸이트를 만드려고 스타일 잡는 걸 더 공부하고 싶어서 선생님의 강의 아래 3개 구매했습니다! -실전 퍼블리싱 시즌2 -반응형웹사이트 포트폴리오 -퍼블리싱 핵심이론 PDF 이틀 전에 강좌를 구매하고, PDF이론을 훑어보면서 실전 퍼블리싱 시즌2의 UI쪽을 연습해보고 있습니다.일단 주어진 디자인만 보고 제가 먼저 해보고 와이어프레임 짜시는 거와 스타일 주는 걸 보고 있는데 배울 점이 많네요(초보들은 이렇게 한다: 제 화면 보시는 줄^^) 여기서--> 뒤쪽의 클론코딩까지 쭉하고 -->제꺼 포폴싸이트 제작하려고 합니다. 질문 드립니다!! 1.반응형 + 플렉스나 그리드로 짠 포트폴리오를 제작하고 싶은데요 이에 도움을 받으려면 반응형웹사이트 포트폴리오 <--이 강좌보다는 플렉스 포트폴리오 강좌를 보는 게 더 나을까요? --> 아니면 강좌 따라가보고 제가 플렉스/그리드로 바꿔보는 연습을 하는 것도 도움이 될까요? 이 질문의 의도는 혹시나 이 강좌가 퍼블리셔를 위한 강의인데(퍼블리셔와 프론트엔드가 상당 부분 겹치긴 합니다!) 제가 스타일링 하는 부분의 하드코딩 디테일까지 너무 깊게 들어가려고 하나...하는 생각이들어서 스스로 고민중입니다! 혹시 조언 있으시면 부탁드릴게요. 좋은 강의 올려주셔서 너무 감사합니다:)
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
질문 두개 드립니다!
<!DOCTYPE html> <html lang="ko"> <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>글자 호버이펙트</title> <style> body { background-color: black; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } span { -webkit-text-stroke: 1px white; font-size: 150px; position: relative; transition: 0.3s; } span::before, span::after { -webkit-text-stroke: 1px transparent; content: attr(data-text); position: absolute; top: 0; left: 0; opacity: 0; transition: 0.3s; } span::before { color: rgb(44, 44, 235); } span::after { color: crimson; } /* hover effect */ span:hover { color: white; } span:hover::before, span:hover::after { opacity: 1; } span:hover::before { top: -10px; left: 10px; } span:hover::after { top: -20px; left: 20px; } </style> </head> <body> <span data-text="Hellow World">Hellow World</span> </body> </html> 1. . 폰트아이콘텍스트쉐도우 가상클래스가 지정 위치대로 이동하면서 최대width를 넘지못해 밑으로 내려간것 같습니다. 어떻게 고칠까요??
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
첨부파일 위치가 궁금합니다~
첨부파일은 어디서 확인하면 될까요...?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
시즌3도있나요 ?
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 시즌3도있나요 ?인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 시즌3도 제작 계획이있으신가요 ?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
앵커 scrollTo 플러그인 파일 어디있나요?
아래 압축파일에 검색했는데 안나와요.
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
강의에 오류가 있는 회차가 있는것같아요!
CSS 애니메이션 - 폰트 아이콘 텍스트쉐도우 filter Animation 약 3분 25초부터 키프레임만드는데 오디오는 html작성하신다하고 이후에 텍스트섀도우 넣는 부분이 두번 반복 되는 것 같습니다.!
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
질문게시판이지만 앗싸링 바로긁었어요
기다리고있었습니다! 화장실에 있다가 발견했네요! 화이팅!!! 이번강의도기대해요