46,200원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
height:100vh
height:100vh 의미가 정확히 무엇인지 몰라서요... 설명 좀 부탁드릴게요
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
[11:22초] display속성 질문
11:22초에 display: inline-block; 을 주면 왜 아래가 조금 뜨나요??
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
마우스 올렸을 때 애니메이션을 멈추게 하고 싶습니다.
마우스를 올렸을 때, 애니메이션을 멈추게 하고 싶은데 어떻게 하면 될까요? w3c스쿨에서 animation-play-state: paused;이부분을 추가하면 된다고 했는데, 도통 어느 부분에 추가해야하는지 감이 안 잡힙니다 ㅠㅠ...
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
visibility 대신 z-index
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>2. 인접선택자-텝메뉴-Opacity</title> <style> body { margin: 0; display: flex; justify-content: center; height: 100vh; align-items: center; } .tab-inner { width: 300px; height: 350px; position: relative; } .tab-inner input[type='radio'] { display: none; } .tab-inner .content { position: absolute; top: 0; left: 0; opacity: 0; transition: 1s; } .tab-inner .btn { width: 100%; text-align: center; position: absolute; bottom: 0; } .tab-inner label { background-color: lightgrey; width: 10px; height: 10px; display: inline-block; border-radius: 50%; cursor: pointer; } .tab-inner input[id='tab1']:checked~.btn label[for='tab1'], .tab-inner input[id='tab2']:checked~.btn label[for='tab2'], .tab-inner input[id='tab3']:checked~.btn label[for='tab3'] { background-color: crimson; } .tab-inner input[id='tab1']:checked~.slide1, .tab-inner input[id='tab2']:checked~.slide2, .tab-inner input[id='tab3']:checked~.slide3 { opacity: 1; z-index: 1; } </style> </head> <body> <div class="tab-inner"> <input type="radio" name="tab" id="tab1" checked> <input type="radio" name="tab" id="tab2"> <input type="radio" name="tab" id="tab3"> <div class="content slide1"> <a href="#none1"> <img src="./image/slide-01.jpg" alt="슬라이드이미지1"> </a> </div> <div class="content slide2"> <a href="#none2"> <img src="./image/slide-02.jpg" alt="슬라이드이미지2"> </a> </div> <div class="content slide3"> <a href="#none3"> <img src="./image/slide-03.jpg" alt="슬라이드이미지3"> </a> </div> <div class="btn"> <label for="tab1"></label> <label for="tab2"></label> <label for="tab3"></label> </div> </div> </body> </html> 선생님 혹시 visibility 자리에 대신 z-index를 넣어서 check 되었을 떄 check된 상품이 제일 위로 올라 오게 하는 방법은 잘못된 방법인가요? 만약 잘못된 방법이 아니라면 둘 중 어느 것이 더 선호 되는 방법인가요 ? 항상 친절한 답변 감사드립니다 ㅠ
- 해결됨HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
질문이요,,
t선생님 강의 잘듣고 있습니다^^궁금한게 잘 따라하고 있는데 저 밑에 빨간색 엑스가 자꾸 뜨는 이유는 무엇일까요? 제가 뭘 잘못한건지 궁금합니다^^
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
position 질문이 생겼습니다
ㅔ너무 자주 질문 드려서 죄송합니다 ㅠㅠ .side-menu에 position:fixed로 하면 화면 우측으로 스크롤이 안생기는데 position:absolute를 주면 화면 우측으로 sidemenu가 숨겨지지 않고 스크롤이 발생합니다 왜 그런건가요 ?ㅠㅠ
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
가상클래스 질문 드려도 될까요? 너무 헷갈립니다 ㅠㅠㅁ
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .nav { border: 1px solid black; width: 700px; height: 100px; margin: auto; text-align: center; line-height: 100px; } .nav a { /* border: 1px solid black; */ color: black; text-decoration: none; margin-right: 15px; font-size: 1.5rem; position: relative; } .nav a::before { content: ''; width: 100%; height: 3px; background-color: royalblue; display: inline-block; position: absolute; bottom: -3px; left: 50%; transform: translateX(-50%); } </style> </head> <body> <div class="nav"> <a href="#">HOME</a> <a href="#">ABOUT</a> <a href="#">SERVICE</a> <a href="#">PORTFOLIO</a> <a href="#">CONTACT</a> </div> </body> </html> a에 position:relative를 주고 a::before에 position:abosolute를 주면 a::before의 width:100% 값이 a의 콘첸츠 값만큼 가지는데 position을 주지않으면 nav의 width값 만큼 가집니다 왜 이렇게 작동하는지 잘 모르겠습니다 ㅠㅠㅠ 만약 a::before가상요소를 주게 되면 a::before는 a의 자식요소가 되는건가요 그리구 다른 질문인데요 .gnb li에 float:left를 주면 부모인 .gnb는 높이값을 왜 잃지 않고 가지고 있는건가요 ? ㅠ.ㅠ
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
질문있습니다!
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .gnb { display: flex; justify-content: center; height: 100vh; align-items: center; } .gnb a { color: black; font-size: 2.5rem; text-decoration: none; } .gnb::before { content: '01'; font-size: 1.5rem; background-color: royalblue; width: 100px; height: 100px; } </style> </head> <body> <div class="gnb"> <a href="#">CodingWorks Online Class</a> </div> </body> </html> flex를 body에 말고 부모인 .gnb에 줬더니 a:before가 크기를 가지는데 이것도 position: absolute | fixed와 같이 flex를 준 요소의 자식들은 inline-block으로 바뀌는건가요 ?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
구체성 문제인가요 ?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>호버한 메뉴 외 나머지 흐려지는 네비게이션</title> <style> body { margin: 0; } .container { background-color: royalblue; height: 100vh; position: relative; } .box { /* border: 1px solid black; */ width: 250px; position: absolute; top: 50%; transform: translateY(-50%); } .box a { display: block; color: white; text-decoration: none; padding: 10px 0px 10px 30px; font-size: 1.5em; opacity: 1; transition: 0.5s; } .box:hover a { opacity: 0.3; } a:hover { opacity: 1; } </style> </head> <body> <div class="container"> <div class="box"> <a href="#">New Arrivals</a> <a href="#">Summer Collection</a> <a href="#">Winter Collection</a> <a href="#">Special Offers</a> <a href="#">Trends</a> </div> </div> </body> </html> a:hover하면 작동이 안되고 .box a:hover 하면 작동이되는데 이건 구체성의 차이인가요 ? 그리구 순서가 바뀌면 안되는 이유가 하나만 적용이 되는건데 왜 하나만 적용이 되는지 궁금합니다 -!
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
질문 생겼습니다 !
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>마우스 호버되면 나타나는 툴팁 만들기</title> <style> .items { height: 100vh; display: flex; justify-content: center; align-items: center; } .item { /* border: 1px solid black; */ text-align: center; position: relative; } .item p { width: 250px; margin: 0 0 15px; padding: 15px; background-color: black; color: white; opacity: 0; transition: 0.5s; } .item p::after { content: ' '; display: block; width: 15px; height: 15px; background-color: black; position: absolute; left: 50%; transform: translateX(-50%) rotate(45deg); top: 30%; } .item:hover p { opacity: 1; } </style> </head> <body> <div class="items"> <div class="item"> <p> This HTML tutorial contains hundreds of HTML examples. </p> <img src="./image/icon-01.png" alt=""> </div> <div class="item"> <p> This CSS tutorial contains hundreds of CSS examples. </p> <img src="./image/icon-02.png" alt=""> </div> <div class="item"> <p> AngularJS extends HTML with new attributes. </p> <img src="./image/icon-03.png" alt=""> </div> <div class="item"> <p> Node.js is an open source server environment. </p> <img src="./image/icon-04.png" alt=""> </div> </div> </body> </html> 영상 따라보기전에 혼자서 먼저 해봤는데 이렇게 했을경우에는 이미지만 클릭하였 떄 툴팁이 나오게하는 방법은 없는건가요 ?ㅠ 조금만 다르게해도 너무 헷갈리네요...
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
.square span의 width와 height값
안녕하세요 강의 잘 보고 있습니다. 궁금한 점이 하나 생겼는데요. 영상 8:00분쯤에 .square span{}에 width와 height값을 주셨는데요 span은 inline-level인데 어떻게 width와 height값이 먹는거죠 ? 따로 dispaly를 준것이 아닌데요 ㅠㅠ position속성을 주면 block요소로 바뀌는 건가요 ??
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
float속성에 대해서 궁금합니다.
안녕하세요 선생님 저는 학원에서 float을 배울때 자식요소에 float을 주면 부모요소에도 float을 줘야 부모요소가 크기값을 같이 가져간다고 배웠습니다. 근데 여기서는 overflow hidden 을 부모요소에 주시더라고요 혹시 부모요소에 float을 주는거랑 overflow hidden을 주는거랑 차이점이 있을까요?? 그리고 overflow hidden이라는 속성에 대해서 한번 정리해주시면 감사하겠습니다!
- 해결됨HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
30분경 article 사이의 공백에 대하여
section 밑에 자식요소 article inline -block 주고 부모 요소 section에 text-align:center를 주면 수평정렬 된다는 점 이해했습니다. 근데 article 사이사이 하얀색 여백을 없앨 수는 없나요? li 태그로 가로 정렬되어도 사이사이 여백이 있어서 nav로 만들때 간격이 생기네요..
- 해결됨HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
ㅠㅠ왜자꾸 이미지가 사라지죠
작업환경에서 live로 보면 이미지도 잘뜨고 a:before의 width:10% 도 잘되는데 비쥬얼코드끄고 폴더에서 열면 이미지도 사라지고 width도 적용이 안되네요 왜이럴까요
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
jquery 선언 달러 색상
달러 색상이 파란색으로 나오는 경우는 왜 그런가요? 지금까지 jquery 예제하면 옅은 노란색상이였는데 이번 예제를 하면서 색상이 파란색으로 나옵니다. 기능은 작동 문제 없고요
- 해결됨HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
텍스트나 이미지 파일 어디에서 받을 수 있는 건가요?
안녕하세요, 강사님. 다름이 아니라... 텍스트나 이미지는 미리 준비되어 있다고 강의 중에 말씀하시는데 전 왜 안 보이죠? ㅠㅠ 어디에 있는 건가요? ㅠㅠ
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
css자손 선택자 vs 자식선택자, 부모요소 vs 자식요소 강의에서 궁금한 점
마지막 실습 때 box의 자식요소div에 padding을 주었는데 왜 박스가 겹치나요? 그리고 div의 자식요소인 div에는 padding을 주지 않았는데도 왜 부모요소와 박스가 안 겹치나요??
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
태그이동
ex. 1. <b></b>얼음과 살았으며 2. <b>얼음과 살았으며</b> 1번 상태에서 마감태그가 원하는곳(2) 뒤로 보내는 방법은 어떻게 하는건가요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
ㅜㅜdiv가 왜 0.5초만 보여지고 다시 감춰질ㄲㅏ요
ㅜㅜdiv가 왜 0.5초만 보여지고 다시 감춰질ㄲㅏ요
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
오디오 자동재생 문제
오디오 자동재생이 안되는데, 밑에 문의처럼 정책때문에 안되는것이 맞나요??