4주차 과제

hanahana·2022년 7월 30일
CSShtml
0

네이버 부스트코스-html/css

목록 보기
14/17
post-thumbnail

마진병합

결과 확인 : https://hana78786.github.io/Study_hana/bostcourse_htmlcss/4-1Ques.html

마진 병합(margin collapse)은 CSS 박스 모델을 제대로 이해하고 응용하기 위해 꼭 필요한 필수 개념입니다. question.html에 있는 여러 예시를 보고, 각 예시 별로 마진 병합이 일어나는지 여부와, 마진 병합이 일어난다면 아래 페이지를 참고하여 그 이유를 적어주세요.

<html lang="ko">

<head>
    <title>마진 병합</title>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <style>
        .red-box {
            width: 100%;
            background-color: red;
        }

        .blue-box {
            width: 100%;
            background-color: blue;
        }

        .horizontal-container {
            width: 600px;
            height: 200px;
            border-color: black;
            border: 2px solid;
            margin-top: 20px;
        }

        .vertical-container {
            width: 400px;
            height: 500px;
            border-color: black;
            border: 2px solid;
            margin-top: 20px;
        }

        .first-box-1 {
            height: 100%;
            width: 100px;
            display: inline-block;
            margin-right: 50px;
        }

        .second-box-1 {
            height: 100%;
            width: 150px;
            display: inline-block;
            margin-left: 130px;
        }

        .first-box-2 {
            height: 100px;
            margin-bottom: 40px;
        }

        .second-box-2 {
            height: 200px;
            margin-top: 20px;
        }

        .parent-3 {
            height: 400px;
            padding-top: 20px;
        }

        .child-3 {
            height: 200px;
            margin-top: 40px;
        }

        .parent-4 {
            height: 400px;
            margin-top: 40px;
        }

        .child-4 {
            height: 200px;
            margin-top: 40px;
        }

        .parent-5 {
            height: 400px;
        }

        .child-5 {
            height: 200px;
            margin-top: 40px;
        }

        .navigation {
            height: 200px;
            margin-bottom: 20px;
        }

        .heading {
            height: 160px;
            margin-top: 60px;
        }

    </style>
</head>

<body>
    <h1>예시1</h1>
    <div class="horizontal-container">
        <div class="first-box-1 red-box"></div>
        <div class="second-box-1 blue-box"></div>
    </div>

    <h1>예시2</h1>
    <div class="vertical-container">
        <div class="first-box-2 red-box"></div>
        <div class="second-box-2 blue-box"></div>
    </div>

    <h1>예시3</h1>
    <div class="vertical-container">
        <div class="parent-3 red-box">
            <div class="child-3 blue-box"></div>
        </div>
    </div>

    <h1>예시4</h1>
    <div class="vertical-container">
        <div class="parent-4 red-box">
            <div class="child-4 blue-box"></div>
        </div>
    </div>

    <h1>예시5</h1>
    <div class="vertical-container">
        <div class="parent-5 red-box">
            <div class="child-5 blue-box"></div>
        </div>
    </div>

</body>
</html>

예시1

					.red-box {
            width: 100%;
            background-color: red;
        }

        .blue-box {
            width: 100%;
            background-color: blue;
        }

        .horizontal-container {
            width: 600px;
            height: 200px;
            border-color: black;
            border: 2px solid;
            margin-top: 20px;
        }
				.first-box-1 {
            height: 100%;
            width: 100px;
            display: inline-block;
            margin-right: 50px;
        }

        .second-box-1 {
            height: 100%;
            width: 150px;
            display: inline-block;
            margin-left: 130px;
        }
  <h1>예시1</h1>
    <div class="horizontal-container">
        <div class="first-box-1 red-box"></div>
        <div class="second-box-1 blue-box"></div>
    </div>

  • width

    • first-box-1의 width는 100px로 지정되어있다

    • 이 박스는 동시에 red-box의 클래스로 지정되어있다
      - red-box의 width는 100%이나 first-box의 선언 값이 있기에 first-box의 선언 크기로 만들어진다.
      - 개발자 도구에서도 취소선으로 적용되지 않았음을 표기한다

    • second-box-1 width는 150px로 지정되어있다

    • blue-box의 width값 100%선언은 second-box-1의 입력 값이 있기에 second-box의 크기로 만들어진다.

      개발자 도구에서도 마찬가지로 width값에 취소선을 표기했다.

      개발자 도구에서도 마찬가지로 width값에 취소선을 표기했다.

  • height

    • height의 값은 부모 요소인 .horizontal-container의 선언에 의해 200px임을 알수 있다.
      • first-box-1 , second-box-1은 둘다 height의 값이 100%로 선언되어있다.
      • 100%는 부모요소의 선언값에 100%를 의미한다

  • Margin

    • .horizontal-containe : margin-top: 20px;
    • .first-box-1 : margin-right: 50px;

  • .second-box-1 : margin-left: 130px;

