박스 모델과 CSS 속성

Notice

Recent Posts

Recent Comments

Link

깃허브

« 2024/11 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

Tags more

Archives

Today

Total

관리 메뉴

EverGiver

박스 모델과 CSS 속성 본문

Front-End (웹)/CSS

박스 모델과 CSS 속성

친절한개발초보자 2021. 7. 22. 23:18

728x90

박스 모델의 기본 구성

박스 모델 (box model)
- 스타일 시트에서 박스 형태의 요소
- 콘탠츠 영역, 박스와 콘텐츠 영역 사이의 여백인 패딩(padding), 박스의 테투리(border), 그리고 여러 박스 모델 사이의 여백인 마진(margin) 등의 요소로 구성
박스 모델의 기본 요소

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

종류	설명
<크기>	너비나 높이의 값을 px이나 em 단위로 지정한다.
<백분율>	박스 모델을 포함하는 부모 요소를 기준으로 너빗값이나 높잇값을 백분율로 지정
auto	박스 모델의 너빗값과 높잇값이 콘텐츠 양에 따라 자동으로 결정 (기본값)

박스 모델의 크기를 계산하는 box-sizing 속성

width/height 속성은 박스 모델에서 콘텐츠 주변의 여백이나 테두리를 뺀 콘텐츠 영역의 크기를 가리킨다.
웹 문서에 여러 가지 요소를 배치할 때 실제 박스 모델이 차지하는 크기는 콘텐츠 영역 외에도 콘텐츠와 테두리 사이의 여백, 테두리 두께까지 계산해야 한다.
box-sizing은 박스 모델의 너비와 높이를 어떻게 결정할 것인지에 따라 border-box와 content-box 중에 선택할 수 있다.

종류 설명

border-box 테두리까지 포함해서 너빗값을 지정

content-box 콘텐츠 영역만 너빗값을 지정 (기본값)

★ 웹 문서 레이아웃을 만들 때는 CSS에서 박스 모델을 사용하는데, 요소의 크기를 쉽게 계산하려면 box-sizing 속성을 border-box로 지정해 놓는 것이 좋다.

박스 모델에 그림자 효과를 주는 box-shadow 속성

box-shadow: <수평 거리> <수직 거리> <흐림 정도> <번짐 정도> <색상> inset

box-shadow의 속성 값에서 수평 거리와 수직 거리는 반드시 지정해야 한다.

종류	설명
<수평 거리>	그림자가 가로로 얼마나 떨어져 있는지 나타낸다. 양숫값은 요소의 오른쪽에, 음숫값은 요소의 왼쪽에 그림자를 만든다. (필수 속성)
<수직 거리>	그림자가 세로로 얼마나 떨어져 있는지 나타낸다. 양숫값은 요소의 아래쪽에, 음숫값은 요소의 위쪽에 그림자를 만든다. (필수 속성)
<흐림 정도>	이 값을 생략하면 0을 기본값으로 하여 진한 그림자를 표시한다. 이 값이 커질수록 부드러운 그림자를 표시하며, 음숫값은 사용할 수 없다.
<번짐 정도>	양숫값을 사용하면 모든 방향으로 그림자가 퍼져서 박스보다 그림자가 크게 표시된다. 반대로 음숫값은 모든 방향으로 그림자가 축소되어 보인다. (기본값은 0이다.)
<색상>	한 가지만 지정할 수도 있고, 공백으로 구분해서 여러 개의 색상을 지정할 수도 있다. (기본값은 현재 검은색이다.)
inset	이 키워드를 함께 표시하면 안쪽 그림자로 그린다.

★ 추천 값(가장 그림자로 보기에 괜찮은 값)
→ box-shadow:5px 5px 4px grey

박스 모델의 방향 살펴보기

박스 모델의 방향으로 맨 윗부분은 top, 오른쪽은 right, 아랫부분은 bottom, 왼쪽은 left라고 한다.
맨 위부터 시작해서 top → right → bottom → left처럼 시계 방향으로 순서가 진행된다.

margin (외여백)

- 요소 주변의 여백을 의미
(요소와 요소 사이의 간격을 조절 가능)

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

종류	설명
<크기>	너빗값이나 높잇값을 px이나 em 같은 단위와 함께 수치로 지정
<백분율>	박스 모델을 포함한 부모 요소를 기준으로 너빗값이나 높잇값을 퍼센트(%)로 지정
auto	display 속성에서 지정한 값에 맞게 적절한 값을 자동으로 지정

margin은 입력한 방향에서부터 떨어지는 개념
ex) left 100px → 오른쪽으로 100px만큼 이동

