[웹프로그래밍] 8. 박스모델과 포지셔닝

박스모델

CSS에서 화면 구성요소를 다루기 위한 방법으로 레이아웃을 구성할 때 중요한 개념

 

포지셔닝

화면 배치를 위한 속성들을 활용하는 기법

 

-> 박스모델을 정의하고 레이아웃을 설계해서 원하는 위치에 구성요소를 자유롭게 배치

 

---

1. CSS 단위 px, % 등

 

1) 절대 단위 : 화면의 크기나 해상도에 따라 달라지는 단위로 특정용도 외 사용을 지양한다.

 

사용용도 : 박스의 크기를 지정할 때 px, 폰트 크기 지정할 떄 pt를 주로 사용

 

2) 상대 단위 : 부모 요소를 기준으로 상대적인 크기를 지정하는 단위

 

상대 단위 종류

• % : 100%를 기준으로 하는 상대 크기
• em : 부모 요소의 기본 크기를 1em으로 상대적인 크기 지정 -> 부모의 크기 변경시 변한다.
• rem : 부모가 아닌 최상위 root[like 브라우저 default]를 기준으로 상대적인 크기 지정 -> 기본 값이 변하지 않는다.
• vw, vh : 뷰포터 너비와 뷰포트 높이 1%에 비례
• vmin, vmax : 뷰포트 너비와 높이 중 더 작은 치수와 더 큰 치수 1%에 비례
  • v가 붙은 단위 : 뷰포트와 관련된 단위로 사용자에게 보이는 영역을 말한다
  • 반응형 웹 디자인과 관련된 단위

 

---

2. 박스모델

 

1) 박스 개요

 

html 문서의 기본요소들은 보이진 않지만 기본적으로 박스형태로 정의된다.

 

웹페이지의 레이아웃은 이러한 박스들을 상하좌우로 적절하게 배치하는 것을 의미한다.

 

안쪽 순서대로

• content : 콘텐츠 영역 -> 텍스트 및 이미지의 실제 영역
• padding  : 테두리와 컨텐츠 사이의 안쪽 여백 
• border: 박스를 둘러싼 테두리 영역 [보통 보이지 않게 설정]
• margin : 박스의 외부영역 다른 박스와의 여백

2) 박스 크기

 

박스 요소에 크기를 지정할 경우 기본적으로 콘텐츠 영역에 적용되지만

 

실제 박스 크기는 border, margin, padding이 모두 더해져야 한다.

 

• <div width = "300px"> : 콘텐츠 영역이 300px [즉, 박스 영역과 무관하게 콘텐츠 영역이 300px]
• 박스 크기 계산을 편하게 하려면 border 기준
  • box-sizing 속성 : border-box로 지정 [default : content-box, 부트스트랩의 경우에도 border-box가 기본]

 

3) border 속성

 

• border-width
  • 테두리 두께 지정
• border-style
  • 테두리 모양 지정 [4곳의 테두리 각각 다르게 지정 가능 ex. border-top-style]
• border-color
  • 테두리의 색상 지정
• border-radius
  • 테두리의 모서리를 둥글게 하는 속성 [반지름의 크기를 px, %등의 단위 이용]
• Shorthand
  • 여러 속성을 묶어 단축형으로 사용
  • border : width, style, color 순 나열

div{
    border-width: 2px 10px 4px 20px;
    border-width: 2px 10px;
}

div{
    border:5px solid red;
    border-left: 5px solid red;
}

 

4) margin 속성

박스와 인접 요소간의 여백

p{margin :10px 5px 15px 20px;} //top right bottom right 순
p{margin :10px 5px 15px;} // top, right left, bottom
p{margin :10px 5px;} //top bottom, right left
p{margin :10px;} //All

• auto: 브라우저가 자동으로 마진 조정 -> 박스요소를 가운데 정렬 할 때 사용
• inherit: 부모 요소의 마진 속성 상속

---

3. 레이아웃

박스의 배치 방법을 결정하는 속성[position]과 나란히 배치되는 박스 콘텐츠 지정하는 속성[float, display]가 있다.

 

1) 그리드 시스템 [table, float/display, flexbox, css grid]

화면을 테이블 형태로 격자로 나누는 것을 말하며 [css 라이브러리인 bootstrap의 경우 12개까지 컬럼 분할]

1~3 컬럼 구조

 

• 가로폭을 100%로 두고 분할하는 영역을 원하는 비율로 크기 지정
• 하나의 컬럼안에서 분할이 필요하면 해당 컬럼을 100%로 가정하고 분할

2) 컨테이너

다른 구성요소를 포함하는 박스영역

즉, 실제 구현할 때는 <div> 속에 다른 <div>가 들어가는 형태

 

 