margin collapse

예제1은 개발자 도구로 확인하면 마진 병합이 일어나지 않는것을 확인할수 있다.

  • 이는 first-box-1와 second-box-1에 display: inline-block;가 선언되었기 때문임을 알수있다.
    • display: inline-block을 활용하면 inline과 다르게 상하의 여백을 존중한값을 사용할수 있게되며 요소를 바로 옆에 배치할수 있게된다.
    • 이 경우 margin-top과 margin-bottom이 겹쳐지지 않기에 마진 병합은 일어나지 않는다.

<참고> https://www.w3schools.com/css/css_inline-block.asp

예시 2

					.red-box {
            width: 100%;
            background-color: red;
        }

        .blue-box {
            width: 100%;
            background-color: blue;
        }				
					.vertical-container {
            width: 400px;
            height: 500px;
            border-color: black;
            border: 2px solid;
            margin-top: 20px;
        }
				  .first-box-2 {
            height: 100px;
            margin-bottom: 40px;
        }

        .second-box-2 {
            height: 200px;
            margin-top: 20px;
        }
  <h1>예시2</h1>
    <div class="vertical-container">
        <div class="first-box-2 red-box"></div>
        <div class="second-box-2 blue-box"></div>
    </div>

  • 각 박스의 크기
    • vertical-container : width: 400px height: 500px이 선언되어있다.
    • first-box-2 : 높이는 100px이며 함께 선언된 red-box의 width 100%선언으로 vertical-container의 width값인 400px이 가로 값으로 지정되어있다.
    • second-box-2 : 높이값은 200px이며 first-box-2와 마찬가지로 blue-box의 width선언에 따라 부모요소인 vertical-container의 width값을 가로 값으로 가지고있다
    • 부모요소의 값으로 width가 지정되어있기때문에 이번엔 개발자도구에서 취소선이 없는것을 확인할 수 있다

  • margin

margin collapse

  • 개발자 도구를 이용하여 마진병합이 일어난것을 확인할수 있다.
  • 마진 병합의 특성에 따라 margin-bottom: 40px이 선언된 first-box-2의 마진 여백이 second-box-2의 margin-top: 20px 여백보다 20px이 더 크기때문에 first-box-2와 second-box-2사이에 40px의 여백만이 남게된다

예시3

					.red-box {
            width: 100%;
            background-color: red;
        }

        .blue-box {
            width: 100%;
            background-color: blue;
        }				
					.vertical-container {
            width: 400px;
            height: 500px;
            border-color: black;
            border: 2px solid;
            margin-top: 20px;
        }
					.parent-3 {
            height: 400px;
            padding-top: 20px;
        }

        .child-3 {
            height: 200px;
            margin-top: 40px;
        }
<div class="vertical-container">
        <div class="parent-3 red-box">
            <div class="child-3 blue-box"></div>
        </div>
    </div>

  • 각 박스의 크기

    • vertical-container : width: 400px; height: 500px;
    • parent-3 : height: 400px; 가로길이는 red-box의 width: 100%; 선언으로 vertical-container에 선언한 가로길이(400px)를 사용한다
    • child-3 : height: 200px; 가로길이는 blue-box의 width: 100%; 선언으로 vertical-container에 선언한 가로길이(400px)를 사용한다

  • 부모박스와 자식박스

    • 예시 3의 박스는 parent-3의 자식으로 child-3 박스가 구성되어있다.
      - parent-3박스 안에 child-3박스가 겹쳐져서 구성되어있다.
      - 부모자식속성이 아닌경우 상자는 아래 이미지와 같이 겹쳐지지 않는다
      ```html
<div class="vertical-container">
        <div class="parent-3 red-box">
        </div>
<div class="child-3 blue-box"></div>
    </div>
```
    • parent-3의 padding값(안쪽여백) 위쪽 20px이기때문에 child-3박스는 parent-3의 20px밑에 구성 된다.
    • child-3은 margin(바깥여백)이 위쪽 40px이기때문에 parent-3의 padding여백 밑에 margin여백을 40px남기고 구성된다
  • margin

