TIL2: css- block & inline

1. block & inline

block

• 대부분의 html element는 block 요소이다
  header, footer, p, li, table, div 등

• block 요소란 요소 바로 옆에 다른 요소를 붙여넣을 수 없다는것을 의미하며 항상 새줄에서 시작해 좌,우로 최대한 늘어나 영역을 차지한다.

inline

• block요소와 성질이 반대인 요소는 inline요소이다.
  span, a, img 태그 등
• inline요소는 요소끼리 서로 한줄에 , 바로 옆에 위치할 수 있으며 딱 텍스트 만큼의 영역만을 차지한다.
• inline요소가 연달아서 작성되어 있다면 새줄이 아닌 바로 옆에 출력된다.
• width나 height 값은 적용할 수 없다.

display나 float요소를 이용하여 inline이나 block요소의 성질을 바꿀 수 있다.

.inline-p{
	display: inline-block
}

.float-left{
    float: left;
}

• 이런식으로 display나 float속성을 이용하여 inline 성질로 바꿀 수 있다.
• 반대로 block 성질로 바꾸기 위해서는 display: block; 을 이용한다

2. none

• display: none; 스타일을 부여하게 되면 해당요소는 화면에서 보이지 않게 된다.
• 어차피 보이지 않을 요소를 작성하는 이유는 interactive한 웹을 구현할 수 있기 때문이다.

3. inline-block

• 요소를 인라인 레벨로 배치하며 블록레벨 속성을 지정할 수 있다.