float에 가상선택자::after 로 clear값을 주는 이유

1. 간편한 float, 근데 레이아웃 왜 이 모양? (float의 문제점)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    #wrap{
      width: 100%;
      background-color: aquamarine;
    }
    .num-content{
      width: 200px;
      height: 100px;
      background-color: rgba(0,195,255,0.4);
      border: 1px solid #444;
      box-sizing: border-box;
    }
    span{
      background-color: chartreuse;
    }
  </style>
</head>
<body>
  <div id="wrap">
    <div class="num-content">1</div>
    <div class="num-content">2</div>
    <div class="num-content">3</div>
    <div class="num-content">4</div>
    <span>안녕하세요</span>
  </div>
</body>
</html>

위와 같은 HTML구조가 있다고 하자. 그러면 실제 웹에서는 아래와 같이 나타난다.

style에 직접적인 display값을 주지 않아도 기본적으로 가지고 있는 user agent stylesheet에 의해서 div는 block요소, span은 inline요소로 분류되기 때문에 이와 같은 형태로 나타난다.

그런데 여기서 .num-content div박스들을 여백없이 가로로 일렬로 배치하고 싶어 float: left;를 주었다고 해보자.

[이미지2] float을 주었더니 부모요소는 자식인 div를 인지하지 못한다.

그럼 위와 같은 형태로 span이 float의 영역까지 침범하게 된다.

float는 기존 display: block일때의 normal flow의 BFC에서 벗어나 완전히 새로운 BFC 영역을 만들어냈다.(📁BLOCK FORMAT CONTEXT, BFC 블록서식맥락) 그렇기에 span은 기존의 BFC영역까지 쭈욱 올라가지만 float의 Inline Guard 특성에 의해 inline요소인 span은 가장 상단 왼쪽에 위치하지 못하고 float가 끝나는 오른쪽 지점에 붙는다.

'안녕하세요'가 inline요소가 아니라 div와 같은 block요소라면 이 Inline Guard의 특성에 적용되지 않고 가장 상단 왼쪽에 만들것이다. 마치 아래처럼 말이다.

복잡하게 말해서 그렇지 float의 의미처럼, float를 주는 순간 이 float는 둥실둥실 기존의 normal flow로 작동하는 요소들 위로 둥둥 떠버린다. 아무리 #wrap이 .num-content의 부모요소라고 해도 float를 주는 순간 아예 다른 영역에 존재하기 때문에(아래 그림 참고) 부모는 float 처리된 자식을 인지할 수가 없고 그렇기에 자식의 height, 높이값을 인식하지 못한다.

float의 문제점이다.

float를 주었다가 이상해진 레이아웃은 바로 이러한 문제점때문에 나타난다.

2. float 사실은 텍스트와 배치하기 위해 탄생

가로로 배치하기 위해 간편하게 float: left 혹은 right를 주는데 float는 사실상 텍스트와 함께 float된 요소를 배치하기 위해서 만들어졌다. 레이아웃을 가로로 배치하기 위해서 탄생한 것이 아니라 요소를 왼쪽이나 오른쪽으로 밀어 다른 요소가 그 요소를 둘러쌀 수 있도록 하기 위해서 만들어졌다. 쉽게 말하자면 이미지와 텍스트 요소가 있을때 block처럼 이미지가 width를 전부 차지하지 않고 텍스트가 이미지와 조화롭게 둘러싸게 아래의 이미지처럼 배치하기 위해서 탄생했다.

왼쪽처럼 따로 존재하던 이미지가 float되면서 텍스트가 조화롭게 이미지를 둘러싸고 있다.

float가 된 요소는 normal flow에서 벗어나 위로 둥둥 떠있는다. 그렇기 때문에 BFC영역인 block요소인 div박스들은 이 float된 요소의 아래로 내려가 가려져 레이아웃이 붕괴되지만(위에서 설명한 float의 문제점) Inline Guard 규칙에 의해 inline인 span태그, text와 같은 요소들은 float의 영역밖에 위치한다. (애초에 text와 함께 배치하기 위해서 만들어진 속성이니)

https://www.youtube.com/watch?app=desktop&v=xara4Z1b18I 의 이미지를 다시 편집

