퍼블리셔 취업을 위해 제대로 배워보는 html과 css, 그리고 웹표준

퍼블리셔 취업을 위해 제대로 배워보는 html과 css, 그리고 웹표준

(19개의 수강평)

833명의 수강생
44,000원
지식공유자 · Dongho Lee
84회 수업· 총 40시간 41분수업
평생 무제한 시청
수료증 발급 강의
수강 난이도 입문
bupjy21 프로필

질문 bupjy21 1일 전

안녕하세요 강사님.

강의를 너무 잘 듣고 있습니다.

좋은 내용을 좋은 강의력으로 전달해주셔서 너무 유익하게 듣고 있는데 

제가 배운 것을 가장 잘 익히는 방법이 남에게 설명할 수 있는 것이라고 생각이 들어 

요즘 블로그 운영을 생각하고 있습니다.

강의를 진행하시는 흐름이나 하시는 말씀들이 참 좋았던 부분이 많아서 이 부분들을 저만의 방식으로 정리해서 

블로그에 조금씩 올려보고 싶은데, 이 것에 대해서 제가 원 창작자인 강사님의 의견을 듣고 실례가 되지 않는 선에서 

진행해보고 싶습니다. 제가 강의내용 흐름을 블로그에 글로써 올려도 괜찮을까요? 

감사합니다.

1
이고은 프로필

background: url()과 background-img 그리고 <img> 이고은 2일 전

안녕히세요 선생님! 항상 강의 잘 듣고 있습니다 :)

이제 웹사이트 제작 css 실습을 듣고 있는데요,

- background: url()

- background-img

- <img>

이 세가지의 차이점에 대해 알고 싶습니다!

이미지마다 조금씩 다르게 적용되는 것 같아 헷갈리네요 ㅠㅠ

1
메이저K 프로필

Package Control install 메이저K 3일 전

Package Control에서 install package를 눌러도 무반응이에요

1
Sun.ahn 프로필

가르쳐 주신 내용을 응용해서 작업 중 문의 드립니다. Sun.ahn 6일 전

선생님 강의 잘 듣고 있습니다.

강의 내용과 올려주신 소스를 참고해서 화면을 구성하고 있는데 어려움이 있어서 문의 드립니다.

전체 화면을 구성해보는게 처음이라 이해가 안가는 부분이 많이 있습니다.

바쁘시겠지만 가능하시다면 설명 부탁드리겠습니다!!!

파일 첨부가 안돼서 작업한 내용을 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-size14px;
}
.blind {
  displayblock;
  positionabsolute;
  left0;
  top-9999em;
  overflowhidden;
}
.skip a {
  positionabsolute;
  left0;
  top-9999em;
  z-index9999;
  displayblock;
  width100%;
  background-colornavy;
  color#efefef;
  text-decorationnone;
  text-aligncenter;
  line-height2;
}
.skip a:focus {
  top0;
}
.clearfix {
  *zoom1;
}
.clearfix:after {
  content"";
  displayblock;
  clearboth;
}
hr {
  displaynone;
}

/* style */
#wrap {
  margin0 auto;
}

#header {
  positionfixed;
  top0;
  z-index30;
  width100%;
  background-color#000;
}
#header .logo {
  floatleft;
}
#header .logo a {
  displayblock;
  padding0 20px;
  background-color#4d6c8b;
  color#fff;
  font-size16px;
  font-weightbold;
  text-decorationnone;
  text-transformuppercase;
  line-height50px;
}
#header .logo a:hover {
  background-color#ccc;
  color#000;
}
#header .logo a i {
  margin-right10px;
}

#header .nav {
  floatright;
}

#header .btn_nav {
  width50px;
  height50px;
  border0;
  background-imagenone;
  background-color#333;
  color#eee;
  font-size16px;
  line-height50px;
  cursorpointer;
  floatright;
}
#header .btn_nav:hover {
  background-color#ccc;
  color#000;
}
#header .userifo {
  displayblock;
  color#eee;
  font-size16px;
  font-weightbold;
  text-decorationnone;
  line-height50px;
  floatleft;
  margin-right10px;
}

#header .lnb {
  positionabsolute;
  top50px;
  left-100%;
  width100%;
  cursorpointer;
}
#header .lnb li a {
  displayblock;
  padding-left20px;
  border-bottom1px solid #333;
  background-color#222;
  color#ccc;
  font-size15px;
  font-weightbold;
  line-height40px;
  text-decorationnone;
  text-transformuppercase;
  letter-spacing0.2em;
}
#header .lnb li a:hover {
  background-color#ddd;
  color#000;
}

#container {
  positionrelative;
  width100%;
  top50px;
}
#snb {
  floatleft;
  border-right1px solid #555;
  width200px;
  min-height600px;
  top10px;
}

