46,200원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
오디오가 들렸다 안들렸다 합니다
이건 안 들릴때구요 이건 들릴때 인데 audio 태그 images 앞에 /을 붙이거나 src코드를 다시 작성하거나 하면 갑자기 이렇게 들릴때도 있어요 근데 저장하고 새로고침 하면 또 다시 안 들립니다 진짜 바로 듣고싶으면 controls 태그를 넣어서 화면에서 직접 켜줘야 들을수 있어요 이때는 개발자도구 콘솔창에 GET http://127.0.0.1:2809/favicon.ico 404 (Not Found) 라는 문구가 뜨면서 favicon.ico와 piano-bgm.mp3 파일이 전달됩니다 그전에는 없다가요 파비콘은 쓰지도 않았는데 이게 왜 뜨는거죠? 개발자도구 네트워크에 piano-bgm.mp3 파일 눌러보면 Failed to load response data라고 뜹니다 파일경로도 완벽하고 코드도 틀린것이 없는데 오디오 전까지는 다 잘됬는데 뭐가 문제인지 잘 모르겠습니다 도와주세요
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
강의와는 다른 질문이지만
웹 페이지 보면 스크롤 내리면 계속 생성되고 스크롤 올리면 다시 사라지는 형태의 홈페이지들이 있잖아요? 이런것은 어떻게 만드나요??
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
24.Pure CSS 콘텐츠 슬라이더 탭부분 관련 질문입니다
input[id=tab1]:checked 강의 너무 감사하게 잘 듣고있습니다 진도도 잘나가고 정리가 잘되어서 부족한 부분 채우는데 많은 도움이 되고있습니다 솔직히 HTML만으로도 이런게 된다는걸 알게되어서 참 좋네요..^^ 더불어 추가적인 궁금사항이 있습니다 이런식으로 체크(실질적으로 유저클릭이죠) 되어야만 작동이 되는데 이걸 자스 사용안하고 예를 들어 5초후에 자동적으로 체크되었다고 인식하게 하는거 할수없는지 싶어 질문드립니다 ^^
- HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
질문 드립니다!
삭제된 글입니다
- HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
간단한 질문 드립니다!
삭제된 글입니다
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
안녕하세요 질문있습니다 ㅠㅠ
이번강의 보고 따라해봤는데 display: inline-block; 을 .item에 넣어도 옆으로 붙지를 않아서 한줄로 나오지를 않더라구요 뭘 잘못한건지 모르겠어서요 ㅠㅠ 뭐가 잘못된걸까요..?? <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>오버하면 상세설명 나타나는 상품목록</title> <style> .items { text-align: center; } .item { display: inline-block; width: 300px; height: 300px; border: 1px solid #ddd; position: relative; margin: 10px; } .caption { width: 300px; height: 300px; background-color: rgba(0, 0, 0, 0.7); position: absolute; top: 0; left: 0; color: #fff; padding: 20px; box-sizing: border-box; padding-top: 40px; opacity: 0; transition: 0.5s; } .caption a { color: #fff; background-color: teal; padding: 7px; border-radius: 3px; text-decoration: none; } .caption a:hover { background-color: #fff; color: #000; } .item:hover .caption { opacity: 1; } </style> </head> <body> <div class="items"> <div class="item"> <img src="1.jpg" alt=""> <div class="caption"> <h2>라이언인형</h2> <p> Lorem ipsum dolor sit amet, consectetur adipisicing. </p> <p>Price : <s>$12</s> $10</p> <a href="#none">view detail</a> </div> </div> </div> <div class="items"> <div class="item"> <img src="1.jpg" alt=""> <div class="caption"> <h2>라이언인형</h2> <p> Lorem ipsum dolor sit amet, consectetur adipisicing. </p> <p>Price : <s>$12</s> $10</p> <a href="#none">view detail</a> </div> </div> </div> <div class="items"> <div class="item"> <img src="1.jpg" alt=""> <div class="caption"> <h2>라이언인형</h2> <p> Lorem ipsum dolor sit amet, consectetur adipisicing. </p> <p>Price : <s>$12</s> $10</p> <a href="#none">view detail</a> </div> </div> </div> </body> </html>
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
비디오 백그라운드를 활용한 랜딩페이지 - 풀스크린 네비게이션(트리거, 모달 디자인)
.modal-gnb에 position:absolute를 주지 않으면 지금처럼 뒤에 보이지 않아야 할 .logo(이미지)와 .heading(텍스트들)이 앞으로 나와서 보이게 되는데 그 이유가 아마 .modal-gnb에 position을 주지 않았으니 기본값 static으로 설정되어있어서 absolute가 static보다 더 우선순위로 보이게 되어서 지금과 같은 현상이 발생하는거 같은데 여기서 궁금한 점은 .anniversary(60주년)는 앞에 logo와 heading처럼 position:absolute가 있는데 왜 보이지 않고 뒤로 가있는지 궁금하고, 또 전체화면에 보여지는 video태그를 가지고 있는 .video-frame또한 position:fixed를 가지고 있어서 static보다 우선순위이기 때문에 .modal-gnb에 준 배경색보다 더 앞으로 나와서 보여져야 할 꺼같은데 왜 뒤로 보여지는지 궁금합니다.
- 해결됨HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
비디오 백그라운드를 활용한 랜딩페이지 - 웹폰트, 동영상 제어하기, 로고
1. .video-frame video태그에 z-index를 -1을 주지 않고 .logo에는 z-index를 100으로 video에는 z-index를 50으로 주면 .logo의 z-index가 더 크기 때문에 로고안에 있는 이미지가 앞으로 나와야 하는데 왜 로고가 앞으로 나오지 않는건가요? 2. html요소가 같은 위치에 겹치는 상황이 생기면 포지션 속성이 relative, absolute, fixed 가 static 보다 우선한다고 하셨는데 position속성이 하나는 fixed, 하나는 absolute이거나 아니면 둘다 absolute일 때는 어떤 요소가 더 앞으로 오는건가요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
질문 드립니다.
선생님 안녕하세요^^ 강의내용과 직접적인 관련은 없지만 강의 공지사항에 올리신 '듀얼모니터 환경' 글 에서 선생님이 쓰고 계신 휴대용 듀얼모니터가 몇 인치인지 여쭤봐도 될까요? 그리고 혹시 휴대용 듀얼모니터는 어떤 제품을 쓰시는지 여쭤봐도 될까요? 답변 주시면 감사하겠습니다 :D
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
class 이름 한꺼번에 지정하는거 어떻게 하신건가요?
3분 15초에 나왔는데, 궁금합니다!
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
탭 메뉴 콘텐츠- 스타일 02(실전 제작) with jQuery
1. 첫 번째 이미지는 section .tabs div img에만 float:left를 준 모양이고, 두 번째 이미지는 img에도 float를 주고 section .tabs div p에도 float:left를 준 모양인데 두 개가 약간 헷갈리네요. 차이점이 궁금합니다. 2. 앞선 태그에 float를 주면 그 후에 오는 태그들도 float의 영향을 받는 걸로 알고 있는데 두 번째 이미지에서 이미지 태그가 블록 요소가 아니기 때문에 오른쪽에 공간이 있는데도 왜 p태그가 위로 올라가지 못한건가요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
25.Pure CSS 콘텐츠 슬라이더 프로토타입 02 (풀스크린 탭 콘텐츠 슬라이더 응용)
background: linear-gradient(135deg, gold, transparent);대신 background: linear-gradient(135deg, gold, white);로 줬을 때는 왜 아래와 같이 배경색이 이미지를 덮어버리는건가요? opacity를 주지 않으면 이미지를 덮어버려서 보이지 않게 되버리는 이유가 궁금합니다.
- 해결됨HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
확장선택자와 함께 가상클래스 checked 실전 퍼블리싱 07
.items에 position:absolute;를 줘서 left로 이동하는 방법을 알려주셨는데 .items에 position:absolute를 아예 쓰지 않고 그냥 input에 checked가 되었을 때 .items에 transform:translateX()를 이용해서 이동시키는 방법도 쓰나요? position:absolute를 쓰지 않고 이동시킬 수 있는 더 간편한 방법인 것 같아서요
- 해결됨HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
확장선택자와 함께 가상클래스 checked 실전 퍼블리싱 05
안녕하세요. 질문드립니다! 강의 6:30초 부분 .text1에 position:absolute;를 주셨는데 position:absolute를 주지 않으면 .text1 태그가 이미지 뒤로 위치해서 보이지 않게 되버리던데 이건 왜 그런건가요? 또 position:absolute를 주면 이미지보다 위로 위치하게 되는 이유가 궁금합니다. .text1에 position:absolute를 주지 않으니 이미지에 가려서 보이지 않는 모습 .text1에 position:absolute를 주니 이미지보다 위로 배치되서 보이는 모습 추가로 강의 10:37초 부분 transform:translateY(-50px)를 써서 태그를 Y축으로 이동시킨 후 checked가 됐을 때 transform:translateY(0)으로 다시 제자리로 이동시키셨는데 이 방법 외에 초기 top의 값을 20px이 아닌 -30px정도로 transform:translateY(-50px)를 준 것과 같은 위치 정도로 위치시킨 후 checked가 됐을 때 top을 20px로 이동시키는 방법을 사용해도 될까요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
가로 정렬할 때
.items div{ width: 800px; height: 400px; float: left; padding: 40px; box-sizing: border-box; } float: left를 주지 말고 display: inline block을 줘도 되지 않나요?너비값 주고 가로정렬 하는 역할이니까 써도 될 것 같은데 근데 써보니까 출력이 반쯤 잘려서 나오네요
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
미리보기창?
선생님, 안녕하세요 잘 듣고 있습니다. 사진에서 보이듯 코딩하다가 오른쪽에 자그만한 이미지가 자꾸 뜨는데 이유가 무엇일까요? 어떻게 삭제해야할까요? 강의와 관련있는 질문을 남겨주세요.• 강의와 관련이 없는 질문은 지식공유자가 답변하지 않을 수 있습니다. (사적 상담, 컨설팅, 과제 풀이 등)• 질문을 남기기 전, 비슷한 내용을 질문한 수강생이 있는지 먼저 검색을 해주세요. (중복 질문을 자제해주세요.)• 서비스 운영 관련 질문은 인프런 우측 하단 ‘문의하기’를 이용해주세요. (영상 재생 문제, 사이트 버그, 강의 환불 등) 질문 전달에도 요령이 필요합니다.• 지식공유자가 질문을 좀 더 쉽게 확인할 수 있게 도와주세요.• 강의실 페이지(/lecture) 에서 '질문하기'를 이용해주시면 질문과 연관된 수업 영상 제목이 함께 등록됩니다.• 강의 대시보드에서 질문을 남길 경우, 관련 섹션 및 수업 제목을 기재해주세요. • 수업 특정 구간에 대한 질문은 꼭 영상 타임코드를 남겨주세요! 구체적인 질문일수록 명확한 답을 받을 수 있어요.• 질문 제목은 핵심 키워드를 포함해 간결하게 적어주세요.• 질문 내용은 자세하게 적어주시되, 지식공유자가 답변할 수 있도록 구체적으로 남겨주세요.• 정확한 질문 내용과 함께 코드를 적어주시거나, 캡쳐 이미지를 첨부하면 더욱 좋습니다. 기본적인 예의를 지켜주세요.• 정중한 의견 및 문의 제시, 감사 인사 등의 커뮤니케이션은 더 나은 강의를 위한 기틀이 됩니다. • 질문이 있을 때에는 강의를 만든 지식공유자에 대한 기본적인 예의를 꼭 지켜주세요. • 반말, 욕설, 과격한 표현 등 지식공유자를 불쾌하게 할 수 있는 내용은 스팸 처리 등 제재를 가할 수 있습니다.
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
after와 before 작동하는게 정확히 뭔가요?
안 배운 개념들이 자꾸 나오네요
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
import 한게 무슨 주소인가요?
@import url('https://fonts.googleapis.com/css?family=Raleway&display=swap') 구글 웹폰트를 가져오겠다는 명령인가요? 정확히 무슨 의미인지 모르겠어요
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
안 배운것들이 잔뜩 나오는데
키프레임, 플렉스, 애니메이션, 오파시티 등등 이런거는 앞의 강의에서 없던 내용인데 그냥 실습 따라하면서 외우는 건가요? 이부분은 이론이 필요없나요?
- 해결됨HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
가상클래스 before after 가상클래스 활용한 실전 퍼블리싱 04
안녕하세요! 질문드립니다. 부모 태그에 overflow:hidden의 효과가 첫 번째, 부모 태그의 영역을 넘어가는 부분을 숨겨주는 것과 두 번째, 자식 태그가 float:left로 인해서 공중에 떴을 때 부모 태그의 높이값이 사라졌을 때 높이값을 자동으로 찾아준다 이렇게 대표적으로 두 가지로 알고 있으면 될까요? 또 overflow:hidden은 visibility:hidden처럼 영역을 차지하되 보이는 것만 숨겨준 효과라고 보면 될까요?