46,200원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
강의 내용 문의 드립니다.
안녕하세요. 퍼블리싱 필수 이론 강의 다 듣고도 퍼블리싱 제작 part1 css 키프레임 애니메이션 활용한 실전 예제 제작 01 (원형 크기 변경 로딩 애니메이션) 들어갔는데요. 강의 내용이 처음 부분이 맞는지 조금 의아스러워서요. css 코딩된 부분 보면 @imort url('https:..fonts. googleapis.com/css? .............. 처음 보는 골뱅이 표시도 보이고요 폰트 관련된 것도 처음이고요 body font 관련 부분에서 font-weight:300; display: flex; height: 100vh;부분을 넣으라고만 말씀하시고요. .loading() 코딩 강의로 들어가는데요. 강의에서 소개되는 @keyframs 태그도 처음이고요. 위의 body태그에서 display: flex이며 height: 100vh; vh라는 속성값도 처음인데요. 제가 혹시 기본 강의에서 빼먹은 부분이 있는건 아닌지 아니면 제작 강의는 사전 지식없이 이런 방향으로 진행되는건지 궁금해서요. 항상 감사합니다.
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
몇가지 헷갈리는 부분들 질문 드립니다.
안녕하세요. 퍼블리싱 이론 수업까지 어찌어찌해서 겨우 따라온 것 같습니다. 어렵지만은 자그만한 코딩이라도 할 수 있음에 뿌듯하고 흥미 있어서 계속 앞으로 정진하고 싶은 마음이 큽니다. 너무 기본적인 것인데요. 제가 잘못 알고 있거나 헷갈리는 부분들이 있어서 질문 좀 드리고 싶어서요. 봐주셔서 감사드립니다. ---------------------------------------------------------------------------------------------------- 1. 인라인요소인 span태그나 a태그의 마진값에 대해서 질문드립니다. 두 개의 span 너비 사이에 공백이 궁금해서요. 지난번에 인라인블록으로 변경하면 우측과 아래에 5px정도의 마진이 생긴다고 말씀주셨는데요. 이렇게 원래 인라인요소 태그는 마진이 기본적으로 있는 건가요? 2. 가운데 정렬 질문인데요. 블록요소는 margin:auto;/인라인요소는 부모요소에 text-align:center; 이렇게 알고 있는데요. a태그에 display:block; 를 적용해줬잖아요. 그러면 원래 a태그는 인라인요소이지만 블록 요소 성질로 바뀌었고 가운데 정렬도 margin:auto;를 줘야 하지 않나 생각이 들었어요. 그리고 text-align:center; 가 맞다면 부모 요소에 줘야 하잖아요. .sub-menu a 의 부모는 .sub-menu 이고 .menu li >a 의 부모는 .menu li 일텐데요. .menu 에 text-align 을 줬더니 적용이 됩니다. 꼭 원칙대로 하지 않아도 되는 걸까요. 3.nth-child 가상클래스 질문인데요. .box span:nth-child(1) { --> box클래스 아래 자식요소를 태그 구분하지 않고 순서번호에 맞게 적용되는 거잖아요. 그래서 만약에 <h2>태그가 span 태그 위에 추가된다면 첫번째로 적용되는 거고요. 이렇게 nth-child 는 태그 구분없이 적용되는건데 왜 .box span: ->이 부분에 span태그를 적어주는 건지 궁금해서요. span를 뺐는데 적용이 되는 것 같아요. 4. 코딩 입력할 때의 질문인데요. 강의에서 선생님께서 입력하실 때에 보면은 예를 들어 여러개 a태그에 #none를 입력할때 곳곳에 마우스 커서를 찍어주고 입력하면 모두 적용돼서 입력 되는 것 같은데요. 어떤 단축키가 필요한지 질문드립니다. (개인적으로 비주얼스튜디오를 사용하고 있는데요.)
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
absolute주는 순간 부모요소 높이값은?
.tabs 밑에 자식요소(items)에 absolute를 주면 공중에 붕 뜬다. 그럴때 부모요소가 높이값을 잃는다.라고 하셨는데..... 1. 일단 먼저 부모요소라는게 absolute를 붙히고 위에 relative를 붙히는쪽을 부모요소라고 하는건지... 아니면 relative를 붙히지 않더라도..태그만으로 봤을때 부모요소를 칭하는건지가 일단 궁금하다구요... 2. 그리고 absolute를 하면 붕뜬다고 하셨는데...relative를 붙힌 부모로부터 뜬단 얘긴지...태그상 부모로부터 뜬다는 얘긴지 좀 헷갈립니다. 그 높이값을 잃는다는 부모가 태그상 부모인지 css에서 relative가 붙은 선택자가 부모인지 헷갈립니다. 3. 만약 자신은 absolute 를 하고 그 태그 위 조상어떤태그에도 relative를 붙히면 기준은 어디가 되는지요??
- 해결됨HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
float 가로배치와 border boxing 질문드립니다.
CSS로 HTML 가로 배치하기(float, overflow, clear, inline-block) 두 가지 질문인데요. 1. left에는 float:left 를 적용하고 right 에는 float:right; 적용하면 잘 배치가 되는데요. float:right 를 적용하지 않은 상태가 궁금하였습니다. 그랬더니 이렇게 동일한 너비값으로 보이는데요 right가 가려진 것으로 이해해야하나요? 뒷부분 강의에서 section 아래 article 를 적용할때는 float:left;를 주면 3개의 artile이 나란히 가로로 배치가 되잖아요. div하고 seaction article태그의 차이인가요? ---------------------------------------------------------------------------------------------------------------------------------- 2. 가로배치하는 두번째 방법인 inline-block 일때요. box-sizing:border-box 속성이 궁금해서 seaction 너비를 600으로 지정하고 article 보더값이 넘쳐서 배치되지 않는 것을 box-sizing를 줘봤는데요. 위의 float 방법에서처럼 가로로 배치가 되지 않네요. 이 부분도 궁금해서 질문드립니다.
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
animation-fill-mode를 사용하지 않아도 되는 이유
애니메이션이 끝나는 상태(keyframe 100%)의 요소의 위치 heading, anniversary 클래스가 각각 margin-left = 0, margin-right = 0일 때와 애니메이션과 관계없이 원래 요소의 배치가 동일하기 때문인 것 같습니다.
- 해결됨HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
span태그와 div태그의 크기 차이에 대해 질문드립니다.
CSS로 HTML 가로 배치하기(float, overflow, clear, inline-block) 인라인, 블록,인라인블록 요소를 비교하면서 나온 부분인데요. div 다음에 인라인요소 특징을 알아보기 위해서 span으로 바꾼 부분에서요. 크기값을 갖기 위해서 display: inline-block; 를 주니까 div와 같이 크기를 가지게 된 모습인데요. div는 부모 보더에 맞게 자식 배경색이 꽉 찬 반면에 span은 부모 보더에 딱 맞지 않고 왠지 마진이 적용된 것처럼 아래쪽이 여백이 보이는데요. 브라우저는 모두 100퍼센트입니다. ㅇ이 부분이 왜 차이가 나는지 궁금해서 질문드립니다. 늘 감사히 잘 공부하고 있습니다.
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
부모 자식 자손 관계요소 개념이 어렵습니다..
동일한 질문 찾아보고 문의드립니다. (너무 기본개념을 이해하지 못해서 답답하네요..) css 핵심이론(선택자, 선택자 적용 우선순위)강좌에서 <p> <b></b> </p> b태그는 p태그의 하위요소로 b태그 적용하려면, p b {} ->이렇게 하위관계는 스페이스로 적는다고 들었습니다. 부모 자식 관계로 생각하면, 스페이스는 자손관계/꺽쇠는 자식관계와 대입하니 헷갈리네요.. p b {} 자손관계로 이해해도 되는 건지요 --------------------------------------------------------------------------- css 자손선택자 vs 자식선택자, 부모요소 vs 자식요소 강의에서, <div class="box"> <div> ----->ㄱ <div></div> --------->ㄴ </div> ->html의 계층구조는 이해했는데요. 박스 입장에서 자손은 2개로 말씀해주셨는데요. 그러면 box의 자식요소도 ㄱ 이고 box의 자손요소에도 ㄱ이 포함된다고 봐야 할까요? .box div {} ->스페이스로 자손관계이니 자손관계가 2개포함이라면 ㄱ,ㄴ 적용은 이해가는데요. .box > div div {} ->div 밑에 div를 말하는 건 알겠는데요. div div 사이에 스페이스라서 자손관계이지않나 헷갈립니다. 제가 혹시 태그의 상하(부모자식) 관계 표시와 클래스 상하관계 표시를 혼동하는 걸까요? ------------------------------------------------------------------------------------------- 두 개의 div가 동일한 패딩값에도 서로 위치가 차이나는 것이 이해되지 않아 숫자를 넣어보았는데요. 저는 동일한 위치와 값의 div라고 생각했는데요. 이렇게 div가 위 아래로 다른 건지 모르겠습니다.
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
비주얼 스튜디오 코드에서 브라우저를 구글로 연결하는법
항상 좋은 강의 잘 듣고 있습니다. 비주얼 스튜디오 코드에서 live server 실행을 하면 ms 엣지로 연결이 됩니다.구글 브라우저로 연결할수 있는 방법을 알려주셨으면 합니다^^
- 해결됨HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
section안의 div 사용
영상 ~5:48 시청중 질문 드립니다. <section> <div class="login"> <div class="login-type"> </div> <div class="login-footer"> </div> </div> </section> <section>안에 .login 안의 .login-type과 .login-footer로 div태그가 사용이 되었는데요. .login없이 바로 <section>안에 .login-type과 .login-footer을 사용하면 무슨 차이가 있나요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
포지션 완벽하게 3편 소리가 너무작아요
■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
홈페이지 접속시 팝업처럼 뜨는 모달은 어떻게 하는 건가요?
연습해보다가 궁금한 점이 생겨서 질문드립니다. 모달창은 꼭 버튼이 필요한가요? 버튼 같은 것이 아닌 페이지 자체에 접속했을때 팝업창이 모달창 같이 깔끔하게 뜨는 것도 있던데 그런건 어떻게 구현하는건가요? 아니면 그런건 그냥 팝업창인가요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
div 크기에 따라 background 사이즈
선생님 질문이 있습니다. div태그에 background를 넣었는데 div가 줄어들때 그 비율만큼 줄어들도록 제작을 하고 싶은데 어떻게 하면 좋을까요? vw vh 퍼센트 등등 제가 아는 선에서 다 해봤는데 브라우저 창이 작아지면 그 비율을 못따라가네요. <!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"> <title>Document</title> <style> *{ margin: 0; padding: 0; box-sizing: border-box; } .wrap{ border: 1px solid blue; width: 50%; overflow: hidden; } .slot{ float: left; margin: 0; border: 1px solid #000; } .slot1{ background: url(images/machine_icon.png) repeat-y; width: 33.3333%; height: 200px; /* animation: rotate 5s infinite; */ } .slot2{ background: url(images/machine_icon.png) repeat-y; width: 33.33333%; height: 200px; /* animation: rotate 5s 1s infinite; */ } .slot3{ background: url(images/machine_icon.png) repeat-y; width: 33.3333%; height: 200px; /* animation: rotate 5s 2s infinite; */ } .slot3{} @keyframes rotate { 0%{ background-position: 0; } 100%{ background-position: 0 800px; } } </style> </head> <body> <div class="wrap"> <div class="slot slot1"></div> <div class="slot slot2"></div> <div class="slot slot3"></div> </div> </body> </html>
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
CSS 태그 오류
안녕하세요, 선생님. 강의 잘 듣고 있는데 VS 로 CSS 링크시 저렇게 노란색 글씨로 제대로 적용이 안 됩니다ㅠ html이랑 연결은 잘 되어있는거 같은데 (html에서 css주소 ctrl 클릭시 해당 파일 열림) 뭐가 문제일까요....??! style.css 파일명 옆에 2 이렇게 뜬 곳에 마우스 호버시 이 파일에 문제가 있다고 뜨긴하는데.. 어떻게 고쳐야 할까요 진도를 못 나가고 있네요 ㅠㅠㅠ d
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
line-height를 height와 동일하게 하면 왜 중앙으로 가는지 이해가 안됩니다..
5:36 부터 line-height에 대해서 말씀하시는데요 box라는 텍스트가 요소의 정중앙에 오게 하려면 line-height와 height값이 동일하면 된다고 하셨는데 이 부분이 잘 이해가 되질 않습니다.. 블록 레벨 요소에서 line-height는 어디부터 어디인건가요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
nth-child내용은 이해는 가지만
nth-child(1)이 h1을 의미하는거라고 하니까 그렇다고 받아들이겠지만 실제로 코드자체가 .item:nth-child 이렇게 앞에 .item이라고 클래스이름까지 명시해주고 nth-child를 해줬는데 즉, .item클래스 가진애들중에 nth-child라고 바로 인식이 되는데 h1은 class="item"이라고 존재하지도 않는데 어떻게 첫번째로 인식을 하는 메커니즘을 갖는지 조금 이해가 안되긴 하네요.
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
animation transition
선생님 여쭤볼게 있어서 글을 남기게 되었습니다. 큰 테두리를 div라고 했을때 overflow: hidden을 준 다음 이미지에다가도 animation속성을 줘서 y축을 변경해 슬롯머신처럼 작업을 해보고 싶습니다. 만약 이미지가 3개가 저렇게 있다는 가정하에 한쪽방향으로 쭉 돌아가도록 하고 싶은데 이미지가 3개라 한쪽방향으로 전환하면 3개가 끝이라 연속적인 느낌이 안들어서 고민하다가 선생님께 조언을 듣고 싶습니다. 감사합니다. <div class="wrap"> <img src=""> <img src=""> <img src=""> </div> --wrap
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
강사님 질문 하나 더 있습니다!
강사님 텝 메뉴 콘텐츠 강의 공부중 질문있는데요 밑에 content 클래스에 img태그들에 각각 div로 감싸주는 이유를 알수 있을까요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
탭메뉴 콘텐츠 질문있습니다.
강사님 안녕하세요~ 탭메뉴 콘텐츠 만들때 강사님이 라디오 버튼 name은 동일한 이름을 주라고 하셨는데 라디오버튼으로 탭메뉴만들때 갯수상관없이 무조건 라디오 버튼 name에 동일하게 이름을 주면 되는건가요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
body의 높이값
지금까지 강의듣는동안 body의 높이값이 있다는건 첨들은것 같습니다. body는 단순하게 그냥 빈 화면 전체가 body라고 생각했는데....body높이값이 잇었다는게 금시초문인것 같습니다. 그래서 말씀하신 gradient 90도 돌린거랑 180도 돌린거랑 다르게 나오는것또한 전혀 이해가 안가네요...어떻게 생긴모양을 돌렸다는건지..감이 안잡히네요 ~~중요한 부분이라고 하시는데 ㅠㅠ body의 높이값을 주라는데..여태 한번도 줘본적도 못봤고... 갑자기 나오니 이해력이 떨어집니다. ㅠ 90을 줄때 높이값 안주는거랑 180일때 높이값주는거랑 계속반복해서 들어도 모르겠네요 ㅠ
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
수평, 수직 중앙정렬position에서
선생님께서는 div class="container" 에서 속성을 position:absolute를 주시고 top, left 등 중앙에 맞게 속성을 넣어주셨는데 absolute할때 그 parent에 position:relative 주는거 아닌지요? 그럼 body밖에 없는데 body는 원래 안넣어도 되는건지 궁금합니다. 그리고 또한가지는 div를 하나만 써도 될것 같은데 굳이 div 안에 div를 하나를 더 쓰셨는데..이유가 있을거라 생각하는데요? 그리고 tranlate가 왜 40, -40px인지 좀 이해가 안갑니다. 입체적으로 보이지만 평면이고 위로 올라가는 모습즉,x값은 안변하고 y값만 바뀔것 같은데요..