Samla's Study

 

   1. display 종류

• 모든 요소는 딱 하나의 display 값을 갖음 (중복 불가)
• 대부분의 요소는 "inline" 혹은 "block"
• display 종류
  • inline
  • block
  • inline-block
  • flex
  • list-item
  • none

2. inline display

• "inline" display를 기본값으로 갖는 요소들
  • <span>
  • <a>
  • <b>
  • <i>
  • <img>
  • <button>
• "inline" display의 특징
  • 앞뒤 텍스트와 같은 줄에 머무름
  • 가로 길이는 필요한 만큼만 차지
  • width / height 설정이 되지 않는다. 내용에 맞게 자동 설정

3. block display

• "bolck" display를 기본값으로 갖는 요소들
  • <div>
  • <h1> ~ <h6>
  • <p>
  • <nav>
  • <ul>
  • <li>
• "block" display의 특징
  • 앞뒤 요소와 다른 새로운 줄 생성
  • 가로 길이를 최대한 많이 (기본 100%) 차지
  • width / height 설정값으로 가로, 세로 폭 조정 가능

4. inline-block display

• "inline-block" display의 특징
  • "inline"과 같이 앞뒤 요소와 같은 줄에 머무름
  • "block"과 같이 width / height 설정 가능

5. display 변경

<style>
	/* <i> 태그 (inline)을 "block" display로 변경 */
	i {
    	display: block
    }

	/* <div> 태그 (block)을 "inline" display로 변경 */
	div {
    	display: inline
    }
</style>

안녕하세요 <i>반갑습니다</i> 잘 부탁 드립니다.

<div>
Hello
</div>

<div>
world!
</div>