44,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결퍼블리셔 취업을 위해 제대로 배워보는 html과 css, 그리고 웹표준
display: none 과 클래스 blind
강사님 안녕하세요 :) 좋은 강의, 항상 감사드립니다. 다름아니라 웹 모바일 페이지 실습하면서 display: none으로 화면에서 가리는 방법과 클래스 blind로 position 처리해서 가리는 방법을 번갈아 가며 쓰시는거 같은데 혹시 이유가 있을까요?
- 미해결퍼블리셔 취업을 위해 제대로 배워보는 html과 css, 그리고 웹표준
코딩 파일을 첨부해주세요.
안녕하세요. 강의자료 파일이 안보이는데 코딩 파일을 첨부해 주셨으면 합니다.
- 미해결퍼블리셔 취업을 위해 제대로 배워보는 html과 css, 그리고 웹표준
hover시 문제 발생
안녕하세요 선생님! 지금 실습예제 보면서 혼자 메인메뉴를 만들어보고 있는데요, 메뉴를 float: left로 나열하고 hover시 font-weight: bold를 적용시키니 오버 할 때마다 조금조금씩 자리가 밀려나서 전체 메뉴의 위치가 이동을 하더라구요 ! transition font-size 적용해도 그렇구요 ㅜㅜ 혹시 이 점에 있어서 해결방안이 있을까요? https://blog.naver.com/dlrhdms08/221838270814. (문제 영상 링크 입니다.) 항상 감사합니다 :)
- 미해결퍼블리셔 취업을 위해 제대로 배워보는 html과 css, 그리고 웹표준
li들이 사진뒤로 숨어요ㅠㅠ
상단 메뉴들이 이미지 뒤로 나타나서 스크롤을 밑으로 내리면 사진 뒤에서 나타납니다... 강의 들으면서 그대로 따라한다고 따라하고 틀린게 있나 싶어서 강사님께서 올리신 파일과 비교해보았는데 어디서 틀렸는지 모르겠네요ㅠㅠ position 때문에 꼬인건지,, z-index때문에 꼬인건지 모르겠습니다,,,
- 미해결퍼블리셔 취업을 위해 제대로 배워보는 html과 css, 그리고 웹표준
포토샵 관련기능
강의와 무관한듯 관련있는 질문입니다.... 깅의 도중에 이 기능들을 즐겨 쓰시는 것 같은데 아주 효과적인 기능인 것 같은데...(아 포토샵은 2019 버젼 설치를 했습니다.) 어떻게 찾아서 배워야 할지 몰라 질문을 합니다. 포토샵의 어떤 기능 인지 구글에 어떻게 검색해야 배울 수 있을지 좀 알 수 있을까요?? 감사합니다.
- 미해결퍼블리셔 취업을 위해 제대로 배워보는 html과 css, 그리고 웹표준
강의 : list - 이미지 하단에 텍스트가 있는 목록 2
코드 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*디자인을 할 때는 큰 그림을 기준으로 우리가 판단을 합니다.*/ /*reset*/ *{margin: 0; padding: 0} html,body{width: 100%; height: 100%; } body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select{margin:0;padding:0} body,input,textarea,select,button,table{font-family:'돋움',Dotum,AppleGothic,sans-serif;font-size:12px} img,fieldset{border:0} img{ vertical-align: top; } ul,ol{list-style: none} em,address{font-style: normal} a{text-decoration: none} a:hover,a:active,a:focus{text-decoration: underline;} /*style*/ .lst_app{ width: 800px; margin: 0 auto; border : 1px solid #aaa; /*float 해지를 잊지마 이름을 기억해 */ *zoom =1; } .lst_app:after{ content: ''; display: block; clear: both; } .lst_app li{ float: left; padding: 10px 10px; width: 180px; } .lst_app li .thmb{ height : 180px; background: url(img/bg_thmb.gif) no-repeat; } .lst_app li .btn_area{ padding: 15px 0; /*링크 걸려있는 공간이 인라인 요소잖아요. 그래서 text-align:만 지정을 해도 정렬이 됩니다.*/ text-align: center; } .lst_app li .btn_area .edit{} .lst_app li .btn_area .delete{} </style> </head> <body> <div id="content"> <!-- UI Object --> <ul class="lst_app"> <li> <div class="thmb"> <a href="#"> <img src="img/@tmp_thmb.gif" alt="팡야"> </a> </div> <div class="btn_area"> <a href="#" class="edit"> <img src="img/btn_edt.gif" alt="수정"> </a> <a href="#" class="delete"> <img src="img/btn_del.gif" alt="삭제"> </a> </div> </li> <li> <div class="thmb"> <a href="#"> <img src="img/@tmp_thmb.gif" alt="팡야"> </a> </div> <div class="btn_area"> <a href="#" class="edit"> <img src="img/btn_edt.gif" alt="수정"> </a> <a href="#" class="delete"> <img src="img/btn_del.gif" alt="삭제"> </a> </div> </li> <li> <div class="thmb"> <a href="#"> <img src="img/@tmp_thmb.gif" alt="팡야"> </a> </div> <div class="btn_area"> <a href="#" class="edit"> <img src="img/btn_edt.gif" alt="수정"> </a> <a href="#" class="delete"> <img src="img/btn_del.gif" alt="삭제"> </a> </div> </li> <li> <div class="thmb"> </div> <div class="btn_area"><a href="#"><img src="img/btn_upld_img.gif" width="80" height="22" alt="이미지 올리기"></a></div> </li> <li> <div class="thmb"></div> <div class="btn_area"><a href="#"><img src="img/btn_upld_img.gif" width="80" height="22" alt="이미지 올리기"></a></div> </li> <li> <div class="thmb"></div> <div class="btn_area"><a href="#"><img src="img/btn_upld_img.gif" width="80" height="22" alt="이미지 올리기"></a></div> </li> </ul> <!-- //UI Object --> </div> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia aliquam eligendi rerum placeat vel quam facere, adipisci, deserunt rem aliquid eaque! Commodi eos dolor consequatur quia vel quasi, error iure, modi officiis repellendus temporibus sint maxime animi esse fugiat, aperiam vitae quidem voluptas, sunt voluptatem. Quae non perspiciatis cum, iste officia. Possimus mollitia, fuga ipsam odio corporis repellendus voluptatibus amet obcaecati ab magni nemo id dolorem eveniet quod quia maiores consequatur! Soluta vel commodi voluptatum culpa aspernatur cum ipsa reprehenderit eius numquam repellendus eligendi suscipit, ullam fugiat nostrum similique voluptas, quos esse. Praesentium inventore enim obcaecati nisi. Nesciunt, voluptatum, ducimus. </p> </body> </html> 결과창 질문 강의를 잘 따라가서 목표한 페이지를 구현했습니다. 그런데 다 만들고 확인 과정을 거치던 중 버튼 사이에 이상한 줄이 생겼다 사라졌다 하는 것을 발견했습니다. 코드는 문제가 없어 보이는 데 이건 무슨 현상인가요?? 좋은 강의 해주셔서 항상 감사드립니다.
- 미해결퍼블리셔 취업을 위해 제대로 배워보는 html과 css, 그리고 웹표준
여백제거..ㅠㅠ
안녕하세요 선생님. 좋은강좌 감사합니다. 덕분에 포트폴리오도 독학으로 도전해서 코딩하는 중입니다 이미지처럼 내용을 적으면 여백이 생기는데 이걸 어떻게 해야할까요? 강의는 얼추 다 들었는데.. 이런 비슷한 내용을 알려주신 강의가 생각이 안나네요ㅠㅠ 폰트크기를 70~80px로 키우면 티가 확 나서..어떻게 해야할지 고민입니다 참고로 저는 지금 fullpage.js를 사용해서 포폴을 만들고있습니다.. (css도 겨우땐 초짜지만 유튜브 따라보면서 하고있습니다ㅠ)
- 해결됨퍼블리셔 취업을 위해 제대로 배워보는 html과 css, 그리고 웹표준
menu 탭메뉴,메뉴 1 (22:41)
코드 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*reset*/ html,body{width: 100%; height: 100%; } body,input,textarea,select,button,table {font-family: 'Malgun Gothic','돋움',Dotum,AppleGothic;font-size: 12px} img, fieldset{border: 0 } ul,ol{list-style: none} em,address{font-style: normal} a{text-decoration: none} a:hover,a:active,a:focus{text-decoration: underline;} /*style*/ /*js로 할 것을 css로 무리하게 하면은 cross-browsing에 문제가 생긴다고 알려져 있다. */ .wrap{ width: 960px; border: 1px solid red; margin: 0 auto; } .tab_list li.m1 > a{ /* 만일 ie6을 고려하지 않는다면 자식 선택자도 가능한 선택지 이다. */ color: red; } .tab_list{ /* 메뉴 바를 보면 위치는 달라지지 않고 고정되어 있으니까 li보다는 .tab_list나 ul이 낫다 */ position: relative; } .tab_list li.m1, .tab_list li.m2, .tab_list li.m3{ } /*이렇게 해야 메인 버튼을 먼저 디자인 할 수 있겠죠. */ .tab_list li.m1 > a, .tab_list li.m2 > a, .tab_list li.m3 > a{ /*메인 메뉴들을 display하는 방식에 float을 하려는 데 그게 이치에 안맞는다 그 이유로는 밑에 li까지 딸려있으니까 그렇다. 그래서 >a로서 메뉴만 잡아주는 형태를 잡는다.*/ float: left; display: block; /*왜냐면 하나씩 블록을 가져서 넘어가야 하기 때문입니다. 또한 크기도 만들 수 있으니까.*/ /*height: 35px ; */ padding: 0 30px; background-color: #eee; border: 1px solid #ddd; color : #666; font-size: 13px; line-height: 35px; /*높이라고 생각해도됨.*/ } .tab_list li.m1 ul, .tab_list li.m2 ul, .tab_list li.m3 ul{ position: absolute; left:0; top:36px; width:100%; border-top: 1px solid #aaa /* absolute가 원래 처리를 하면 내용까지만 처리가 됩니다. 그럴 때에는 크기를 지정하면 됩니다. 픽셀보다는 %로 바깥에 무언가 있을 때 채워지도록 합니다. */ } .tab_list li.m1 .more, .tab_list li.m2 .more, .tab_list li.m3 .more{ position: absolute; right: 0; top: 0; } </style> </head> <body> <div class="wrap"> <div class="tab_list"> <ul> <li class="m1"> <a href="#"><span>공지사항</span></a> <ul> <li><!-- › 요즘에는 이렇게 안쓰고 아이콘을 넣음--><a href="#">이것은 첫 번째 탭의 공지사항 목록 입니다.</a></li> <li><a href="#">이것은 첫 번째 탭의 공지사항 목록 입니다.</a></li> <li><a href="#">이것은 첫 번째 탭의 공지사항 목록 입니다.</a></li> </ul> <p class="more"><a href="#">공지사항 더보기</a></p> <!-- 성격이 다르니까 빼주는 것이 좋겠죠 --> </li> <li class="m2"> <a href="#"><span>보도자료</span></a> <ul> <li><a href="#">이것은 두 번째 탭의 보도자료 목록 입니다.</a></li> <li><a href="#">이것은 두 번째 탭의 보도자료 목록 입니다.</a></li> <li><a href="#">이것은 두 번째 탭의 보도자료 목록 입니다.</a></li> <li><a href="#">이것은 두 번째 탭의 보도자료 목록 입니다.</a></li> </ul> <p class="more"><a href="#">보도자료 더보기</a></p> </li> <li class="m3"> <a href="#"><span>해명자료</span></a> <ul> <li><a href="#">이것은 세 번째 탭의 해명자료 목록 입니다.</a></li> <li><a href="#">이것은 세 번째 탭의 해명자료 목록 입니다.</a></li> <li><a href="#">이것은 세 번째 탭의 해명자료 목록 입니다.</a></li> <li><a href="#">이것은 세 번째 탭의 해명자료 목록 입니다.</a></li> <li><a href="#">이것은 세 번째 탭의 해명자료 목록 입니다.</a></li> </ul> <p class="more"><a href="#">해명자료 더보기</a></p> </li> </ul> </div> </div> </body> </html> 결과창 질문 강의 도중에 border-top을 이용해 라인을 처리하는 부분이 있는데 꽤나 오래 고민 해봤는데 해결을 못해서 질문합니다. 계속해서 결과창의 보라색과 같은 남는 선이 생깁니다. 어떻게 해결해야 할까요?? 저의 코드를 수정한 코드를 보여주신다면 정말 감사하겠습니다.
- 미해결퍼블리셔 취업을 위해 제대로 배워보는 html과 css, 그리고 웹표준
레이아웃 실습 질문
안녕하세요 선생님! 매번 질문에 답변 주셔서 감사드립니다 :) 덕분에 많은 도움이 됩니다! 다름아니라 실습 강의 예제 듣고 나서 혼자서 레이아웃 잡는 연습을 하고 있는데요, 혹시 첨부한 사진과 같은, 각각 다른 column의 background를 동일하게 맞추고 싶다면, 어떤 속성이 있을까요? (단, 글씨의 양에 따라, 혹은 브라우저의 크기에 따라 플렉시블한 height를 원합니다.) 감사합니다.
- 미해결퍼블리셔 취업을 위해 제대로 배워보는 html과 css, 그리고 웹표준
질문
안녕하세요 강사님. 강의를 너무 잘 듣고 있습니다. 좋은 내용을 좋은 강의력으로 전달해주셔서 너무 유익하게 듣고 있는데 제가 배운 것을 가장 잘 익히는 방법이 남에게 설명할 수 있는 것이라고 생각이 들어 요즘 블로그 운영을 생각하고 있습니다. 강의를 진행하시는 흐름이나 하시는 말씀들이 참 좋았던 부분이 많아서 이 부분들을 저만의 방식으로 정리해서 블로그에 조금씩 올려보고 싶은데, 이 것에 대해서 제가 원 창작자인 강사님의 의견을 듣고 실례가 되지 않는 선에서 진행해보고 싶습니다. 제가 강의내용 흐름을 블로그에 글로써 올려도 괜찮을까요? 감사합니다.
- 미해결퍼블리셔 취업을 위해 제대로 배워보는 html과 css, 그리고 웹표준
background: url()과 background-img 그리고 <img>
안녕히세요 선생님! 항상 강의 잘 듣고 있습니다 :) 이제 웹사이트 제작 css 실습을 듣고 있는데요, - background: url() - background-img - <img> 이 세가지의 차이점에 대해 알고 싶습니다! 이미지마다 조금씩 다르게 적용되는 것 같아 헷갈리네요 ㅠㅠ
- 미해결퍼블리셔 취업을 위해 제대로 배워보는 html과 css, 그리고 웹표준
Package Control install
Package Control에서 install package를 눌러도 무반응이에요
- 미해결퍼블리셔 취업을 위해 제대로 배워보는 html과 css, 그리고 웹표준
가르쳐 주신 내용을 응용해서 작업 중 문의 드립니다.
선생님 강의 잘 듣고 있습니다. 강의 내용과 올려주신 소스를 참고해서 화면을 구성하고 있는데 어려움이 있어서 문의 드립니다. 전체 화면을 구성해보는게 처음이라 이해가 안가는 부분이 많이 있습니다. 바쁘시겠지만 가능하시다면 설명 부탁드리겠습니다!!! 파일 첨부가 안돼서 작업한 내용을 css, html 로 구분해서 작성했습니다. *질문 1. #snb (좌측메뉴) 오른쪽에 border-right가 화면 끝까지 보여지도록 하려면 어떻게 하나요? 2. #content 하위의 h2의 경우 margin을 주려고 하니 시작점이 브라우저 끝인것 같습니다. #content에서 시작해야 할것 같은데 어디서 잘못한걸까요? 3. 2번과 비슷한데 #content 및 내부 DIV 들의 float, position을 문제 없이 적용한건지 알려주실 수 있나요? ----------------------------------CSS------------------------------------------------------ @charset "utf-8"; @import url("https://fonts.googleapis.com/css?family=Noto+Sans"); /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ /*11-web폴더의 website.css를 참고하였습니다. 초기화 부분은 내용이 길어 제거하고 글 올립니다. */ /* reset */ body { font-family: "Noto Sans", sans-serif; font-size: 14px; } .blind { display: block; position: absolute; left: 0; top: -9999em; overflow: hidden; } .skip a { position: absolute; left: 0; top: -9999em; z-index: 9999; display: block; width: 100%; background-color: navy; color: #efefef; text-decoration: none; text-align: center; line-height: 2; } .skip a:focus { top: 0; } .clearfix { *zoom: 1; } .clearfix:after { content: ""; display: block; clear: both; } hr { display: none; } /* style */ #wrap { margin: 0 auto; } #header { position: fixed; top: 0; z-index: 30; width: 100%; background-color: #000; } #header .logo { float: left; } #header .logo a { display: block; padding: 0 20px; background-color: #4d6c8b; color: #fff; font-size: 16px; font-weight: bold; text-decoration: none; text-transform: uppercase; line-height: 50px; } #header .logo a:hover { background-color: #ccc; color: #000; } #header .logo a i { margin-right: 10px; } #header .nav { float: right; } #header .btn_nav { width: 50px; height: 50px; border: 0; background-image: none; background-color: #333; color: #eee; font-size: 16px; line-height: 50px; cursor: pointer; float: right; } #header .btn_nav:hover { background-color: #ccc; color: #000; } #header .userifo { display: block; color: #eee; font-size: 16px; font-weight: bold; text-decoration: none; line-height: 50px; float: left; margin-right: 10px; } #header .lnb { position: absolute; top: 50px; left: -100%; width: 100%; cursor: pointer; } #header .lnb li a { display: block; padding-left: 20px; border-bottom: 1px solid #333; background-color: #222; color: #ccc; font-size: 15px; font-weight: bold; line-height: 40px; text-decoration: none; text-transform: uppercase; letter-spacing: 0.2em; } #header .lnb li a:hover { background-color: #ddd; color: #000; } #container { position: relative; width: 100%; top: 50px; } #snb { float: left; border-right: 1px solid #555; width: 200px; min-height: 600px; top: 10px; } #snav li a { display: block; padding-left: 20px; border-bottom: 1px solid rgb(39, 32, 32); font-size: 15px; color: white; background-color: #333; line-height: 40px; text-decoration: none; text-transform: uppercase; letter-spacing: 0.2em; } #snav li .active { background-color: #06b3a1; color: white; } #snav li a:hover:not(.active) { background-color: #06b3a1; color: white; font-weight: bold; } #content { position: relative; } #content h2 { display: block; margin-left: 20px; line-height: 40px; } #content .box-top { display: flex; } #content .box1 { width: 50%; height: 300px; border: #555 2px solid; } #content .box2 { width: 50%; height: 300px; border: #555 2px solid; } #content .box-middle { display: flex; } #content .box3 { width: 50%; height: 300px; border: #555 2px solid; } #content .box4 { width: 50%; height: 300px; border: #555 2px solid; } #content .box5 { width: 50%; height: 300px; border: #555 2px solid; } #content h3 { display: block; margin-left: 20px; line-height: 30px; } #content table { border: 1px solid #555; width: 100%; } ----------------------------------HTML------------------------------------------------------ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Home Page</title> <link rel="stylesheet" href="css/fontawesome-all.min.css" /> <link rel="stylesheet" href="css/normalize.css" /> <link rel="stylesheet" href="css/website.css" /> </head> <body> <div id="wrap"> <div id="header" class="clearfix"> <h1 class="logo"> <a href="#"><i class="fas fa-home"></i> Logo</a> </h1> <div class="nav" class="clearfix"> <h2 class="userifo">홍길동</h2> <button type="button" class="btn_nav"> <i class="fas fa-bars"></i> <span class="blind">My menu</span> </button> <ul class="lnb"> <li><a href="#">내정보</a></li> <li><a href="#">로그아웃</a></li> </ul> </div> </div> <div id="container"> <div id="snb"> <ul id="snav" class="snb-nav"> <li><a class="active" href="#">메뉴1</a></li> <li><a href="#">메뉴2</a></li> <li><a href="#">메뉴3</a></li> </ul> </div> <div id="content"> <h2>타이틀1</h2> <div class="box-top clearfix"> <div class="box1"> <h3>타이틀2</h3> <table> <tr> <th>col 1</th> <th>col 2</th> <th>col 3</th> </tr> <tbody> <tr> <td> 컬럼1...... </td> <td> 컬럼2...... </td> <td> 컬럼3...... </td> </tr> </tbody> </table> </div> <div class="box2">BOX 2</div> </div> <div class="box-middle"> <div class="box3">BOX 3</div> <div class="box4">BOX 4</div> <div class="box5">BOX 5</div> </div> </div> </div> </div> </body> </html>
- 미해결퍼블리셔 취업을 위해 제대로 배워보는 html과 css, 그리고 웹표준
list gallery 만들때
안녕하세요 선생님! 혹시 img태그를 span으로 감싸는 이유가 있나요? 그냥 img에 속성들을 바로 적용해도 되지 않나요 ?
- 미해결퍼블리셔 취업을 위해 제대로 배워보는 html과 css, 그리고 웹표준
실습 질문
선생님 ! 지금 image+text row list 실습을 하고 있는데요, 왜 font stlye이나 color를 strong이 아닌 a에 넣어야 하는 건가요?? 감사합니다!
- 미해결퍼블리셔 취업을 위해 제대로 배워보는 html과 css, 그리고 웹표준
선생님 카페 접속이 안돼요
cafe.naver.com/webpub으로 접속하면 접속하신 카페는 카페 멤버만 들어갈 수 있다고 하네요..가입신청도 못합니다..
- 미해결퍼블리셔 취업을 위해 제대로 배워보는 html과 css, 그리고 웹표준
box1 제목,내용,더보기 예제
강의 <box1 제목,내용,더보기 예제>에 대한 질문이 있습니다! 혹시 width 와 height가 필요없다면 display width height 모두 적용 안해도 되는 건가요 ? 감사합니다.
- 해결됨퍼블리셔 취업을 위해 제대로 배워보는 html과 css, 그리고 웹표준
이벤트 페이지 실습 질문
안녕하세요:) 다름아니라 이벤트 페이지 실습을 하던중에 궁금한게 있어서요! 어짜피 이미지는 통으로 들어가는 것이고, 만약 링크가 필요없는 이벤트 페이지라면 html 표준작성이 필요 없어도 되지 않나 라는 생각이 문득 떠올랐습니다. 혹시 사람마다 쓰는 프로그램, 기종이 다르기 때문에 혹여나 이미지가 뜨지 않을 것을 대비해서 표준html를 작성하는 건가요? 감사합니다.
- 미해결퍼블리셔 취업을 위해 제대로 배워보는 html과 css, 그리고 웹표준
favicon 질문합니다
favicon을 넣고 싶은데 포토샵이 아닌 다른 프로그램으로 이미지를 만들 수 있을까요? 아니면 파일을 올려주실 수 있으신가요..?
- 미해결퍼블리셔 취업을 위해 제대로 배워보는 html과 css, 그리고 웹표준
form 컨트롤 속성 질문!
성별 선택 폼 이렇게 알려주ㅅ셨는데요, <p> <span> 성별 </span> <label for="male">남자</label> <input type="radio" id="male" name="choice" value="male"> <label for="female">여자</label> <input type="radio" id="female" name="choice" value="female"> </p> 혹시 아래와 같이 label 안에 input 두 가지를 다 넣고 id 없이 name만 같게 해줘도 html 규칙상 문제가 안생기나요? 일단 브라우저에서는 동일하게 기능하더라고요! <p> <label for="">성별은?<input type="radio" name="gender" value="1">남자 <input type="radio" name="gender" value="2">여자</label> </p>