46,200원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
p태그 수직중앙정렬
div class='back'부분의 p와 a태그를 div class='back'안에서 수직중앙정렬되게 하려면 어떻게 해야하는지 궁금합니다. 영상에서는 padding을 주시고 box-sizing:border-box;로 height:inherit(200px)안에서 벗어나지 못하도록 하셨는데 그 방법이 아닌 또 다른 방법으로 텍스트들이 한번에 수직중앙정렬되게 하는 방법은 없을까요? 왼쪽은 padding과 box-sizing으로 가운데로 보낸 경우, 오랜쪽은 padding이랑 box-sizing은 주석처리한 모양입니다. 제가 원하는 바입니다. padding이랑 box-sizing을 쓰지 않고 p태그와 padding이 들어간 a태그가 전부 div back안에서 div back의 가장 윗부분과 아랫부분에서 같은 거리에 위치하도록 하고 싶습니다. 아래는 제가 쓴 css입니당 아직 hover되는 건 안했습니다 @import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap'); body { font-family: 'Nanum Gothic', sans-serif; font-size: 13px; height: 100vh; display: flex; justify-content: center; align-items: center; margin: 0; background-color: #f4f4f4; } .items{ display: flex; flex-wrap: wrap; width: 800px; justify-content: space-evenly; } a{ text-decoration: none; color: black; } .item { width: 250px; height: 200px; text-align: center; border: 1px solid black; position: relative; } .front{ width: 100%; height: inherit; position: absolute; /* z-index: 1; */ } .front img{} .front h3{ margin: 0; padding: 0; } .back{ width: 100%; height: inherit; border: 1px solid red; line-height: 1.5em; position:absolute; padding-top: 20px; box-sizing: border-box; } .back p{ margin: 3px 8px; } .back a{ display: inline-block; margin-top: 10px; padding: 3px 8px; background-color: #bac8ff; border-radius: 3px; }
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
a태그 같은 위치에 정렬
영상을 먼저 보고 스스로 해보는 중인데 before가상요소로 부여한 부분이 은근이 줄이 안 맞는 것 같아서요. 영상에서도 다른 텍스트들에 비해 아래쪽으로 나와있는데 위 사진에서 아래쪽으로 튀어나온 부분이 다른 텍스트들과 마찬가지로 중앙부분에 올 수 있도록 하는 방법은 무엇인가요? 저 파란부분 튀어나온 게 a부분 위아래로 동일하게 튀어나오게 하고 싶어요 아래로만 튀어나오는 게 아니라. 아래는 제가 쓴 css코드입니다 @import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@1,300&display=swap'); @keyframes jelly{ from{} to{ transform: translateY(-50%); } } body { font-family: 'Raleway', sans-serif; font-size: 18px; color: white; height: 100vh; display: flex; justify-content: center; align-items: center; margin: 0; } .gnb{ } .gnb a{ text-decoration: none; color: black; } .gnb a::before{ display:inline-block; width: 25px; height: 25px; content: '06'; color: white; text-align: center; font-size: 15px; line-height: 25px; background-color: dodgerblue; border-radius: 50%; margin-right: 5px; } .gnb a::after{ content: 'updated 👀'; padding: 0px 5px; margin-left: 7px; background-color: red; color: white; border-radius: 3px; }
- 해결됨HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
FONTAWESOME IMPORT
영상에 나와있는 fontawesome import하는 링크는 구버전이라는데 현재도 그걸 사용하나요? 제 fontawsome의 kit link는 <script src="https://kit.fontawesome.com/5a9267112e.js" crossorigin="anonymous"></script> 인데 이걸 html에 넣어서 사용해도 되는건가요? 만약 영상의 링크가 구버전이라면 업데이트를 해주셔야 하는게 아닌가 싶네요 .. 적어도 설명란이라도요 왜 제 링크는 저렇게 안생겼는지 한참 헤맸습니다;,,
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
float을 꼭 배워야 할까요?
float을 하다가 flex를 하니까 너무 쉽고 간단한데 굳이 배워야 할까요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
img태그 사용 질문있습니다.
img 태그 여쭤볼게있는데요 img태그 img이미지에 마우스 올렸을때 hover효과나 transfomr scale 등등 효과를줄때 img 태그안에 div로 <div><img src="#"></div> 이런식으로 div로 감싸줘야되는건가요? div로 안묶는 단독 <img>태그랑 div로 묶어주는 <div><img src="#"></div>태그는 어떤차이인지 궁금합니다.
- 해결됨HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
keyframe만드실 때
keyframe을 처음봤는데 어찌저찌 구글링해서 이론은 가볍게 배워서 다시 보는 중입니다. 저는 keyframes부분을 이렇게 작성했는데, 선생님은 왜 0% 일 때 scale(.5) 50%일 때 scale(1.2) 100%일 때 다시 0.5로 돌아오게끔 하셨는지 궁금합니다. 제가 생각했던 건 애니메이션 진행률 0%일 때 크기가 작았다가 100%일 때 본래 크기로 돌아오는 거라서 0%일 때 scale 0.5(0이면 너무 과하게 작아져서 0.5정도가 적당하더라고요), 100%일 때 1로 적용을 했는데 선생님처럼 하면 0%, 100%일 때 중간크기로 돌아오고 50%일 때 가장 큰 것 아닌가요? 만약 direction을 alternate로 적용한 경우에 저처럼 해도 문제가 되지 않을까요?(결과물은 똑같이?비슷하게?나옵니다) 선생님은 alternate를 지정하지 않으셔서 0%가 시작 50%가 끝 100%가 다시 시작으로 돌아오는 느낌으로 코드를 작성하신 걸까요?.. 아래 제 css전체 코드도 올립니다! @keyframes loading{ 0% { opacity: 0; transform: scale(.5); } 50% { opacity: 50%; } 100% { opacity: 100%; transform: scale(1); } } body{ height: 100vh; text-align: center; display: flex; justify-content: center; align-items: center; } .loading span{ width: 50px; height: 50px; display: inline-block; border-radius: 100%; margin: 2px; animation: loading .5s linear infinite alternate; } .loading span:nth-child(1){ background-color: pink; animation-delay: 0s; } .loading span:nth-child(2){ background-color: rgba(103, 184, 255, 0.753); animation-delay: .3s; } .loading span:nth-child(3){ background-color: rgba(104, 255, 177, 0.842); animation-delay: .5s; }
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
화면 레이아웃 이후 iframe여부관련
애초에 이 강의를 시작했던 목적이였구요. 이강의쯔음에 문의드려야 할것 같습니다. 보통 저는 일반적인 상단 그리고 왼쪽,또는 오른쪽 메뉴바 그리고 가운테 컨텐츠 화면 밑에 푸터 이런 기본적인 화면을 만들고 싶었습니다. 이걸 할려면 header태그로 상단 메뉴만들고 아래는 가령 section이라는 태크내에서 왼쪽 메뉴div 오른쪽 컨텐츠 내용나오는 div를 만들텐데...컨텐츠 내용이 왼쪽 메뉴누를때마다 바뀌어야 하는데 (왼쪽메뉴는 이제 css강의를 쭉 배웠으니 들어갔다 나왔다 하던지 만들게 될텐데요 왼쪽 메뉴를 클릭했을때 그 메뉴에 대한 컨텐츠 화면이 가운데에서만 변해야 할텐데요 위쪽 gnb메뉴는 변할필요가 없을것 같구요..)이럴때 오른쪽 컨텐츠내용에 해당되는 div안에서 iframe을 사용해서 호출하는건가요? 일반적으로 또는 실무에서 어떻게 하는지 궁금합니다.
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
dropdown 메뉴와 차이점
앞전 강의에서 마우스 오버했을때 서브 메뉴들이 display 되면서 나오는 강좌가 있었는데 그건 jquery가 안들어가도 됐는데.... 그거와 차이점은 스크립트함수가 있는 slideDown을 쓸수있느냐 없느냐 차이인건가요? 그래서 좀더 부드럽게 나오게 하는차이인가요? jquery안쓰고는 slidedown효과를 줄수없는거죠?css만 가지고는요.?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
블릿아이콘 회전부분이 좀 이해가안가
.title:before { position: absolute; content:'\f105'; font-family: fontawesome; right:10px; top:7px; transition: 0.3s; } .title.active:before { transform: rotate(90deg); color: orange; } 저는 before가상클래스에 넣었는데요 그 가상클래스에 속하는 content를 90도 회전시킨다는 의미라는건 알겠는데 .title:before 가상클래스와 .title.active:before 가상클래스는 content부분을 따로 선언해주지 않고도 기준이 되는 content가 .title:before가 기준이면서 .active라는 클래스가 추가됐을경우를 의미하는건가요? 잘 작동되는거 보면 의미는 받아들이겠지만.... .active 가 없는 클래스의 가상클래스가 기준이 되고 거기에 transition을 넣는게 헷갈리긴 합니다.^^;;;
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
강의 4분 14초경 질문입니다!
안녕하세요 선생님! 강의 4분 14초 부분, position에 대해 검색해도 잘 모르겠어서 질문 드립니다. relative 자체가 top이나 left 등 위치값을 못 갖는 것이 아닌데 왜 relative면 작동하지 않고 absolute로 바꿨을 때 작동하는지, label의 relative를 그대로 두고, absolute가 있는 label 밑의 공통된 span에 right: 0 등 위치값을 주는 게 맞지 않나? 라고 생각했는데 왜 이렇게는 작동하지 않는 지 궁금합니다.ㅠㅡㅠ 그리고 이런 것들이 헷갈리는 것은 이론 부족인걸까요?? 이론을 다시 확실하게 공부하고 오는 게 맞는지, 아니면 경험부족이라 강의를 여러번 반복학습하는게 좋을지에 대해서도 여쭙고 싶습니다. 강의를 듣고 따라하는것엔 문제가 없는데, 3회독 한답시고 혼자서 백지에서부터 결과물을 보고 만들려고 하면 너무 많이 좌충우돌 하네요.ㅠㅠ
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
padding 중복사용
안녕하세요! 강의 잘 보고 있습니다~!! 아래와 같이 <가상클래스 before after 가상클래스 활용한 실전 퍼블리싱 02> 해당 영상에서 padding 이 3번이나 사용되어 있습니다. 전에 영상에서 같은 속성을 중복해서 쓰면 마지막꺼에로 통합된다고 하셨는데, 어떻게 이해하면 좋을까요?ㅜㅜ .gnb { list-style: none; padding: 0; padding: 0; width: 600px; background-color: #fff; border-radius: 10px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); padding: 50px 30px; display: flex; }
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
탭 슬라이더
■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다. 선생님, 탭 슬라이더를 포트폴리오로 응용할 때 여러 개의 탭버튼 안에 슬라이더를 넣어 구현하려고 하는데요. input과 slick.js 로 응용해서 첫 번째 탭버튼에서는 슬라이더가 잘 먹힙니다. 두번째 탭부터는 내부에 적용한 슬라이더가 깨지고 먹히지 않아요.. 구글링을 해서 몇몇 개를 살펴봤는데 코드가 정확한건지 헷갈려서 질문으로 남깁니다.
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
강의 19분경 관련 질문입니다.
안녕하세요 선생님! 강의 3회차 복습중인데, 19분쯤에 나오는 부분 관련해서 궁금한게 있어 질문드립니다. 다름이 아니라, 스크린샷에 있는 대로 전자와 후자의 차이가 궁금해서입니다. (.article은 강의의 .item과 같습니다) 저는 혼자서 만들어볼 때 전자로 만들었는데요, 전자는 .front와 .back에 top: 0 을 따로 주지 않아도 transition이 먹히면서 제대로 작동하는 것 같아서요. 후자의 방법하고는 무슨 차이가 있는지 궁금합니다. 중간에 만들다가 질문하는 거라 css가 엉망이지만요;; 코드스냅도 같이 올려봅니다.
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
이미지를 div로 묶는 부분 관련해서 질문 드립니다!
안녕하세요 선생님~~!! html 구조 작성 중 궁금한 것이 있어 질문드립니다. html 이미지 작성 부분? 에서 이렇게 이미지를 하나하나 div로 묶어주셨는데요, 혹시 이런 식으로 하나의 div 안에 이미지를 모두 넣고, 이미지 자체에 클래스를 넣어서 사용하는 것과는 어떤 차이가 있을까요?? 후자는 형제 선택자 사용의 문제도 있지만, 전자의 html이 후자의 html 더 사용하기 편하고 깔끔하기 때문에 이미지를 하나하나 div로 묶어 주신 건가요?? 전자와 후자의 차이가 궁금합니다!!!
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
나눔고딕과 굴림 link 안찾아져서요.
나눔고딕과 굴림 링크가 구글링으로 안 찾아져 어디에서 폰트 정보를 검색할 수 있는지, 여쭤봅니다.
- 해결됨HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
강의 5분 30초경 세로배치에 대한 질문입니다.
5분 30초 정도에 .dropdown-submenu a에 display: block;을 줘서 세로배치를 해주셨는데, 그 대신에 a의 부모 요소인 .dropdown-submenu에 display: flex를 써도 세로배치가 되지 않을까? 싶어서 써봤더니 작동이 안 되더라구요. 둘의 다른점이 뭔가요? display: flex는 부모요소에 쓰면 세로배치가 되는 것이 아닌가요?.? 제가 flex에 대한 개념이 부족한건지 왜 전자는 되고 후자는 되지 않는지 모르겠습니다ㅠㅠ 그리고 여기서 .dropdown-submenu a {} 는 display: block으로 블록 요소가 되었는데, (강의 11분 50초 부분) 왜 margin: auto가 아니라 text-align: center를 써서 이미지의 all, on, two 가 중앙정렬이 된 건가요?? (= 블록 요소는 자신에게 마진 오토를 써야 수평중앙정렬이 되는데, 왜 display: block으로 block 요소가 된 a가 margin: auto가 아닌 text-align: center로 중앙정렬이 되나요??) text-align: center는 인라인 요소, 인라인 블록 요소에서 부모요소에 쓰는게 맞지 않나요??
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
폰트어썸 오류
안녕하세요~ 강사님! 폰트어썸 넣을 때, 매번 잘 안되는 것 같아서 문의드려요.. 무슨 문제 때문에 안나오는지 모르겠어요ㅜㅜ
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
전체선택자 내 box-sizing
전체 선택자 내에서 box-sizing: border-box; 했는데 div3박스가 그대로여서 질문남겨요~ 어떻게 하면 되는지 알수 있을까요? * { font-family: 'Syne Tactile', cursive; box-sizing: border-box; outline: none; }
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
도형 로딩 애니메이션 색 적용 문의드립니다.
css 키프레임 애니메이션 - 사각형 좌표 변경 로딩 애니메이션 두 개의 객체를 가지고 사각형 좌표 모양으로 시간차를 두고 로딩되는 애니메이션 효과 강의인데요. 두 번째 span 태그의 색상이 조금 이상해서요. 강의에서 보이는 예제는 두 객체에 적용한 색상값인데요 crimson-blue(25%)-orange(50%)-green(100%) 두 번째 객체는 75%구간에서 100%구간까지 회색으로 보여집니다. span 태그에 배경으로 회색을 줘서 그런 것 같은데요. 강의에서 예제는 4가지 색상으로 각각 위치에서 잘 보여지는 것 같은데요. 강의에서도 회색으로 보여지네요. 예제처럼 색상이 제대로 보이려면 어떻게 적용해야 할까요? (아래 코딩은 강의와 동일합니다.)
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
폰트 관련 문의합니다.
강사님~ 안녕하세요? 현재 global.scss에 있는 유일한 font 소스입니다. 빨간 부분은 이전에 있어서 삭제했는데, 콘솔 상에 계속 살아있어서 문의드립니다. 캐시도 지우고 소스도 지웠는데 실제 코드 상에는 없는 font 소스가 있는 경우도 있는지 궁금합니다. 콘솔 소스 html, body { padding: 0; margin: 0; font-family: 'NanumGothic', Roboto, Oswald, Montserrat, 'Open Sans Condensed'; }