[CSS]display(code)

See the Pen NWdRejX by minsucoding (@minsucoding) on CodePen.

---

 

 

안녕하세요 오늘 알아볼 CSS는 block,inline,inline-block 입니다

 

우리가 쉽게 놓치고 가기 쉬운 부분이라고 생각합니다~

 

우선 위 code.pen에 예시를 보시고 간단하게 아래 설명 드리겠습니다!

 

 

 

 

 

---

 

 

우선 첫번째ㅡ BLOCK의 성질은 우리가 width를 따로 정해주지 않으면 자신이 속해있는 요소의 폭 전체를 차지하는 성질이 있어요

만약 우리가 width,height를 정해준다면 위 예제처럼 요소의 폭 전체가 아닌 지정해준 값만큼만 차지하는걸 볼수있죠!

 

두번째ㅡ INLINE은 우리가 width,height 를 줄려고 해도 자기가 가지고 있는 요소의 크기가 그이상도,이하로도 변하지 않으려는 성질이 있어요 (엄청 고집불통이에요!)

 

세번째ㅡ INLINE-BLOCK은 INLINE이 움직이지 않으려는 성질을 보완해주기위해서 BLOCK가 합쳐진 새로운 속성값이에요~

여기서 INLINE이랑 헷갈리실수 있지만 INLINE은 자기가 가진 텍스트,이미지와 같은 가지고 있는 것의 크기가 기준이에요 INLINE-BLOCK은 INLINE처럼 자기가 가지고 있는것의 크기가 기준이지만 우리가 width,height의 값을 지정 해준다면 BLOCK의 성질도 가지고 있기때문에 바뀌는것이죠!

 

 

---

 

뒤에서 다룰 margin과 padding에서도 요소가 가지고 있는 성질이 중요하니 잘 숙지해주시기 바랍니다!!