46,200원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
width: 100%
28분 40초에 .content가 position: absolute 때문에 인라인 블럭이 되었으니 width:100%를 넣어주세요. 라고 적혀있는데 넣으나 안넣으나 차이가 없는데 어떤 부분때문에 넣어주시라고 한거에요??
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
확장선택자 실전 한번더 질문드립니다
질문 이어서 하나 더 남깁니다! 완성은 했는데 <div class="slide"> <div class="slide-inner"> <div> <img src="images/01.jpg"> <div class="des"> <h2>몽블랑<span>Mont Blanc</span></h2> <p> 생긴 모습이 마치 산에 눈 내린 모습 같이 보여서 붙은 이름이다. 원래는 흰 생크림을 올린 케이크 였는데 보존 문제로 밤크림을 많이 쓰다가 지금의 형태가 되었다. 위에 흰 슈가 파우더라도 뿌려서 이름값을 하기는 한다. 빵집에서 자주 볼 수 있는 둥글고 가운데가 뾰족하게 올라온 페스트리 빵도 이름이 몽블랑인데, 이름의 유래만 똑같고 완전히 다르다. </p> </div> </div> (중략) </div> </div> 이렇게 있을때 css는 .slide { height: inherit; width: inherit; position: relative; margin: 0 auto; overflow: hidden; } .slide-inner { width: 2100px; height: inherit; position: absolute; left: 0; transition: 0.5s; } .des { position: absolute; top: 0; width: 200px; text-align: left; } .slide-inner div { float: left; width: 700px; height: 100%; color: black; box-sizing: border-box; padding: 40px; } .slide-inner div h2 { font-family: 'Jua', sans-serif; font-weight: normal; } .slide-inner div span { display: block; font-size: 16px; } .slide-inner div p { font-family: 'Nanum Myeongjo', serif; line-height: 1.5em; width: 300px; } .slide-inner div img { float: right; transform: translateY(50%); width: 200px; height: 200px; border-radius: 50%; margin: 0 30px 24px 0; } 이렇게 했거든요 .des 를 새로 추가해서 포지션을 줬는데 .slide-inner div 에서 움직여야 하는거 아닐까요ㅠㅠ 저거는 .slider-inner에서 움직여서 제대로 위치조정이 되더라고요. .slider-inner div { position: relative; } 주면은 이렇게 되더라고요
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
폰트어썸을 사용한 입력필드
name tel email 등을 인풋에 적고 옆에 폰트어썸을 활요해서 아이콘을 나타내는 강의를 들었습니다. input에 height:40px주고 padding 20px 주었습니다. 아이콘에도 height40px줬는데근데 아이콘 밑에 조금 공백이 생깁니다. 왜그런지 봤더니 강의에서는 padding을 10px주었지만 저는 20px을 줬기에 10px로 바꿨더니 같아졌습니다. 근데 생각해보면 box-sizing : border-box 를 주면 padding을 늘려도 height도 40px 이상 안늘어나야하는거 아닌가요? width는 그대로인데 height는 늘어나네요
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
강의순서
선생님 제가 지금 필수이론까지 수업을 들은다음에 다음 섹션인 실전 part1을 듣는데 이해가 안되고 처음보는 느낌을 받는데 복습한 다음에 실전part1을 다시 들어야하는건가요? 갑자기 난이도가 확 올라 당황해서 글을 남기게 되었습니다.
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
키프레임실전퍼블리싱3 CSS code error check!
좋은 강의 감사드립니다. 키프레임 실전 퍼블리싱 3편 CSS에서 circle rotation 이 잘 안되서 코드를 올립니다.어디가 잘못됬는지 한번 봐 주시면 합니다. 감사합니다. <!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>더블보더 애니메이셩 만들기</title> <link rel="stylesheet" href="keyframe_ani.css"> </head> <body> <div class="square"> <span></span> <span></span> <span></span> </div> </body> </html> @import url('https://fonts.googleapis.com/css? family=Raleway&display=swap'); body{ font-family: 'Raleway', sans-serif; line-height: 1.5rem; margin: 0; font-weight: 300; background-color: #333; display: flex; justify-content: center; align-items: center; height: 100vh; } a { text-decoration: none; } .square { width: 400px; height: 400px; position: relative; } .square span { position: absolute; width: 100%; height: 100%; border: 1px solid #fff; border-radius:40% 60% 65% 30% / 40% 60% 68% 35%; transition:0.5s; } .square:hover span { background-color: crimson; border: none; } .square span:nth-child(1) { animation: cicle 5s linear infinite; } .square span:nth-child(2) { animation: cicle 4s linear infinite; animation-direction: reverse ; } .square span:nth-child(3) { animation: cicle 8s linear infinite; } .square:hover span:nth-child(1){ opacity: 0.3; } .square:hover span:nth-child(2){ opacity: 0.6; } .square:hover span:nth-child(3){ opacity: 0.8; }@keyframes circle { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
크롬에서 작동을 안하는고 다른곳에선 작동이 되요
작동을 안 하길래 여줘볼려고 fiddle 사이트에 코드 옮기고 있는데 보니까, 작동이 잘 되고 있었어요. 요근래 자꾸 크롬에서 열면 작동을 안하고, fiddle 에서 열면 작동이 잘 되는데 이유를 모르겠습니다. 제이쿼리 cdn 문제인가해서 버전을 낮춰보기도 했는데 도 해결이 안되네요.. https://jsfiddle.net/Tamia/18hzemvx/4/ 이런경우 어떻게 해야하나요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
inline 태그 요소가 넘치는거에 관해 질문드립니다
위 두사진을보면 하나는 a태그를 넓이값을 주지 않고 paddng값으로만 크기를 잡아준것과, inline-block을 주어 직접적으로 넓이값도 주고 padding 값을 준것인데요. 왜 전자는 요소가 넘치는데 후자는 요소가 안넘치는건가요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
확장선택자와 함께 가상클래스 checked 실전 퍼블리싱 07(Testimonial 탭 슬라이더) 응용해서 하고있습니다.
응용해서 다른내용으로 하는 와중에 텍스트가 안보이더라고요..? 위에 있는데 그냥 형체가 사라집니다 왜그런걸까요..? <!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>순수 css 슬라이드 박스 응용-디저트</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="inner"> <input type="radio" name="tabmenu" id="tab1"> <input type="radio" name="tabmenu" id="tab2"> <input type="radio" name="tabmenu" id="tab3"> <div class="slide"> <div class="slide-inner"> <div> <img src="images/01.jpg"> <h2>몽블랑<span>Mont Blanc</span></h2> <p> 생긴 모습이 마치 산에 눈 내린 모습 같이 보여서 붙은 이름이다. 원래는 흰 생크림을 올린 케이크 였는데 보존 문제로 밤크림을 많이 쓰다가 지금의 형태가 되었다. 위에 흰 슈가 파우더라도 뿌려서 이름값을 하기는 한다. 빵집에서 자주 볼 수 있는 둥글고 가운데가 뾰족하게 올라온 페스트리 빵도 이름이 몽블랑인데, 이름의 유래만 똑같고 완전히 다르다. </p> </div> <div> <img src="images/02.jpg"> </div> <div> <img src="images/03.jpg"> </div> </div> </div> <div class="btn"> <label for="tab1"></label> <label for="tab2"></label> <label for="tab3"></label> </div> </div> </body> </html>
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
커리큘럼에 관해서 궁금합니다.
html css 단계까지 수업을 듣고 jqeury를 듣기전에 궁금해서 글을 남기게 되었습니다. 주변에서 javascript를 먼저 공부한 다음에 jquery를 공부하라는데 선생님 수업을 계속 듣던지 아니면 javascript를 공부한 다음에 jqeury를 공부해야하는지 궁금합니다.
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
라디오버튼과 체크박스를 커스텀 체크박스 질문입니다
여기서 이전 버튼박스랑달리 form 태그를 사용하셨던데 특별한 이유가 있는건가요? 아니면 그냥 쓰신건가요. <form action=""> <input type="checkbox" id="chk1"> <label for="chk1">HTML</label> <input type="checkbox" id="chk2"> <label for="chk2">HTML</label> <input type="checkbox" id="chk3"> <label for="chk3">HTML</label> <input type="checkbox" id="chk4"> <label for="chk4">HTML</label> </form>
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
div 아래 img 공백
선생님 안녕하세요 div 아래 img태그를 넣었을 때 div태그에 이미지 크기보다 큰 공백이 생겨버립니다. 이럴경우 어떻게 해결해야할까요? img태그에 float:left 를 주면 딱 맞춰지는데 float를 줘도 괜찮을까요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
뷰포트가 작아지면
브라우저의 창 크기를 줄이면 border가 괴상해지는데요 이를 방지하는 방법이 있을까요? ㅠㅠ
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
이 강의를 통해 공부한 내용을 블로그에 올려도 될까요?
이 강의를 통해 공부를 한 내용 코드 같은거 하나하나 설명 해주면서 결과값을 보여주는 형식으로 블로그 글을 작성할려고 하는데 괜찮나요 전체적인 소스코드는 공개하지 않을 예정입니다 그대로 올리진 않고 약간의 제 방식대로 올릴 예정입니다
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
before after 가상클래스 활용한 실전 퍼블리싱 04 질문입니다
17분에서 들어보면 위아래 패딩값을 둘다 10를 줬는데도 불구하고 아래패딩이 더 주어져서 아래 패딩값을 따로 뺐는데요. 여기서 보면 인라인 블럭을 했기 때문에 안맞아서 그렇다고 설명하셨습니다. 여기서 이해가 안가서 그러는데 좀 자세히 설명해주실 수 있을까요?. .gnb a {margin:0;paddin:0}을 해도 처리가 안먹히네요. 왜 안맞는건지 잘 모르겠습니다.
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
vw 와 % 중 유동적인 반응형에 적합한 건 무엇일까요?
삭제된 글입니다
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
[Part 02] like 버튼 질문입니다
[Part 02] 쇼핑몰 아이템 UI 호버 이펙트 - 세부 HTML 작성 및 상세 CSS 디자인 31분에서 .like에 왜 굳이 가상클래스 before을 쓴건가요?. 그냥 .like에 전부 css를 작성해도 되지 않나요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
img 에 hover 효과를 왜 줄 수 없나요??
.item 이 아니라 그 안에 있는 img 에 직접 hover 효과를 주면 작동을 안하던데 왜 안하는지 알고싶어요~ '이미지에 마우스 올리면' 인데 실제로는 이미지에 호버효과를 주면 작동하질 않는게 의아합니다. 혹시 원래는 작동되는데 제가 코딩 틀리게해서 안되는건가하는 생각도 들구요. .item img:hover .detail { bottom: -50%; }
- 해결됨HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
확장선택자와 함께 가상클래스 checked 실전 퍼블리싱 06(탭 콘텐츠 - Slide) 질문
질문 디게 많네요.... 오래전에 해서 대부분 까먹었어요 원래 도저히 모르면 그냥 강의보면서 새로 만드는데 왜 안되는지 궁금해가지고 남깁니다.. html은 강사님과 똑같고요 구조는. css에서 문제가 있는거 같은데 왜 두번째 버튼을 누르면 세번째도 선택되고 세번째 버튼을 누르면 버튼 불은 안들어오는데 첫번째 슬라이드로 가지네요ㅠㅠ body { margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; } .inner { width: 100%; height: 340px; position: relative; text-align: center; } input[name=tabmenu] { display: none; } .slide { position: relative; width: 300px; height: 300px; margin: 0 auto; overflow: hidden; } .slide-inner { position: absolute; top: 0; left: 0; width: 900px; font-size: 0; transition: 0.5s; } a { width: 300px; height: 300px; background-color: rgba(128, 128, 128, 0.24); display: inline-block; } .slide-inner a:nth-of-type(2) { background-color: pink; } .slide-inner a:nth-of-type(3) { background-color: purple; } input[id=tab1]:checked ~ .btn label[for=tab1], input[id=tab2]:checked ~ .btn label[for=tab2], input[id=tab2]:checked ~ .btn label[for=tab3] { background: crimson; } input[id=tab1]:checked ~ .slide .slide-inner { left: 0; } input[id=tab2]:checked ~ .slide .slide-inner { left: -300px; } input[id=tab3]:checked ~ .sldie .slide-inner { left: -600px; } .btn label { display: inline-block; width: 20px; height: 20px; background-color: lightgray; cursor: pointer; margin-top: 20px; border-radius: 50%; }
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
position3
안녕하세요 박스가 .parent { width: 200px; height: 100px; border: 3px solid red; box-sizing:border-box; } 일 때, 개발자도구에서 parent 박스가 보더를 제외한 값이 200/100 px로 지정됩니다. box-sizing:border-box를 지정했음에도 왜 보더를 제외한 영역이 지정되는 건가요 ?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
overflow:hidden 속성에 대해 질문합니다
24.Pure CSS 콘텐츠 슬라이더 프로토타입 01 (풀스크린 탭 콘텐츠 슬라이더 프로토타입) 13분을 들으면 포지션값을 줘서 부모요소인 tabs가 높이값을 못잡아웠다고 설명하셨는데요. 한 초반강의를 보면 float:left의 경우 높이값을 못잡을때 부모요소에 oveflow:hidden값을 주면 높이값이 잡아졌는데. 포지션 앱솔루트는 예외인가요?