CSS: 블록박스와 인라인 박스개념 및 예시(0512)

오늘은 블록박스와 인라인 박스에 대해 개념부터 자세히 알아보는 시간을 가졌다!

HTML 태그는 인라인 태그와 블록 태그로 나누고

인라인 태그는 인라인 박스, 블록 태그는 블록 박스로 출력하게 된다

 

---

1. 블록 박스

블록 박스

• 블록 박스는 새 라인에서 시작,
• 왼쪽에서 오른쪽 끝까지 통째 점유

1-1) 예제

코드

<div>
     <span>Block Span</span>과
     <span>Block Span</span>입니다.
</div>

결과

---

2. 인라인 박스

인라인 박스

• 인라인 박스는 블록안에 배치 옆에 다른 태그 배치 가능

2-1) 예제1

코드

<div style="background: orange;">
     <div>DIV1</div>
     <div>DIV2</div>
     <div>DIV3</div>
</div>

결과

 

 

 

2-2) 예제2

코드

<div>
     <div>DIV1</div>
     <div>DIV2</div>
     <div>DIV3</div>
</div>

결과

 

2-3) 예제3

코드

html코드

나는 <div style="display:none;">div(none)</div>입니다. <br><br>
나는 <div style="display:inline;">div(inline)</div>입니다. <br><br>
나는 <div style="display:inline-block; height: 50px;">div(inline-block)</div>입니다. <br><br>
나는 <div>div<span style="display:block;">span(block)</span></div>입니다.

css코드

div {
        color: blue;
        background: aliceblue ;
        border: 2px solid yellowgreen;
}
span {
          border: 3px dotted red;
          background: yellow;
}

결과

 

---

3. 박스의 배치 : position

3-1) normal flow

→ 웹 페이지에 나타난 순서대로 HTML 태그를 배치

→ position 프로퍼티를 이용하면 normal flow를 무시가능

 

3-2) position 프로퍼티를 이용한 배치 방법

→ 정적 배치 - position : static(디폴트)

→ 상대 배치 - position : relative

→ 절대 배치 - position : absolute

→ 고정 배치 - position : fixed

→ 유동 배치 - float : left | right

 

3-3) position 프로퍼티를 사용할 때, 태그의 위치

→ top, bottom, left, right 프로퍼티로 지정

   → 이들 프로퍼티는 배치 방법에 따라 다르게 사용됨

 

3-4) 예제1

코드

html코드

 <h3>상대배치, relative</h3>
h와 k글자에 마우스를 올려 보세요
<hr>
<div>T</div>
<div id="down">h</div>
<div id="up1">a</div>
<div>n</div>
<div id="up2">k</div>
<div>s</div>

css코드

div {
      display: inline-block;/*너비와 높이 줄려면 인라인 블락 해야됨*/
      width: 50px;
      height: 50px;
      background: red;
      color: white;
      border: 1px solid lightgray;
      text-align: center;
}

#down:hover { /*h 블록에 마우스를 올리면 상대 배치함*/
       position: relative;
       left: 20px;
       top: 20px;
       background: green;
}
#up1:hover { /*a 블록에 마우스를 올리면 상대 배치함*/
      position: relative;
      right: 20px;
      bottom: 20px;
      background: yellow;
}
#up2:hover { /*k 블록에 마우스를 올리면 상대 배치함*/
      position: relative;
      right: 20px;
      bottom: 20px;
      background: green;
}

결과

 

이렇게 해서 마우스를 올려 위치가 달라지게 만드는 예제를 만들어보았다!!

 

 

마지막으로 블록과 인라인, 블록 인라인에 대한 개념에 대해

적어보도록 하겠다.

 

---

4. 박스의 유형 제어 : display

display : block

block 태그 <p> <h1>~<h6> <hr> <div> <ol> <ul> <li> <input>

display : inline

inline 태그 <span> <a> <img>

display : inline-block

 

---

5. 표로 정리하기

블록박스(display:block)	인라인 박스(display:inline)	인라인 블록 박스(display:inline-block)
항상 새 라인에서 시작	새 라인에서 시작 못함. 라인 안(inline)에 있음	새 라인에서 시작 못함 라인 안(inline)에 있음
블록 박스 내에만 배치	모든 박스 내 배치 가능	모든 박스 내 배치 가능
옆에 다른 요소 배치 불가능	옆에 다른 요소 배치 가능	옆에 다른 요소 배치 가능
width와 height으로 크기 조절	width와 height으로 크기 조절 불가능	옆에 다른 요소 배치 가능
padding, border, margin 조절 가능	margin top, margin-bottom조절 불가능	padding. border, margin의 조절 가능

 

그럼 여기까지!!

개념을 한 번 더 정리하니 머릿속에 잘 들어오는 것 같다.