이미지에서는 3개의 div박스가 존재하기에 span이 div박스 옆에 붙어 존재하는 것처럼 보일수도 있는데 Inline Guard 규칙에 의해 float된 div(레드)박스 하나와 span(보라색)만 존재하더라도 inline요소인 span태그는 위의 이미지와 동일한 위치에 가게 된다. 마치 [이미지2]처럼 말이다.

float가 어떤식으로 움직이는지에 대해서는 📌(코드스피츠) 초보자를 위한 CSS와 렌더링의 기본개념에 자세하게 설명해두었다.

3. 그럼, float의 문제점을 어떻게 해결할 수 있을까?

아래와 같은 html 구조가 있다고 해보자. 어떤식으로 바뀌는지 알아보자

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .parent{
            border: 5px solid #333;
            background-color: bisque;
        }
        .child{
            width: 200px;
            height: 100px;
        }
        .child1{
            float: left;
            background-color: #ffb2c2;
        }
        .child2{
            float: right;
            background-color: skyblue;
        }
        .box{
            border: 1px solid #333;
            background-color: rgba(161, 255, 73, 0.5);
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="child1 child">child1</div>
        <div class="child2 child">child2</div>
    </div>
    <div class="box">box1</div>
    <div class="box">box2</div>
</body>

</html>

3-1. float의 상위요소(부모)에 height값 직접적으로 주기

flexible한 레이아웃을 만들지 않는다면 또 의외로 쉽게 해결할 수 있다.

float의 상위요소, 부모요소는 자식을 여전히 인지하지 못하지만 자식요소의 height 크기만큼의 값을 준다면 normal flow에 존재하는 다른 요소들은 그 height크기만큼 쭈욱 내려가져서 보일 것이다. 여전히 float된 요소는 붕떠있지만 2차원적으로 화면에 보이기에 우리는 이를 인지하지 못하고 float의 문제가 해결되었다고 보인다.

>> 하지만 디스플레이나 창의 크기에 따라서 가변적으로 바뀌지 않는 문제점을 가지고 있기에 추천하는 방법은 아니다.

3-2. float의 상위요소(부모)에게 float 주기

        .parent{
            border: 5px solid #333;
            background-color: bisque;
            float: left;
        }

부모인 .parent에 float를 줘버려서 자식요소들처럼 아예 normal flow에서 벗어나게 하는 방법이다.

> 이 방법은 부모요소가 자식을 인지하게끔을 만들지만 같이 normal flow영역을 벗어나기 때문에 normal flow의 BFC에 있는 요소들은(여기선 box1, box2) 위의 이미지처럼 위로 올라온다는 문제점이 있다. 이 문제를 해결하기 위해 box1, box2에게도 float을 주는 것은 좋은 방법이 아니다. (고작 저 레이아웃을 위해 아래에 있는 모든 요소에게 float을 준다는건 정말로 효율적이지 못하다...)

또한, .parent가 block요소여서 width의 전체를 차지하던 예전과 달리 자식요소의 크기만큼 너비가 줄어든다는 문제점도 있다. 이말은 직접적으로 부모에게도 width값을 줘야한다는 말이고 가변적인 레이아웃을 만들 때 추천되지 않는다.

3-3. float의 상위요소(부모)에게 overflow: hidden; 주기

        .parent{
            border: 5px solid #333;
            background-color: bisque;
            /* 새로운 BFC를 만들어 해결하는 방법인 overflow: hidden; */
            overflow: hidden;
        }

간단하게만 말하면 float 속성이 있는 자식요소를 감싸는 부모에게 overflow: hidden;을 준다.

문제는 여기서 일어난다. 도대체 왜? overflow: hidden;을 주는 건가? overflow는 부모의 크기보다 자식이 넘쳐 흐를 때 그것을 넘쳐흐르지 않게 나타내기 위해서 사용하는 속성이 아닌가? 여기서 갑자기 overflow: hidden;이 왜 튀어나와?

라고 나는 생각했다. 여기서 BFC에 대한 이해가 필요하다.

3-3-1. 차근차근 overflow부터 알아보자

MDN에서는 overflow에 대한 설명을 아래와 같이 하고 있다.

overflow CSS 단축 속성은 요소의 콘텐츠가 너무 커서 요소의 블록 서식 맥락(BFC)(en-US)에 맞출 수 없을 때의 처리법을 지정합니다. overflow-x (en-US), overflow-y (en-US)의 값을 설정합니다.

◾ overflow: visible; / hidden; / clip; / scroll; / auto;
◾ visible(기본값)이 아닌 다른 값으로 overflow 속성을 사용할 경우 새로운 블록 서식 문맥 (en-US)을 생성합니다. 이는 기술적인 요구사항으로, 만약 스크롤하는 요소와 float이 교차한다면, 각 스크롤 단계마다 내용물을 강제적으로 다시 감싸게 될 것입니다. 이는 결국 스크롤 속도를 느리게 할 것입니다.

이게 무슨 소리야라고 생각된다면 아래의 내용을 살펴보자

https://developer.mozilla.org/ko/docs/Learn/CSS/Building_blocks/Overflowing_content

콘텐츠 overflow - Web 개발 학습하기 | MDN

이번 수업에서는 CSS 의 또 다른 중요한 개념인 — overflow 를 살펴봅니다. Overflow 는 박스 안에 편안하게 담기에는 너무 많은 내용이 있을 때 발생합니다. 이 안내서에서는 내용과 관리 방법에 대

developer.mozilla.org

😃 아래의 내용은 위의 페이지를 간략하게 간추린 내용이다.

🔎 overflow란 무엇인가?
우리는 이미 CSS의 모든 것이 '박스'라는 것을 알고 있으며, width, height의 값을 제공하여 박스의 크기를 정할 수 있다는 것 또한 알고 있다. overflow는 박스의 내용이 너무 많을 때 발생한다.

🔎 CSS는 '데이터손실'을 피하려고 합니다.
왜 CSS는 overflow를 발생시켜 내용을 혼란스럽게 만드는지 궁금할 것이다.
CSS는 가능하면 내용을 숨기지 않는다. 내용을 숨기다는 것은 데이터의 손실을 의미하고 이것은 문제가 될 수 있다. 일부 콘텐츠가 사라지는 것이기 때문이다. 콘텐츠 손실의 문제점은 이것이 손실 되었는지 아닌지를 방문자가 파악할 수 없다는 점이다.

overflow는 박스 안의 내용물이 넘쳐 흐를 때(예: 제한된 크기의 박스가 존재할 때 그 박스안의 내용물(자식)이 부모박스보다 길거나 크면 발생) 이것을 scroll을 발생시킬 것인지 hidden으로 내용물을 숨길 것인지 설정할 수 있는 속성이다.

그런데 이 overflow는 위에서 설명한 것과 동일하게 새로운 BFC를 생성한다.

(BFC페이지에서도 overflow: visible; 또는 clip이 아닐 때(= scroll, auto, hidden 일 때) 새로운 BFC를 생성한다고 설명하고 있다.)

3-3-2. 새로운 BFC를 생성하는 overflow 이용하기

BFC는 CSS 렌더링의 일부로 실제 태그의 구조와 렌더링의 구조는 일치할수도 일치하지 않을 수도 있다.

위에서 작성했던 코드 그래도 렌더링은 아래와 같이 나타난다.

태그에서는 .parent 안에 .child1, .child2의 div박스가 들어가 있고 box1,box2의 div가 밖에 존재하지만

렌더링에서는 .child, .child2는 .parent의 BFC영역에서 벗어나 float영역의 새로운 BFC에 존재하고 box1,box2가 오히려 같은 Normal flow의 BFC영역에 존재한다.

3차원으로 살펴보면 아래와 같다.

float된 요소는 normal flow를 벗어나 새로운 BFC영역을 생성한다. child1는 왼쪽에 child2는 오른쪽에 float 되었다. 높이값이 설정되어 있지 않는 .parent는 noraml flow를 벗어난 float 속성을 가진 자식들(.child1 .child2)를 인지할 수 없기에 나타나지 않는다. 하지만 기존 normal flow에 .parent가 생성했던 BFC영역에 아래의 box1, box2가 만들어진다. box1, box2가 존재하는 normal flow에는 다른 block 요소가 없기에 이들은 가장 상단부터 차례로 위치하게 된다.

하지만 box1, box2에 존재하는 inline 요소인 text는 linebox의 바운더리(점선표시) 밖에 위치하게 된다.

여기까지가 아직 float 속성을 가진 자식요소의 상위인 부모에게 overflow: hidden;을 주어서 새로운 BFC를 생성하기 전의 모습이다.

여기서 .parent에게 overflow:hidden; 속성을 준다면 그 모습이 어떻게 될까?

문자로만 적으면 overflow: hidden;의 속성이 적용된 .parent는 강제로 float 속성을 가진 자신의 자식을 감싼 BFC영역을 새로 만든다. normal flow에서도 인지할 수 있는 새로운 BFC가 생성되면서 .parent는 자식을 인지하면서 그만큼의 높이값을 가지게 되고 box1,box2 또한 그 높이값만큼 밀려나 그 아래에 위치하게 될 것이다. 3차원적으로 보면 아래와 같다.

여기서 착각하지 말아야할 것은 .parent가 float를 인지하는 완전히 새로운 BFC를 만들었다고 하더라도 float 속성을 가진 박스들은 normal flow를 여전히 벗어난 상태이다. 그렇기에 .parent에 일반적인 div값을 가진 child3, child4를 만든다면 아래와 같이 나타난다. 여전히 float된 child1, child2는 normal flow 영역을 벗어나 존재하기 때문에 child3, child4는 그 아래 normal flow에 나타나며 inline 요소인 텍스트들은 밀려서 아래와 같은 형태로 나타나게 되는 것이다.

이런식으로 overflow가 visible(default)이나 clip이 아닐 때 완전히 새로운 BFC를 만든다는 규칙을 이용하여 normal flow에 위치한 float 속성을 가진 요소의 부모가 자식을 인지할 수 있게끔하여 디자이너/개발자가 처음 의도했던 레이아웃의 형태대로 되살리게 하는 방법이었다.

> 즉, 이 말은 overflow: scroll; 또는 auto; 일 때도 사용할 수 있단 말인데 이 둘은 스크롤이 생길 수 있기 때문에 scroll이 필요하지 않는 레이아웃에 굳이 이 둘을 사용하지는 않는다.

3-4. float 아래요소에 clear 직접 주기

MDN에서는 clear에 대해서 아래와 같이 설명하고 있다.

clear CSS 속성은 요소가 선행 부동(floating) 요소 다음일 수 있는지 또는 그 아래로 내려가(해제되어(cleared))야 하는 지를 지정합니다. clear 속성은 부동 및 비부동 요소 모두에 적용됩니다.

clear: none; / left; / right; / both;

- 비부동 블록에 적용되는 경우, 모든 관련 부동체(floats)의 마진 경계 아래로까지 요소의 보더 경계를 아래로 내립니다. 이 움직임(이 일어나는 경우)은 마진 상쇄가 일어나지 않도록 합니다.
- 부동 요소에 적용되는 경우, 모든 관련 부동체의 마진 경계 아래로 요소의 마진 경계를 옮깁니다.
- 이는 나중(later) 부동체의 위치에 영향을 줍니다, 나중 부동체가 앞선(earlier) 부동체보다 높게 위치될 수 없기에. 해제(cleared)와 관련된 부동체는 같은 블록 형성 문맥(BFC) (en-US) 내 앞선 부동체입니다.

다시 쉽게 말하자면 float 속성을 가진 요소의 float를 해제하는 것을 clear 속성이 지정한다. none을 default로 하고 나머지 left, right, both가 있다. float는 left, right로 가로를 기준으로 정렬하는 속성인데 both는 left, right로 적용되어진 모든 float를 해제하겠다는 의미이다.

clear는 float 다음일 수 있는 요소를 float 아래로 내린다고 설명하고 있다. clear; left;는 float: left;가 적용된 left 박스에만 해당되니 글자는 left박스 바로 아래에 위치한다. 여전히 right박스는 float의 규칙을 따르고 있다.

clear: right;가 적용되어야만 right박스의 float가 해제되어 글자가 아래로 쭈욱 내려간다. 위에서는 left박스가 right박스보다 짧기때문에 clear: both; 모습과 clear: right;의 모습이 동일한 것처럼 보이겠지만 확실히 둘은 다르다.

그렇기에 보통은 clear를 사용할 때(float 문제를 해결하기 위해서 사용하니) clear: both;를 사용한다.

clear 속성에 대해서는 이제 알겠다. 이 clear는 위에서도 설명했듯이 float이 적용된 요소에도 float속성이 없는 요소 모두 사용이 가능하다.

이때 float가 적용되지 않는 요소에 clear 속성을 사용하면 모든 float가 적용된 요소의 마진경계 아래까지 내린다!

아래의 그림처럼 나타나게 된다. (box1, box2에 clear: both;를 줬다)

> 하지만 이 방법을 사용하면 부모는 여전히 float된 자식요소를 인식하지 못한다. 부모한테 아무런 css 속성이 들어가지 않은 상태라면 상관없을 수도 있지만 border나 background와 같은 효과가 들어갔을 때는 위와 같이 나타나는 문제점이 있다.

3-5. 빈 박스를 만들고 clear 주기

말그대로 그냥 아래의 코드처럼 빈 엘리먼트를 생성하고 거기에 clear: both;를 주는 방법이다.

    <div class="parent">
        <div class="child1 child">child1</div>
        <div class="child2 child">child2</div>
        <!-- 빈박스에 clear:both;를 주는 방법 -->
        <div class="empty-box" style="clear: both;"></div>
    </div>
    <div class="box">box1</div>
    <div class="box">box2</div>

이 방법을 사용하면 화면에는 보이지 않는 float요소가 적용되어 있지 않는 .empty-box가 float가 적용된 .child1과 .child2 아래로 내려가기 때문에 같은 normal flow에 있는 부모 .parent가 .empty-box를 인식하면서 겉으로 보기엔 .child1과 .child2를 인지하는 것처럼 보이게 만든다.

실제로 empty-box에 width, height, background값을 넣으면 위의 말이 무슨 말인지 더 쉽게 이해할 수 있다.

> 하지만 굳이 빈 박스를 HTML에 만든다는 측면에서 좋은 방법은 아니다.

3-6. 가상선택자 ::after에 clear 주기 ⭐

3-5방법과 유사하지만 HTML에 직접적으로 빈 엘리먼트를 생성하지 않기에 가장 좋은 방법이다.

float를 해제하기 위한 속성인 clear를 사용하며 원리는 3-5와 거의 똑같다. float 요소를 가진 부모에 가상선택자 ::after를 사용하여 clear를 주는 방법이다. 여기서 하나 중요한것은 가상선택자의 기본값은 inline이기 때문에 display: block; 값으로 변경해줘야한다. 그렇지 않으면 content가 비어있는 ::after는 아무런 크기 값을 가지지 못하기 때문에 부모가 자식을 인지하지 못하던 float만 있던때와 별반 다를게 없다.

        /* float를 해제하는 clear를 이용한 방법 */
        .parent::after{
            content: '';
            display: block;
            clear: both;
        }

3-7. clear를 주고 나서 그 이후에 float가 나타난다면 어떤식으로 렌더링?

여기서 추가로 MDN에서 아래와 같이 clear를 설명했는데

- 부동 요소에 적용되는 경우, 모든 관련 부동체의 마진 경계 아래로 요소의 마진 경계를 옮깁니다.
- 이는 나중(later) 부동체의 위치에 영향을 줍니다, 나중 부동체가 앞선(earlier) 부동체보다 높게 위치될 수 없기에. 해제(cleared)와 관련된 부동체는 같은 블록 형성 문맥(BFC) (en-US) 내 앞선 부동체입니다.

다시 더 쉽게 설명하자면 float 요소를 clear로 해제하고 난 뒤에 다시 float를 줬는 경우가 있을 때, clear는 전자의 float만을 해제하지 뒤에 만들어진 float를 해제하지는 않는다는 설명이다. '나중 부동체가 앞선 부동체보다 높게 위치될 수 없기에'라는 말은 3차원적인 말이 아니라 말 그대로 clear 이후에 생긴 float가 앞서 있던 float보다 더 앞에 위치할 수 없다는 말이다.

여기서 좀 궁금해졌는데, float를 주고 ::after에 clear 속성을 주어서 해제한 뒤에 다시 float와 div를 만든다면 어떻게 렌더링 되는 것일까?

나머지 구조는 동일하고 box2 아래에 위와 같은 구조가 추가되었다고 생각해보자.

.new-float는 float가 적용되어 있다.

차근차근 어떻게 적용되는지 생각해보자.

① .parent는 normal flow에 BFC영역을 만든다.

② .parent의 가상선택자 ::after는 clear:both; 속성을 가지고 있어 float 속성을 가진 child1, child2의 마진 아래위치로 위치한다.

③ child1, child2는 float 속성을 가지고 있기에 normal flow에서 벗어나 새로운 BFC를 형성한다.

④ 현재까지 normal flow의 BFC에는 .parent와 ::after가 있다. box1, box2 또한 block 요소이기 때문에 이 BFC영역에 들어간다. (정리 : .parent ~ .box2까지 normal flow에 있는 BFC1)

⑤ .new-float 박스가 float속성을 가지면서 normal flow에서 벗어나 새로운 BFC를 형성한다.

🙄 오엥? .new-float는 float니깐~ 붕 뜨잖아 normal flow에서 이미 벗어났으니깐 box1, box2 위로 와야 하는거 아니야..? 왜 저렇게 오지...?

라고 착각할 수도 있는데 (=는 나..)
.parent ~ .box2까지 하나의 BFC이다. 다른 BFC를 만들면서 normal flow를 벗어난 .new-float박스는 기존에 이미 있는 BFC영역을 침범할 수 없다. BFC는 각자 독립적으로 작동하여 서로의 레이아웃에 영향을 미치지 않는다!

⑥ box3, box4는 block 요소이며 normal flow에 배치된다. 이들은 .parent ~.box2와 같은 BFC는 아니지만 또 다른 normal flow의 BFC영역에 배치된다. ( .box3 ~ .box4까지 normal flow에 있는 BFC2)

보이지 않지만 normal flow의 .parent 안에 위치하는 ::after

이 new-float에 가상선택자 ::after을 주면 어떻게 될까?

> 구조는 바뀌지 않는다. float가 된 것을 해제하기 위해서 가상선택자를 사용하여 clear을 사용했던게 아닌가라고 착가하면 안된다! float속성이 있는 요소의 부모에게 가상선택자로 clear을 주어야지 normal flow에 '우리 눈에는 보이지 않지만, 컴퓨터는 인식할 수 있는!' 투명박스가 만들어지고 그 박스를 부모가 인지하여 자식이 있는 곳까지 부모의 높이가 늘어나게 되는 원리이다! (new-float를 감싸는 부모 div가 따로 있어 이 div에 가상선택자에게 clear를 줘야한다는 소리)

즉, 위와 같은 구조일 때는 바로 아래에 있는 box3에게 clear속성을 부여해야지 new-float의 마진 아래의 normal flow 위치에 존재하게 되는 것이다.

4. 정리

float는 normal flow 영역에서 벗어나 새로운 BFC영역을 만든다. → 그렇기에 normal flow영역에 있는 float의 부모는 float를 인지X
float는 linebox, inline guard 규칙을 따른다.
block요소는 normal flow의 BFC영역에 있기에 가장 상단에 위치하면서 레이아웃이 깨져보이게 된다.
inline 요소는 inline guard규칙에 의해 float의 바운더리를 벗어난 영역에 존재하게 된다.
float의 문제점을 해결하기 위해선 아래의 방법들이 있다.
1. float의 상위요소(부모)에게 height값 직접 주기
2. float의 상위요소(부모)에게 float 주기 > 자식크기만큼 너비 줄어듬
3. float의 상위요소(부모)에게 overflow: hidden; 주기
  - overflow: visible, clip을 제외한 나머지들은 새로운 BFC를 만든다. float 요소가 있을땐 이걸 강제적으로 감싸는 BFC가 생성하여 부모가 float를 인지할 수 있게 만듬
4. float 아래요소에 clear 직접 주기 > 여전히 float의 부모는 자식을 인지할 수 없음
5. float요소를 가진 부모에게 빈박스를 만들고 clear주기 > 굳이 html에 빈 엘리먼트를 생성하는 것이 좋아보이지 않음
6. float요소를 가진 부모에게 가상선택자 ::after에 clear주기 (display: block 까먹지 말 것!)