선생님을 위한 프로그래밍 수업

코스 전체목록

닫기

박스모델의 종류

박스모델의 종류

  • 블록 레벨 엘리먼트(block-level element)
    • 한줄에 하나의 엘리먼트만 표시되는 종류의 엘리먼트 (예제1)
    • 다른 인라인 엘리먼트 뿐 아니라 블록 레벨 엘리먼트도 컨텐츠로 포함할 수 있다.
    • DIV, H1~H6, P, FORM, UL, LI, ADDRESS, BLOCKQUOTE, FIELDSET, TABLE, HR 등
       
  • 인라인 엘리먼트(inline element)
    • 한줄에 여러개의 엘리먼트가 표시되는 종류의 엘리먼트 (예제2)
    • 인라인 엘리먼트만 포함 할 수 있고, 블록레벨 엘리먼트의 자식이어야 한다.
    • a, img, em, strong등
       
  • display 속성을 이용해서 블록레벨 엘리먼트를 인라인 엘리먼트로 바꿀 수 있고, 반대경우도 가능하다.
     
  • display 속성의 값을 none으로 하면 엘리먼트를 화면에서 보이지 않게 할 수 있다.

예제

example1.html - li는 블록레벨엘리먼트이기 때문에 한줄에 하나의 엘리먼트만 표시된다. (jsfiddle, github)

<html>
    <body>
        <ul>
            <li>생활코딩1</li>
            <li>생활코딩2</li>
            <li>생활코딩3</li>
        </ul>
    </body>
</html>

example2.html - a는 인라인엘리먼트이기 때문에 한줄에 여러개의 엘리먼트가 표시된다. (jsfiddle, github)

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
    </head>
    <body>
        <a href="http://opentutorials.org">생활코딩1</a>
        <a href="http://opentutorials.org">생활코딩2</a>
        <a href="http://opentutorials.org">생활코딩3</a>
    </body>
</html>

example3.html - 인라인 엘리먼트를 display 속성을 이용해서 블록레벨엘리먼트로 변경 (jsfiddle, github)

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
		<style>
			a {
				display: block
			}
		</style>
	</head>
	<body>
		<a href="http://opentutorials.org">생활코딩1</a>
		<a href="http://opentutorials.org">생활코딩2</a>
		<a href="http://opentutorials.org">생활코딩3</a>
	</body>
</html>

example4.html - display:none을 하면 엘리먼트를 화면에서 보이지 않게 할 수 있다. (jsfiddle, github)

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
	</head>
	<body>
		<a href="http://opentutorials.org">생활코딩1</a>
		<a href="http://opentutorials.org" style="display:none">생활코딩2</a>
		<a href="http://opentutorials.org">생활코딩3</a>
	</body>
</html>

댓글

