inflearn logo
강의

Course
Instructor

HTML+CSS+JS Portfolio Practical Publishing (Season 1)

jQuery Responsive Animation Modal (2)

@media에서의 flex-direction: column으로 세로배치 관련 질문드립니다.

69

seoyoung

4 asked

1

안녕하세요 선생님!

수업 잘 듣고 있습니다.

질문이 있어 글을 작성합니다.

강의와 같이 코드를 작성하였습니다.

@media (max-width: 768px) {
    .modal-content {
        flex-direction: column;
        width: 100%;
    }
}

위처럼

@media (max-width: 768px) { .modal-content { flex-direction: column; width: 100%; } }

를 작성하면 모바일에서 확인 시 새로 배치가 되어야 하는 것 같은데...

하단 이미지와 같이 가로 배치 그대로 유지 됩니다. 무엇이 문제일까요 ㅠㅠ

스크린샷 2025-09-18 181339.png.webp

 

전체 코드는 아래와 같습니다.

  <body>
    <div class="modal">
      <div class="modal-content">
        <div class="photo"></div>
        <div class="desc">
          <div class="desc-header">
            <h2>지금 다양한 혜택을 받아보세요.</h2>
            <button class="btn-close">&times;</button>
          </div>
          <div class="desc-content">
            <input type="email" placeholder="이메일 주소를 입력하세요." />
            <button>뉴스레터 구독하기</button>
            <p>
              스타트업메이트 뉴스룸의 다양한 소식과 혜택을 이메일로 받아
              보시려면 구독 신청 해주시기 바랍니다. 스타트업메이트에 대해 알고
              싶은 뉴스, 꼭 알아야 할 뉴스를 신속하고 정확하게 전합니다.
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="overlay"></div>
  </body>


* {
    box-sizing: border-box;
    font-family: "Noto Sans", sans-serif; 
}
body {
    font-weight: 300;
    color: #222;
    font-size: 15px;
    line-height: 1.6em;

}
a {
    color:#222;
    text-decoration: none;
}
.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 10px rgb(0, 0, 0, 00.15);
    z-index: 10;
    overflow: hidden;
}
.modal-content {
    /* border: 1px solid #000; */
    width: 600px;
    display: flex;
}
.modal-content > div {
    padding: 20px;
}
.photo {
    flex:1;
    background: url(/img/office.jpg) no-repeat center right;
    background-size: cover;
}
.desc {
    flex:2;
    text-align: center;
}
.overlay {
    background-color: hwb(0 0% 100% / 0.212);
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.btn-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: transparent;
    border: none;
    font-size: 18px;
    color: #999;
    cursor: pointer;
}
.btn-close:hover {
    color: #000;
}
.desc-content input[type=email] {
    display: block; 
    width: 100%;
    text-align: center;
    padding: 7px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    outline: none;
}
.desc-content input[type=email]::placeholder{
    color:#ccc;
    transition: .5s;
}
.desc-content input[type=email]:focus::placeholder{
    visibility: hidden;
    opacity: 0;
}
.desc-content button {
    display: block;
    width: 100%;
    border: none;
    background-color: crimson;
    color: #fff;
    cursor: pointer;
    padding: 7px;
}

@media (max-width: 768px) {
    .modal-content {
        flex-direction: column;
        width: 100%;
    }
}

HTML/CSS jquery

Answer 1

0

codingworks

코드에는 문제 없는 듯 합니다.

아마도 메타 테그가 없어서 그럴 듯 합니다.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

class 값 한 번에 부여하는법

2

80

1

div#css-checker-widget의 해결방

1

60

2

input의 포커스되었을때 검정선이 사라지지 않아요

0

79

2

강의듣는법

1

73

1

아코디언 만들기 100%이하의 화면으로 보았을때

1

68

2

input checked 질문합니다.

0

76

1

Bracket Pair Colorizer - 비주얼 스튜디오

1

140

2

Part 1 영상 안나옵니다

1

88

1

제이쿼리 작동이 안됩니다

1

199

3

강의 내용 질문있습니다.

1

120

2

일정 부분만 주석하는 방법

1

211

2

폰트어썸

1

134

2

인접선택자에 대한 질문드립니다!

1

129

2

delay 적용 안됨

1

134

1

rotateY(360deg)가 적용이 안됩니다!

1

186

2

세로이동할때 height값

1

138

2

폰트어썸이 안되요..

1

485

2

화면 정중앙에 오게끔 할수있나요?

1

169

1

어코디언 네비게이션 중

1

124

1

라이브서버 문제

1

225

2

넷플릭스 어코디언 예제 질문

1

102

1

이번 강의에선 display flex가 무조건 적으로 필요한건가요 ?

1

154

1

active 관련 질문

1

145

2

checked 가상클래스에서 transform 속성을 사용할 때 관련 질문입니다.

1

144

1