<frontend> {06} </CSS 박스 모델>

레이아웃을 구성하는 CSS 박스 모델

• CSS 박스모델과 테두리 스타일 지정하기
• 여백을 조절하는 속성
• 웹 문서의 레이아웃 만들기
• 웹 요소의 위치 지정하기

 

 

CSS 박스모델이란, 웹 문서의 내용을 박스형태로 정의하는 방법.

 

블록 레벨의 대표적인 태그는 <h1>, <div>, <p> 등이 있다.

 - 이들은 한줄을 혼자 차지(왼쪽, 오른쪽에 다른 요소가 올 수 없다.)

 

인라인 레벨의 대표적인 태그는 <span>, <img>, <stong> 등이 있다.

 - 이들은 콘텐츠 만큼만 영역을 차지, 나머지 공간에 다른 요소가 올 수 있다.

 

 

 

 

---

1. CSS박스모델  &  테두리 스타일 지정

📌 CSS 박스모델

🤔 박스모델의 기본 구성
콘텐츠 영역(contents), 패딩(padding), 테두리(border), 마진(margin) 등의 요소로 구성

🤔 콘텐츠 영역의 크기를 지정하는 width, height 속성

	.box1 {
    	width: 400px;
        height: 50%;
    }
 </style>
 ...
 <div class="box1"></div>

 

 

📌 테두리 스타일 지정

🤔 박스모델 방향 소개

🤔 테두리 스타일 지정하는 border-style 속성

🤔 테두리 두께를 지정하는 border-width 속성

🤔 테두리 색상을 지정하는 border-color 속성

🤔  둥근 테두리를 만드는 border-radius 속성

	#round {border-radius: 25px;}
</style>
...
<img src="img/cat.png">
<img id="round" src="img/cat.png">



cf. 이미지를 원형으로 표시하기
#round {border-radius: 50%;}

cf. 원하는 모서리만 둥글게 처리
#round {
	border-top-left-radius: 20px;
}

 

 

 

---

2. 여백을 조절하는 속성

• 요소 주변 여백을 설정하는 margin 속성

margin: <크기> | <백분율> | auto

ex)
#margin1 {margin: 50px;} /*상하좌우 모두 50px*/
#margin2 {margin: 30px 50px;} /*상하 30px, 좌우 50px*/
#margin3 {margin: 30px 20px 50px} /*상 30px 좌우 20px 하 50px*/

 

• margin속성을 사용해 가운데 정렬

	body {...}
    #container {
    	...
        width: 60px;
        margin: 20px auto;
        padding: 20px;
    }
    
<div id="container">
	...

 

• margin 중첩 이해하기
  • 요소를 세로로 여러개 배치할 때, 중간에 있는 마진이 지나치게 커지는 것을 방지
  • 이로 인해 서로 만날 때, 큰 마진값으로 합쳐진다.

 

 

 

• contents와 테두리사이 여백을 설정하는 padding 속성

	#padding1 {padding: 20px 30px 40px 50px;}
    ...
</style>
...

 

 

🤔 Style 형식

- 맨 앞의 선택자: 스타일을 어떤 태그에 적용할 것인지 알려주는 것.
- { }안에 스타일 정보를 넣는다. (이때, ;으로 구분, 여러 스타일 규칙을 지정가능)

Ex. 글자를 가운데로 정렬 및 파란색 글자로 지정하고 싶을 때,




🤔 Style Sheet
스타일 규칙을 한눈에 확인 및 필요 시 수정하기 쉽게 한군데 묶어 놓은것.
크게 스타일 시트는 2가지로 나눌 수 있다.
 - 브라우저 기본 스타일: 웹브라우저에 기본으로 만들어져 있음
 - 사용자 스타일: 사이트 제작자가 만듬
     i) 인라인 스타일
    ii) 내부 스타일 시트
    iii) 외부 스타일 시트
 


Ex) 인라인 스타일

 

 

 

---

3. 웹 문서의 레이아웃 만들기

• 배치 방법을 결정하는 display 속성 (block, inline, inline-block, none)

 

 

• 왼쪽, 오른쪽으로 배치하는 float 속성 (left, right, none)

<style>
	img {
    	float: left;	/* 왼쪽에 떠있게*/
        margin-right: 40px;	/*오른쪽 마진 40px*/        
    }

....

<img src="img/cat.png">
<p>Ex et adipisicing ... </p>

 

• float속성을 해제하는 clear 속성 (left, right, both)

<style>
	#box1 {
    	background: #ffd800;
        float: left;
    }
    #box2 {
    	background: #ffd800;
        float: right;
    }
    #box3 {
    	background: #ffd800;
    }
    
    #box4 {
    	background: #ffd800;
        clear: left;	/*floating 해제*/
    }
    
    ...
    
<div id="box1">박스1</div>

 

 

 

---

4. 웹 요소의 위치 지정하기

• 웹요소 위치를 정하는 left, right, top, bottom 속성
• 배치 방법을 지정하는 position 속성 (static, relative, absolute, fixed)

static: 문서의 흐름에 맞춰배치(기본값)&nbsp; /&nbsp; relative: 위치값 지정가능한 static. /. absolute: relative값을 사용한 상위요소를 기준으로 위치를 지정해 배치&nbsp; /&nbsp; fixed: 브라우저창 기준 위치를 지정해 배치

 

	#pos_left_top {
	position: absolute;
    left: 50px;
    top: 50px;
	}
...
<p id="pos_left_top">Ex et adipisicing ... </p>