TIL2: css- block & inline

Seoyul Kim·2020년 3월 24일
0

CSS

목록 보기
7/11

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

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

0개의 댓글