★ margin은 +값만 있는 게 아니라 -값도 있다.
: -값을 사용할 경우 기존에 방향과 반대 방향으로 이동한다.
ex) left:100px → 오른쪽으로 100px만큼 이동
left:-100px →왼쪽으로 100px만큼 이동
margin의 사용법 3가지
1. margin-left, right, bottom, top 방향과 함께 사용하는 방법(가장 많이 사용)
→ 일반적인 상황에서 right, bottom 사용하지 않는다 (벽이 없기 때문이다)
→ right/bottom 대상을 이동시키는 목적보다는 서로의 개체 간의 간격을 벌려주는 용도로 많이 사용한다.
2. margin: 세로 값, 가로 값
3. margin: 그냥 값
margin 속성을 사용하여 웹 문서를 가운데 정렬하기
- 우선적으로 배치할 요소의 너빗값이 정해져 있어야 한다.
- margin-left와 margin-right의 속성 값을 auto로 지정한다.
- margin:0 auto

마진 중첩 이해하기
- 주의해야 할 점
▷ 마진 중첩 (margin overlap) / 마진 상쇄 (margin collapse)
: 요소를 세로로 배치할 경우에 각 요소의 마진과 마진이 서로 만나면 마진 값이 큰 쪽으로 겹쳐진다.
▷ 마진 중첩은 아래 마진과 위 마진이 서로 만날 때 큰 마진 값으로 합쳐지는 것이고, 오른쪽 마진과 왼쪽 마진이 만날 경우는 중첩되지 않는다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>margin #1</title>
    <style>
        *{margin:0;padding:0;}
        #a{width:300px;height:300px;background-color:red;margin-bottom:100px}
        
        #b{width:200px;height:200px;background-color:blue;margin-left:-100px}
    </style>
</head>
<body>
    <div id="a"></div>
    
    <div id="b"></div>
</body>
</html>

 <!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>margin #2</title>
    <style>
        *{margin:0;padding:0}
        #a{width:400px;height:400px;background-color:red;margin:100px}
        
        #b{width:200px;height:200px;background-color:green;}
    </style>
</head>
<body>
    <div id="a"></div>
    <div id="b"></div>
</body>
</html>

border (테두리)

대상 개체에 테두리를 만들어주는 구문

border-left, right, bottom, top
: 원하는 방향에만 선을 넣어줄 수 있다.
border:값
: 상하좌우 4가지 방향 모두에 동일한 선 넣기
(테두리 스타일과 두께, 색상을 한꺼번에 표현 가능)
테두리 스타일을 지정하는 border-style 속성
0. none
: 테두리가 없다 (기본값)
1. solid ★
: 가장 많이 사용하는 표준 실선
2. dashed
: 절취선처럼 생긴 컷팅형 점선
3. dotted
: 동그라미로 되어 있는 점자 형태의 선
4. double
: 두줄 선

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

border-width: <크기> ¦ thin ¦ medium ¦ thick

테두리 색상을 지정하는 border-color 속성
- border-color 속성을 사용해서 4개 방향의 테두리 색상을 한꺼번에 지정할 수 있다.
- border-top-color처럼 border와 color 사이에 테두리 방향을 넣어 주면 색상을 하나씩 지정할 수도 있다.
둥근 테두리를 만드는 border-radius 속성
```
border-radius: <크기> ¦ <백분율>
```
종류 설명

<크기> 반지름 크기를 px, em의 단위와 함께 수치로 표시

<백분율> 현재 요소의 크기를 기준으로 비율(%)로 지정

- 값을 50% 주면 원을 만들 수 있다.
- 안에다가 이미지를 넣어서 동그란 이미지로 만들어 디자인적으로 많이 사용한다.

꼭짓점마다 따로 둥글게 처리하기
- border와 radius 사이에 위치를 나타내는 예약어를 넣어 사용한다.
▷ border-top-left-radius (왼쪽 윗부분)
▷ top-left / top-right / bottom-right / bottom-left 사용

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>margin #3</title>
    <style>
        *{margin:0;padding:0;}
        
        div{width:300px;height:300px;
        margin-left:200px;
        margin-top:200px;
        border:4px double red}
        
        p{width:300px;height:300px;
        background-color:#123456;
        margin-left:200px;
        margin-top:200px;
        border-radius:50%;}
        
        h1{width:200px;height:200px;
        background-color:violet;
        padding-left:100px;}
    </style>
</head>
<body>
    <div></div>
    
    <p></p>
    
    <h1></h1>
</body>
</html>

padding (내 여백)

콘텐츠 영역과 테두리 사이의 여백
(테두리 안쪽의 여백)

태그가 이동을 하기는 하는데 길어지면서 이동

특징적인 부분은 margin의 개념과 다르지 않지만 실질적으로 이동을 할 때 잘 사용하지 않는다.
(margin-top 대신해서 가끔씩 사용하는 경우가 있다)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>margin #4</title>
    <style>
        *{margin:0;padding:0;}
        
        div{width:200px;
                font-size:30px;
                padding-bottom:20px;
            margin-left:200px;
            margin-top:200px;
            border-bottom:1px solid red;}
    </style>
</head>
<body>
    <div>
    안녕하세요
    </div>
</body>
</html>

728x90