1-10 데일리 모토 만들기 14분쯤 되는 부분에서 질문 있습니다.

커뮤니티

포인트

쿠폰

내 강의실

국비 신청 내역

증명서

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

1-10 데일리 모토 만들기 14분쯤 되는 부분에서 질문 있습니다.

ChatGPT로 웹개발 완전정복 v0

1주차

심*현

・

추천

・

조회수

답변 완료

* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.

* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.

먼저 강의 내용은 기존에 container class를 가진 div 요소에

아래와 같은 css 속성을 부여해서

display:flex;

flex-direction:column;

justify-content:center;

align-item:center;

하위 자식 요소들을 가운데 정렬 하였습니다.

이후 강의 영상에서는 greeting, motto class를 가진 div 요소들을 추가하여 기존 container class를 가진 div요소의 트리 중간에 추가 하고

css 속성을 margin-bottom 속성만 주었는데, 하위 요소들이 자동으로 가운데 정렬이 됩니다.

마치, container의 display 속성을 상속받은 것처럼요

하지만, 제가 동일하게 코드를 작성했을땐 영상과 동일하게 배치가 되지 않습니다.

display 속성은 하위 요소들이 상속을 받지 않는다고 MDN 명세에도 나와 있는데 어떻게 영상에서는 상속을 받은것처럼 동작하게되는거죠??

flex 속성에 대한 MDN 명세

강의영상 - 위에서 설명한 코드 적용 후 새로고침 누른 직후 (15:28)

강의영상 - 강사님 작성 코드 (14:38, 15:12)

동일 코드를 적용하였을때 저의 화면

작성한 코드 및 에러 메세지

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>
      body {
        background-image: url(https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/webjong/images/background.jpg);
        background-position: center;
        background-size: cover;
        color: white;
      }
      .navbar {
        display: flex;
        justify-content: space-between;
      }
      .weather {
        display: flex;
        align-items: center;
        margin-right: 30px;
      }
      .container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100vh;
      }
      .footer {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        text-align: center;
        font-weight: bold;
        padding: 20px 0px;
      }
      .greeting {
        margin-bottom: 50px;
      }
      .motto {
        margin-bottom: 100px;
      }
    </style></head><body><nav class="navbar"><imgsrc="https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/webjong/images/sparta-logo.svg"alt=""
      /><div class="weather"><imgsrc="https://ssl.gstatic.com/onebox/weather/64/partly_cloudy.png"id="weather-icon"
        /><p>날씨 맑음, 20ºC</p></div></nav><!-- main --><div class="container">

      <div class="greeting"><h1>Hello, My name!</h1><h1>12:30</h1></div>

      <div class="motto"><h3>My life's motto</h3><h2>웃으면 행복해집니다.</h2></div>
      
    </div>


    <!-- footer --><div class="footer"><p>- 작자 미상 -</p><p>멋진 명언입니다. 아이스크림을 먹으면 행복해져요.</p></div></body>
</html>

댓글 알림