#snav li a {
  displayblock;
  padding-left20px;
  border-bottom1px solid rgb(393232);
  font-size15px;
  colorwhite;
  background-color#333;
  line-height40px;
  text-decorationnone;
  text-transformuppercase;
  letter-spacing0.2em;
}

#snav li .active {
  background-color#06b3a1;
  colorwhite;
}

#snav li a:hover:not(.active) {
  background-color#06b3a1;
  colorwhite;
  font-weightbold;
}

#content {
  positionrelative;
}
#content h2 {
  displayblock;
  margin-left20px;
  line-height40px;
}

#content .box-top {
  displayflex;
}
#content .box1 {
  width50%;
  height300px;
  border#555 2px solid;
}
#content .box2 {
  width50%;
  height300px;
  border#555 2px solid;
}

#content .box-middle {
  displayflex;
}

#content .box3 {
  width50%;
  height300px;
  border#555 2px solid;
}

#content .box4 {
  width50%;
  height300px;
  border#555 2px solid;
}

#content .box5 {
  width50%;
  height300px;
  border#555 2px solid;
}

#content h3 {
  displayblock;
  margin-left20px;
  line-height30px;
}

#content table {
  border1px solid #555;
  width100%;
}

----------------------------------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>

4
이고은 프로필

list gallery 만들때 이고은 11일 전

안녕하세요 선생님!

혹시 img태그를 span으로 감싸는 이유가 있나요?

그냥 img에 속성들을 바로 적용해도 되지 않나요 ?

1
이고은 프로필

실습 질문 이고은 13일 전

선생님 !

지금 image+text row list 실습을 하고 있는데요,

왜 font stlye이나 color를 strong이 아닌 a에 넣어야 하는 건가요??

감사합니다!

1
js0128.kang 프로필

선생님 카페 접속이 안돼요 js0128.kang 15일 전

cafe.naver.com/webpub으로 접속하면 접속하신 카페는 카페 멤버만 들어갈 수 있다고 하네요..가입신청도 못합니다..

1
이고은 프로필

box1 제목,내용,더보기 예제 이고은 19일 전

강의 <box1 제목,내용,더보기 예제>에 대한 질문이 있습니다!

혹시 width 와 height가 필요없다면 display width height 모두 적용 안해도 되는 건가요 ?

감사합니다.

2
이고은 프로필

이벤트 페이지 실습 질문 이고은 20일 전

안녕하세요:)

다름아니라 이벤트 페이지 실습을 하던중에 궁금한게 있어서요!

어짜피 이미지는 통으로 들어가는 것이고, 만약 링크가 필요없는 이벤트 페이지라면

html 표준작성이 필요 없어도 되지 않나 라는 생각이 문득 떠올랐습니다.

혹시 사람마다 쓰는 프로그램, 기종이 다르기 때문에 혹여나 이미지가 뜨지 않을 것을 대비해서

표준html를 작성하는 건가요?

감사합니다.

2
이은지 프로필

favicon 질문합니다 이은지 21일 전

favicon을 넣고 싶은데 포토샵이 아닌 다른 프로그램으로

이미지를 만들 수 있을까요? 

아니면 파일을 올려주실 수 있으신가요..?

1
이사야 lee 프로필

form 컨트롤 속성 질문! 이사야 lee 1달 전

성별 선택 폼 이렇게 알려주ㅅ셨는데요,

<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>

1
dongwon1826 프로필

<!----> dongwon1826 1달 전

단축키가 있는거 같은데 알수있을까요?? 저는 하나하나 다 적고 있어서 알려주시면 감사하겠습니다.

2
myeongkuk01@naver.com 프로필

메타태그 정보를 확인하기 myeongkuk01@naver.com 1달 전

안녕하세요? 강의하신 내용을 보다 궁금한 점이 생겨 질문을 남깁니다.

강의 내용중에 Author나 Description 정보를 메타태그에 남긴다고 하셨는데요

이렇게 남겼을때 일반 사용자가 확인하는 용도로 쓰는건가요?

또, 소스보기로만 해서 메타태그의 내용을 확인하는건지 다른 방법(SSL인증서 확인하는 자물쇠버튼)이 따로 있는지 궁금합니다.

감사합니다.

1
suhyun lee 프로필

강의 더 만들어주세요 suhyun lee 2달 전

후속으로 들을만한 자바스크립트 강의나 심화강의(동적요소 제어가능한)강의없을까요 ㅜㅜ 이만한 강의가 없네요 명강의입니다 명사세요

1
tedy 프로필

이 강의내용을 왜 학습해야 하는 지 궁금합니다. tedy 2달 전

문서형을 html로 선언해서 사용하는 경우가 많을 것 같은데 굳이 html4까지 알아야 하는 이유가 뭔가요?

1
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스