46,200원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
max-width
선생님 매번 궁금한거나 고민에 대해서 답변해주셔서 감사합니다. 요번에는 공부하면서 공금한게 있어서 글을 남기게 되었습니다. 다름이 아니라 media query 없이 max-width 를 활용하여 화면을 줄일때 그 비율만큼 줄어드는 반응형을 제작하고 있습니다. 제가 현재 사용하는 모니터는 듀얼모니터(a,b)와 노트북 모니터 총 3개입니다. 노트북 모니터와 모니터 a에서는 브라우저 크기가 100%상태에서 화면에 꽉차고 화면을 줄여도 비율만큼 줄어듭니다. 하지만 다른 모니터 b(a 모니터보다 크기가 조금 더 큽니다)에서는 100%상태임에도 불구하고 화면 양옆의 여백이 남습니다. 제가 max-width에 대해서 잘못 이해하고 있는건지 아니면 좀더 큰 모니터에서는 원래 이렇게 나오는게 정상인건지 궁금합니다.
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
inline-block으로 width해결
inline-block으로 div너비 값이 조절하는걸로 대체 하셨는데 첨에 완성본에서는 화면 중앙에 있는데요.... .dropdownd에 inline-block을 준상태에서 어떻게 중앙배치를 시키나요? margin: 0 auto를 줘도 안되네요.
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
블라켓츠(brackets) 자동 빈줄 어떻게 없애나요?
원래 vscode쓰다가 블라켓츠 써보고 있습니다. 블라켓츠로 퍼블리싱할 때, 자동저장이 안돼서 한줄 한줄 코딩시, ctrl s로 저장중인데요. 저장할 때마다 아래 사진처럼 태그와 태그 사이에 빈줄이 생성됩니다. 혹시 제가 확장프로그램이 설치되어 있어서 그런것인지.. 환경설정 및 확장프로그램을 아무리 확인해도 못찾았고, 구글링해도 제대로 나오는 것이 없어서 질문드려요.
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
코드에는 문제가 없는 거 같은데 제이쿼리가 동작이안됩니다
(사진)
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
저도 아래 질문과 같은 질문이네요
아래처럼 답변하셨는데..갑자기 나오니 당황스럽네요... import도 처음보고 , flex, justify, align-item, vh단위~ 그래도 저 각각의 속성들이 뭔지는 알고 넘어가야 하지 않나요? 계속 반복된다고 해서 저 의미를 알게되는건 아니잖아요....? ㅠㅠ 계속 쓰이는지는 알수있겠으나 또 마치 셋트처럼 쓰인다 치더라도 최소한 각각의 의미는 알아야 하지 않을까요? ------------------------------ 키프레임, 플렉스, 애니메이션, 오파시티 등등 이런거는 앞의 강의에서 없던 내용인데 그냥 실습 따라하면서 외우는 건가요? 이부분은 이론이 필요없나요? 40 코딩웍스(Coding Works)2020.07.28 AM 00:40 안녕하세요. 코딩웍스입니다. 키프레임, 애니메이션, 오파시티는 실습 예제를 따라하시면 여러번 반복되니까 예제 학습으로 이론을 충분히 이해하실 수 있다고 생각됩니다. 그리고 플렉스는 수직 중앙 수평 중앙을 하기 위한 좀 더 편한 방법이 있다는 소개 정도로 생각하시면 됩니다.
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
slideDown을 했다하더라도
이해가 안되는 부분이 있어 글남깁니다. submenu 부분에 이미 display: none을 한상태인데. 자식을 slideDown을 했다하더라도 slideDown되고있는 <div class="sub-menu"> 이하 이부분은 아직 display:none상태아닌가요? slideDown한다고해서 왜 display:none이 풀리는건지 왜 보이게 되는거죠?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
위의 속성을 따라가야 한다는게 좀 이해가 안가네요
Box div에 class="active"넣으면 css 에서 .active만해도 되기위해 class 속성을 넣어주는거 아닌가요? 왜 굳이 위의 .container div 를 넣어서 셀렉팅 방식을 따라가 줘야 한다는게 이해가 안가네요? 위에 존재하니 따라간다는건가요? 아니면 없으면 안따라가줘도 된다는건가요? div.active 라고 바로 붙히는 방식도 좀 생소하네요...
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
vscode에서 함수 인식을 못하는듯
custom.js파일열고 선택자 이후 mouseenter를 쓰면 강사님 함수는 보라색으로 바뀌고 또 자동완성이 되는데 저는 그렇지 않은것 같습니다. 무슨설정이 빠졌을까요? style태그내의 속성과 값의 색깔이 저는 파란색과 갈색이라면 선생님은 보라색과 갈색이고 a 태그내의 class나 href속성은 쑥색이라면 저는 파란색입니다...테마때문인지...
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
CSS calc() 메서드 질문있습니다.
안녕하세요~ calc() 사칙연산 공부중에 질문이 있는데요 height: calc(100vh - 40px); width: calc(100% - 40px); 저 2개 값에 - 40px값을 주면은 양쪽에 시계방향부터 상 우 하 좌 값으로 각각 10px씩 적용되는 원리로 생각하면 되나요? 만약 -40px를 -80px값으로 바꾼다면 각각 상 우 하 좌 값이 20px씩 적용되는건가요? 헷갈려서 여쭤봅니다!
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
코드에 이상이 없는데 제이쿼리 작동이 안됩니다 확인 부탁드립니다.
(사진)
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
[html tag wrap] 개별 랩핑질문_vs code
강사님 안녕하세요. vs 코드에서 html tag wrap 기능 사용할 때, 아래와 같이 개별로 랩핑은 안되는건가요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
.heading의 css디자인이 안먹어요
뭐가잘못된건지모르겠어서요 h1에 class값과 css값이랑 동일하게 줬는데 디자인이 먹지를 않아요 왜그런지알수있을까요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
비주얼 스튜디오 html:5 혹은 ! + tab 했을때
반응형 메타태그 위에 <meta http-equiv="X-UA-Compatible" content="IE=edge">] 이 부분이 같이 나오는데 이건 무엇인가요??
- 해결됨HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
이미지가 안들어가져요.....
/* Google Web Fonts CDN */ @import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:300,400,500,700,900&display=swap'); body{ font-family: 'Noto Sans KR' ,sans-serif; line-height: 1.5em; margin: 0; font-weight: 300; background-color: #eee; font-size: 15px; } a{ text-decoration: none; color: #000; } .container{} header{ border-bottom: 1px solid lightgray; background-color: #fff; height: 60px; text-align: center; padding: 13px; box-sizing: border-box; } section{ border: 1px solid red; height: calc(100vh - 60px); position: relative; } .login{ border: 1px solid red; width: 360px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .login-type{} .login-type h1{ margin: 0; font-size: 38px; text-align: center; } .login-type a{ border: 1px solid red; display: block; text-align: center; height: 50px; line-height: 50px; border-radius: 3px; margin-bottom: 10px; font-size: 18px; color: #fff; } .login-type a:nth-of-type(1){ background-color: #fff; color: #222; /* background: url(images/logo-mobile.png); */ background-image: url(images/logo-mobile.png); } .login-type a:nth-of-type(2){ background-color: #898c9b; } .login-type a:nth-of-type(3){ background-color: #11ce00; } .login-type a:nth-of-type(4){ background-color: #0076fe; } .login-type a:nth-of-type(5){ background-color: #00c026; } .login-type span{ } .login-footer{} [part3]로그인 화면 UI 디자인(css디자인-버튼 디자인 및 체크박스와 label)에서 문제가 생겼습니다.동영상 5:14초에 백그라운드 이미지를 넣을 때 이미지가 안들어가네요 ㅠㅠ <!DOCTYPE html> <html lang="en"> <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"> <link rel="stylesheet" href="css/style.css"> <link rel="icon" href="images/favicon.png"> <title>밴드 로그인 폼</title> </head> <body> <div class="container"> <header> <a href="#none"> <img src="images/logo-band.png"> </a> </header> <section> <div class="login"> <div class="login-type"> <h1>로그인</h1> <a class="btn" href="#none">휴대폰 번호로 로그인</a> <span class="or-text">또는</span> <a class="btn" href="#none">이메일로 로그인</a> <a class="btn" href="#none">네이버로 로그인</a> <a class="btn" href="#none">페이스북으로 로그인</a> <a class="btn" href="#none">라인으로 로그인</a> </div> <div class="login-footer"> <input type="checkbox">로그인 상태 유지 <p> 밴드가 처음이신가요<a href="#none">회원가입</a> </p> </div> </div> </section> </div> </body> </html>
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
<big>태그
강의 보고 따라하는데, <big>태그가 안되어서요. 검색해보니까 big태그는 html5에서는 지원안하고 css로 대체한다고 나와있는데 맞나요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
선택자 제어
선생님 안녕하세요~! 이때까지 hover이벤트 적용시 hover하는 요소와 효과적용이 되는 요소가 다를 경우 +, ~같은 선택자를 사용하지 않고 클래스/아이디명/태그명을 바로 이어서 적어서 요소 선택을 하는 것만 했어서 이번 input checked 제어를 하는 부분이 좀 헷갈리는데요,, 혼자서 이래저래 테스트 해보고 얻은 결론인데... 선택자 관련해서 제가 이해한 내용이 맞을까요..? 1. 부모-자식(자손) 관계에서 부모요소를 기준으로 자식요소에 이벤트나 기타 디자인 효과를 줄 때는 ~, +같은 선택자를 사용하지 않고 태그선택자나 클래스 또는 아이디선택자로 바로 이어서 선택한다. 반대로 자식요소를 기준으로 부모요소에는 효과를 적용할 수 없다. 2. 형제선택자, 인접선택자 모두 기준이 되는 요소의 위치가 효과적용이 되는 요소보다 밑에 있을 수는 없다. 기준요소 효과적용요소 => O 효과적용요소 기준요소 => X 결론 : 부모/자식관계든 형제, 인접 관계든 태그 작성 순으로 보았을 때 위에 있는 요소가 아래에 있는 요소를 제어할 순 있지만 아래에 있는 요소가 위에 있는 요소를 제어할 수 없다.
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
하이퍼링크가 작동이 안됩니다
(사진)
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
브라켓츠 사용법 질문입니다.
첨부 이미지를 보시면 브라켓츠 하단에 CDN.txt랑 SOURCE.txt랑 탭으로 되어서 사용하기가 편해 보이는데요.이것을 어떻게 설정해야 하는지 궁금합니다.확장파일이 있는지요?답변 부탁 드립니다^^ 해당 강의의 마지막 섹션에 모두 있습니다.
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
관련 이미지 문의
안녕하세요 선생님! 해당 이미지가 어디에 첨부되어 있는지 찾기가 어려운데 알 수 있을까요? 섹션 9. [다운로드] 예제 제작 완성본 다운로드에 있다고 해서 목록을 찾아보았는데 찾을수가 없어서요~
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
강사님 강사님~
before, after 가상 클래스에서 content: url (); 를 이용해서 이미지를 삽입하는 경우, 이미지 크기는 어떻게 조절을 할 수 있을까요? 이미지를 따로 구해서 넣으니까 엄청 크게 나오는데 이렇게 저렇게 해봐도 조절이 안 되네요. p.s 새해 복 많이 받으십시오 ^.^~