2. inline, inline-block, block 에 대해서

Mun Lee·2020년 6월 23일
0
What is block?
block은<header>, <footer>, <p>, <li>, <table>, <div>, <h1>처럼 바로 옆에 다른 무언가가 오지 못하는 것을 가르킨다.
inline은 <span>, <a>, <img>처럼 바로 옆에 무언가가 올 수가 있고 미치는 범위도 그 칸 만큼 차지한다.

그렇지만 block <-  -> inline 의 특성을 바꿀수가 있다.

display: inline-block; 으로
원래는 block 인 것도 inline처럼 사용이 가능하다.

.inline-p {
  display: inline-block;
}
.float-left {
  float: left;
}
.float-right {
  float: right;
}
여기를 보면 p는 block의 특징을 가지고 있지만 inline으로 할 수 있게끔 하는 클래스 inline-p가 있다.


.hide {
  display: none;
} -> 이렇게 하면 화면에는 아무것도 보이지 않게 된다.
profile
개발자가 되고자 하는 30살

0개의 댓글