CSS] box, padding 알아보기.

box란?

html에서 하나의 내용을 입력하면 자동으로 박스가 만들어진다.

이 박스는 내용을 감싸고 있다. 

CSS에서 효과 줄 때 유용하게 사용된다. 

element, padding, border, margin 란?

 

이 박스 안에는 4가지 요소가 들어있다.

element, padding, border, margin

 

1. element 

element는 입력한 내용물이다. 

텍스트를 입력하면 텍스트가 element이다. 

이미지를 입력하면 이미지가 element이다.

안의 텍스트가 element

 

이미지가 element

 

 

 

2. Padding

패딩은 내용물과 보더 사이의 공간이다. 

 

패딩을  위 아래 양 옆 모두에 100px씩 넣어주면

내용물과 박스 경계선과의 사이가 벌어지고, 글자도 모아지고 박스도 커지게 된다. 

 

패딩 없을 때 

 

패딩 넣었을 때

 

 

 

각각 값을 따로 주고 싶을 때 

패딩, 마진 각각 입력법은 동일하다.

 

1. 위에만 패딩 주기 

 

위에만 패딩을 주려면

padding-top: 100px; 을 입력한다.

 

내용물 위에 패딩을 주면 내용물은 아래로 내려간다. 

 

 

2. 아래에만 패딩 주기 

박스 안 아래에 공간이 생기고 내용물이 위로 올라간다.

padding-bottom: 100px;

아래 패딩

 

3. 오른쪽에만 패딩 주기 

박스 안 오른쪽에 공간이 생기고 내용물이 왼쪽으로 밀린다.

padding-right: 100px;

 

 

4. 왼쪽에만 패딩 주기 

박스 안 왼쪽에 공간이 생기고 내용물이 오른쪽으로 밀린다.

padding-left: 100px;

 

 

5. 위아래 같은 값, 양옆 같은 값 주기 

위아래 먼저 입력, 띄여쓰기하고 양 옆의 값을 입력한다.

 

 

6. 위, 양옆, 아래 순으로 값 주기 

 

7. 모두 다른 값주기 

시계 방향으로 값을 입력해준다.

 

 

3. Border 경계선 

border는 박스의 경계에 있는 선을 말한다.

 

4. margin은 박스 밖 여유 공간

 

 

 

해당 태그의 패딩, 보더, 마진 보는 법

화면 오른쪽 버튼 클릭 inspect -> style 맨 아래에 오면 이런 박스가 보이는데 

각 요소가 얼마만큼 설정되어 있는지 알 수 있다. 

각 태그는 기본값이 설정되어 있다.

---

 

div 태그

div는 content division element의 의미이고, 각 컨텐츠를 나누는 역할을 한다.

css 각 컨텐츠는 box 형태로 본다.

 

 

문제 1 ) element가 없는 빈 공간에 색 넣기 

글자, 이미지 등 아무 것도 없는 빈 공간에 색을 변경해보자. 

 

element가 아무것도 없는 경우

차지하는 공간이 없다는 의미이다.

height를 줘서 공간을 만들어준다. 

 

 

결과 미리보기 

완성 결과물

 

 

1. div 태그는 자체로 빈 박스를 만든다. 

box를 만들어 그 box에 색을 집어 넣어주면 된다.

 

html에서 div 태그 생성

css에서 div태그에 효과 주기

 

 

2. 하지만 결과물엔 변화가 없다. 

중간 결과물

 

 

3. 그 이유는 해당 div의 height가 0이기 때문이다.

 

 

4. 그래서 height를 넣어주면 위 공간이 생기는 것을 볼 수있다.

 

 

5. 결과물

완성 결과물

 

---

 

 

문제 2 )  여러 문자들 한 박스에 묶기 

한 태그에 한 박스씩 생성이 되는데

2개의 태그에 같은 효과를 주고 싶다면 어떻게 해야할까?

이 두 태그를 더 큰 태그에 담아서 큰 태그에 효과를 준다. 

 

결과 미리보기 

 

 

1. 지금은 각각의 박스를 가지고 있는데

div로 감싸면 하나의 박스로 감쌀 수 있다.

div에 효과를 주면 하나로 묶여서 효과를 받는다.

html에서 div로 감싸기

 

 

2. div에 효과를 주어 두 문장 모두 배경에 같은 색이 들어가게 한다.

css에서 div로 효과주기

 

 

3. 결과물 

 

---

 

문제 3 ) 박스의 옆 공간 제거하기 

 

박스를 보면 위 아래 양 옆에 약간의 공간이 기본 설정되어 있다. 

body 태그도 색을 다른 색으로 변경해보면 화면 끝에 8px씩 흰색으로 보여진다.

이 여윳 공간을 없앨려면 

margin을 0으로 설정해 주어야 한다. 

 

결과물 미리보기

1. 방금 결과물을 보면 위, 옆에 약간의 빈 공간이 있다. 

그 이유는 body, h1, p 태그등 각각에 기본적으로 마진이 설정 되어 있기 때문이다. 

body 태그에는 8씩 기본으로 들어가 있다. 이 마진을 전부 0으로 고쳐 빈 공간을 없애주어야 한다. 

 

 

body 태그에 들어간 마진

2.  body 태그에 마진 없애기 

 

2-1  적는 법1 일일이 설정 

 

2-2  적는 법2 간단. px 안적어 줘도 괜찮다.

 

 

3. h1 태그에 마진 없애기

h1에 있는 마진도 없애면 옆으로 여유 공간없이 위 옆으로 딱 붙게 된다.

h1에 들어가 있는 마진

 

 

4. 결과물

---

문제 4 ) 모서리 맞춰 박스 배열하기 

결과 미리보기 

 

 

1. html에서 div로 컨테이너를 3개 만든다.

그리고 각각 div 마다 다른 이름의 클래스를 만든다.

 

2. css에서 각 클래스 별로 불러서 

- 각 클래스 별로 배경색은 다르게 한다.

- 박스 사이즈 200✖️200로 다 똑같이 한다.

- border는 어떤 선으로 할지, 얼마만큼 할지 정해준다. 실선으로 10px 만큼

- border의 색을 지정해 준다.

- padding을 줘서 글자와 border사이에 공간이 생기게 한다. 

 

중간 결과물 - 쭉 나란히 놓임

중간 결과물

 

 

3. 첫번째 박스의 총 가로 길이를 계산한다.

10+20+200+20+10 = 260px

 

 

 

4. 두 번째 박스에서 마진 왼쪽에 260px만큼 여유를 준다. 

 

 

5. 세 번째 박스는 첫 번째, 두 번째 박스의 가로 길이를 더해서 마진 왼쪽에 여유를 준다.

260+260 = 520px

.top-container {

background-color: pink;

height: 200px;

width: 200px;

border: solid 10px;

border-color: rgb(111, 111, 112);

padding: 20px;

}

 

.middle-container {

background-color: rgb(240, 243, 79);

height: 200px;

width: 200px;

border: solid 10px;

border-color: rgb(111, 111, 112);

padding: 20px;

margin-left: 260px;

}

 

.bottom-container {

background-color: rgb(164, 176, 248);

height: 200px;

width: 200px;

border: solid 10px;

border-color: rgb(111, 111, 112);

padding: 20px;

margin-left: 520px;

}

 

6. 결과물