46,200원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
인라인블록요소는 상하마진값을 못갖는거 아닌가요?
인라인블록요소 강의 초반 ppt보면 상하마진못갖는다고 되있지만 16분58초에서는 인라인블록이니 상하마진가질수있다고 하시네요. 어느게 맞나요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
비디오 랜딩페이지 트리거 작동질문+ 슬라이드 화살표질문
1. 슬라이드 하단버튼 누르면 이동하는데 css로 하단과(강의에 있죠!) 좌우에는 따로 어떻게 만드나요?? 결론적으로는 하단ㄴ 눌러도 이동하고 좌우 눌러도 하나씩 이동하게 하려면요..! 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>Document</title> <link rel="stylesheet" href="style.css"> <!-- jQuery CDN --> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> </head> <body> <div class="container"> <video src="images/video-female.mp4" autoplay muted loop poster="images/placeholder-female.jpg"></video> <div class="logo"> <img src="images/logo.png" alt="logo"> </div> <div class="text"> <h1><em>Wave Ocean</em>The World's Ocean</h1> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, nisi doloribus! Sapiente iste amet quidem tenetur! Facilis dolore accusamus cupiditate commodi, reprehenderit eius quisquam! Explicabo quibusdam, nihil eveniet laudantium, cum dicta, tenetur expedita voluptates iure in dolorem soluta! Itaque quidem soluta, eaque assumenda modi nulla obcaecati voluptatum quasi eveniet eius, ex aliquam possimus? Eaque culpa et quas aspernatur facere ipsum nemo doloremque cupiditate, nihil deleniti rerum necessitatibus in corrupti sequi iusto est illo eius soluta dignissimos aut! Esse, consequuntur dolorum! </p> <a href="#">BOOK NOW</a> <a href="#">LEARN MORE</a> </div> <div class="sixty"> <span><em>Anniversary</em>60</span> </div> <div class="trigger active"> <span></span> <span></span> <span></span> </div> <div class="modal"> <div class="gnb"> <a href="#">attractions</a> <a href="#">hotels spa</a> <a href="#">shop dine</a> <a href="#">celebrate</a> <a href="#">promotions</a> </div> </div> </div> <script> $('.trigger').click(function(){ $(this).toggleClass('active') }) </script> </body> </html>
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
a태그 클릭 시 생기는 아웃라인을 없애고 싶은데 안되네요 ㅜㅜ 도와주세요
ul li a 태그를 이용해서 페이지네이션을 만들고 있는데요... a 태그에 적용하는 클래스에 outline:0 도 해보고 none도 해보고 !important 도 적용해 봤는데 계속 생기네요... 선생님이 강의에 하셨던 건 button 태그이긴 했는데 a 태그에는 적용 방법이 다른가요? 부트스트랩에서 제공하는 페이지네이션을 커스텀해서 사용하고 있는데 그래서 그런걸까요? 답변 부탁 드립니다 ㅜㅜ
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
float 관련 clear both
float 값을 주면 부모에게 float { content:""; display:block; clear:both; } 값을 주어야한다고 배웠는데 이 값을 건너뛰고 overflow:hidden 으로만 값 찾아도 되는건가요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
border와 backgorund-color 속성 차이를 알고 싶습니다.
안녕하세요 똑같은 조건에서 child와 grandchild에. 다른 색상의 border 값을 줘서 얻는 div의 위치 결과(01)와, 다른 색상의 background-color 값을 줘서 얻는 div의 위치 결과(02)가 다른데, 어떤 원리가 적용된건가요 ? 왜 border는 두께 값 만큼 grandchild가 밀려나고, background-color는 완전히 겹쳐지는 결과가 나오는 건가요 ?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
before
안녕하세요 질문드립니다. 저는 span 을 추가해서 제작을 하였는데요 드롭다운 네비게이션으로 위에는 애니메이션 바를 구현하고 드롭다운 네비게이션으로 이동할때도 애니메이션 바를 100% 그대로 있게 하고 싶은데 어떻게 하는지 알 수 있을까요? .gnb li a span:hover:before { width: 100%; } .gnb li a span:active:before { width:100%; } .gnb li a.active .gnb li a span:before { width: 100%;} 이렇게 둘다 해도 안되더라구요 ㅠㅠ 도와주시면 너무 감사드립니다
- 해결됨HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
div 안먹히는 증상
선생님이 구현 해주셨던 3번탭 항목에 구글 차트를 넣을려고 하는데요. div 이용해서 차트를 넣을려고 하는데, 화면이 출력되지 않습니다. 선생님이 해주신 대로 <p> 또는 <img> 사용 할 경우 정상적으로 출력은 되는데요. <div>으로 설정시 적용이 안되네요 ㅠ. 어떻게 api 구글 차트를 넣기 위해 어떤 작업을해야하는지 조언 부탁드립니다. ===================================== </div> <div id="tab3"> <img src="images/event.jpg"> 여기에 <div><div> 넣으면 인식이 안되네요 </div> </div> </div> </section>
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
질문드립니다.
안녕하세요. 비주얼 스튜디오 코드에서, 라이브 서버 깔았는데 왜 우측키 눌러서 실행눌렀는데 안나타날까요?ㅠ 직접 크롬을 열지 않으면 비주얼 스튜디오에서 열리지가 않는데 문제가 있는건가요?ㅠ
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
23:47 질문이요.
Q1. 3:47초에 보면 .parent의 보더가 왼쪽은 괜찮은데, 옆과 아래쪽에는 1px정도? 세밀하게 조금 흰색이 보이는데 이것은 왜그런건가요..? 100%일땐 꽉 안차다가 확대하니까 또 차고... 그냥 브라우저문제인가요? 그리고, 또하나 질문은 다음꺼 27:06 의 가로배치할때는 , section처럼 block요소는 width: 100%로 기본적으로 차잖아요. 그런데 선생님께서 600px로 준건, 단순히 예제라서 보기 쉽게 하기 위함이 아니라, 100%일 경우 3등분 하면 딱 떨어지는 값이 아니라서 그렇게 하신건지 궁금합니다. 제가 영상 보기 전에 혼자 연습하고 확인차 보는데, section이 디폴트인 width:100%임를 감안해서, section에다가 width값을 따로 지정을 안하고 만들었는데, 33.3333%로 나누니까, 들어가는것 같긴 한데 .. Q2. 아래의 예제section요소안에 article을 사방에 흰색 테두리는 마진값을 줘서 article과 section 을 띄우는건가요 아니면 article에 보더를 흰색으로 주는건가요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
inherit
안녕하세요 혹시 width:inherit 말고 width:100% 줘도 상관없나요?? 둘다 똑같은 거죠?
- 해결됨HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
sns아이콘 애니 만들기 중] 오버플로우, 차오르는 애니메이션 질문
파트원 실습 가상클래스 before after 가상클래스 활용한 실전 퍼블리싱 03(SNS 아이콘 애니메이션) 10:30 부터 -- 안녕하세요 항상 친절한 답변 감사합니다ㅠㅠ 현재는 일부 강사님이 하신 코드 데려와서 붙여서 되는 상황입니다. 제가 한건 주석처리에 표시 해놓았어요 01. a태그에 오버플로우 히든 적용이 제가 입력한 코드에서 작동이 안되는 이유가 찾아봐도 뭔지 모르겠습니다 02. 보더 래디우스 50%를 적용하고 오버를 하면 예시처럼 주욱 올라오는게 아니라 뒤에서 들어올려지는 것 같이 나와서 원인을 찾다가 래디우스가 원인인걸 알았습니다 20%같이 다른 퍼센트도 해봤는데 그냥 적용을 하면 그렇게 보이는 것 같더라고요... 이건 그냥 착시현상처럼 보이는걸까요? 03. 개인역량차이(?)겠지만 항상 정렬같은거 하다가 안될때가 많아서 애먹네요 요점을 훑고 연습해도 실제로 할때랑은 무엇이 문제인건지 파악이 늦어요 (뭐 예를들면 포지션 위치를 맞는곳에 써야하는데 비슷한 다른곳에 쓴다던지..) 남들도 이러는지 모르지만 저는 강사님 한거 한번 쭉 보고 혼자 안보고 붙들고 늘어지고 하다가 정 안되는것만 강의 다시 봅니다 강사님처럼 딱 딱 하고싶은데 답답할때가 많네요ㅠㅡㅠ 언제쯤 금방 파악할지 이런거 줄이는 방법 혹시 있을까요 많이 하는게 답일까요? -- 아래에 소스 달겠습니다 파일첨부기능이 없네요 그리고 저 사실 질문 많은데 매번 공부하다가 기록하고 있답니다,,,,^^ 한꺼번에 하는게 좋을거 같아서요 번거롭게 하는 것 같아 죄송합니다. 정 이상한거만 일단 합니다
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
position 속성, 수평수직 중앙 성질
.container { display: flex; align-items: center; justify-content: center; height: 100vh; } .app-ui { width: 360px; height: 640px; transform: rotate(-30deg) skewX(20deg); position: relative; box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); transition: 0.5s; background-color: #eee; } 질문이 두 가지 있습니다. 1. position: absolute; 는 inline 요소가 되고, position: relative;의 경우에는 inline 요소가 되지 않나요?! inline 요소가 될 경우, width와 height를 주지 못할 것 같은데 줄 수 있길래 여쭙니다! 2. .container 태그에 수평수직 중앙을 준 뒤, 밑에 app-ui 클래스에서 position: relative를 주면 갑자기 수평수직 중앙이 망가집니다. 그 이유가 무엇인가요? 여기서 width와 height 값을 이미지 크기값으 로 주면 다시 수평수직 중앙이 맞춰집니다.
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
탭 메뉴 활용 관련해서 질문드립니다.
이제 이 수업을 기반으로 응용하여 opacity, silde 탭을 만들어 볼 수 있는데요 타 쇼핑몰이나 사이트를 보면 마우스로 잡아 끌었을때 이미지가 옆으로 넘어가고 그런 기능은 어쩔 수 없이 jquery로만 가능한 부분인가요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
nth-chlid로 태그를 지정할 때와 클래스명으로 지정할 때의 차이
# HTML 문서 <body> <div class="box"> <span class="box1"></span> <span class="box2"></span> </div> </body> # CSS 문서 .box2 { animation-delay: 0.5s; } 영상에서 제시해주신 것처럼 span에 클래스명을 붙이지 않고 한 것이 아니라 각각의 span 태그에 클래스명을 붙이고 해봤습니다. 그런데 .box span:nth-child(2){ animation-delay: 0.5s;} 라고 하면 영상과 똑같은 결과가 나오는데 .box2 {animation-delay: 0.5s;}를 사용하면 박스가 계속해서 하나만 움직입니다. .box span:nth-child(2)나 .box2나 결국 똑같은 것을 지칭하는 것 아닌가요? 왜 하나는 정상적으로 박스 2개가 움직이고 하나는 박스 1개만 움직일까요 ㅠㅠ
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
질문드립니다!
안녕하세요 강의를 보던 중 문의드립니다! 위의 이미지 부분에서 .box div 선택시, box 자손 div들은 모두 같은 css가 적용된다고 하셨는데 오른쪽에 보이는 박스들은 왜 같은 위치가 아니고 자식div만 padding값이 적용된건가요?.. 그리고 혹시 이렇게 태그방식 말고 각 태그에 class를 지정해서 스타일 지정해주는 방식으로 진행하면 안되는건가요~?! class로 지정할 시, css에서 해당되는 것을 호출(?) 하는 것도 궁금합니다..! 만약 <div class="parent"> <div class="a"> <div class="b"></div> </div> </div> 이런식으로 자손요소에 class명(b)을 지정해서 스타일을 매기고 싶다면 .b만 쓰면 되는건지, 그 앞에 부모요소(.a .b)라고 써야되는건지 부모의 부모요소까지 써야되는건지(.parent .a .b)궁금합니다!
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
블라캣츠 adobe 지원 종료 문의 드립니다
블라캣츠 설치 및 에밋 설치 강의에서 http://brackets.io/ 에서 설치하려고 하니 adobe 지원 종료가 보입니다. 강의 수정이 필요할것 같습니다~
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
궁금합니당..
선생님 ~ 하다가 사소한 질문이 있는데요..음.. css에서.gnb a:before 아래 text-align: center; 이랑, line-height: 30px; 을 주셨잖아요 ! 이 두개가 여전히 헷갈려서 그런데 .. 현재 display: inline-block;으로 바꾼상태인데 전 강의에서 inline-block 일때는 text-align: center;는 부모요소에 주라고 했던거같은데.. 그럼 .gnb a 에 줄게 아니라 .gnb 에 주는게 맞는거 아닌지.. 사소하지만 여쭤볼게요 ㅠㅠ
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
before 질문 드립니다.
안녕하세요 강의를 듣던중 문의 사항이 생겨 질문드립니다! 텍스트 아래 호버시, 라인 만드는 예시에서 before 가상클래스 써서 진행하셨는데 이라인이 텍스트 아래 있는건데 after가 아니고 왜 before를 쓰는걸까요..? before는 앞에 생겨야되는거니까 텍스트 위에 생겨야되는게 아닌지 의문입니다..ㅠㅠ
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
아이콘 쓰는 폰트어썸 사이트 이용에 관하여
2021.2.24 현재기준으로 폰트어썸 사이트에 가입하여 서비스를 이용하려고 했는데, 강의내용과 다르게 @import를 안쓰고 <head></head> 사이에 스크립트 구문을 넣으라고 하더라고요. @import는 이제 못 쓰는건가요? (영알못이어서 ㅠ ㅠ 이상한 질문 죄송합니다.)
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
질문입니다
안녕하세요 선생님 강의 잘 듣고 있습니다^^ 의문이 하나 있는데 .container { text-align: center; display: flex; justify-content: center; align-items: center; height: 100vh; 이렇게 콘테이너 div안에 flex 속성을 주셨는데요, flex는 인라인 블록 인라인블록 상관없이 쓸 수 있는건가요..? 혼돈이 와서 질문드립니다. flex를 쓰실때 밑에.icon div 안에 display: inline-block; 속성을 지우셨기에 혼돈이 와 질문드립니다. 언제 쓰이고 언제 쓰이지 않는지 알려주시면 감사하겠습니다.^^