46,200원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결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; 속성을 지우셨기에 혼돈이 와 질문드립니다. 언제 쓰이고 언제 쓰이지 않는지 알려주시면 감사하겠습니다.^^
- 해결됨HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
질문입니다!
1. float left를 하면 가로배치 되는거 다시 한번 설명 부탁드려도 될까요 듣다보니 이 부분은 잘 기억이 나지 않네요 ㅠ 2. 그냥 따라하다가 문득 이번에 궁금해진 내용입니다! 이 부분은 형제 선택자를 지우면 동작을 안하는데 css에서 .클래스명 만 해주면 해당 클래스명을 가진 엘리멘트를 찾아서 스타일링을 해주는게 아니었나보네요. 클래스명을 줬는데도 왜 인식을 못하는지 왜 형제선택자를 줘야만 인식하는지 원리가 궁금합니다!
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
질문입니다.
선생님 안녕하세요 css에 square div 에서 position: absolute; 를 두번 쓰는 것에 대해 질문이 있습니다. 하나를 지워도 지장이 없는데, 왜 두 번 을 쓰는건지에 대해서 헷갈려서 질문드려요 ~!
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
제이쿼리 관련 질문입니다!
선생님 안녕하세요. 강의 잘 듣고 공부하던 중 모르는게 생겨서 질문 남깁니다. 제이쿼리 구문 $() 여기 안에 클래스이름과 변수를 함께쓰려면 어떻게 해야하나요? 예를 들어서 클래스는 .gnb이고 변수는 tab이라고하면 , gnb와 '#'+tab 이 두가지를 같이 $()이 안에 넣는 방법이 궁금합니다.!
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
keyframe 실행이 안 됩니다 ㅠㅠ
. 매번 친절한 답변 감사드립니다. 1. 코드를 실행하면 로딩이 느리게 되고, 화면이 뜨면 상자가 돌지 않고 그냥 네모 상태로 색이 바뀝니다.. 코드가 어디가 틀린 걸까요? ㅠㅠ keyframe loading 쪽 문제인 거 같기도 하네요.. 2. 다음 강의 분에서도 코드를 그대로 친 거 같은데도 오류가 생기고(보더 박스가 아주 작게 나올 뿐더러 만들어지지가 않네요..) 로딩이 걸리면서 뜨네요 .ㅠ 어디가 문제인지 알려주시면 감사하겠습니다.
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
transition
안녕하세요 :) ' 탭 메뉴 콘텐츠(스타일01) with JQUERY '강의에서 이미지를 선택할 때마다 바뀌는 부분 중 testimonial부분에도 transition을 주고 싶은데 .testimonial{} / .testimonial .content{} / .testimonial .content.active{} 이 중 어디에 줘도 작동을 안하더라구요. transition을 어디에 줘야 작동될까요??
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
제이쿼리 sibling 관련 질문 드립니다
. 이전 질문은 잘 해결되었습니다..감사합니다! 그런데 j query 마지막 강의에서 sibilng 파트 부분 코드를 똑같이 따라친 것 같은데도 클릭하면 하얀색으로 바뀌지 않네요 ㅠ 어디가 틀렸는지 알려주시면 감사드리겠습니다..
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
$ is not defined 오류 왜 그런 걸까요? ㅜㅜ
계속 빨간 x 표시가 뜨고 실행되지 않아서 진척이 안 되고 있네요 ㅠㅠ
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
부모요소, 자식요소 상속 관련 질문있습니다.
아래의 코드 중에서 <div class="app-ui"> 에 position:absolute; 를 명령하면 저 태그의 자손,자식요소에다 그 명령이 상속되나요? 저는 상속될줄알고 absolute 를 이미지의 부모 요소에 적용하는거라고 생각했었거든요. 공부하다보면, 부모요소에 명령한것이 자손,자식에게 까지 상속되고, 어떨때는 어떨대는 안되는거같아서 헷갈려요 <div class="conatainer"> <div class="app-ui"> <img src="../img/app-ui-01.jpg" alt=""> <img src="../img/app-ui-02.jpg" alt=""> <img src="../img/app-ui-03.jpg" alt=""> <img src="../img/app-ui-04.jpg" alt=""> </div> </div>
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
gnb 영역 관련 질문있습니다.
block 이 되면 오른쪽에 안 보이는 영역 까지, 한 줄에 하나씩이라고 알고있는데요, gnb가 block 으로 바꼈는데 왜 gnb 영역이 수업화면에서는 그렇지가 않아서 의아합니다. gnb 가 블럭요소가 됐는데 왜 inline 영역만큼의 영역을 가지고 있나요??
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
폰트 사이즈를 i에 줬더니 원안에 폰트가 위에 올라갑니다
안녕하세요 선생님 Sns 아이콘 애니메이션 강의를 듣다보니 궁금한게 생겨서 올립니다. 이 강의에서 a에 폰트사이즈랑 line-height를 주셨는데 제가 혼자 다시 해보는 과정에서 저는 i에 폰트 사이즈를 주고 a에 line-height를 줬는데 원안에 정가운데로 안가고 위에 올라가 있더라고요 왜 그런지 궁금합니다! 1.a에 line-height를 주고 i.fab에 폰트사이즈를 줬을때 2.a에 line-height와 폰트사이즈를 줬을때
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
li(이미지) 전부를 흑백으로 하고 hover하면 색 이 들어가도록
취향상 수업내용과 반대로 해보았는데 li에 전부 흑백을 주면 프레임이 느려지네요,, 왜이런 현상이 생길까요 그리고 크로스브라우징을 고려해서 filter 속성을 거의 사용하지 않는다 하셨는데 그럼 필터효과를 주려면 주로 어떤 다른속성을 사용해야하나요?? 아래에 중복된 코드이미지가 안사라지네요ㅜ 위에꺼만 봐주세요 .gallery{ display: flex; height: 100vh; } .gallery li{ border-right: 5px solid black; flex: 1; transition: 0.5s; filter: grayscale(1); } .gallery li:last-child{ border-right: none; } .gallery li:nth-child(1){ background: url(../images/artistic-image-01.jpg) no-repeat center center; } .gallery li:nth-child(2){ background: url(../images/artistic-image-02.jpg) no-repeat center center; } .gallery li:nth-child(3){ background: url(../images/artistic-image-03.jpg) no-repeat center center; } .gallery li:nth-child(4){ background: url(../images/artistic-image-04.jpg) no-repeat center center; } .gallery li:nth-child(5){ background: url(../images/artistic-image-05.jpg) no-repeat center center; } .gallery li:hover{ flex: 3; filter: grayscale(0); } /* Google Web Font */ @import url('https://fonts.googleapis.com/css?family=Raleway&display=swap'); /* Fontawesome 4.7 */ @import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); body{ line-height: 1.5em; font-family: 'Arial'; font-weight: 500; margin: 0; padding: 0; font-family: 'Raleway', sans-serif; } ul, li{ padding: 0; margin: 0; list-style: none; } a{ text-decoration: none; color: inherit; } .gallery{ display: flex; height: 100vh; } .gallery li{ border-right: 5px solid black; flex: 1; transition: 0.5s; filter: grayscale(1); } .gallery li:last-child{ border-right: none; } .gallery li:nth-child(1){ background: url(../images/artistic-image-01.jpg) no-repeat center center; } .gallery li:nth-child(2){ background: url(../images/artistic-image-02.jpg) no-repeat center center; } .gallery li:nth-child(3){ background: url(../images/artistic-image-03.jpg) no-repeat center center; } .gallery li:nth-child(4){ background: url(../images/artistic-image-04.jpg) no-repeat center center; } .gallery li:nth-child(5){ background: url(../images/artistic-image-05.jpg) no-repeat center center; } .gallery li:hover{ flex: 3; filter: grayscale(0); }
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
각 slide가 display:block 될 때 질문
각 .slide가 radio 버튼을 누를 때 마다 각 버튼에 맞게 이미지가 보여지는데, 처음에 이미지는 세로로 길게 늘어뜨려져있는데 어떻게 이미지가 보이게 되는건가요? 예를 들어 slide2의 img 같은 경우는 slide1의 img 보다 밑에 위치해있는데 버튼을 누르면 위치가 위로 올라와져서 보이게 되는건가요?ㅠㅠ
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
홈페이지 크기를 줄이니까 중간에 Slide Content 글자가 겹쳐져요
홈페이지 크기를 줄이다보니 중간에 Slide Content 글자가 겹쳐지는데 그거는 어떻게 해야 안겹쳐지게 할 수 있나요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
구글 웹폰트
안녕하세요 선생님 강의 초반에 Google web Font 하고 @important url(도메인주소) 가 있는데 이건 무슨 뜻인가요? 안배우운 부분인거같아서 여쭤봅니다 !
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
body에 flex를 주면(?) hover 기능이...
화면 중앙정렬을 할 때 저는 position이 아닌, body에 flex 를 넣는 방법을 이용하였는데요, 완성본을 만져보던 도중 a태그버튼을 건드리려 커서를 내리는 순간 .back 구간?에서 자꾸 hover 가 풀려요ㅠ position 을 이용해서 중앙정렬을 다시 했더니 잘 작동되는데 왜이럴까요..? body{ line-height: 1.5em; background-color: #222; font-family: 'Arial'; font-weight: 300; margin: 0; color: white; font-size: 15px; display: flex; justify-content: center; align-items: center; height: 100vh; } a{ text-decoration: none; color: inherit; } .items{ display: flex; width: 1300px; /* border: 1px solid rgb(79, 93, 211); */ justify-content:center; text-align: center; /* position: absolute; top: 50%; transform: translateY(-50%); */ } .item{ width: 300px; height: 200px; margin: 15px; /* border: 1px solid; */ /* display: inline-block; */ position: relative; } .front{ height: inherit; /* border: 1px solid red; */ background-color: #333; width: 100%; } .item:hover .front img{ animation: ani 0.8s infinite; } .front h2{ margin-top: 0px; } .front, .back{ position: absolute; transition: 0.4s; top:0; } .back{ background-color: #fff; color: black; height: inherit; /* border: 1px solid; */ box-sizing: border-box; padding: 20px; z-index:-1; opacity: 0; } .back p{ margin-top: 5px; } .back a{ background-color: yellowgreen; padding: 5px 15px; border-radius: 20px; color: white; transition: 0.3s; } .back a:hover{ background-color: rgb(119, 159, 39); } .item:hover .front{ top: -50%; } .item:hover .back{ top: 50%; opacity:1; } @keyframes ani{ 50%{ transform:scale(1.2); } }
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
실제 작동시 질문입니다.
안녕하세요 선생님, 제이쿼리 들어와서 헷갈리는 부분이 많아서 질문남깁니다. 1. jquery를 수업내용과 같이 작성하였을때 a tag에 마우스를 올리지 않더라도 a tag 보다 넓은 실제 li 영역에 마우스를 올리면 배경은 바뀌지만 a에 적용한 hover 효과는 작동하지 않았습니다. -> 이경우에 a에 길어져도 attr을 부여하거나 jquery에 parent()를 추가해야 호버와 함께 작동할 것 같은데 맞나요? ㅠㅠ 2. 해당예제를 한글로 변환해서 만들려고 하다가 궁금한 부분이 생겼습니다. a:before에 width 값을 0으로 주고, overflow를 주기전에 영문은 예제처럼 제자리에 있는 반면, 한글은 수직아래로 떨어집니다. 이때, heigh 값을 100%로 주고 overflow를 hidden 할 경우에 영문과 비슷하게 작동하지만 마지막 글자에서 부자연스럽게 채워지게 되는데 한글 메뉴로 구성했을때 다른 해결방법이 있는지 궁금합니다.
- HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
서브메뉴위에 간격이 생겨요
삭제된 글입니다
- 해결됨HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
커스텀 체크박스 질문입니다.
안녕하세요. 선생님 강의 잘 보고있습니다. 다름이 아니라, 폰트어썸과 before로 구현하는 이번 강좌처럼 전강좌에서 em을 label:before 로 처리해도 같은 결과값을 얻을 수 있는데 혹시 em tag를 써야할때와 :before로 써야하는 특별한 경우가 따로 있을까요?