자기소개 페이지 반응형으로 개선하기

지난번 자기소개 페이지를 만들고 창을 축소하면 이미지가 몰려 이상해지는 현상이 있었는데

오늘은 그 문제를 반응형으로 해결한 것을 적는 글이다.

 

기존 자기소개 페이지

기존 문제점

먼저, 글자의 경우 <p>태그를 사용하여 작성하였는데 브라우저에 영역을 할당하는 것이 아니라 창을 축소하게 되면 글자도 같이 밀려버리는 현상이 발생하였다. 

두번째로 영역을 좌, 우로 분할하고, 영역너비를 창 크기에 따라 유동적으로 변하게 코드를 작성하였는데 이러한 이유로 사진이 밀리는 현상이 발생하였다.

개선 방안

첫번째의 경우  <div> 태그를 이용하여 글자도 영역설정을 하여 창 축소시에도 형태를 유지할 수 있도록 수정하였다.

두번째 문제는 전체 구역 배치를 다시하고, css코드를 이용하여 창 축소시 형태가 바뀌도록 미디어쿼리를 사용하여 구현하였다.

Flex 속성을 이용해 수정한 자기소개 페이지

코드

    <section class="favor">

        <!-- 화면 내용 -->
        <div class="box">
            <img class="favor_img" src="img/favor1.jpg" alt="" align="middle" style="float:left">
            <div class="message">국내의 유명한 장소 또는 잘 알려지지 않은</br>
                명소에 여행가는 것을 좋아합니다</div>
        </div>

        <div class="box">
            <img class="favor_img" src="img/favor2.jpg" alt="" align="middle" style="float:left">
            <div class="message">어릴 때 배웠던 피아노에도 관심이 많아요!</br>
                한 곡 정도는 완벽하게 칠 수 있는게 목표입니다</div>
        </div>

        <div class="box">
            <img class="favor_img" src="img/favor4.jpg" alt="" align="middle" style="float:left">
            <div class="message">뭐니뭐니해도 맛있는 음식을 먹는 것 만큼 </br>
                행복한 일은 없겠죠?! </br>
                맛집 탐방도 좋아합니다 :)
            </div>
        </div>
    </section>

------------------------------------------------------------------------------------------------

html, body {
    margin: 0px;
    height: 100%;
    font-family: 'Source Sans Pro', sans-serif;
}

a {
    padding-left: 10px;
    text-decoration: none;
    color: white;
}

i {
    padding-left: 12px;
    text-align: center;
}

html, body {
    margin: 0px;
    height: 100vh;
    font-family: 'Source Sans Pro', sans-serif;
}

a {
    text-decoration: none;
    color: white;
}

i {
    padding-left: 12px;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color:#374f66;
    padding: 8px 12px;
    height: 125px;
}

.navbar_menu {
    display: flex;
    list-style: none;
    padding-left: 0;
    font-size: 26px;
    margin-left: auto;
    margin-right: auto;;
} 

.navbar a {
    display: flex;
    font-size: 22px;
    color: #fff;
    text-decoration: none;
    position: relative;
    padding: 8px 12px;

}

.navbar_menu a::after  {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 4px;
    background-color: #fff;
    transition: all .5s ease-out;
}

.navbar a:hover::after {
    width: 100%;
}

.navbar_menu li {
    padding: 16px 24px;
}

.navbar_link {
    list-style: none;
    color: white;
    display: flex;
}

.navbar_link li {
    padding: 8px 12px;
}

.favor {
    background-color: slategrey;
    width: auto;
    height: 100%;
}

.favor {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: slategrey;
    height: auto;
    width: auto;
    min-height: calc(100vh - 141px);
    padding-bottom: 0;
    margin: 0;
}

.favor box {
    width: auto;
    padding-top: 150px;
}


.favor div {
    text-align: center;
    height: auto;
    color: #fff;
    font-size: 22px;
}

.favor ul {
    margin: 0;
    padding-left: 0;
}

.favor a {
    float: left;
}



.favor_img {
    padding: 55px 90px 30px 90px;
    vertical-align: middle;
    flex-direction: column;
    border-radius: 50%;
    width: 350px;
    height: 350px;

} 




footer {
    display: flex;
    align-items: center;
    background-color: slategray;
    text-align: center;
    justify-content: space-between;
    padding: 0;
    height: 40px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    transform: translateY(-100%);
}

.footer a:hover {
    color: #BCAC77;
}

.footer ul {
    padding-left: 0;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
}

.footer li {
    list-style: none;
    float: left;
}

@media screen and (max-width:1450px) {
    .favor {
        flex-direction: column;
    }
}

참고자료

CSS 플렉스박스(flex)로 반응형 레이아웃 만들기

Git Hub

GitHub - JeongJaeHa/jaeha2324.github.io