[CSS] Box 속성

Box 속성

 

 

단위

 

px, %

• px 단위는 픽셀이라는 뜻이며 화면에 고정적인 길이를 의미하며 절대적인 수치를 의미한다.
• 1px은 디바이스마다 고정크기가 다를 수 있다.
• % 단위는 부모요소 대비 비율적 영향을 받는다.

 

 

em, rem

• em 단위는 요소 자기 자신의 font-size에 영향을 받는다.
• 예를 들어 h1태그의 font-size를 10px로 지정하고 width를 5em으로 지정하면 가로 길이는 5 x 10px의 50px이 된다.
• rem단위는 html태그에서 지정한 font-size에 영향을 받는다.
• html태그에는 기본값으로 16px이 정의되어 있습니다. 따라서 따로 font-size를 조절하지 않으면 2rem은 32px이된다.

 

 

vw, vh

• vw, vh 단위는 뷰포트(디바이스 화면)를 기준으로 설정되는 길이 단위이며, 0~100사이의 값을 가진다.
• vw는 width를 지정할 때 사용하며, vh는 height를 지정할 때 사용한다.
• 뷰포트란 화면 전체 크기를 의미하며 만약 어떤 이미지의 높이값을 100vh로 지정하면 데스크탑 화면이든 태블릿, 모바일 화면과 관계없이 높이가 화면 전체를 꽉 채우게 된다.

 

---

 

박스 관련 속성

 

 

 

width, height 속성

width, height 속성

width ↓

https://developer.mozilla.org/ko/docs/Web/CSS/width

width - CSS: Cascading Style Sheets | MDN

height  ↓

https://developer.mozilla.org/ko/docs/Web/CSS/height

height - CSS: Cascading Style Sheets | MDN

 

 

---

 

 

max-width, min-width   /   max-height, min-height  속성

max-width ↓

https://developer.mozilla.org/ko/docs/Web/CSS/max-width

max-width - CSS: Cascading Style Sheets | MDN

 

min-width ↓

https://developer.mozilla.org/ko/docs/Web/CSS/min-width

min-width - CSS: Cascading Style Sheets | MDN

 

 

 

 

---

 

 

margin 속성

 

margin ↓

https://developer.mozilla.org/ko/docs/Web/CSS/margin

margin - CSS: Cascading Style Sheets | MDN

 

 

---

 

 

padding 속성

 

padding ↓

https://developer.mozilla.org/ko/docs/Web/CSS/padding

padding - CSS: Cascading Style Sheets | MDN

 

 

---

 

 

 

border 속성

 

border ↓

https://developer.mozilla.org/ko/docs/Web/CSS/border

border - CSS: Cascading Style Sheets | MDN

 

 

---

 

 

 

box-sizing 속성

 

 

box-sizing ↓

https://developer.mozilla.org/ko/docs/Web/CSS/box-sizing

box-sizing - CSS: Cascading Style Sheets | MDN

 

 

 

---

 

 

 

 

display 속성

 

 

display ↓

https://developer.mozilla.org/ko/docs/Web/CSS/display-internal

<display-internal> - CSS: Cascading Style Sheets | MDN

 

 

---

 

 

overflow 속성

 

overflow ↓

https://developer.mozilla.org/ko/docs/Web/CSS/overflow

overflow - CSS: Cascading Style Sheets | MDN

 

 

---

 

 

 

opacity 속성

 

opacity ↓

https://developer.mozilla.org/ko/docs/Web/CSS/opacity

opacity - CSS: Cascading Style Sheets | MDN