공부기록, 21-04-14

 

display 설정

 

 

block
-너비(width) : 지정되어있지 않으면 최대한으로 늘어난다.
-높이 :  지정되어있지 않으면 최소한으로 유연하게 줄어들게된다
- 배열방향 : 한줄에 무조건 1개가 나온다. 
 
inline-block
-너비 : 지정되어있지 않으면 최소한으로 지정된다
-높이 : 지정되어있지 않으면 최소한으로 지정된다
-배열방향 : 한줄에 나올 수 있는 만큼 가로방향으로 나열된다.

 

 

 

 

문제 : section(green 색 막대)과 article(blue 색 막대)을 한 줄에 보이게 해주세요.
 

div {
  height:100px;
  background-color:red;
}

section {
  height:100px;
  background-color:green;
}

article {
  height:100px;
  background-color:blue;
}

section, article{
  width:100px;
  display:inline-block;
}