WEB2 - CSS

박스모델

CSS box model 소개

강의

 

 

소스코드 

변경사항

 

 

 

박스 모델을 써먹기

강의

 

 

소스코드 

변경사항

 

댓글

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

    수강완료!


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