박스모델
- 생성하는 태그의 차지하는 공간은 모두 네모 모양이다.
(왜? 모니터가 네모라서..)
✅ 박스모델의 구성
-
바깥여백(margin) ★
-
테두리=경계선(border)
-
안쪽여백(padding) ☆
-
내용(content)
- 컨텐츠는 너비(width)와 높이(height)를 가지고
- 박스 자체는 👉 top, right, bottom, left 를 가진다.
① 바깥여백(margin)
- 태그의 바깥쪽의 공백을 추가할 때 사용하는 속성
- 공백이 생성 되면, 그 공간은 죽은 공간 (사용할 수 없음)
- 컨텐츠(그림 등)을 움직이게 할 때
margin: 10px; 👉 상하좌우 모든 영역에 적용
margin: 10px 20px; 👉 10px(상하) 20px(좌우)
margin: 10px 20px 30px 40px; 👉10px(상) 20px(우) 30px(하) 40px(좌)
margin: auto; 👉 정중앙 정렬 (모든 화면,환경에 적용(오토))
padding은 오토 없음 😂
✅ 한 방향에만 방향을 주고 싶을 때 . . .👇
margin-top;
margin-bottom;
margin-right;
margin-left;
#div1 {
width: 200px;
height: 200px;
background-color: red;
margin: 50px 100px;
}margin: 50px 100px; 👉 상하 바깥여백에 50px, 좌우 바깥여백에 100px
② 테두리=경계선(border)
- 바깥쪽 선을 제작 (두께,종류,색상) / 1px solid black
border: 20px solid black; 👉 두께 20에, 직선으로 검정색칠
③ 안쪽여백(padding)
- 태그의 안쪽 공백을 추가할 때 사용하는 속성
- 안쪽의 여백을 증가시키기 때문에, 시각적으로 전체의 크기가 변함
- 텍스트를 가운데로 모아주거나, 옮길 때 주로 사용
- [ ❗ ] 실제로 콘텐츠가 이동되는게 아님 !!
(여백으로 인해서, 움직여보이는것뿐(커보이는것뿐))
✅ 한 방향에만 방향을 주고 싶을 때 . . .👇
padding-top;
padding-bottom;
padding-right;
padding-left; - padding은 auto 없음 !!
😵 설명이 어렵다.. 느낌으로 ..알지?..
근데 이렇게 눈으로 봤을 때 헷갈리면 어렵겠지?
⭐ box-sizing: border-box; 👉 컨텐츠,공백의 크기를 합쳐서 원래 크기 유지
box-sizing: border-box; 를 통해서, 같은 사이즈로 눈으로 보임 !!
padding 예 ) 빨간 네모 박스 기준으로 안쪽여백(padding) 주면, 글자가 가운데로 모이는 검색창 생각 !!
<style>
div {
width: 200px;
height: 200px;
}
#div1{
background-color: lightpink;
margin-left: 400px;
}
#div2{
background-color: lightgray;
margin-left: 600px;
}
#div3{
background-color: lightgreen;
margin-left: 800px;
}
#div4{
background-color: lightskyblue;
margin-left: 1000px;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</body>
</html>✅ 테두리를 동그랗게 만드는 방법
- border-radius:
- 가로,세로 px의 절반만큼 잘라야 한다.
(가로,세로 px 다르면 타원으로 나옴) - 퍼센트로 표현 가능하다.
[유지보수시, width,height 값이 변경 되면, radius 비율이 깨질 수 있는데,
(%, em, rem, vh 등) 변화하는 단위를 쓰면 유지보수 좋음 !!
#div1{
width: 400px;
height: 400px;
background-color: rgb(178, 178, 178);
border : 1px inherit black;
border-radius: 150px;
}
#div2{
width: 300px;
height: 300px;
background-color: #646464;
border : 1px inherit black;
border-radius: 50%;
margin-left: 60px;
}
#div3{
width: 150px;
height: 150px;
background-color: white;
border : 1px inherit black;
border-radius: 50%;
margin-left : 80px;
}
span{
font-style: italic;
padding-left: 50px;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
<div id="div3">
<div><span>domato</span></div>
</div>
</div>
</div>
</body>
▪️ 검정 테마를 기준으로 작성되었읍니다.