56,100원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
이미지 파일 어디서 다운받나요..?
네이버 회원가입 폼 만드는 강의를 보니 파비콘, 네이버로고, 비밀번호 확인 아이콘등 이미지가 쓰이는데 어디서 다운로드 해야하는지 안보여요. 파일이 누락되어있는 강의가 많은 것 같습니다ㅠㅠ
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
클립패스 오버레이 그림자 질문이요!
hexagon에 transition: 0.5s를 줘서hexagon에 hover를 할때 hexagon이 움직이고 그림자가 입체감있게 줄어들었음 좋겠는데요.그림자가 이상하게 움직입니다..ㅠㅠ.hexagon:hover::before { bottom: -130px}여기에 문제가 없는 것 같은 게..hexagon에 transition을 빼면 그림자 높이가 정상적으로 작동해요.왜 이런걸까요?코드 첨부합니다..<index.html><!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>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="frame"> <div class="hexagon"> <div class="shape"> <div class="caption"> <h2>EAU ROSE</h2> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, similique.</p> </div> <img src="images/01img.jpg" alt=""> </div> </div> <div class="hexagon"> <div class="shape"> <div class="caption"> <h2>DOSON</h2> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, similique.</p> </div> <img src="images/02img.png" alt=""> </div> </div> <div class="hexagon"> <div class="shape"> <div class="caption"> <h2>EAU DES SENS</h2> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, similique.</p> </div> <img src="images/03img.png" alt=""> </div> </div> </div> </body> </html><style.css>/* Google Web Font */ @import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500&display=swap'); *{ box-sizing: border-box; } body{ margin: 0; font-family: 'Montserrat', sans-serif; color: #333; display: flex; justify-content: center; align-items: center; height: 100vh; } .frame { display: flex; gap: 40px; } .hexagon { width: 400px; height: 450px; position: relative; transition: 0.5s; } .shape { clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); width: inherit; height: inherit; position: absolute; } .shape img { width: inherit; height: inherit; object-fit: cover; } .hexagon .caption { position: absolute; width: inherit; height: inherit; color: #fff; transition: 0.5s; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 20px; opacity: 0; transform: translateY(20px); } .hexagon .caption h2 { font-size: 2em; } .hexagon:nth-child(1) .caption{ background: linear-gradient(to top, rgb(165, 42, 83), transparent); } .hexagon:nth-child(2) .caption{ background: linear-gradient(to top, rgb(42, 118, 165), transparent); } .hexagon:nth-child(3) .caption{ background: linear-gradient(to top, rgb(165, 165, 42), transparent); } .hexagon:hover .caption { opacity: 1; transform: translateY(0); } .hexagon:hover { transform: translateY(-60px); } .hexagon::before{ content: ''; position: absolute; width: 100%; height: 60px; background-color: black; background: radial-gradient(rgba(0, 0, 0, 0.44),transparent, transparent); bottom: -70px; } .hexagon:hover::before { opacity: 0.6; transform: scale(0.8); bottom: -130px; }
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
클립패쓰 오버레이 강의 - 그림자가 맘처럼 안됩니다.
hexagon에 transition: 0.5s를 줘서hexagon에 hover를 할때 hexagon이 움직이고 그림자가 입체감있게 줄어들었음 좋겠는데요.그림자가 이상하게 움직입니다..ㅠㅠ.hexagon:hover::before { bottom: -130px}여기에 문제가 없는 것 같은 게..hexagon에 transition을 빼면 그림자 높이가 정상적으로 작동해요.왜 이런걸까요?코드 첨부합니다..<index.html><!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>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="frame"> <div class="hexagon"> <div class="shape"> <div class="caption"> <h2>EAU ROSE</h2> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, similique.</p> </div> <img src="images/01img.jpg" alt=""> </div> </div> <div class="hexagon"> <div class="shape"> <div class="caption"> <h2>DOSON</h2> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, similique.</p> </div> <img src="images/02img.png" alt=""> </div> </div> <div class="hexagon"> <div class="shape"> <div class="caption"> <h2>EAU DES SENS</h2> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, similique.</p> </div> <img src="images/03img.png" alt=""> </div> </div> </div> </body> </html><style.css>/* Google Web Font */ @import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500&display=swap'); *{ box-sizing: border-box; } body{ margin: 0; font-family: 'Montserrat', sans-serif; color: #333; display: flex; justify-content: center; align-items: center; height: 100vh; } .frame { display: flex; gap: 40px; } .hexagon { width: 400px; height: 450px; position: relative; transition: 0.5s; } .shape { clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); width: inherit; height: inherit; position: absolute; } .shape img { width: inherit; height: inherit; object-fit: cover; } .hexagon .caption { position: absolute; width: inherit; height: inherit; color: #fff; transition: 0.5s; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 20px; opacity: 0; transform: translateY(20px); } .hexagon .caption h2 { font-size: 2em; } .hexagon:nth-child(1) .caption{ background: linear-gradient(to top, rgb(165, 42, 83), transparent); } .hexagon:nth-child(2) .caption{ background: linear-gradient(to top, rgb(42, 118, 165), transparent); } .hexagon:nth-child(3) .caption{ background: linear-gradient(to top, rgb(165, 165, 42), transparent); } .hexagon:hover .caption { opacity: 1; transform: translateY(0); } .hexagon:hover { transform: translateY(-60px); } .hexagon::before{ content: ''; position: absolute; width: 100%; height: 60px; background-color: black; background: radial-gradient(rgba(0, 0, 0, 0.44),transparent, transparent); bottom: -70px; } .hexagon:hover::before { opacity: 0.6; transform: scale(0.8); bottom: -130px; }
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
3타입 상단 네비게이션 강의 질문입니다.
대체적으로 레이아웃을 잡을 때float속성으로 주셨는데요.diplay: flex가 아닌 float속성을 쓰는 이유가 있을까요?다음주부터 반응형 웹사이트 프로젝트에 들어가야하는데반응형 웹사이트는 display: flex로 만드는게 낫지않을까요?의견 부탁드립니다.
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
인라인 자바스크립트 활용하기
우측상단에 자료다운로드 받기 버튼이 있다고 하셨는데그 버튼이 안보여요ㅠㅠ첨부파일은 어디서 다운받을 수 있나요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
띄어쓰기 유무
선생님 태그 옆에 띄어쓰기가 css 변화에 차이도 줄 수 있나요? 띄어쓰기를 했을 경우 div 값의 flex가 위에 보이다시피 1:1 비율인데 선생님처럼 띄어쓰기를 안했을 경우는 2:1비율로 잘되더라구요 띄어쓰기가 css값에 변화를 줄수도 있나요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
value placeholder
value와 placeholder의 정확한 기능과 의미를 알고 싶습니다. 선생님
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
배너 슬라이더 파트
수업을 하면서, 트랜지션 하면서 배너 슬라이드도 한번 다루어 보고 싶은데 배너 슬라이드 파트는 없나요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
gap 태그 특징
18:23초에 나오는 Gap 속성을 알려주세요전 일반적인 경우 margin-right를 사용하는데 gap속성과 장점 좀 알려주시면 감사하겠습니다!
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
10:35 마스크 이미지 색관련 질문드립니다.
-html <body> <img class="image1" src="images/icon-user.png" alt="사용자"> <hr> <img class="image2" src="images/icon-youtube.png" alt="유튜브"> <hr> <img class="image3" src="images/icon-mask.svg" alt="마스크"> </body> -css .image3 { width: 100px; filter: brightness(0) saturate(100%) invert(32%) sepia(55%) saturate(5747%) hue-rotate(357deg) brightness(97%) contrast(87%); } 안녕하세요 위 시간대에 설명해주신 마스크 색변환 같은경우에 저는 색이 오랜지 칼라로 변하네요 css filter기능이 바뀐걸까요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
css filter color generator 사이트!
해당 사이트 주소를 알려주세요
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
faq 섹션
안녕하세요. 선생님! faq 섹션에서 질문이 있는데요~ 선생님이 해주신대로 따라하면, 이미 선택했던 input을 선택하면 그게 안가려지고 그대로 있습니다. 예를 들면 What is Netflix? 질문을 선택했다가 그 질문을 다시 선택하면, 이 질문에 대한 답변이 가려지지 않고 그대로 있더라구요~ 넷플릭스 공식사이트처럼, 질문을 선택하고 또 선택했을때, 가려지도록 하려면 어떻게 해야할까요? 미리 답변 감사드립니다~
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
focus시 not pseudo class 적용 이유가 궁금합니다.
16:50 쯤에 psedo class를 적용해서 input 요소에 focus시 border가 바뀌었는데요. 적용하지 않으면 왜 바뀌지 않는건지 이해가 안됩니다. 원리가 있는건가요. 아니면 그냥 그렇다고 이해해야하는건가요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
featherlight을 플스크린으로 사용했을 때 가로스크롤바를 감추는 방법이 궁금합니다.
선생님 안녕하세요 featherlight.js을 100% 풀스크린으로 사용했을 때 나타나는 가로스크롤바를 감추는 방법이 궁금합니다. 감사합니다.
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
폰트가 이상해요 ㅠㅠ
before , after 의 텍스트 스타일이 다르게 나옵니다 이건 뭐가 문제일까요 ... ?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
코딩 질의
수업 들으면서 따라하다가 궁금한 점이 있어서 문의드립니다, 1. position: absolute 를 쓸 때 left: 0 이 기본값인지 생략해도 되는 것인지 궁금해요 2.background: url(...) no-repeat left top ; 에서 위치에서 left top으로 쓰든 top left쓰든 순서는 상관없나요 ? 3. 예를 들어 section > .inner > h2 구조일 때, css로 section h2 이렇게 쓰면 안되고 section .inner h2 이렇게 다 써줘야하나요? 어떤 경우에 어느 정도가 생략 가능한지 궁금해요
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
form태그
안녕하세요. 선생님! 바로 직전 강의인, [04]CSS 섹션 UI 디자인, 커스텀 체크박스 로그인 폼에서는 form태그로 시작을 했는데요. 이번강의에서는 member 클래스 네임의 div로 시작했는데,, 이건, form 태그로 시작하든 div태그로 시작하든 상관이 없는건가요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
시즌1,시즌2를 완벽히 다 이해하고 할수있으면 퍼블리싱 실력은 어느정도인가요?
제가 시즌1,시즌2를 영상을 끝까지 다보면서 열심히 따라해보고 연습해보고 있는데요 시즌1,시즌2를 완벽히 다 이해하고 할수있으면 퍼블리싱 실력은 어느정도인가요? 그리고 취업할때 실무에서도 문제없는 실력인가요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
English Academy 헤더 드롭다운 네비게이션 강의 질문있습니다!
English Academy 헤더 드롭다운 네비게이션 강의 질문있는데요 첫번째 강의에 section에 이미지를 넣으면 이미지가 커서 밑에 가로스크롤이 생기는걸 width: 100%로 없애시던데 width: 100%로줬을때 왜 가로스크롤이 없어지는지 개념이 궁금합니다!
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
option 가상클래스
선생님 어제 글을남겼는데 오늘 궁금한게 있어서 글을 남기게 되었습니다. <select> <option></option> </select> 이런 구조를 만들어 사용자가 선택하도록 만들고 있는데요. option값에 가상클래스를 줘서 값 뒤에 이미지를 주고 싶은데 가상클래스가 안먹히는 상황입니다. stackoverflow에서 검색했을 때에는 가상클래스가 적용 안된다는 글을 보게 되었는데 혹시 방법이 있을까요???