46,200원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
27강 float 속성에 관해서 질문드립니다.
스크린에 보이는대로 css 파일과 html파일을 똑같이 작성하였습니다. 근데, css 파일에서 .clear{ background-color: purple; } 이라고 적었더니, 이 div태그는 위의 float속성을 상속받지 않았고, 그로인해서, .parent div태그가 얘의 위치를 잡아서 자동으로 height를 잡았네요. 이부분에는 왜 height:50px이 없으면 .clear가 float속성을 상속받지 않았는지 궁금합니다. 아래는 저의 css코드입니다. .parent { border: 5px solid black; width: 600px; } .top { background-color: purple; height: 50px; } .left { background-color: skyblue; height: 100px; width: 200px; float: left; } .right { background-color: orange; height: 100px; width: 400px; float: right; } .clear { background-color: purple; /* height: 50px;*/ }
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
선택자 관련 질문 있습니다.
선생님 안녕하세요. 선택자 관련해서 모르는 부분이 있어 질문 드립니다. 1. html 구조를 .container 하위에 div.sidebar를 배치하지 않고 .container 외부에 div.sidebar를 배치 했을 경우에 input:checked 로 같은 기능을 할 수 있게 하는 방법은 없나요? 2. input:checked 다음에 space 혹은 인접선택자 종류만 쓸수 있으니까 html 구조에서 .sidebar를 꼭 하위 또는 뒤따르는 요소, 형제요소로 배치하라는 말로 이해했는데 제대로 이해한게 맞을까요?
- 미해결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) 뒤로 보내는 방법은 어떻게 하는건가요?