댓글 본문
  1. Joo eun
    공유해 주셔서 감사합니다. 이것은 나를 위해 매우 도움이됩니다.
    https://www.pictadesk.com/
  2. hyuna
    inline과 block이 정리가 싹 되었어요.
    감사합니다.
  3. yihsang
    감사합니다.
  4. Rhys Jung
    상하의 마진이나 패딩이 먹질 않아 그보다는 float 로 구상하시는게 좋을것 같아요
    물론 UI상으로는 크게 달라지진 않겠지만 겹쳐지는 영역이 발생될수 있지 않을까 하네요
    함께 공부하니 좋네요
    대화보기
    • JustStudy
      고맙습니다
    • 빨강머리앤
      감사합니다... ^^
    • 이웃집토토로
      [정리]
      금 강의는 HTML에서 콘텐츠라는 정보를 담아 표현하는 방식에 대한 내용입니다.
      즉, 콘텐츠를 보여주는 display 시각표현에 대한 설명입니다.
      생소한 개념일 수 있으나 막상 사례 위주로 보면 이해가 어렵지 않습니다.

      display 방식은 가장 대표적으로 위에 소개된 2가지가 있는데
      콘텐츠가 블록단위(Block level)로 알아서 시각적으로 구분되서 렌더링되느냐
      쭉 이어서 한줄로 나오느냐의 차이가 있습니다. .

      그 외 다른 시각표현 방식 중 display:none 은 주로 자바스크립트를 끄고 키는데 사용됩니다.
      주석해서 코드에서 지우지는 않고 쓴다고 보시면 됩니다. visibility:hidden은 웹접근성을 높이는 수단으로
      사용될 수 있는데 비장애인이라면 필요없는 부가정보를 담는데 사용될 수도 있습니다.
      다만 레이아웃 상에서 실제 부피를 차지하므로 position: absolute; 등과 같이 사용됩니다.

      어차피 마크업이니 어떻게 쓰던지 타겟 사용자 환경에서 원하는 퍼포먼스가 일어나면 문제는 없을 것입니다.
      그런데 이러한 방식들이 스크린리더 프로그램별로 인식에 차이가 있어서 대세라는게 존재하게 됩니다.
      나라별로 기업별로 개인별로 중시하는 콘텐츠와 전달방식에 따라 가장 적합한 것을 사용하면 됩니다.
    • SK Kim
      element matrix가 서로 상호작용하는 룰은 머리로 이해하는거 보다는 연습을 통해 감으로 익혀야 할거 같네요, 흐미 햇갈리..
    • 안광현
      가로형태로 버튼을 나열해 디자인한다고 했을때
      인라인 엘리먼트들을 block으로 바꿔 패딩, 마진값을 주며 조절하는게 편할 수도 있겠네요.
    • 크레용샘
      너무 잘 보고 갑니다. 감사합니다. 매번
    • 이경선
      display:inline / display:inline-block 등으로 할 수 있습니다.
      대화보기
      • 굳별
        inline element를 display:block; 해서 블록화 시키는 것처럼
        block element를 inline성격의 element로 바꿀 수 있나요?
      • yunye
        input의 display 타입을 보니 inline-block이라고 되어있네요. 두 타입의 혼합형인거 같아요
        대화보기
        • YellowBall
          잘 들었습니다.
        • 이진호
          좋은 강의 감사합니다^^
        • 스마트
          강의 잘듣고 갑니다.
        • 오히
          설명도 찬찬히 잘 해주시고~ 목소리가 진짜 좋으시네요. :) 공부 잘 하고 갑니다~~
        • 밤비
          진짜 재밌게 수업듣고 있습니다. 감사합니다~
          완전 팬됬어요 호호
        • 씨봉대사
          <input>은 인라인요소이지만 padding,margin 상하좌우 먹는데요 보더가 상하 올라타지 않아요
        • 밝게빛나다
          강의를 다 본 후 한번 더 머릿속으로 정리할때 별모모님의 댓글이 많은 도움이 됩니다^^; 감사드립니다.
        • 별모모
          이고잉님, "조족지혈"이지만 도움이 된다 하시면 "감개무량"하야 "망아지경"에 경중을 잃을까 염려합니다. 나라의 일꾼들에 큰 도움을 주시니 제 나라가 강대하여, 만국에 존경을 받고 아름다운 나라가 되어 기쁘나이다. ^^
          대화보기
          • egoing
            별모모님이 이렇게 보강해주시니 제 수업이 풍부해지고 있네요. 항상 감사드립니다 ^^
            대화보기
            • 별모모
              [ display:none 과 visibility:hidden ] display는 "none" 속성으로 (보였다, 사라졌다 하는)마법같은 디자인을, "block", "inline" 속성으로 디자인을 수정해도 변경되지 않는 당황스런 일이 겪을 수 있습니다. display:none와 visibility:hidden의 차이는 "visibility:hidden"은 존재(부피)는 하지만 단지 보이지 않는다는 것이고, "display:none"는 아예 부피도 차지하지 않는 존재 자체가 없다는 것입니다.
              대화보기
              • egoing
                그러네요. 동영상을 수정하겠습니다. ^^
                대화보기
                • 마지막동영상에서 인라인엘리멘트가 좌우에만 적용이 되고 상하는 무시가 된다고 하면서
                  width:100px height:100px 라고 하셨네요 세미콜론이 빠져서;;;
                • 용12
                  잘봤습니다!~!
                • egoing
                  자바스크립 등을 이용해서 탭을 만들때 탭에 마우스를 롤오버하면 해당 탭에 해당되는 것만 보이게 하고 싶을 때 사용하는 것도 한 예가 될 것 같습니다.
                  2013년 6월 6일 목요일에 Disqus님이 작성:
                  대화보기
                  • 정기 김
                    display = none 이나 hidden 은 어떨때 사용되나요? 시각장애인을 위해? 보이지 않게 해야할때가 언제 인지 궁금하네요.
                  • Starmomo
                    [정리] inline element도 박스모델을 적용할 수 있지만, 좌우만 적용되고 상하값은 무시된다. 인라인 엘리멘트는 박스모델처럼 컨텐트 영역을 별도로 지정할 수 없다.
                  • 누노
                    블록레벨/인라인 구분이 잘 안가서 찾아봤더니 블록레벨 엘리먼트는 width값이 기본 100%라는 설명이 있네요. 덩실덩실. br과 p가 왜 다른지 잘 몰라서 br을 두번 쓰고 그랬는데 이번 편을 보면서 또 뻥 뚫리고 갑니다.
                  • egoing
                    수정 했습니다. 고맙습니다. ^^
                    대화보기
                    • unsteadyflow
                      예제3번의 jsfiddle을 클릭하면 "target="_blank"로 되어 있지않아서 현재페이지에서 열리게 되네요. 강의를 듣던 중 페이지가 변환되고 있어요. 변경해주세요~^^
                    • manorgass
                      display:none 같은 속성은 워게임같은 곳에 쓰이나요?
                    • egoing
                      수정했습니다! 고맙습니다 :)
                      대화보기
                      • Hwan Min Hong
                        h1은 블록레벨엘리먼트이기 때문에 한줄에 하나의 엘리먼트만 표시된다.여기서 h1이 아니라 li 가 맞는거 같아요.
                      버전 관리
                      egoing
                      현재 버전
                      선택 버전
                      graphittie 자세히 보기