Q&A : 오디세이 스킨 배너 슬로건 순서

저번에 [티스토리/· 스킨편집] - 티스토리 오디세이 스킨 - 슬로건, 배너 위치 바꾸는 방법 글을 썼는데요.

이에 질문을 주셔 글로 남겨봐요.

 

▲ PC 화면에는 순서가 배너 - 슬로건입니다.

 

▲ 근데 화면 크기를 줄이면... 즉, 폰으로 보면 슬로건 - 배너 순서로 바뀌는군요. 저도 처음 알았어요. 다른 블로그에 오디세이를 쓰고는 있지만 배너랑 슬로건을 사용하지 않아서 말입니다.

 

▲ CSS 편집에서 다음 태그를 찾습니다. 저는 CSS 편집을 자주 해서 원래는 307번 줄이 아닐 수 있으니 근처에서 저 부분을 찾아주세요.

 

@media screen and (min-width: 1061px) {

[중간 생략]

.wrap-drawer .header .area-align {
    display: flex;
    flex-wrap: wrap; 
    flex-direction: column-reverse; ▶ flex-direction: column로 바꿔주고 저장합니다.
}

 

태그를 설명하면...

화면 크기가 1061px 미만일 때

flex는 반응형 페이지를 만드는데 아주 편리한 태그입니다.

flex-direction은 아이템의 정렬 방향을 지정하는데요. column-reverse는 영어 그대로 세로 방향을 거꾸로 한다입니다. 그러니 column으로 쓰면 순서가 바뀌지 않습니다.

 

답변 완료! 질문자님 덕에 글 하나 씁니다. 호호~

flex에 관한 글은 예약글로 되어 있은데 아마 10월 중순에나 발행이 시작 될 것 같습니다.