생활코딩

Coding Everybody

코스 전체목록

닫기

박스모델

CSS box model 소개

강의

 

 

소스코드 

변경사항

 

 

 

박스 모델을 써먹기

강의

 

 

소스코드 

변경사항

 

댓글

댓글 본문
작성자
비밀번호
  1. 소금돌
    박스 모델로... table로 만들거를 다 만드신듯...
    어떤게 좋은건지.. 아직은 잘 모르겠습니다..

    하지만.. margin과 padding에 대한 활용은 배웠습니다.
  2. 반자동
    <!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> 태그를 지웠더니 붙어버리네요 ~
  3. 스티치
    점점 디자인적으로 변화되고있는
    웹페이지 모습이 너무 기대되고 재밌습니다.
    빨리 웹사이트를 만들어보고 싶어졌어요+_+
    지치지않고 잘 따라가겠습니다.
    이고잉님 감사드려요
  4. 솔백아
    2018.05.03 감사합니다!
  5. 2018.4.29 강의 감사해요 :) 2/
  6. Dani Choi
    1.
    Selector는 ,를 사용하여 중복된 내용을 가진 selector를 묶을 수 있다.
  7. 스페이스몽키
    감사합니다. 실습과정중에 잘 해결이 안 되고있던 부분을 알게 되었어요 감사합니다 ㅎㅎ
  8. Dreaming_Joyy
    오호!! 박스모델을 멋지게 활용할 수 있네요! 개발자도구(검사) 정말 훌륭한데요???
  9. Choi JaeHyeok
    영상이 두개로 나뉘어 있는 것을 인지못하고 곧바로 다음 것으로 넘어갔다가 다시 돌아왔네요 ㅎㅎ
  10. 설렁탕
    완전 오랜만에 왔자너
  11. css초보자
    ㅠㅠ 사랑합니다 감사합니다 최고에요
  12. 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로 묶어버리는 것 중 어떤 게 더 나은 선택일까요?
    -------------------------------------------------->해결
  13. 설렁탕
    재밋당
    f12
  14. 제갈량
    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라는 색상을 지정한 것입니다.
    이렇게 코딩하시면 공백이 얼마나 차지하는지 한 눈에 알아보실 수가 있습니다.
  15. jayxwoo
    박스모델 잘 봤습니다. 감사합니다:)
  16. 토리
    박스모델 조금은 어렵지만 익숙해지면 만드는 재미가 있을거같네요!
  17. Hyoseong Jang
    갈수록 조금씩 어려워 지네요.
    정신 차리고 들어야 겠습니다.
  18. 잘봤습니다~!!
  19. 제로스
    margin
    border
    padding
    -content-
    height
    width
  20. 황갬희
    잘봤습니당!
  21. 흐힣
    구뜨!
  22. sparkah
    잘봤어용ㅎㅎ
  23. Mingi Son
    18.02.09 감사합니다!
  24. Hyun Woo Lee
    태그는 크게 block elements와 inline elements로 나뉘는군요.
    그 안의 속송값으로는 대표적으로 border, margin, padding, width, height이 있고요.
  25. Meflow
    너무 즐거움 느끼며 공부하고 있습니다. 감사합니다.
  26. 링링
    아무리 수십번 돌려봐도 ㅠㅠ 제 코드랑 비교해봐도
    영상 강의처럼 화면이 나오지 않아요.
    그냥 웹브라우저에서 지원을 하지 않는걸까요...ㅠㅠ
  27. 나비다
    수강완료
  28. BY Chin
    감사합니다.
  29. PassionOfStudy
    18-01-14 1일차 - 6번째 강의

    수강완료!


    -----------------------------------------------------------------------------
    @ 박스모델
    Padding, Boarder, Margin라는 속성의 값을 이용해서
    박스모델을 디자인하는 거였군요!
    -----------------------------------------------------------------------------
  30. goosen
    도구를 적극 활용해야겠어요 감사합니다^^
  31. 감사합니다.
  32. 코딩시작
    웹코딩 재밌습니답!
    대화보기
    • 창창
      코딩야학3기로 시작해서 계속 잘보고있습니다! 감사합니다
    • 서영훈
      은근슬쩍 빈문서에 html적고 enter치면 기본 양식 셋팅이 되는걸 보여주셧군요 이고잉님..ㅋㅋ
      갑자기 1초만에 양식이 생기길래 뭐지!하고 유심히 봤더니 이런것이 있었네요. 유용한 팁 감사합니다,
    • 이주형
      감사합니다!
    • 좋은 강의 감사합니다!ㅎㅎㅎ
    • keepgoing
      감사합니다!!
    • 화느
      재밌네요!
    • 판도라
      감사합니다.
    • 사람
      전 css강의에서도 패딩 마진 들었던거 같은데 기억이 훨씬 쉽네요 ^^
    • Gimme_Gsuit
      박스모델 아주 재밌네요!!! 기초긴 하지만 뭔가 웹이란 틀에 다가가고 있는 것 같습니다. 마지막 까지 열심히 하겠습니다. 항상 감사드립니다.
    • ConorMcgregor
      박스모델 아주 재밌네요 ㅎㅎ 직관적인 설명 덕에 한방에 이해하고 갑니다
    버전 관리
    egoing
    현재 버전
    선택 버전
    graphittie 자세히 보기