46,200원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
사용자 정의속성 data-image 관련 질문드립니다
안녕하세요 선생님 항상 강의 감사하게 듣고 있습니다. 다름이 아니라 html에서 사용자 정의로 사용하신 li태그 안의 data-image에 넣은 사진의 이미지 크기를 css나 제이쿼리로 조절할 수 있는 방법이 있을까요 ? 강의 듣고 다른 이미지로 연습 중인데 크기가 맞지 않아 li태그에 hover했을 때 이미지가 줄어드는 장면까지 보이더라고요.. 포토샵으로 따로 작업하지 않고 css나 제이쿼리로 사용자 정의 함수 data-image 안의 이미지 사이즈를 조절하고 싶은데요 선택자를 $('li[data-image='images/img1.jpg').css('width':'100%') 이렇게 써보니 역시나 안되더라구요 사용자 정의속성으로 이미지 크기 조절방법 알려주시면 감사하겠습니다
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
nth-child 관련 질문있습니다.
이전에 아래의 영상을 보고 CSS 필수 가상클래스 – 순서를 만드는 가상클래스 (nth-child, nth-of-type)해당 영상에서는 nth-child는 하위 자식요소에 class 명을 지정하지 않아도 부모요소로부터 자식요소를 선택하는 기능으로 이해했습니다. 이번 영상 초반에 .btn:nth-child(1)이 왜 h1을 지칭하는지 이해가 잘 안가네요. 제가 이해한 바로는 "btn" 이라는 class명을 가진 각각의 요소들의 첫번째 자식 요소를 지칭한다라고 생각되는데 그게 아닌가요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
폰트어썸과 로테이트가 작동을 안해요
강사님과 똑같이 따라하면 폰트어썸이 먹질 않고, .title {}<--여기에 넣으면 폰트어썸이 먹혀요-->.title:after {} title.active:after {}에 넣은 rotate도 작동을 안하네요 ㅠㅠ <!DOCTYPE html><html lang="ko"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/style.css"></head> <body> <section> <article> <div class="heading"> <span>하드코딩(Hard Coding) 실력이 진짜 퍼블리싱 실력입니다.</span> <h1><em>카톡</em> 간편 회원가입, <b>코딩웍스</>의 진짜 퍼블리싱 강의를 만나세요.</h1> </div> <div class="content"> <div class="accordion"> <div class="title">하드코딩(Hard Coding) 실력이 진짜 퍼블리싱 실력</div> <div class="desc"> 제이쿼리 플러그인 사용해서 역동적이고 화려하게 꾸미는 퍼블리싱은 진짜 퍼블리싱이 아닙니다. <br><br> 진짜 퍼블리싱 실력은 HTML로 레이아웃 설계를 꼼꼼히 잘하고, CSS로 배치와 상세 디자인하고, 직접 작성한 제이쿼리(JQUERY)로 상호작용까지 만들 수 있는 것이 진짜 퍼블리싱 실력입니다. </div> <div class="title">당장의 화려함 보다 탄탄한 이론이 필수</div> <div class="desc">당장의 화려함에 제이쿼리 플러그인 사용에 의존하고 기본기 학습을 충실히 하지 않으면 웹 퍼블리셔로 취업하기 쉽지 않습니다. 설령 취업해서 실무에서 일하게 되더라도 퍼블리셔로서 어려운 하루 하루가 될 가능성이 높습니다. <br><br> 코드 한줄 한줄 직접 코딩하는 곧, 하드 코딩할 수 있는게 진짜 실력이고 진짜 퍼블리싱 실력입니다.</div> <div class="title">코딩웍스의 강의의 코딩은 꼼꼼하고 정확합니다.</div> <div class="desc">수강생을 이해시킬 수 없는 코드는 사용하지 않습니다. 수강생에게 원리를 이해시킬 수 있는 강의가 좋은 강의라 생각하고, 코딩웍스 강의는 그렇게 제작되었습니다. <br><br> 코딩을 처음 시작하는 분들을 위해 쉽고 친절하게 강의 된 핵심이론을 통해서 퍼블리싱의 자신감을 가지시기 바랍니다.</div> <div class="title">퍼블리싱 학습방법 이렇게 하세요.</div> <div class="desc">제가 생각하는 '퍼블리싱 실력 키우기' 방법은... <br> 실전 퍼블리싱 제작할 때 처음에 잘 따라오셔서 만드셨으면 두번째는 보면서 따라하면서 만드시고 세번째는 안보고 스스로 하시다가 정말 생각 안날 때 영상 참고하셔서 제작하세요. 그래야만 진짜 자신의 실력으로 남습니다.</div> </div> <div class="image"></div> </div> </article> </section> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="script/custom.js"></script></body> </html>==================================@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:300,400,500,700,900&display=swap');/* @import url('https://fonts.googleapis.com/css?family=Raleway&display=swap'); */ @import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); /* @import url('https://fonts.googleapi.com/css?/family=Montserrat:300,400,500&display=swap'); */ body { font-family: 'Noto Sans KR', sans-serif; color: #222; margin: 0; font-weight: 300;} a { text-decoration: none; color: #222;} h1,h2,h3,h4,h5,h6 { font-weight: normal;} section { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #eee;}section article { width: 980px; height: 500px;}.heading{ text-align: center;} .heading span { color: crimson; font-size: 24px;}.heading h1 { font-size: 36px; margin-top: 10px;}.heading h1 em { font-style: normal; position: relative;}.heading h1 em:after { position: absolute; content: url(../images/logo-kakao.png); right: -30px; top: -25px;} .content {} .content > div { width: 50%; float: left; height: 400px; box-sizing: border-box;} .accordion {} .title { border: 1px solid #ddd; padding: 5px; border-radius: 3px; cursor: pointer; padding-left: 15px; /* position: relative; */ transition: 0.3s;}; /* .title.active { background-color: #203049; color: #fff;} */ .title:after { content:'\f105'; font-family: fontawesome; /* right: 10px; top: 7px; position: absolute; */ float: right; margin-right: 5px; margin-top: 3px; transition: 0.3s;}.title.active:after { transform: rotate(90deg); color: orange;} .title:hover,.title.active { background-color: #203049; color: #fff;}.desc { padding: 15px;}; .image {}
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
이론강의 초반부 설명해주실때 자료
안녕하세요 강사님! 강의 재밌게 잘 듣고 있습니다. 이론 강의 초반부에 설명해주시는 ppt?자료 같은것은 따로 첨부안해주시는걸까요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
완성하고 나면 커서가 깜빡여요
원래 이런가요? 변화는 잘 되는데.. body { font-family: 'Noto Sans KR', sans-serif; line-height: 1.5em; margin:0; font-weight: 300; display: flex; justify-content: center; align-items: center; height: 100vh; color: #222; } a { text-decoration: none; color: #222; } .container {} input[id=trigger] { display: none; } label[for=trigger] { width: 40px; height: 30px; display: block; position: relative; cursor: pointer; } label[for=trigger] span { position: absolute; height: 2px; background-color: #000; width: 100%; left: 0; transition: 0.3s; } label[for=trigger] span:nth-child(1) { top: 0; } label[for=trigger] span:nth-child(2) { top: 50%; } label[for=trigger] span:nth-child(3) { top: 100%; /* top: calc(100% - 2px); */ } input[id=trigger]:checked + label[for=trigger] span:nth-child(1) { top: 50%; transform: rotate(45deg); } input[id=trigger]:checked + label[for=trigger] span:nth-child(2) { opacity: 0; } input[id=trigger]:checked + label[for=trigger] span:nth-child(3) { top: 50%; transform: rotate(-45deg); }
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
css 포지션속성 부모요소 밖으로 위치시킬 때
안녕하세요 선생님! css에서 포지션 속성 부모요소 밖으로 위치시키는 것을 복습하고있는데요! 사진에서는 4번 박스를 예로 들었는데(V표시) top:0 left:100%는 잘 나오는데 right:-600px (부모 너비값)으로 하면 사진과같이 되어서요. 어떤게 문제가 된것인지 모르겠어서 여쭤봅니다!! (부모에 마진값준거는 왼쪽부분이랑 위쪽부분할때 자식요소의 상자가 잘려보여서 주었습니다!)
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
볼륨 크기 설정
볼륨의 설정이수정되지 않는데 이미지상에 오류가 있나요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
자기 자신을 slideUp()하고 싶을 때
sibilings()된 친구들을 클릭할때 slideUp이 되는데 자기 자신을 클릭했을때도 포함하여 slideUp은 어떻게 하죠?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
display:inline
부모요소 text-align:center, 자식요소 display: inline-block 은 되는데 inline으로 변경해보니 중앙정렬이 되지 않는데 왜그런가요 그리고 clear 속성 강의 중 html코딩중 <div class="top">float:none</div>과 <div class="clear">clear:both</div>는 블록요소라서 width적용이 안된다는것은 이해가 되는데 <div class="left">float:left</div> <div class="right">float:right</div>는 width가 어떻해서 적용이 되는지 모르겠네요
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
맥북에서 비주얼스튜디오코드 설치할때
안녕하세요! 비주얼스튜디오코드를 맥북에서 설치했는데 강의중 선생님께서 말씀하시는 거처럼 폴더에서 오른쪽키를 눌렀는데 사진과 같이 코드로 열기가 없어서 어떻게해야하는지 여쭤봅니다! 그리고 설치할때 선택하라는내용이 윈도우버전과같은건 없었는데 괜찮은지도 여쭤봅니다.
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
open width live server
■ 질문 남기실 때 꼭! 참고해주세요. 안녕하세요 Visual Studio Code설치후 index.html 파일은우측 마우스 open with live server를 클릭하면 브라우저가 활성화되는데 새파일을 추가해서 생성된 html파일들은 같은 방법으로 해도 브라우저 활성화가 되지 않는데 뭐가 잘못된건지 모르겠네요. 뭐가 문제인건가요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
대체 크롬 확장 프로그램 알려주세요!
안녕하세요! 크롬확장프로그램 1, 2탄 강의 수강 중 아래 4개 프로그램이 검색이 되지 않습니다. 혹시 대체할 만한 프로그램을 추천 해주실 수 있을까요?^^ 1탄 - page ruler redux, gallerify powerful image, Mobile RWD Tester 2탄 - maracopy
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
폰트 단위 중에 vw 도 자주 사용하나요?
안녕하세요! em / rem 강의 보다가 궁금해서 여쭤봅니다! 현업에서 타기관 사이트 유지보수 할 때 vw 단위를 사용하여 퍼블리싱한 사이트를 최근에 보았습니다. 반응형 사이트 퍼블리싱 할때 폰트사이즈 정할 때 vw 단위도 자주 사용하나요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
Visual Studio Code설치후 익스텐션 Live sever설치후
안녕하세요 Visual Studio Code설치후 익스텐션 Live sever설치후 1.마우스 우클릭해서 open with live sever 를 선택해도 변화가 없어요 하단에 go live버튼도 안보여요 왜 그럴까요? 2. !+tab 키 눌러도 아무것도 안나와요 ㅠㅠ 설치가 정상적으로 안된걸까요? 설치시 체크하라고 하신부분 다 체크 후 설치했구요 익스텐션도 Live sever설치를 마쳤어요
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
custom.js/ 선택자 질문
li 태그를 선택자로 지정, children 메서드로 sub-menu 클래스 지정 a 태그를 선택자로 지정, siblings 메서드로 sub-menu 클래스 지정 두 경우 같은 결과가 나오는데 둘 중 어느 방법을 택해도 상관이 없나요? 아니면 더 유리한 쪽이 있을까요? $('.menu li').mouseenter(function(){ $(this).children('.sub-menu').stop().slideDown(); }); $('.menu li a').mouseenter(function(){ $(this).siblings('.sub-menu').stop().slideDown(); });
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
transition 추가
안녕하세요. 예제 코드랑 동일하게 만들고 작동이 잘 되는 상태에서 마우스를 올려 숨겨둔 .submenu가 나올때 transition을 넣어서 조금 더 매끄럽게 나오게 해보고싶은데 여기저기 넣어도 아무 반응이 없습니다. .dropdown에을 넣는게 아닌가요..?ㅠㅠ :1 문의하기를 이용해주세요.
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
안녕하세요, 수강전 문의드립니다!
안녕하세요! 전에 웹디자인기능사 자격증을 인프런 코딩웍스선생님께 배워 합격했던 학생입니다! 이제 프론트엔드 개발자라는 목표가 생겨서 취업목적으로 열심히 공부하려고 하는데 이 강의가 제 목적에 부합할지 하여 여쭤봅니다! +그리고 강의는 블라켓츠로 하시는것같은데 비주얼스튜디오코드로 학습해도 어려움이없을지 여쭤봅니다!
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
dots custom cs 수정
dots 커스텀cs 로 수정하는 강의는 어디서 확인가능한가요 ??
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
형제 인접선택자
형제 인접 선택자에 조금만 더 핵심적으로 설명해주실 수 있을까요? div.tab-inner 안에 들어가는 태그들이 다 형제선택자라고 알고있었습니다 형제선택자와 인접선택자의 정확한 구별법을 잘 모르겠어요 따라서 css를 이용할때 ~ + 를 적절하게 사용하지 못하는 것 같아서요
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
beautify-비주얼 스튜디오
비주얼 스튜디오 확장 환경설정에서 Beautify 를 설치해야 되는데 비주얼 스튜디오 프로그램내 Beautify 가 "이확장은 더이상 유지 관리되지 않는다"라고 뜨는데 확장 설치 해도 되는건가요? 만약 안된다면 다른 설치 확장자를 추천해주셔야 될것같아요.