싸이월드 만들기 1탄 과제 만들기 코드를

제가 한 과제와 비교하면서 공부하고 있습니다.

저하고 다른 부분이 있어서 그 이유가 궁금합니다.

HTML

                        <div class="left__body__footer">
                            <div class="wrapper__feel">
                                <div class="feel__title">오늘의 기분</div>
                                <select class="feel__select">
                                    <option>기쁨 😊</option>
                                    <option>슬픔 😭</option>
                                    <option>화남 😠</option>
                                    <option>분노 😡</option>
                                </select>
                            </div>
                        </div>

html은 과제 class 이름 참고하면서 만들어서 똑같습니다.

CSS

.wrapper__feel {     <--------- 과제 예시 코드
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}

위의 코드가 과제 예시 코드입니다.

아래 코드가 제가 한 코드입니다.

.feel__select {       <------ 제가 한 코드
    width: 100%;
}

<-width 차이->

저는 div태그가 블록레벨 태그라서 <div class="feel__title">오늘의 기분</div> 안에 있는 '오늘의 기분'은 왼쪽으로 정렬되기 때문에 그대로 두고

위의 코드 예시처럼 select 박스만 크기 조절하여 해결했습니다.

저는 과제 내용의 셀렉트 박스의 width를 select 박스 자체에 100%로 주었고

과제 예시 코드는 자식요소의 div와 select가 포함된 <div class="wrapper__feel"> div를 정렬한 뒤 width 100%를 주었더라구요.

그런데 아래의 코드처럼 flex 정렬부분을 주석처리하니깐 width 속성이 안 먹더라구요.

그 이유가 궁금합니다.

.wrapper__feel {
    /* display: flex;
    flex-direction: column;
    justify-content: center; */
    width: 100%;
}

+++ 제가 한 코드를 지우고 과제 예시 코드 중 width: 100%; 부분을 지워도

과제 예시 코드와 결과와 같습니다.

flex 정렬이 되면 footer의 width 100% 속성이 상속되는 건가요?

display 정렬과 width의 관계에 대해 알고 싶습니다.

.wrapper__feel {     
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* width: 100%; */           <---- 과제 예시 코드의
                                        이 부분을 지워도 결과가 같습니다.
}

제가 한 코드를 지우고 이렇게만 해도 같은 결과가 나옵니다. 차이를 알고 싶습니다.

.feel__select {    <- 제가 한 이 코드를 지우고 위의 코드 정렬부분만 실행해도 결과가 같음.
    width: 100%;
}