margin collapse

  • 개발자 도구를 활용하여 확인하면 child-3박스의 margin이 parent-3박스와 겹쳐져 있는것을 확인할수 있다.
  • parent-3박스에는 margin값이 입력되지 않기에 따로 마진병합이 일어나지는 않았다.
  • 부모상자와 자식상자의 경우 margin값이 겹쳐지면 더 큰쪽으로 마진병합이 일어난다.
    • 예를 들어 child-3의 magin-bottom:200px이고 parent-3 magin-bottom:50px일때
    • parent-3의 높이는 420px이기에 magin값을 더하면 여백이 마지막으로 나오는길이는 470px이 된다
    • child-3의 높이는 200px이고 그 위에 parent-3의 paddin값 20px과 child-3의 margin 40px를 합쳐 260px부터 margin-bottom이 시작되고 magin-bottom의 최종길이는 460px가 된다
    • 이 경우 parent-3의 margin-bottom길이가 더 길기 때문에 parent-3의 margin값으로 병합되게 된다.

예시 4

.red-box {
            width: 100%;
            background-color: red;
        }

        .blue-box {
            width: 100%;
            background-color: blue;
        }
.vertical-container {
            width: 400px;
            height: 500px;
            border-color: black;
            border: 2px solid;
            margin-top: 20px;
        }
.parent-4 {
            height: 400px;
            margin-top: 40px;
        }

        .child-4 {
            height: 200px;
            margin-top: 40px;
        }
<div class="vertical-container">
        <div class="parent-4 red-box">
            <div class="child-4 blue-box"></div>
        </div>
    </div>

  • 박스의 크기
    • vertical-container : width: 400px; height: 500px;
    • parent-4 : height: 400px; width값은 red-box의 width 100%의 선언으로 vertical-container와 동일한 400px를 갖는다
    • child-4 : height: 200px; width값은 blue-box의 width 100%의 선언으로 vertical-container와 동일한 400px를 갖는다
  • 부모박스와 자식박스
    • child-4는 parent-4의 자식태그이기 때문에 parent-4안에 겹쳐져 들어간다.
    • parent-4와 child-4의 margin값은 40px이기에 child-4와 parent-4는 40px의 여백공간을 두고 생성된다
    • 예시3에서는 parent안에 padding값이 있었기 때문에 더 밑에 생성되었으나 이번 parent-4는 padding값을 가지고 있지 않기에 margin값만 계산하여 40px아래에 생성된다
    • 예시3에서 parent에서 padding은 안쪽 여백이기에 background-color가 지정되었지만 margin은 바깥여백이기에 backgorund-color가 지정되지 않는다
  • margin

margin collapse

  • parent-4와 child-4는 같은 margin-top : 40px를 같는다
  • 같은 높이에 같은 margin값을 가지고 있기에 마진병합이 생겨 똑같이 40px의 상단 외부여백을 갖게 된다.
  • 만약 child-4의 margin값이 다르다면 값이 더큰 쪽의 margin여백을 갖게 된다.
    • child-4는 parent-4의 자식박스 이기에 margin값이 없어도 parent의 영향을 받아 40px이상의 외부 상단 여백을 갖게된다
    • 이 값은 parent-4의 margin값을 수정해도 똑같이 적용된다.

예시 5

.red-box {
            width: 100%;
            background-color: red;
        }

        .blue-box {
            width: 100%;
            background-color: blue;
        }
.vertical-container {
            width: 400px;
            height: 500px;
            border-color: black;
            border: 2px solid;
            margin-top: 20px;
        }
.parent-5 {
            height: 400px;
        }

 .child-5 {
            height: 200px;
            margin-top: 40px;
        }
<div class="vertical-container">
        <div class="parent-5 red-box">
            <div class="child-5 blue-box"></div>
        </div>
    </div>

  • 박스의 크기
    • vertical-container : width: 400px; height: 500px;
    • parent-5 : height: 400px; width값은 red-box width100%선언으로 vertical-container와 동일한 width값(400px)을 갖는다
    • child-5 : height: 200px; width값은 blue-box width100%선언으로 vertical-container와 동일한 width값(400px)을 갖는다
  • 부모박스와 자식박스
    • parent-5와 child-5는 부모, 자식의 관계를 갖는다
    • child-5는 자식박스이기때문에 parent-5박스안에 겹쳐져 생성된다.
    • child-5는 margin-top : 40px를 갖고 있기때문에 vertical-container안에서 40px의 외부여백을 갖는다.

  • margin

