이 블로그의 사이드바를 본래 오른쪽에 배치했지만 어제 하루 동안 왼쪽으로 이동시켜보았습니다.
사이드바가 왼쪽에 있으니까 매우 어색하게 느껴지네요.
SEO(검색엔진최적화) 측면에서는 사이드바가 오른쪽에 있는 것이 유리한 것으로 알려져 있습니다.
Flexible Box 레이아웃 모델의 하위 속성인 flex-direction 속성을 이용하면 수월하게 사이드바 위치를 바꿀 수 있습니다.
- flex-direction 속성에는 4가지 값을 사용할 수 있습니다.
- row (기본값): 텍스트 방향과 동일
- row-reverse: 텍스트 방향과 반대
- column: row와 동일하지만 상->하 방향
- column-reverse: row-reverse와 동일, 상->하 방향
Syntax:
flex-direction: row | row-reverse | column | column-reverse
.flex-container {
flex-direction: row;
}
HTML 코드에서 본문과 사이드바가 다음과 같은 구조로 되어 있다고 가정하면...
<div id="container">
<div id="main_content">...</div>
<div id="sidebar">...</div>
</div>
flex-direction:row-reverse;를 추가하면 사이드바->본문 방향으로 콘텐츠가 배열됩니다.
#container {
display: flex;
flex-direction: row-reverse;
}
자세한 내용은 다음 문서를 참고해보시기 바랍니다.