0117 html, css

오늘은 challenge를 마저 다 만들거다!
challenge를 시작하기 앞서 자기 소개를 넣었다.

<section id="about">
        <div class="about-self">
            <div class="left">
                <div class="title">
                    <h4>Who Am I</h4>
                    <h2>About Me</h2>
                </div>
                <div class="image-container">
                    <img src="./images/증명사진 오승목.jpg" alt="내 사진">
                </div>
            </div>
            <div class="right">
                <div class="text">
                <h3>Hello, <span>I'm SeungMok</span></h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt iste ea consequuntur.
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, libero.
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam minus molestias quae.
                </p>
                </div>
                <div class="social">
                    <a href=""><i class="fa-brands fa-facebook"></i></a>
                    <a href=""><i class="fa-brands fa-instagram"></i></a>
                    <a href=""><i class="fa-brands fa-x-twitter"></i></a>
                    <a href=""><i class="fa-brands fa-youtube"></i></a>
                </div>
            </div>       
        </div>
    </section>

이렇게 먼저 html을 만들어 준 뒤

.about-self {
    display: flex;
    justify-content: space-between;
    height: 400px;
}

disply:flex를 하고 justify-content:space-between으로 좌우를 나눴다.

.about-self .left {
    width: 45%;
    display: flex;
    justify-content: space-between;
}
.about-self .left .title {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

좌우 나눈 틀에 왼쪽 설정이다 역시 display와 justify-content로 좌우로 나눠줬고
title을 먼저 적어 왼쪽에는 Who Am I를 적었고 오른쪽에는 내 이미지를 넣었다.
display:flex와 flex-direction:column으로 열 즉 세로 정렬로 했다.

오른쪽에는 내 소개말을 넣었다.

.about-self .right{
    width: 45%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.about-self .right .text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

이 역시 앞서 만든 left와 비슷하게 만들었다.
text에 justify-content: center와 align-items: center를 넣어 가운데 정렬을 했다.

다음은 아래 challenge day와 내가 만들걸 넣을 예쩡!

오늘은 여기까지! 이제 하나하나 추가할 계획이다 파이팅! 내일은 백엔드 공부해야징