고래씌

[CSS] 3-2. 레이아웃(Layout) 스타일 ② (영역 관련 속성) 본문

Front-End/CSS

[CSS] 3-2. 레이아웃(Layout) 스타일 ② (영역 관련 속성)

고래씌 2023. 11. 2. 18:38

1. 요소의 영역 관련 속성

▶ HTML 요소의 영역들

① content 영역

    - 요소의 내용이 작성되어지는 영역(시작태그와 종료태그 사이에 작성되는 내용들)

 

② padding 영역

    - content영역과 border 영역 사이

 

③ border 영역

    - 요소의 테두리가 지정되는 영역

    - content 보다 바깥쪽에서 content를 감싸고 있음

 

④ margin 영역

    - 다른 요소와의 간격을 나타내는 영역

 

 

 

 

1) 기준, content영역, border영역, padding 영역, margin 영역

 

■ HTML 파일

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>8_레이아웃스타일2</title>
    <link href="resources/css/layout2.css" rel="stylesheet">
</head>
<body>
    <h1>요소의 영역 관련 속성</h1>

    <h3>기준</h3>
    <div class="box">내용입니다</div>
    <hr>

    <h3>content영역</h3>
    <div class="box content">내용입니다</div>
    <hr>

    <h3>border영역</h3>
    <div class="box border">내용입니다</div>
    <hr>

    <h3>padding영역</h3>
    <div class="box border content padding">내용입니다</div>
    <hr>

    <h3>margin영역</h3>
    <div class="box border content padding margin">내용입니다</div>
    <div class="box border content padding margin" id="m1">내용입니다</div>
    <hr>

</body>
</html>

 

 

■ css 파일(content 영역)

.box{
    width: 100px;
    height: 100px;
    background-color: lightblue;
}


/* content영역 */
.content{
    width: 150px;
    height: 150px;
}

 

☞ width/height 속성은 기본적으로 content 영역의 크기를 지정하는 속성

 

 

■ CSS 파일(border영역)

/* border영역 */
.border{
    border : 10px solid red;
    /* 10px 빨간 실선 */
   
}

 

 

 

■ CSS 파일(padding 영역)

.padding{

    /* 내용과 테두리 사이 간격을 상하좌우 30px씩 벌림 */
    padding : 30px;
}

 

 

 

■ CSS 파일(margin영역)

/* margin영역 */

.margin{
    margin : 50px;
}

 

☞  외부 요소와의 50px 만큼 간격을 벌림

☞ 서로 다른 요소간에 margin 속성 값이 같다면 위 아래로 서로 50px씩만 벌림(더하지 않는다!)

 

 

☞ 각각 margin 50px 가 부여된 것이 아니라 하나의 margin만 50px 간격을 벌린 것을 확인할 수있다.(margin이 서로 같다면)

 

 

 

Q. 만약 margin이 서로 다른 값이 부여된다면..?

=> 서로 다른 요소가 margin 값이 겹치는 경우 더 큰 margin을 가진 요소의 값을 적용시킨다.

 

■ HTML파일 body태그 안

 

■ css파일

 

 

☞ 더 큰 영역이 margin을 차지한 것을 볼 수 있음

 

 

 

2. padding, border, margin의 방향성

▶ padding, border, margin은 방향에 따라 다른 크기를 지정할 수 있다.

    - xxx-top : 위쪽 여백

    - xxx-bottom : 아래쪽 여백

    - xxx-left : 왼쪽 여백만

    - xxx-right : 오른쪽 여백만

 

 

▶ padding 속성 작성방법에 따라 특정 방향에 크기를 저장할 수 있다.

 

- padding에 값이 1개일 경우 : 상 하 좌 우

ex) padding: 30px;

 

- 값 2개 : 상하, 좌우

ex) padding: 50px 100px;

 

- 값 3개 : 상, 좌우, 하 (위 → 아래 차례대로)

ex) padding : 10px 50px 100px;

 

- 값 4개 : 상 우 하 좌 (시계방향대로)

ex) padding : 10px 20px 30px 40px;

 

 

▶ margin 속성은 padding과 동일하게 방향성 추가 가능

 

 

▶ border 속성은 상화좌우 방향을 별도 지정할 수 없다!

- border 속성은 아래와 같은 방식으로 지정가능

