Display

1. 종류

• inline
• block
• inline-block
• flex
• list-item
• none

2. inline display

종류:

<span> <a> <b> <i> <img> <button> 

특징:

• 다른 요소와 같은줄에 머무르려고 하는 성향
• 필요한 만큼의 가로 길이만 차지함
• 가로 세로 길이의 개념이 없음
  => inline-block 으로 해결 (#3.번 참고)
  => width / marging, padding / line-height적용불가
• 텍스트 내에 효과를 줄때 주로 사용됨(bold)

3. block display

종류

<div> <h1> ~ <h6> <p> <nav> <ul> <li>

특징:

• 한줄을 모두 점유하므로 자동 줄바꿈이 적용됨.

4.inline-block

특징:
inline 과 block 속성이 섞인 display
동일라인에 여러 태그를 붙여 쓸 수 있다.(inline) + 사이즈 조절이 가능(block)

적용방법

display: inline-block;

을 통해 inline diplay 를 inline-block 로 변경해 사이즈 조절을 할 수 있다.
주의!!

• inline-block 끼리 공백이 생기는 경우,상위 div에 { font-size: 0; } 를 적용.
• inline-block 끼리 높이가 안맞을시 상위 공백이 생기는데, 이때는 { vertical-align: ---; } 값으로 top 등을 조절.

5. List-item(ol, ul)

ol : ordered list
ul : unordered list
리스트 무늬(?) 를 없애고 싶은경우: style 에서 list-style: none; 으로 설정

입력

<ol>
	<li>one</li>
  <li>two</li>
  <li>three</li>
</ol>

<ul>
	<li>one</li>
  <li>two</li>
	<li>three</li>
</ul>

출력

1. one
2. two
3. three

• one
• two
• three

6.Base Line

baseline 은 vertical-align의 조건을 충족시키면서 줄의 높이를 최소화시키는 곳에 위치한다.

• 팁! baseline 기준 ‘x’

  baseline 의 위치에 대해 감을 못잡겠다! 한다면 알파벳 ‘x’를 맨앞에 입력해보자. 모든 기준은 그 ‘x’임.

  

7. 가운데 정렬