46,200원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
강사님 강사님~
before, after 가상 클래스에서 content: url (); 를 이용해서 이미지를 삽입하는 경우, 이미지 크기는 어떻게 조절을 할 수 있을까요? 이미지를 따로 구해서 넣으니까 엄청 크게 나오는데 이렇게 저렇게 해봐도 조절이 안 되네요. p.s 새해 복 많이 받으십시오 ^.^~
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
필수이론 pdf파일은 어디서 받을 수 있을까요?
안녕하세요~ 필수이론 pdf 파일을 여러번 찾아봐도 없는거같은데 혹시 필수이론 pdf 파일은 어디서 얻을 수 있는지 알 수 있을까요?
- 해결됨HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
js 자동완성이 안되는거 같아요..ㅠㅠ
html, css 는 자동완성? 코드힌트?가 생기는데 제이쿼리 작성할때는 안나옵니다..ㅠㅠ 제가 잘못한게있거나 확장프로그램 빠트린게 있을까요 ㅠ (js-css-html formatter 은 설치 되어있습니다)
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
폰트어썸 아이콘 불가
안녕하세요, 폰트어썸 사용하는 강의 듣다가 질문드립니다. 다른 컴퓨터에서 할 때는 아이콘이 잘 떴는데 압축해서 그대로 노트북으로 가져오니 아이콘이 뜨지 않네요,, 특별히 필요한 컴퓨터 세팅같은게 있는걸까요 ? 처음사진 두 장이 노트북이고 마지막이 다른 컴퓨터입니다. 뭐가 잘못된것인지 찾기 어려워서 질문드립니다.
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
visibility 속성 부여 여부에 따른 차이
안녕하세요 선생님 이미지 hover시 툴팁이 나오게 할 때 opacity나 transition을 넣고 싶으면 display: block, none 속성을 사용 할 수 없고 opacity속성만 사용하거나 visibility, none, visible 속성을 사용해야 한다고 하셨는데 opacity 값을 준 상태에서 visibility속성을 준 것과 안 준것의 차이가 뭔지 잘 모르겠습니다. 20분 15초쯤에 visibility opacity값만 넣으면 이런 현상이 생긴다고 말씀하셨는데 어떤 현상을 말씀하시는 걸까요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
z-index속성에 대해 질문드립니다.
항상 고생하십니다. 다름이 아니고 이번에 z-index에 대해 궁금한 점이 생겼습니다. 1) z-index 속성은 position 선언 이후이에 사용이 가능한 속성인지 궁금합니다. 2)예제에서 modal-gnb에 가려진 컨텐츠들을 올리기 위해 z-index속성을 ".trigger"에 주었습니다. 제 생각은 z-index를 active클래스에 주지 않고 .trigger에 주었으니 active가 없어도 .modal-gnb보다 .trigger가 밑에 있으면 안된다고 생각합니다. 하지만 active를 추가 하지 않은 .trigger는 z-index속성이 100임에도 불구하고 modal-gnb에 가려지게 되는데 이러한 이유가 궁금합니다. 항상 감사합니다. 연말 잘 마무리 하셨으면 좋겠습니다.
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
inline-block이 먹지않을 때
안녕하세요, 상품설명이 나타나는 hover 듣고있는데 display: inline-block해도 사진이 가로배치되지 않습니다..,, 도저히 뭐를 잘못했는지 발견하기 어렵네요 .. 도움 부탁드립니다.
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
제이쿼리 선택자 부를 때 .menu li 말고 다르게 선택할 수는 없나요?
강의 시간 12:00 에서 $('.menu li') 로 선택자를 지정하시면서 <li></li>구문 전체를 클릭하는 걸로 설명을 해주셨는데, 저는 MENU-1과 MENU-2에만 마우스 커서가 가면 되는 게 아닐까 싶어서 $('.menu li > a') 이렇게도 코딩을 해봤더니 작동이 안되더라고요. 왜 안되는 건지 궁금합니다. 선택자는 메뉴 뿐만 아니라 서브메뉴까지 선택을 해주어야 뒷 부분에서 요소선택과 메서드를 작성하여 slideDown, children 등을 적용시킬 수 있기 때문에 .menu li 로 포괄적으로? 선택을 해야 하는 건가요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
비주얼스튜디오에서 제이쿼리필수핵심이론 질문
안녕하세요, 어제 블라캣츠에서 오류떠서 안된다고 했던 학생입니다. 비주얼스튜디오에서 하는 것 권고하신다고하셔서 바로 비주얼스튜디오로 갈아탔습니다 ! ㅎㅎ 그런데 기본구문만들기 하다가 또 오류가 생겼는데 뭐가 잘못된지 발견하기 힘들어서 다시 질문남깁니다. 첫번째 사진은 제가 작성한 코드고 두번째사진은 오류 알림 사진입니다.
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
제이쿼리 기본구문 질문
안녕하세요,제이쿼리 필수 핵심이론 (기본구문만들기, 선택자) 강의 듣다가 $가 정의가 안됐다는 오류가 떠서 질문드립니다. 오류가 왜생긴걸까요 ! .
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
top, translateY() 차이에 대해 질문입니다.
항상 고생하십니다. 예제를 할 때 제가 먼저 구현해보고 선생님의 코드와 비교하면서 진행하고 있습니다. 저 같은 경우는 headling text부분 즉, Sale부분의 좌표를 top으로만 설정해 checked경우에도 top으로 좌표를 조정했습니다. 근데 선생님의 코드의 경우 top으로 위치를 잡아주시고 transform: translateY()속성으로 위치를 y축 기준으로 올리셨는대, 오로지 top의 수치로만 조정하는 것과, translateY()를 사용하는 것의 큰 차이가 있는지 여쭤보고 싶습니다.
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
relative 선언만으로 before의 bgc에 가려져있던 아이콘이 보이는 부분이 이해가 안갑니다.
천천히 따라하다가 글자가 안보여 z-index : 1 을 fa에게 주어서 before보다 위로 올라오게 하려고 하였으나 적요되지 않았습니다. 강의에서는 position:relative 선언만으로도 글자가 보이게 됐는데 이해가 잘 되지 않습니다. position: relative를 선언해줌으로써 부모와의 관계가 생기게 되어 뒤에 있던 글자가 위로 쌓이게 된 것인지 궁금합니다
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
강의 제목과 영상이 다른거 같습니다.
제목은 가상클래스 after,before 기본사용법인데 영상은 다른 내용같은데요. 예제 파일과 일치 하지 않습니다.
- 해결됨HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
선생님 탭 메뉴 콘텐츠 질문 있습니다...!
data-alt 속성 넣어서 제작했는데, 처음에 제작했을때는 잘 되다가 다시 확인해보니 연동이 되질 않습니다.. 코드 실수가 있는지 확인 부탁드리겠습니다..ㅠㅠ * 이 뿐만 아니라 WOW, tab menu, parallaxScroll 등 다른 제이쿼리도 연동이 됐다 안됐다 하네요.. 다른 포폴 파일도 라이브러리가 됐다 안됐다 하는데, 혹시 이런 경우 보셨을까요..?ㅠㅠ <!-- Sub menu list --> .sub-menu > ul > li 를 클릭했을때 아래 각 section과 연동되어야함 <section class="sofa-collection tabs active" id="tab1"> <section class="bath-collection tabs" id="tab2"> <section class="bed-collection tabs" id="tab3"> <!-- Sub menu list --> <div class="sub-menu"> <ul class="sub-menu-item"> <li data-alt="tab1" class="active"><a href="#">sofa</a></li> <li data-alt="tab2"><a href="#">bathroom</a></li> <li data-alt="tab3"><a href="#">bedroom</a></li> </ul> </div> <!-- Section : inspiration-sofa-collection --> <section class="sofa-collection tabs active" id="tab1"> <div class="sofa-inner"> <!-- Heading --> <div class="sofa-heading utd wow"> <h2>THE HAY SOFA COLLECTION</h2> <hr class="bar"> </div> <!-- Quilton --> <div class="sofa-content"> <div class="sofa-left ltr wow"> <div class="sofa-big" onclick="location.href='#none'"> <img src="img/inspiration-sofa-01.png"> <div class="sofa-headline"> <h3>QUILTON 3 SEATER</h3> <p> Its numerous upholstery choices include mono, duo, or with a black contrasting platform, with the finely-detailed quilted upholstery encapsulating the softness and volume of the foam and wadding seats and creating exceptional comfort. Quilton takes sofa design to a new level of versatility that makes it suitable for a wide range of domestic and public spaces. <small class="inview"><ins>Quilton Duo Comb 19 Left</ins> / <ins>Slit High Table</ins></small> </p> <div class="coll-btn"> <a href="#none" class="find-dealer">FIND DEALER</a> </div> </div> </div> </div> <div class="sofa-right rtl wow"> <div class="sofa-items-up"> <div class="sofa-thum" onclick="location.href='#none'"> <div class="sofa-photo"> <img src="img/inspiration-sofa-11.png"> <span class="badge best">Best</span> </div> <p><ins>Quilton Duo Comb 19 Left</ins> / <ins>Slit High Table</ins></p> </div> <div class="sofa-thum" onclick="location.href='#none'"> <div class="sofa-photo"> <img src="img/inspiration-sofa-12.png"> </div> <p><ins>Quilton Ottoman</ins></p> </div> </div> <div class="sofa-items-down"> <div class="sofa-thum" onclick="location.href='#none'"> <div class="sofa-photo"> <img src="img/inspiration-sofa-04.png"> <span class="badge new">New</span> </div> <p><ins>Quilton Combination 21 Right</ins> / <ins>Kofi</ins></p> </div> <div class="sofa-thum" onclick="location.href='#none'"> <div class="sofa-photo"> <img src="img/inspiration-sofa-02.png"> </div> <p><ins>Quilton Contrast base Comb 23 Left</ins> / <ins>Kofi</ins></p> </div> </div> </div> </div> <div class="coll-btn utd wow"> <a href="#none" class="view-more">View more</a> </div> <div class="sofa-video"> <video class="video" width="800" controls> <source src="videos/hay-Mags-Soft-Low-3-Seater-Sofa.mp4" type=""> </video> </div> <div class="section-text utd wow"> <h4>QUILTON</h4> <p> Described by the designers as a ‘quilted landscape sofa system’, Quilton serves as a central platform for living, working, socializing and relaxing. Offering a wide assortment of different modules, Doshi Levien’s multi-functional sofa provides the flexibility of a modular system with generous dimensions and sculpted forms. Its numerous upholstery choices include mono, duo, or with a black contrasting platform, with the finely-detailed quilted upholstery encapsulating the softness and volume of the foam and wadding seats and creating exceptional comfort. Quilton takes sofa design to a new level of versatility that makes it suitable for a wide range of domestic and public spaces. </p> </div> <!-- MAGS --> <div class="sofa-content flex-order"> <div class="sofa-right ltr wow"> <div class="sofa-items-up"> <div class="sofa-thum" onclick="location.href='#none'"> <div class="sofa-photo"> <img src="img/inspiration-sofa-05.png"> <span class="badge new">new</span> </div> <p><ins>MAGS 3 SEATER COMBINATION 1</ins> / <ins>DLM</ins></p> </div> <div class="sofa-thum" onclick="location.href='#none'"> <div class="sofa-photo"> <img src="img/inspiration-sofa-06.png"> <span class="badge new">new</span> </div> <p style="font-size: 14px"><ins>MAGS 2,5 SEATER COMBINATION 3</ins></p> </div> </div> <div class="sofa-items-down"> <div class="sofa-thum" onclick="location.href='#none'"> <div class="sofa-photo"> <img src="img/inspiration-sofa-07.png"> </div> <p><ins>Mags 3 Seater comb 1</ins> / <ins>Pouf</ins></p> </div> <div class="sofa-thum" onclick="location.href='#none'"> <div class="sofa-photo"> <img src="img/inspiration-sofa-08.png"> <span class="badge best">best</span> </div> <p><ins>Mags Sofa 3 seater comb 4</ins> / <ins>AAL 83</ins></p> </div> </div> </div> <div class="sofa-left rtl wow"> <div class="sofa-big" onclick="location.href='#none'"> <img src="img/inspiration-sofa-14.png"> <div class="sofa-headline"> <h3>MAGS 3 SEATER COMBINATION 1</h3> <p> Designed with maximum comfort and minimum details, the Mags sofa combines strong aesthetics with timelessness to create a HAY classic. Keeping superior comfort and quality in mind, Mags is built using a solid construction with durable, high-density foam and interior padding for optimal longevity. The low frame has a distinctly lounge feel, which is reinforced by the deep seats and results in an open, welcoming space. <small class="inview"> <ins>MAGS SOFA</ins> / <ins>RAW RUG NO. 2</ins> / <ins>TULOU COFFEE TABLE</ins> / <ins>MOHAIR BLANKET</ins> / <ins>FIFTY-FIFTY FLOOR LAMP</ins> </small> </p> <div class="coll-btn"> <a href="#none" class="find-dealer">FIND DEALER</a> </div> </div> </div> </div> </div> <div class="coll-btn utd wow"> <a href="#none" class="view-more">View more</a> </div> <div class="section-text second utd wow"> <h4>MAGS</h4> <p> Designed with maximum comfort and minimum details, the Mags sofa ensures what lies beyond its strong aesthetic presence has an equally lasting impact. The wide range of functional modular units mean the sofa can be fully customised with chaise longue, corner modules or additional seats to suit any room or purpose, while the high quality upholstery options enables the sofa to find its own personality. </p> </div> </div> </section> <!-- Section : inspiration-bath-collection --> <section class="bath-collection tabs" id="tab2"> <div class="sofa-inner bath-inner"> <!-- Heading --> <div class="sofa-heading bath-heading utd wow"> <h2>BATHROOM INSPIRATION</h2> <hr class="bar"> </div> <!-- Bath-container--> <div class="sofa-video bath-video"> <video class="video" width="800" controls> <source src="videos/hay-Waffle-Bathrobe-Waffle-Slippers.mp4" type=""> </video> </div> <div class="section-text utd wow"> <p> These days, investing a little love and care in the domestic spaces we often neglect -- bathroom, we're looking at you! -- can make a world of difference. That's why we've created a range of fresh new products that are sure to brighten up that underappreciated space, from pretty and practical storage solutions like Basket, now available in new Spring colours, to the brilliant Chim Chim Scent Diffuser, which can make even the most modest of washrooms feel more like a spa. </p> </div> <div class="bath-content"> <div class="bath-items"> <div class="bath-top"> <div class="bath-thum utd wow" onclick="location.href='#none'"> <div class="bath-photo"> <img src="img/inspiration-bath-01.jpg"> <span class="badge best">Best</span> </div> <p><ins>Basket</ins></p> </div> <div class="bath-thum utd wow" data-wow-delay="0.25s" onclick="location.href='#none'"> <div class="bath-photo"> <img src="img/inspiration-bath-02.jpg"> </div> <p><ins>Waffle Bathrobe Sky Blue</ins></p> </div> </div> <div class="bath-down utd wow"> <div class="bath-thum" onclick="location.href='#none'"> <div class="bath-photo"> <img src="img/inspiration-bath-03.jpg"> <span class="badge new">New</span> </div> <p><ins>Chim Chim Scent Diffuser</ins></p> </div> <div class="bath-thum utd wow" data-wow-delay="0.25s" onclick="location.href='#none'"> <div class="bath-photo"> <img src="img/inspiration-bath-08.jpg"> </div> <p><ins>Colour Crate / Frotté Towel</ins></p> </div> <div class="bath-thum utd wow" data-wow-delay="0.5s" onclick="location.href='#none'"> <div class="bath-photo"> <img src="img/inspiration-bath-07.jpg"> </div> <p><ins>Waffle Slippers / Giant Waffle Bath Towel</ins></p> </div> </div> </div> </div> <div class="coll-btn utd wow"> <a href="#none" class="view-more">View more</a> </div> </div> </section> <!-- Section : inspiration-bed-collection --> <section class="bed-collection tabs" id="tab3"> <div class="sofa-inner bath-inner bed-inner"> <!-- Heading --> <div class="sofa-heading bath-heading bed-inner utd wow"> <h2>BEDROOM INSPIRATION</h2> <hr class="bar"> </div> <!-- bed-container--> <div class="bath-content bed-content"> <div class="bath-items bed-items"> <div class="bath-top bed-top utd"> <div class="bath-thum bed-thum utd wow" data-wow-delay="0.25s" onclick="location.href='#none'"> <div class="bed-photo"> <img src="img/inspiration-bed-05.jpg"> <span class="badge best">Best</span> </div> <p><ins>Bias Quilt / Slit Table / Turn On Lamp</ins></p> </div> <div class="bath-thum bed-thum utd wow" data-wow-delay="0.5s" onclick="location.href='#none'"> <div class="bed-photo"> <img src="img/inspiration-bed-04.jpg"> <span class="badge new">New</span> </div> <p><ins>Pao Steel Pendant / Ellipse Tray / Tray Table</ins></p> </div> </div> <div class="section-text utd wow"> <p> A peaceful, productive day starts in the bedroom, so it’s the perfect place to invest some attention and care.</p> <p> Whether you’re looking for an elegant bedspread like Kite, Bias, or Megadot, a cozy bathrope to warm up on cold mornings, or any kind of accessory – from storage to table lamps – HAY has a little bit of everything you might need to make your bedroom the sanctuary it should be. </p> </div> <div class="bath-down bed-down"> <div class="bath-thum bed-thum utd wow" onclick="location.href='#none'"> <div class="bed-photo"> <img src="img/inspiration-bed-07.jpg"> </div> <p><ins>Matin Table Lamp / Duo Bed Linen / Tray Table </ins></p> </div> <div class="bath-thum bed-thum utd wow" data-wow-delay="0.25s" onclick="location.href='#none'"> <div class="bed-photo"> <img src="img/inspiration-bed-09.jpg"> </div> <p><ins>Knit</ins></p> </div> <div class="bath-thum bed-thum utd wow" data-wow-delay="0.5s" onclick="location.href='#none'"> <div class="bed-photo"> <img src="img/inspiration-bed-10.jpg"> </div> <p><ins>Soft Coat Hanger</ins></p> </div> </div> <div class="bath-down bed-down"> <div class="bath-thum bed-thum utd wow" data-wow-delay="0.25s" onclick="location.href='#none'"> <div class="bed-photo"> <img src="img/inspiration-bed-08.jpg"> </div> <p><ins>Chim Chim Scent Diffuser / Tray Table</ins></p> </div> <div class="bath-thum bed-thum utd wow" data-wow-delay="0.5s" onclick="location.href='#none'"> <div class="bed-photo"> <img src="img/inspiration-bed-06.jpg"> </div> <p><ins>Outline Cushion / Crinkle Bedspread</ins></p> </div> </div> </div> </div> <div class="coll-btn utd wow"> <a href="#none" class="view-more">View more</a> </div> </div> </section> // inspiration tab menu $('.sub-menu-item li').click(function(){ $(this).addClass('active') $(this).siblings().removeClass('active') var tab = $(this).attr('data-alt') $('.tabs').removeClass('active') $('#' + tab).addClass('active') });
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
이미지파일
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1) 에서 가상클래스 hover 활용한 실전 퍼블리싱 01(오버하면 상세설명 나타나는 상품목록) 여기서 사용된 이미지와 텍스트 )는 어디서 받을수잇나요
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
CSS 키프레임 애니메이션 활용한 실전 예제 제작 01 테스트 관련
CSS 키프레임 애니메이션 활용한 실전 예제 제작 01(원형 크기 변경 로딩 애니메이션) 시 @import url('https://fonts.googleapis.com/css?family=Raleway&display=swap'); 가 안되는 환경(내부망)에서는 테스트가 안되는 것인지 알고 싶습니다.
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
position: absolute 설정 시 top의 기본값 질문입니다.
<div class='container'> <div class='box1'></div> <div class="box2"></div> </div> .container { position:relative; width: 300px; height: 300px; border: 1px solid; } .box1 { width: 300px; height: 300px; background: blue } .box2 { position: absolute; width: 300px; height: 300px; background: red; } 이해가 가지 않은 부분이 있어 예제를 단순화해서 질문을 올립니다. box2의 경우 부모 컨테이너의 영역을 넘어서는 상황에서 container가 position: relative이고 box2를 position: absolute일 때 제 생각에는 box2의 경우 일반적인 문서 흐름을 벗어났기 때문에 box2가 box1을 겹칠 것으로 예상했습니다. 하지만 그렇지 않았고 top:0을 해주었을 때 비로소 겹치게 되었는데요. 원래 별다른 설정이 없다면 디폴트값이 top:0, left:0이 아닌가요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
div tag
안녕하세요. 궁금한 것이 div태그에 대한 별다른 언급을 안하시는 이유가 있나요? 뭔가 div, span 이런 태그가 꽤 자주 쓰이는 걸로 알고 있었는데 span태그는 별도의 pdf자료에 언급이 되어있는데, div는 없어서 궁금해서 질문 드립니다
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
동영상에 노이즈가 있는거 같은데
높은 음은 아니지만 삐~~ 하는 듯한 노이즈가 동영상 내내 있는데 이거 제거하고 올리기 어려우신가요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
질문드립니다
국비학원 다니고 있는데 강의가 너무 부실해서 듣게되었습니다. 코딩웍스 듣고 부터는 코딩하는게 재미가 붙어서 보면서 시간 가는줄도 모르고 즐겁게 배우고 있네요^^ 가운데로 보낼 때, margin 0 auto; 와 justify center 의 차이점 알고싶네요 학원에서는 항상 margin 0 auto나 text-alighn 주라고 합니다. justify 속성은 아예 배우지 않았습니다.. 차이점이 무엇인지 알고싶네요 답변 잘부탁드립니다