css 중 width 유무 footer와 main의 차이 질문

커뮤니티

포인트

쿠폰

내 강의실

국비 신청 내역

증명서

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

css 중 width 유무 footer와 main의 차이 질문

ChatGPT로 웹개발 완전정복 v0

1주차

정*영

・

추천

・

조회수

답변 완료

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

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

안녕하세요! 강의 중 궁금한 사항이 생겨 질문드립니다. 강의 내용 중 12:30 ~ 12:50 경에 "footer에 영역이 글자여서 width를 주지않으면 가운데 배치가 안된다"고 하시는 부분이 나옵니다.

main부분도 문자인데 width를 주지 않고 정렬을 했거든요..footer랑 main에 어떤 차이가 있어서 footer에는 width를 줘야하는지 궁금합니다!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 데일리 모토 </title>
    <style>
        .navbar{
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 50px;
        }
        .weather{
            display: flex;
            align-items: center;
            margin-right: 15px;
        }
        .main{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            height: 100vh;
        }
        .footer{
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100vw;
            text-align: center;


            font-weight: bold;
            padding: 20px 0;
        }
        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;
        }


    </style>
</head>
<body>
    <nav class="navbar">
        <img src="https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/webjong/images/sparta-logo.svg" alt=""/>
        <div class="weather">
            <img src="https://ssl.gstatic.com/onebox/weather/64/partly_cloudy.png" id="weather-icon">
            <p>날씨 맑음, 20ºC</p>
        </div>
    </nav>
    <div class="main">
        <h1> Hello, My name!! </h1>
        <h1>15:30</h1>
        <h3>my life's motto</h3>
        <h2>웃으면 행복해집니다.</h2>
    </div>
    
    <div class="footer">
        <p> - 푸쉬킨 - </p>
        <p> - 삶이 그대를 속일지라도 - </p>
    </div>
</body>
</html>

댓글 알림