hexo hueman 테마에서 반응형으로 header 레이아웃 변경하기

블로그 헤더부분에 로고 이미지와 간단한 제목을 작성하였다.

# 불편함 발생

웹페이지가 넓을 때는 현재 레이아웃이 마음에 들었지만 반응형으로 크기를 조절 하니 어디 한군데가 너무나 불편해 졌다.

심지어 모바일에서 블로그를 접속 해보면 확연하게 불편하다.

디자인 1도 모르지만 어느시점에서 로고이미지와 소개글이 가운데로 왔으면 좋겠다.

# 반응형으로 header 레이아웃 변경

이제 불편함을 지워보자. 💪🏼

theme/hueman/_partial/header.styl 로 들어가 css를 수정한다.

header.styl :

.logo-wrap
    width: 100%

.header-title-name
    width: 100%
    margin-bottom: 15px
    padding-left: 50px
    font-style: italic
    font-size: 20px

logo-wrap: logo를 감싸고 있는 클래스
header-title-name: 간단한 소개글 클래스

@media

@media 를 사용해서 웹페이지 폭에 따라 속성값들을 각각 변경해준다.
width < 960px : 로고이미지, 소개글 가운데 정렬
width >= 960px : 원래의 레이아웃 유지

header.styl :

@media screen and (max-width: 959px)
    #header-title
        padding: 0 0

    .logo-wrap
        width: 100%
        text-align: center

    .logo
        display: inline-block

    .header-title-name
        width: 100%
        margin-bottom: 15px
        text-align: center
        font-style: italic
        font-size: 20px

@media screen and (min-width: 960px)
    .logo-wrap
        width: 100%

    .header-title-name
        width: 100%
        margin-bottom: 15px
        padding-left: 50px
        font-style: italic
        font-size: 20px

위와 같이 max-width: 959px, min-width: 960px 속성값을 주고 각각에 맞는 속성값들을 넣어 주었다.

# 불편함 해결 👏🏼

불편함 삭제 !!

확인 ✔️

모바일도 확인 ✔️