margin collapse

  • parent-5는 margin값이 없으나 자식박스인 child-5가 margin을 가지고 있기에 child-5의 margin값을 갖게된다.
  • 예시3과의 비교
    • 예시3에서 child-3은 margin값을 가지고 있었지만 parent-3에서 padding값을 추가하여 margin병합이 일어나지 않도록 하였다.
    • 예시5에서도 parent-5에 padding값을 추가하면 parent-5에는 외부 여백이 나타나지 않으며 parent-5의 padding과 child-5의 margin의 여백을 둘다 존중하여 출력함을 알수 있다.

박스의 크기

<!DOCTYPE html>

<html lang="ko">
<head>
<title>박스 사이즈</title>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<style>
        section {
            width: 400px;
            height: 400px;
        }
        .box {
            width: 50%;
            height: 75%;
            border: 10px solid;
        }
    </style>
</head>

<body>
<section>
<div class="box">
</div>
</section>
</body>
</html>

상자의 크기

  • 이 box는 section이라는 부모 상자 안에 있는 box이다
  • 부모상자 section은 width: 400px height: 400px의 크기를 가지고 있다.
  • box는 width: 50% height: 75%를 선언하고 있다
    • 따라서 width는 200px height는 300px를 가지게 된다
      • 이 크기는 box전체의 크기가 아니라 content의 크기이다.
  • box의 다른 속성 값은 개발자 도구로 쉽게 확인 할수 있다.

- padding값 및 margin값이 없음을 확인할수 있다.
  • 상자의 크기는 계산
    • width : content 200px + border left 10px + border right 10px = 220px
    • height : content 300px + border top 10px + border bottom 10px = 320px
    • 220px * 320px 임을 확인할수 있다.
  • 계산과 별개로 개발자 도구를 활용하면 간단하게 상자의 값을 확인할수 있다.

box - sizing

원하는 box크기가 있다면 따로 가상속성에 box-sizing : border-box 등으로 미리 지정해주면 지정된 값의 크기가 결정된다,.

개념정리

📌Q1. 4주 차에 배운 단위, 배경, 박스 모델 관련 개념 정리해봅시다. 빈 칸을 채워 봐주세요. 빈 칸에 들어갈 수 있는 키워드는 다음과 같습니다.

 16, auto,  background-color, background-image, background-repeat, background-position, background-attachment,
 border 영역, content 영역,  containing block,  content 영역,  margin 영역,  MDN Web Docs, rem,  RGB(또는 RBGA),
padding 영역, px,  W3C, 가로, 마진 병합(margin collapse), 상대 길이, 시계 방향, 절대 길이

1. CSS의
속성은 그 종류가 매우 다양하고 지속적으로 업데이트되는데, 이런 변화에 대응하려면 CSS 속성을 정의하는 __W3C__에서
제공하는 공식 사이트인 https://www.w3.org나 모질라 재단의 MDN Web Docs 를 참고하는 게 좋습니다.

2. CSS 속성 단위는 크게 _상대 길이와 절대 길이 단위로 구분됩니다. 절대 길이에서 px, 상대 길이에서  rem_은 가장 많이 쓰이는 단위입니다.

3. 폰트에 색상을 적용할 때 사용하는 속성은 color 속성입니다. color 속성의 값은 다양한 방식으로 적용할 수 있는데, 컬러 키워드, _16진법, RGB(또는 RBGA)_ 방식이 있습니다.

4. 요소의
배경에 관련된 속성을 지정할 땐 background 속성을 사용합니다. 우리가 강의를 통해 배운 background 속성은
background-color,background-image, background-repeat, background-position, background-attachment입니다.

5. "박스
모델에 대해 설명해보세요."라는 질문은 프론트엔드 개발자 면접 단골 질문 중 하나입니다. 박스 모델은 크게 4가지 영역,
content 영역, border 영역, margin 영역, padding 영역으로 이루어져 있습니다.

6. padding 속성은 축약해서 지정할 수 있는데, 이때 위쪽을 기준으로 시계 방향 으로 속성값을 지정합니다.

