스킨의 정렬을 바꾸기 위해서는 구조를 살짝 들여다볼 필요가 있습니다.
제일 바깥쪽을 둘러싸고 있는 레이어의 클래스명을 찾아서 이 레이어의 정렬을 지정해 주면 블로그 전체의 정렬을 내 마음대로 할 수 있겠지요. ^^
예를 들어 tistory(태터툴즈 기본스킨)스킨의 skin.html 파일을 살펴보면...
<body>
<s_t3>
<div id="container">
.
.
.
<s_t3>
<div id="container">
.
.
.
코드가 이런식으로 시작하고 있습니다.
이제 제일 바깥쪽 레이어의 이름이 container 라는 것을 알아냈습니다.
container 레이어를 왼쪽으로 정렬시키기 위해서는... style.css 파일에서
#container {
이렇게 시작하는 부분을 찾습니다.이 레이어의 속성중에 레이어 바깥쪽의 여백값을 설정해 주는 부분이 있습니다.
margin:0 auto;
바로 이 부분이지요.. 이걸 해석해 보면... 블로그의 위와 아래 여백을 0으로 하고,
왼쪽과 오른쪽 여백을 적당히 배분해서 레이어를 가운데로 위치시킨다.... 모 이런뜻이 되겠습니다. ^^
왼쪽으로 정렬 시키려면
#container {
margin:0 20px;
}
margin:0 20px;
}
이런식으로 작성해 주면 됩니다.
왼쪽과 오른쪽 여백을 20px로 준 이유는 0으로 해버리면 너무 왼쪽으로 딱 붙어 버리기 때문입니다. 위와 아래에도 여백을 주고 싶다면
#container {
margin:10px 20px;
}
margin:10px 20px;
}
이렇게 하면 되구요..
위, 아래, 왼쪽, 오른쪽 모두 다른 값을 주고 싶다면.
#container {
margin:10px 0 20px 30px ;
}
margin:10px 0 20px 30px ;
}
각각의 값은
margin : 위 오른쪽, 아래, 왼쪽;
에 대응됩니다. 이바닥에서 아는 사람은 다~~~ 아는 상식이겠지만..
물어보는 분이 종종 계셔서... 포스팅합니다.
사실 '웹표준'따위는 전혀 신경쓰지 않고 코딩하는 웹디자이너들도 모르는 상식이랄까요.- -;;
레이아웃을 테이블로 만들게 되면 전혀 필요없는 팁이지요.. ^^
