chapter. 08 CSS Beginner (2) (BOX model, BOX sizing, CSS 단위)

웹페이지를 아름답게 만드는 CSS(Cascading Style Sheets)

 

CSS Beginner(2) 4. ~ 6.

 

 

| 목차

1. CSS 적용

2. CSS 구성(구조, 선택자, 주석)

3. CSS 특성

4. BOX model

5. BOX sizing

6. CSS 단위

7. 이미지 다루기

8. Overflow

9. 폰트 꾸미기

10. 테두리 꾸미기

11. 배경 이미지 설정

12. 요소 정렬하기

 

 

4. BOX model

• Inline Box
  • 한 줄에 표시
  • <a> , <img>, <span>
  • 태그로 감싸진 내용 만큼만 영역을 차지
  • width와 height로 요소의 크기를 조절할 수 없음(레이아웃을 활용할 수 없음!)
  • inline은 좌우 margin, padding만 적용 가능 상하(-다른 레이아웃)는 불가능)
• Block Box
  • 개별 요소마다 줄을 바꿈
  • <h1>, <p>,<div>
  • width와 height로 요소의 크기를 조절
  • 내용과 별개로 자신의 영역을 가짐

• block은 가지지만 inline은 가지지 못하는 것 :: width, height, margin, padding
  • inline은 좌우 margin, padding만 적용 가능
  • inline에 적용되는 것처럼 보이는 상하 padding은 레이아웃에 영향을 미치지 못함
• Inline-block
  • inline과 block의 특징을 모두 포함
  • 줄을 바꾸지 않음
  • block처럼 width(너비)와 height(높이)를 가짐
  • 상하 margin, padding이 레이아웃에 유효

 

| Box Model: Block box가 가지는 기본 모델

(1) 여백(margin):

테두리로부터 다른 요소까지의 거리(다른 요소를 밀어냄. 다른 html 요소가 침범할 수 없음)

 

-상하좌우에 모두 같은 20px의 여백을 적용

div{
	margin: 20px;
}

-상하(20px) 좌우(30px) 각각 다르게 설정하는 경우 

div{
	margin: 20px 30px;
}

-상(20) 우(10) 하(20) 좌(10) 각각 설정하는 경우

div{
	margin: 20px 10px 20px 10px;
}


div{
	margin-left: 20px;
	margin-right: 10px; 
	margin-bottom: 20px; 
	margin-left: 10px;
}

 

 

(2) 테두리(border):

내용을 둘러싼 테두리

세팅을 해주어야 가시적으로 확인할 수 있음.

아래와 같이 하나의 속성에 두께, 유형, 색상을 적용 가능

div{
	border: 6px solid blue;
}


div{
	border-width: 6px;
	border-style: solid;
	border-color: blue;
}

 

(3) 패딩(padding):

내용으로부터 테두리까지의 거리

-상하좌우에 모두 같은 값 적용

div{
	padding: 4px; 
}

-상하(4) 좌우(6)

div{
	padding: 4px 6px; 
}

-상(4) 우(6) 하(4) 좌(6)

div{
	padding: 4px 6px; 
}


div{
	padding-top: 4px;
	padding-right: 6px;
	padding-bottom: 4px;
	padding-left: 6px; 
}

 

5. BOX sizing

요소의 크기 결정 시 중요한 역할을 함. (박스에 적용된 사이즈의 기준 정하기)

 

(1) content box(자동-기본 설정)

content 영역에만 사이즈를 적용하고 요소 전체 사이즈에 패딩과 테두리를 포함하지 않는 것

div {
	box-sizing: content-box;
}

 

(2) border-box

content 영역이 아니라 테두리 끝까지의 너비-높이를 요소의 사이즈로 간주(요소 사이즈에 패딩과 테두리를 포함함.)

div {
	box-sizing: border-box;
}

> 요소의 size는 content만 차지하는 영역인지, 아니면 내용이 아닌 테두리 자체의 두께, 크기까지 생각할까?

   > 아마 테두리까지. 요소 사이즈에 패딩과 테두리를 포함하여 설계하게 될 것임. (=border-box)

> content-box를 기준으로 요소 사이즈를 책정하면, 생각했던 요소의 크기보다 커지는 경우가 있음.

> 테두리를 포함하여 사이즈를 적용하는 키워드를 적용해주는게 좋음 

 

기본값은 내용이 차지하는 영역에만 사이즈가 적용되는 content-box universal selector로 전체 적용

*{
	box-sizing: border-box;
}

 

6. CSS 단위

-스크린 환경에 적합한 단위: px, %, rem/em

• px(픽셀)
  • 스크린을 구성하는 작은 점(해상도 등에 따라 달라짐)
• %
  • 부모 요소를 기준으로 크기를 설정
• em/rem
  • em: 부모 요소의 폰트 크기를 기준으로 비례하여 크기 설정
  • rem(root em): 루트 요소의 폰트 크기를 기준으로 비례하여 크기 설

-요소 간의 복잡한 위계 관계… 상위 요소를 일일히 정한다는 것은 복잡하고 어려움.

→ 최상위 요소인 html의 폰트 사이즈를 기준으로 크기 설정하는 방법은? → rem

-통일된 기준을 잡을 때는 rem 단위 사용을 권장

브라우저 환경에서 쓰이는 특수 단위: vw/vh

• viewport-각 디바이스별 화면의 너비/높이를 기준으로 배율 설정
• 내가 지금 보고 있는 브라우저 영역을 항상 꽉 채우는 요소를 만들고자 할 때. (쇼케이스 페이지, 이벤트 홍보 페이지 등)
  • 현재 가시 영역의 높이의 100%를 차지해라. 어느 기기의 화면을 보더라도 현재 켜놓은 화면에서 스크롤을 내리지 않는 이상 화면의 100%를 차지할 것임. (스크롤을 통해 하단의 컨텐츠로 이동할 수 있음)

div.expand{
	height: 100vh;
}