① 크기 / 스타일

② 스타일 / 색상

③ 스타일

④ 크기 / 스타일 / 색상

 

  ☞ border의 크기만을 설정하는 경우 상하좌우 한번에 처리할 수 있다. (border-width : padding, margin 동일한 방법으로 상, 하, 좌, 우 크기 설정 가능)

 

 

 

■ HTML 파일 body 태그 안

    <h3>padding 테스트</h3>
    <div class="box padding-test">내용</div>

    <h3>border 테스트</h3>
    <div class="box border-test">내용</div>

    <h3>margin 테스트</h3>
    <div class="box margin-test">내용</div>

 

 

■ css 파일

.padding-test{
    padding-top: 20px;
    padding-bottom: 50px;
    padding-left: 30px;
    padding-right: 30px;
}

.margin-test{
    margin-top: 30px;
    margin-bottom: 50px;
    margin-left: 100px;
    margin-right: 200px;

    /* margin 속성은 padding과 동일하게 방향성 추가할 수 있다 */
}

.border-test{
    border-top : 1px solid black;
    border-bottom : 5px dashed black; /* 점선 */
    border-left : 10px dotted blue;
    border-right : 7px double orange;

    border-width : 20px 10px 5px 2px;
}

 

 

 

 

3. margin : auto

▶ 좌우 요소간의 간격을 자동으로 지정하여 가운데 정렬

 

■ HTML 파일 body 태그 안

    <div sytle="width:500px; height:300px; border: 1px solid black;">
        <div class="box margin-auto"></div>
    </div>

 

■ css 파일

.margin-auto{
    /* margin-top: 100px;
    margin-left: 200px; */

    /* 좌우 요소간의 간격을 자동으로 지정하여 가운데 정렬 */
    /* margin : auto;
    margin-top : 100px; */

    margin : 100px auto;
}

 

☞ 좌우 요소간의 간격을 자동으로 지정하여 가운데 정렬함

 

 

4. box-sizing 속성

- 요소의 영역 중 실제로 화면상에 보여지는 부분인 content, padding, border는 각각 크기를 지정할 수 있다.

  => 이 때, 각각의 크기를 따로 지정하다 보니 전체적인 크기를 한번에 파악하기 힘들고, 설정하기도 힘들어진다.

 

 

1) 테두리 10px, 패딩 20px, 나머지 전체 요소크기가 가로 세로 300px인 정사각형 만들기

 

■ HTML 파일 body 태그 안

    <div class="box" id="box-sizing">내용</div>

 

■ css 파일

#box-sizing{
    /* 테두리 10px, 패딩 20px, 나머지 전체 요소크기가
        가로 세로 300px인 정사각형 만들기 */
   
    border : 10px solid black;
    padding : 20px;

    /* 항상 width, height의 크기를 지정할 때 padding과 border를 감안하여 계산해야함 */
    width : 300px;
    height : 300px;
}

 

☞ 이 방법으로 하게 되면 항상 width, height의 크기를 지정할 때 padding과 border를 감안하여 계산을 해야한다.

 

※ 이 문제를 해결하기 위해 나온게 box-sizing 이다!!!

 

☞  width/hegiht 기본적으로 content 영역에 대한 크기를 지정한다. 이를 변경하는 방법이 box-sizing임.

ex) box-sizing : border-box;

 

 

▶ content-box(기본값)

    - width / height 속성 지정 시 content 영역만 적용

 

▶ border-box

    - width / height 속성 지정 시 

      content + padding + border의 크기를 합산한 결과가 지정한 속성값과 같게 자동으로 비율을 계산하여 적용함.

 

저작자표시 비영리 변경금지

'Front-End > CSS' 카테고리의 다른 글

[CSS] 3-4. 레이아웃(Layout) 스타일 ④ (배치 관련)  (0) 2023.11.03
[CSS] 3-3. 레이아웃(Layout) 스타일 ③ (float / clear)  (0) 2023.11.02
[CSS] 3-1. 레이아웃(Layout) 스타일 ① (화면 분할)(+hidden)  (0) 2023.11.02
[CSS] 2. CSS 선택자 우선순위  (0) 2023.11.02
[CSS] 1-5. CSS 선택자 ⑤ (기타 선택자)  (0) 2023.11.02
'Front-End/CSS' Related Articles more