패딩 마진 ( ⭐⭐⭐ )
박스 속성은 웹 페이지의 레이아웃을 구현할 때 가장 중요한 속성이다
margin은 마진의 너비를 지정하는 속성
✍️ margin은 주로 상자와 상자 간 사이 벌릴 때 사용
✍️ 겹쳐지는 게 가능하다 ( 크기가 큰 쪽을 따라감 )
padding은 패딩의 너비를 지정하는 속성
content, padding, border, margin을 직접 보면 다음과 같다
✅ margin 속성과 padding 속성은 width 속성과 height 속성과 별도로 적용된다
margin에 대해 구체적으로 알아보자
margin은 윤곽(border)기준 바깥 여백을 의미한다
개발자 도구(F12)를 확인했을 때 주황색으로 나타나는 게 마진에 해당한다
margin에 값을 주면 어떻게 되는지 확인해볼까?
1️⃣ margin값을 하나만 줬을 때
margin에 값을 하나만 줬을 때는 위에서처럼 상하좌우 모두 그 값이 적용된다
2️⃣ margin값을 4개 다 줬을 때
margin에 값을 4개 다 줬을 때는 위에서부터 시계방향으로 값이 적용된다 (위, 오른쪽, 아래, 왼쪽 순으로 적용)
3️⃣ margin값을 3개 줬을 때
margin에 값을 3개 줬을 때 위, 좌우, 아래 순으로 값이 적용된다
4️⃣ margin값 2개 줬을 때
margin에 값을 2개 줬을 때는 위아래, 좌우로 값이 적용된다
지금까지 확인해본 결과 margin값은 값을 몇 개를 주든지 간에 상하좌우 모두 적용되게끔 한다는 것이다!
✅ 마진의 또 다른 특징이 있는데 그건 마진은 겹쳐서 적용이 되기도 한다는 것이다
이번엔 padding에 대해 구체적으로 알아보자
다음 그림이 기본값이고 패딩갑셍 따라 다음의 박스가 어떻게 변하는지를 확인해보자
padding에 값을 주면 어떻게 되는지 확인해볼까?
1️⃣ padding값을 하나만 줬을 때
padding값을 하나만 줬을 때는 상하좌우를 기준으로 값이 적용된다
(위의 기본 박스랑 비교해보면 안쪽으로 content박스가 들어간 것을 확인할 수 있다)
2️⃣ padding값을 4개 다 줬을 때
padding값을 4개 다 줬을 때는 위, 오른쪽, 아래, 왼쪽 시계방향으로 값이 적용된다
3️⃣ padding값을 2개를 줬을 때
padding값을 2개를 줬을 때는 위아래, 좌우 두 경우로 값이 적용된다
4️⃣ padding값을 3개 줬을 때
padding값을 3개 줬을 때 위, 좌우, 아래 순으로 값이 적용된다
box - sizing 속성 ( ⭐⭐⭐ ) - 박스 너비 기준 정하기
width 속성과 height 속성은 글자를 감싸는 영역의 크기를 지정하는 속성인데
이러한 공식을 변경할 수 있는 속성이 box-sizing 속성이다
box-sizing 속성값에는 Content-box와 Border-box 두 가지가 존재한다
| 종류 | 설명 |
| border-box | 테두리까지 포함해서 너빗값을 지정 |
| content-box | 콘텐츠 영역만 너빗값을 지정 ( 기본값 ) |
박스 모델의 너비 결정하기 - content box & border box
<style>
.box1{
box-sizing: content-box;
/* 콘텐츠 영역 기준 */
witdh: 300px; /* 콘텐츠 영역 너비 300px */
height:150px; /* 높이 */
margin: 10px; /* 마진 */
padding: 30px; /* 패딩 */
border: 2px solid red; /* 테두리 */
}
.box2{
box-sizing: border-box;
/* 테두리까지(박스 전체) 기준 */
width: 300px; /* 박스 모델 전체 너비 */
height: 150px; /* 박스 높이 */
margin: 10px; /* 마진 */
padding: 30px; /* 패딩 */
border: 2px solid red; /* 테두리 */
}
</style>
여기서 잠깐!! 박스를 정가운데로 보내고 싶어?
margin을 활용한 중앙박스 정렬
박스의 너비를 지정하고 margin: 0 auto를 활용
단, 무조건 박스의 너비를 지정해야 한다
[ 실습을 해보겠습니다! ]
* { padding: 0; margin: 0; list style: none; }
img { height: auto; max width: 100%; } /* 비율을 일정하게 정렬 */
이 실습을 하면서 알게 된 점은 디자인을 하기 전에 원점으로 돌아간 뒤에 하는 것이 좋다는 것!
디자인에 쓰일 모든 값들을 기본값이나 0으로 맞춰두고 진행하는 것이 디자인할 때 문제가 안 생길 수 있다
.menu ul li { display: inline; } // <ul> 태그의 <li>의 display를 block에서 inline으로 변경
.menu ul li a { // <a> 태그는 인라인 요소이기 때문에 박스요소를 설정할 수 없다
display: inline - block; // 따라서 displat를 inline-block으로 변경한다
width: 70px;
line-height: 70px; // height와 line-height를 동일하게 주면 한 줄 텍스트가 수평 가운데로 정렬
height: 70px;
text-decoration: none; // <a> 태그에 하이퍼링크를 지정하면 밑줄이 생기는데 이를 없앨 때 사용
color: white; // 폰트 색상 지정
}
.title {
margin: 60px; // title ('오늘의 발견')은 하나의 박스 안에서 margin에 해당한다
}
.contents {
width: 1500px; // 컨텐츠의 너비
height: 130px; // 컨텐츠의 높이
border: 1px solid gray; // 실제 화면에 나타나는 윤곽
padding: 60px; // 윤곽과 컨텐트 박스 사이의 간격
margin: 0 auto; // 박스를 정가운데로 정렬 (박스의 너비가 지정되어 있기 때문에 가능)
}
박스 레이아웃 float ( ⭐⭐⭐ )
| left | 태그를 왼쪽에 붙인다 |
| right | 태그를 오른쪽에 붙인다 |
1️⃣ float: left
2️⃣ float: right
float의 법칙
float를 적용시키면 부모의 높이값이 지정이 안 되는 현상 때문에 문제가 발생한다
이럴 때에는 2가지의 해결방법이 있다
1. 가상요소:after { content: ""; display: block; clear: both;}
2. overflow: hidden
[ float로 실습을 해보자! ]
1️⃣ float 기초편
float를 설정할 때 반드시 해줘야 할 것이 있는데 그것은 바로 부모 요소에 "overflow: hidden"을 작성하는 것이다
float에 윤곽과 함께 너비의 비율을 지정해주었는데 위와 같은 결과가 나타났다
왜 박스 5번은 두번째 줄에 따로 떨어져서 나타나는 걸까?
그 이유는 기본값으로 박스 사이징이 content-box로 지정되어 있고 디자인 변화가 생기면 위처럼
너비가 안 맞는경우가 생기기 때문에 박스 사이징을 border-box로 지정해주면 해결된다
2️⃣float 응용편
float를 해제하는 방법은 무엇일까?
✔️ style="clear:both;"을 사용하기
clear: none | left | right | both
// left만 설정했다면 left만 작성해서 left만 해제
// right만 설정했다면 right만 작성해서 right만 해제
// both는 속성값이 어떤 것인지 관계없이 무조건 기본 상태로 되돌리고 싶을 때 사용
✔️float가 설정된 곳의 바깥으로 빼기
[ 다음의 과제를 풀어보자 ] 풀다가 머리가 터질 뻔 함..
다음의 결과물을 보고 똑같이 만들어보았다
< CSS >
< HTML >
'CSS' 카테고리의 다른 글
| [CSS] 부트스트랩 사용해서 디자인 커스터마이징 (0) | 2022.12.27 |
|---|
