CSS) 박스 모델(Box Model)

🎨 CSS(Cascading Style Sheets)
   ▶▶▶ Selector

 

✅ 너비width / 높이height

✅ margin /padding

✅ border

---

Box Model

📚 CSS에서 element(태그)가 박스 형태를 가지는 것을 박스모델이라고 부른다. 박스모델에는 아래의 그림과 같이 4가지 속성을 가짐

 

 

• content : 글이나 이미지 등의 실제 내용. 콘텐츠
• padding : border 안쪽에 위치한 content의 내부 여백. 배경색이나 이미지는 패딩까지 적용
• border : content와 padding을 감싸는 테두리, 테두리의 두께
• margin : border 바깥에 위치하는 content의 외부 여백. 배경색 지정x

 

1. width / height 속성

• content의 너비/ 높이를 지정. content부분만 대상

<style>
	div {
      width:100px;
      height:100px;
    }
</style>

• 💡 width나 height 중 하나만 정해두면 나머지는 알아서 맞춰진다.
• ✨ overflow: hidden; ➡ 지정한 너비/ 높이를 벗어난 콘텐츠 부분을 감춤
  ✨ overflow: scroll; ➡ 지정한 너비/ 높이를 벗어난 콘텐츠 부분을 스크롤로 볼 수 있기 해줌
• 웹 브라우저 크기 변경 시 자동 조절 되는 너비가 스크롤이 안생기게 고정하기
  📌 max-width: 500px; ➡ 너비 500px 이상 늘어나지 않음
  📌 min-wodth: 500px; ➡ 너비 500px 이하로 줄어들지 않음
    

 

2. margin / padding 속성

• content의 top, right, left, bottom 방향 지정

<style>
	div {
      margin-top: 10px;
      margin-right: 20px;
      margin-left: 30px;
      margin-bottom: 40px; //  = margin: 10px 20px 30px 40px;
      
      padding-top: 10px;
      padding-right: 10px;
      padding-left: 10px;
      padding-bottom: 10px; // = padding: 10px;
    }
</style>

 

 

💡 margin 속성을 auto로 설정하면 해당 content를 화면의 중앙에 둘 수 있다.

<style>
	div {
	  width: 100px;    
      border: 2px solid blue;
      margin: 0 auto;
    }
</style>

 

✅ padding 10px / padding 50px

✅ border:10px solid gray

✅ margin: 10px; / margin: 50px;

 

 

3. border 속성

3.1 border-style

📚 테두리 선의 스타일 지정

• border-style: dotted
• border-style: dashed
• border-style: solid
• border-style: double
• border-style: none

✅ top-right-bottom-left 순으로 각각 지정 가능

div {
	border-style:dotted dashed double; // 오른쪽 지정하고 왼쪽 지정안하면 좌우 적용됨
	border-style:dotted dashed double none; // 지정안할 곳은 none
}

 

3.2 border-width

📚 테두리의 두께 지정

• border-width: thin
• border-width: medium
• border-width: thick
• border-width: 10px

 

3.3 border- color

📚 테두리의 색깔 지정

• border-color: red
• border-color: red orange yellow green
  
  

✅ border 속성들 같이 지정할 수도 있음

div {
	border:10px dotted gray;
}

 

 

3.4 border-radius

📚 테두리 모서리를 둥글게 지정

• radius가 반지름! 각 모서리 마다 반지름의 길이를 지정해줘서 둥글게 만드는 것

✅ 50px; / 80px; / 50%;

 

⏩

.a {
	text-align:center;
 	width: 50px; 
	height: 50px;
	padding: 50px;
	background-color: gainsboro;
	border-radius: 50px;
}

.b {
 	text-align:center;
 	width: 50px; 
	height: 50px;
	padding: 50px;
	background-color: salmon;
	border-radius: 80px;
}

.c {
 	text-align:center;
	width: 50px; 
	height: 50px;
	padding: 50px;
	background-color: teal;
	border-radius: 50%;
}