WEB2 - CSS

박스모델

CSS box model 소개

강의

 

 

소스코드 

변경사항

 

 

 

박스 모델을 써먹기

강의

 

 

소스코드 

변경사항

 

댓글

댓글 본문
작성자
비밀번호
  1. 흐엥
    저도 링링님과 같이 코드가 인식이 안되는지....
    <!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만드신 뒤 따라하시면 잘 되실 것 같습니다~
  2. 혹시 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이 있고요.
    • Meflow
      너무 즐거움 느끼며 공부하고 있습니다. 감사합니다.
    • 링링
      아무리 수십번 돌려봐도 ㅠㅠ 제 코드랑 비교해봐도
      영상 강의처럼 화면이 나오지 않아요.
      그냥 웹브라우저에서 지원을 하지 않는걸까요...ㅠㅠ
    • 나비다
      수강완료
    • BY Chin
      감사합니다.
    • PassionOfStudy
      18-01-14 1일차 - 6번째 강의

      수강완료!


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