<div class="container">
	<div class="header">
	</div>
	 <div class="contents">
		<div class="box"></div>	
		<div class="box"></div>
		<div class="box"></div>	
	</div>
 <div class="footer">
 </div>
</div>

• container class는 header, contents, footer를 가지는 컨테이너
• contents class는 box 클래스 요소를 가지는 컨테이너
•  

---

4. position

박스 구성요소를 배치하기 위한 속성 [중요]

 

1) static

• 포지션 속성의 기본값
• 나열한 순서대로 배치 원하는 위치에 배치 불가
• 왼쪽에서 오른쪽으로 추가, 공간이 없으면 다음 줄
• div 같은 블럭 요소들의 경우 위에서 아래로 배치 [float 속성을 이용해 좌우로 배치 가능]

2) relative

• static처럼 순서대로 배치되지만, 원하는 위치 지정 가능
• 원래 있던 위치로부터 상대적인 위치에 지정 가능
• 음수값으로 지정을 하면 반대방향으로 지정

3) abolute

• 요소를 좌표로 원하는 위치에 배치
• 부모요소를 기준으로 가장 가까운 상위 요소 중 포지션 속성이 relative인 요소
• 상위 요소가 없다면 브라우저 좌측 상단을 기준
• 박스속에 박스를 넣는다면 div-> relative, div-> absolute로 위에서 부터 거리와 왼쪽으로 부터 거리를 지정 

4) fixed

• absolute 속성과 같이 좌표로 위치 지정하지만 기준이 브라우저 창
• 페이지를 스크롤하더라도 고정, 항상 같은 위치 유지

5) z-index

• 박스들이 중첩되는 경우 박스들의 수직 위치 조정
• 맨 위로 보내기, 맨 뒤로 보내기
• 높을수록 위로, 작을 수록 아래로 배치
• -인 경우 기준 콘텐츠의 아래쪽
• position 속성이 적용될 경우에만 작용

---

5. float/display

1) float 속성

• div같은 block 요소를 화면위에 떠있는 형식으로 배치 가능
• 좌측이나 우측부터 정렬되는 박스 콘텐츠 배열 가능
  
  
• float
  • float: left, float: right;를 지정해 width는 콘텐츠 표시하기 위해 필요한 만큼만 차지하고 공간을 비워둠
  • float 속성이 더이상 동작하지 않기 원하면 clear 속성 지정
• clear
  • float 속성 중지
  • float:left; -> clear:left;로 무효화
  • clear: both; -> 기본상태로 돌리는 방법 

2) display 속성

요소를 보여주는 방식을 지정하는 속성

콘텐츠를 보이지 않게 하거나 float을 대체해 나란히 배치하는데 사용가능

• none: 보이지 않음, visibility:hidde 속성과 유사하지만 none의 경우 영역 자체가 사라짐
• block: 블록 박스 [div의 기본 속성]
• inline: 인라인 박스 [span의 기본 속성]
• inline-block : block과 inline의 중간 형태
  
  
• block과 inline
  • block
    • width=100%인 태그들로 요소를 나란히 배치 불가
  • inline
    • 콘텐츠의 크기만큼만 자리차지해 다른 콘텐츠와 나란히 배치가능
    • width와 height 사용 불가 [원하는 크기로 지정 불가]
  • inline-block
    • block 태그에 inline속성 가지도록 변경 가능 [반대도 가능]
    • 즉, inline 속성인 다른 콘텐츠와 나란히 배치하면서 block 속성인 width와 height을 지정 가능

---

6. 박스요소 정렬

문서내 영역을 정렬하기 위해 박스 요소들로 배치

 

1) 블럭 요소 가운데 정렬

• margin:auto; 
• <div>등으로 블럭 박스를 만들었을 경우
• width 속성이 100%이거나 정의되지 않으면 정렬 불가

.box-center{
   margin: auto;
   width: 50%;
   border: 3px solid green;
   padding: 10px;
}

2) 블럭 요소 좌우 정렬

• margin: absolute;
• position 속성을 absolute로 두고 좌우로 원하는 위치에 정렬

.box-right{
   margin: absolute;
   right: 0px;
   width: 50%;
   border: 3px solid green;
   padding: 10px;
}

3) 블럭 요소 수직 정렬

• padding 속성으로 박스의 안쪽 위/아래 여백을 동일하게 지정

.box-vcenter{
   border: 3px solid green;
   padding: 50px 0; //위/아래 50px, 좌/우 0
}

4) 이미지 가운데 정렬

• 부모 요소의 속성에 text-align : center를 사용하는 방법
• img 태그만 사용하면 블록 속성으로 바꿔서 margin:auto를 사용하는 방법

div{\
	text-align:center;
}

img{
	display: block;
    margin: auto;
}

<div>
	<img src="a.jpg">
</div>