#display의 특징들#
display안 에는 여러가지 속성들이 있다고 하는데요...당최 이해가 되지않아 글 써봅니다.
1.block 속성
-너비 + 높이를 지정해주지 않는 이상 한 없이 늘어나 버린다는 것.
-한 줄을 본인 혼자서 쓴다.
-본질은 말 그대로 block 이다.(마인크래프트 해봤다면 이해가 빠를 듯 합니다.)
-정렬은 스스로 margin-left, margin-right를 사용해서 정렬한다.(margin은 추후에 다루도록 하겠습니다.)
2.inline 속성
-너비 + 높이를 지정해주지않으면 한 없이 줄어들어 버린다는 것.
-한 줄을 여러명이서 쓸 수 있다.
-in + line (저는 안쪽에서 줄타기 이런식으로 외웠습니다;;)
-부모의 text-align에 의해 이동한다.
-본질은 글자화 이다 !
3.inline-block 속성
-inline과 같은 속성을 가지고 있다. !
block는 한줄을 다 차지하기 때문에 총 3줄이 나왔습니다.
inline은 최소한의 크기만 차지하기때문에 한 줄에 다 나왔습니다.
inline- block은 최소한의 크기만 차지하기때문에 한 줄에 다 나왔습니다.
(article은 본래 block속성을 가지고 있어 inline- block으로 바꾸었습니다 !)
block 속성은 한 줄을 글자와 상관없이 꽉꽉 채우는 모습 !
inline,inline-block 속성은 in + line 말 처럼 주어진 범위 안에서(지금은 텍스트입니다.) 색이 칠해지는 모습 !
오늘은 display의 간단한 예시 3가지를 알아봤는데요, 쉽고 재밌게 공부 할 수 있도록 노력하겠습니다 !
첫 포스팅인 만큼 미숙하지만 차차 성장해 나가는 모습을 보여드리겠습니다 >< !
오늘 하루도 고생많았습니다~**
굿밤 ♥