생활코딩

Coding Everybody

코스 전체목록

닫기

박스모델

CSS box model 소개

강의

 

 

소스코드 

변경사항

 

 

 

박스 모델을 써먹기

강의

 

 

소스코드 

변경사항

 

댓글

댓글 본문
작성자
비밀번호
  1. newjin87
    ㄴㅓ무 잘보았습니다.
    박스모델 처음에는 허접해 보였는데 완성하고나니 뭔가 멋있고, 뿌듯하네요.
  2. icdoit
    감사합니다.
  3. Yeonhwa An
    감사합니다
  4. 막시무스
    매번 감솨 감탄 입니다. 동영상 강의 <<명장>> 되시겠음...굿짱 입니다.
  5. hado273
    완료!
  6. 완료
  7. 진영
    완료
  8. 곤느
    완료입니다~
  9. 코딩멍키
    기본적으로 세팅이 되어있는 마진값, 패딩값의 디폴트값이 있나요? 매번 바꿔줘야하는것보다 초기세팅을 바꿀수 있으면 좋겠네요. 아니면 이것도 한방에 바꾸는 코딩을 작성해서 넣는다면? @@ 아 머리가 핑핑도네요.. 언제쯤익숙해져서 파워포인트 만들듯이 슥슥 만들수 있을까요...
  10. 한라봉
    완료
  11. 다빈
    Margin, padding 이해하기 쉽게 설명해주셔서 감사합니다
  12. 필립
    완료
  13. 임재현천재
    완료!감사합니다!
  14. 감사합니다.
  15. 오유상
    감사합니다
  16. Lee Sangjun
    와.......... 안보고 혼자 하려고 하면 정말 안되네요 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
  17. 시간속으로
    완료
  18. 이시권
    css - box model을 배웠을 뿐인데, 이렇게 뿌듯한건 왜일런지요.^^*
    오늘도 멋진 강의감사합니다.
  19. 감사합니다
  20. aimerthis(이성민)
    감사합니다
  21. 감사합니다.
  22. 과천영일
    점점 따라가기 힘들긴 하지만 재미있습니다..
  23. LuminousCoding
    일단 CSS 속성값에 0을 넣을 때는 단위가 필요 없습니다. 도움이 될지는 모르겠지만 사용하시는 브라우저의 설정에 들어가셔서 쿠키 삭제 해보세요
    대화보기
    • 흐엥
      저도 링링님과 같이 코드가 인식이 안되는지....
      <!doctype html>
      <html>
      <head>
      <meta charset="utf-8">
      <title></title>
      <style>
      h1 {
      border-width:10px;
      border-color:red;
      border-style: :solid;
      }
      </style>
      </head>


      <body>
      <h1 >WYS</h1> WOO YONG SEUNG(WYS) is my name.
      </body>


      </html>

      맨 위의 강의에서 초반부부터 빨간색 라인이 아예 보이질 않는데 잘하시는 분들 도와주세요ㅠㅠ
      ------>>> 해결했습니다!! 올바르지 않은 파일에다가 작성한뒤 복사 붙여넣기 한 것이 문제가 됐었습니다.
      안되시는 다른 분들도 에디터를 통해 html만드신 뒤 따라하시면 잘 되실 것 같습니다~
    • 혹시 margin:0; 이렇게 하신거 아닌가요?
      컴퓨터의 단위인 px 을 안 붙여서 그럴 수도 있거든요.
      제가 그랬거든요
      대화보기
      • 김수환
        가장 필요했던 강의중 하나
      • 소금돌
        박스 모델로... table로 만들거를 다 만드신듯...
        어떤게 좋은건지.. 아직은 잘 모르겠습니다..

        하지만.. margin과 padding에 대한 활용은 배웠습니다.
      • 반자동
        <!doctype html>
        <html>
        <head>
        <title>핵심 정치인들의 정보</title>
        <meta charset="utf-8">
        </head>


        <style>


        a {
        color:black;
        text-decoration: none;
        }

        #active {
        color:red;
        }
        .saw {
        color:gray;
        }
        h1 {
        font-size: 40px;
        text-align: center;
        border-bottom:5px solid red;
        margin:0;
        padding:20px;
        }



        ol {
        border-right:5px solid red;
        width:140px;
        margin:0;
        padding:20px;

        }

        </style>
        <body>

        <h1>정치인들의 정보</h1>

        <ul>
        <ol>
        <li> <a href="red.html" class="saw" title="홍준표 정보"> <h3>레드준표</h3></li></a>
        <li> <a href="problem.html" class="saw" id="active" title="문재인 정보"> <h3>프라블람사람</h3></li></a>
        <li> <a href="ironwater.html" title="안철수 정보"> <h3>안아이언워터</h3></li></a>
        </ol>
        </ul>
        <!-- 이건 동영상 -->
        <p>

        <iframe width="560" height="315" src="https://www.youtube.com/embed/liAxbGAtZLA" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

        </p>




        <p>
        <div id="disqus_thread"></div>
        <script>

        (function() { // DON'T EDIT BELOW THIS LINE
        var d = document, s = d.createElement('script');
        s.src = 'https://web1-pw8hvicfyt.disqus.com/embed.js';
        s.setAttribute('data-timestamp', +new Date());
        (d.head || d.body).appendChild(s);
        })();
        </script>
        <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

        </p>


        </body>



        </html>


        이렇게 했는데 세로 빨간선과 가로 빨간선이 서로 닿질 않네요 ㅠㅠ

        해결했습니다!

        홍준표
        문재인
        안철수

        이 3개에 있는 <h3> 태그를 지웠더니 붙어버리네요 ~
      • 스티치
        점점 디자인적으로 변화되고있는
        웹페이지 모습이 너무 기대되고 재밌습니다.
        빨리 웹사이트를 만들어보고 싶어졌어요+_+
        지치지않고 잘 따라가겠습니다.
        이고잉님 감사드려요
      • 솔백아
        2018.05.03 감사합니다!
      • 2018.4.29 강의 감사해요 :) 2/
      • Dani Choi
        1.
        Selector는 ,를 사용하여 중복된 내용을 가진 selector를 묶을 수 있다.
      • 스페이스몽키
        감사합니다. 실습과정중에 잘 해결이 안 되고있던 부분을 알게 되었어요 감사합니다 ㅎㅎ
      • Dreaming_Joyy
        오호!! 박스모델을 멋지게 활용할 수 있네요! 개발자도구(검사) 정말 훌륭한데요???
      • Choi JaeHyeok
        영상이 두개로 나뉘어 있는 것을 인지못하고 곧바로 다음 것으로 넘어갔다가 다시 돌아왔네요 ㅎㅎ
      • 설렁탕
        완전 오랜만에 왔자너
      • css초보자
        ㅠㅠ 사랑합니다 감사합니다 최고에요
      • simplelife
        <!doctype html>
        <html>
        <head>
        <title>부산여행</title>
        <meta charset="UTF-8">
        <style>
        #active {
        color:blue;
        }
        body{
        margin:0px;
        }
        a {
        color:black;
        text-decoration:none;
        }
        h1 {
        text-align:center;
        font-size:60px;
        border-bottom:gray 3px solid;
        padding:40px;
        margin:0px;
        }
        ul{
        border-right:gray 3px solid;
        width:300px;
        margin:0px;
        }
        </style>
        </head>

        <body>
        <h1><a href="01.부산여행.html" id="active">3/9 - 3/10 부산여행</a></h1>
        <ul>
        <li><h2><a href="02.첫째날.html">첫째날</a></h2></li>
        <ol><h3>
        <li>김포공항</li>
        <li>김해공항</li>
        <li>마라도</li>
        <li>한화리조트 해운대티볼리</li>
        </h></ol>
        <li><h2><a href="03.둘째날.html">둘째날</a></h2></li>
        <ol><h3>
        <li>원조전복죽</li>
        <li>해운대</li>
        <li>이기대</li>
        <li>보수동 책방골목</li>
        <li>부평 깡통시장, 국제시장</li>
        <li>백화양곱창</li>
        </h3></ol>
        </ul>
        </body>
        </html>
        --------------------------------------------------------------------------------------
        Q1.
        위에서
        h1 박스와 ul 박스가 서로 만나는 사이가 뭔지 모르겠어요.
        우클릭 검사에서 살펴봐도 해당 부분을 지정하는 부분을 찾을 수가 없어서 질문해요.

        ul{
        border-right:gray 3px solid;
        width:300px;
        margin:0px;
        }

        처럼 margin을 없앴는데도, 박스 오른쪽 선이 h1의 border-bottom과 맞닿지가 않아요ㅠㅠ
        ----------------------------------------------->해결.

        Q2.
        <ol>에서 자식태그인 <li>들을 <h3>로 하고 싶은데
        <li> 각각을 h3로 묶는 것과 통째로 h3로 묶어버리는 것 중 어떤 게 더 나은 선택일까요?
        -------------------------------------------------->해결
      • 설렁탕
        재밋당
        f12
      • 제갈량
        padding:20px; 이나 margin:20px;은 다음과 같습니다.
        { ...
        padding : 20px 20px 20px 20px; (코드 해석 방법은 시계방향으로 이해하시면 됩니다.)
        margin : 20px 20px 20px 20px;
        ...}
        와 같지만 편의상 padding:20px;이라고 적는 것입니다.

        만약에 위아래 공백과 좌우의 공백을 달리하려면

        padding : 20px 10px;(padding : 20px 10px 20px 10px; 와 같은 의미)
        위의 속성은 위아래는 20px, 좌우는 10px; padding 주라는 뜻입니다.

        이런식으로 조금씩 공백을 수치를 바꿔가면서 실행하시면 알기가 쉽습니다.

        그런데, 공백을 수치로 지정하고 웹브라우저로 보면
        개발자 도구로 확인하지 않는 이상 공백이 얼마나 차지하는지 알 수가 없습니다.
        이럴 때는 영상에서 처럼 테두리를 지정하거나 배경색상을 지정하면 됩니다.
        테두리 지정하는 것은 위 영상에서 나왔으니
        배경색상을 지정하려면 다음과 같이 코딩하시면 됩니다.

        {
        ...
        padding: 20px;
        margin:20px;
        background: gray;(색상 코드 값으로 지정하셔도 됩니다. 예를 들면 "#dddddd;로 하시면 됩니다.)
        ...
        }

        이는 박스모델 안에 gray라는 색상을 지정한 것입니다.
        이렇게 코딩하시면 공백이 얼마나 차지하는지 한 눈에 알아보실 수가 있습니다.
      • jayxwoo
        박스모델 잘 봤습니다. 감사합니다:)
      • 토리
        박스모델 조금은 어렵지만 익숙해지면 만드는 재미가 있을거같네요!
      • Hyoseong Jang
        갈수록 조금씩 어려워 지네요.
        정신 차리고 들어야 겠습니다.
      • 잘봤습니다~!!
      • 제로스
        margin
        border
        padding
        -content-
        height
        width
      • 황갬희
        잘봤습니당!
      • 흐힣
        구뜨!
      • sparkah
        잘봤어용ㅎㅎ
      • Mingi Son
        18.02.09 감사합니다!
      • Hyun Woo Lee
        태그는 크게 block elements와 inline elements로 나뉘는군요.
        그 안의 속송값으로는 대표적으로 border, margin, padding, width, height이 있고요.
      버전 관리
      egoing
      현재 버전
      선택 버전
      graphittie 자세히 보기