웹스터디

박스모델

토픽 웹스터디 > CSS Dictionary

박스 모델은 컨텐츠의 넓이, 컨텐츠의 높이, 패딩, 테두리, 마진으로 이루어져 있다.  아래 이미지는 컨텐츠 영역과 마진, 테두리, 패딩이 어떻게 연관되어 있는지 보여준다.

box를 이루고 있는 요소

  • content : 요소가 담고 있는 내용
  • padding : content와 border사이의 간격
  • border : 테두리 선
  • margin : border와 다른 요소 사이의 간격

Sample

github에서 보기

댓글

댓글 본문
  1. 이기성
    안녕하세요.
    틈틈히 CSS를 배우고 있는데 크롬개발자 도구로 경로 파일을 찾았는데 minified 파일이었습니다. 그러나 css 변경을 하려고 차일드 테마에서 style-main.mini.css파일을 가져와 수정하니 적용이 안되어 고민하다 문제가 무언지 부탁드리게 되었습니다.
    고견 좀 부탁드립니다.
  2. キム ドンミン
    이것 역시 예제 부분에서 오류가....
    부탁드리겠습니다...^^
  3. Jimin yoo
    이거 샘플에서 404 That page doesn't exist. 나와요
  4. ansk
    감사합니다 리체님
  5. jhjang5985
    Sample에 "404 That page doesn't exist." 오류가 뜹니다. 오류인가요?
  6. teang
    자료 찾다가 들어왔는데 정리가 깔끔해서 정말 좋습니다. 자주 찾아오겠습니다.
  7. ㅋㅋ
    감사합니다 ^^
  8. 푸른하늘
    9일차 공부 감사합니다
  9. mirong1
    저는 약자가 무슨뜻인지 궁금할 때, 구글에서 ~~~ stand for 쳐서 찾고 있습니다. 왠만하면 다 나옵니다. stack overflow 에 많은 사람들이 질문, 답변을 올려 놓았더라구요.
    대화보기
    • 이주형
      감사합니다~! 리체님! ^_^
    • garimtoxg@gmail.com
      감사합니다!
    • 유밍끼
      앞으로 아주 유용하게 잘 쓸듯 합니다!
      감사합니다, 사전을 만들어주신 리체님! ^^
      HTML 사전도 유용하게 잘 보겠습니다. 정말 입문자에게 마른하늘에 단비같은 사전이네요...♡
    • 궁금이
      질문 있음니다 !

      갑자기 궁금해지는 코딩에 쓰이는 단어들의 뜻,어원을 알 수 있는 곳은 없나요 ?

      예를 들면 " herf " 는 하이퍼링크, " li " 는 리스트 등등등...

      아니, 그건 외워야 하는거야 ! 하면 별 수 없지만....ㅎㅎ

      시원한 답변 미리 감사 드림니다. 좋은 하루 되세요 !
    • 65happy
      앞으로 자주 보게될거같아요
      감사합니다
    • HTML 사전도 잘 봤는데 CSS 사전도 감사히 이용하겠습니다^^~
    • 송지에
      리체님 감사합니디
    • 내꿈은 발로텔리 -오성민-
      머리를 이쁘게 깍아 주셔서 감사합니다 하하하 아프리카사람들은 잼을좋아해 잼먹고 잼먹고 배탈이나서 병원에 병원에 병원에 갔더니 호박같은 간호사가 나를부르네 아 아 알러뷰 뷰 뷰 뷰알미 미 미 미스코리아 아 아 아름다워라 감사합니다
    • 게이
      공감이요 ㅎㅎ
      대화보기
      • 아프리카대표오성민
        이해가잘됬네요 감사합니다
      • 리체:leezche
        감사합니다. 수정되었습니다. ^^
        대화보기
        • 지나가는
          패딩이 어떻게 연된되어 있는지 보여준다.

          연된 오타아닌가요 ㅎ
        • Seyoon Hwang
          잘봤습니다 ^^
        • 리체
          감사합니다. 오류 있으면 말씀해 주세요... ^^
          대화보기
          • zxcvxr
            복습차원에서 다시 한번쭉 봐바야 겠네요 감사합니다.
          • 리체
            별말씀을요
            대화보기
            • egoing
              리체님 좋은 사전 만들어주셔서 고맙습니다 :)