7. margin 속성의 값을 auto로 설정하면 브라우저가 자동으로 margin을 계산해 주는데, 개발자는 이 값을 주로 수평(가로축) 중앙 정렬할 때 사용합니다(주의할 점은 요소에 width 값이 있어야 합니다).

8. 마진 병합(margin collapse)은 인접한 두 개 이상의 수직 방향 박스의 마진이 하나로 합쳐지는 것을 의미하는데, 이 개념을 활용하면 첫 번째와 두 번째 컴포넌트의 조합이 다양한 경우 여백을 다르게 사용할 수 있습니다.

9. 패딩값을
상대 길이 단위인 %를 사용해 지정하면 상위 요소(containing element)의 가로 길이를 기준으로 그
값이 계산됩니다. 이 방식은 padding-top, padding-bottom에도 적용됩니다.

10. width와 height 속성은 박스 모델에서 content 영역의 너비와 높이를 지정할 때 사용합니다.

11. height 속성을 %를 사용해서 지정할 땐 containing block을 기준으로 그 값이 결정됩니다.

📌Q2. 4주 차에 배운 폰트, 텍스트 관련 개념을 정리해봅시다. 빈칸을 채워 봐주세요. 빈칸에 들어갈 수 있는 키워드는 다음과 같습니다.

**1.2**, **@font-face**, **em,** **font-family**, **font-size**, font-size, **font-styl**e, **font-weight**,  **margin의 auto 값,**
 **generic-family**, **text-align: center;**, **text-indent**, **text-decoration**, **letter-spacing**,
**vertical-align**, **word-break**, **word-spacing**,  **word-wrap**,  **white-space**, **단위**, **블록 레벨 요소**, **웹 폰트,**

1. 모든 폰트는 em박스를 가지고 있는데, _em 은 폰트의 전체 높이를 의미합니다.

2. font-family 속성을 지정할 땐 generic-family를 함께 지정해줘서 family-name으로 지정한 글꼴을 사용할 수 없을 경우를 대비해야 합니다.

3. em 박스, 상·하단의 여백을 합친 높이를 지정해주는 속성인 line-height의 기본값은 normal인데, 브라우저에 따라 다르지만 보통 1.2정도로 할당되어 있습니다.

4. line-height는 계산된 값이 아닌 숫자 값을 상속하기 때문에 숫자 값을 사용하면 부모 엘리먼트에서 계산된 값 대신 비율을 그대로 상속받을 수 있으므로, 가능하면 _단위가 없는 값을 사용하는 것이 좋습니다.

5. 폰트의 크기는 font-size 속성으로, 굵기는 font-weight 속성으로, 스타일은 font-style 속성으로 지정합니다.

6. 다양한 글꼴 속성을 한 번에 선언할 수 있도록 해주는 font 속성을 사용할 때, font-size와 font-family는 반드시 선언해줘야 합니다.

7. 웹 폰트는 서버에 저장해 제공하거나, 웹 경로를 통해 사용하는 폰트를 말합니다. 웹에 있는 글꼴을 사용자의 로컬 환경(컴퓨터)으로 다운로드하여 적용할 땐 @font-face_속성을 사용합니다.

8. vertical-align 속성을 사용하면 CSS로 수직 정렬을 할 수 있는데, 주의할 점은 블록 레벨 요소엔 해당 속성이 적용되지 않는다는 점입니다(inline, table-cell box에는 적용).

9. 블록 요소를 가운데 정렬할 땐 margin의 auto 값을, 인라인 요소를 가운데 정렬할 땐 text-align: center;를 사용합니다.

10. 들여쓰기는 text-indent 속성, 밑줄이나 모양, 색상 변경 등의 장식은 text-decoration속성을 사용해야 합니다.

11.
요소 안 공백을 어떻게 처리할지는 ,white-space 속성을, 글자(자간) 사이의 간격을 지정할 땐 letter-spacing 속성을,
단어 사이의 간격을 지정할 땐 word-spacing 속성을, 단어가 라인 끝에 나올 경우 어떻게 처리할지는 word-break
속성을, 요소를 벗어난 단어의 줄 바꿈을 지정할 땐 word-wrap속성을 사용합니다.

profile
hanahana
hello world
이전 포스트

CSS-BOXMODEL

다음 포스트

Font

0개의 댓글