스킨의 정렬을 바꾸기 위해서는 구조를 살짝 들여다볼 필요가 있습니다.
제일 바깥쪽을 둘러싸고 있는 레이어의 클래스명을 찾아서 이 레이어의 정렬을 지정해 주면 블로그 전체의 정렬을 내 마음대로 할 수 있겠지요. ^^
예를 들어 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 : 위 오른쪽, 아래, 왼쪽;
에 대응됩니다. 이바닥에서 아는 사람은 다~~~ 아는 상식이겠지만..
물어보는 분이 종종 계셔서... 포스팅합니다.
사실 '웹표준'따위는 전혀 신경쓰지 않고 코딩하는 웹디자이너들도 모르는 상식이랄까요.- -;;
레이아웃을 테이블로 만들게 되면 전혀 필요없는 팁이지요.. ^^
Comments
저도 얼마전까지 웹표준을 몰랐을 때 가운데 정렬 바꾸려고
한참 헤매던 기억이 나네요ㅎㅎㅎ;
워낙에 근본이 없는 놈인지라
웹이네 웹 표준이네 하는것들은 이웃 섬나라 이야긴줄 알았습니다.
소스 펼쳐놓고 본다고 알리 만무했지만, 호미질 끝에
어딜 긁어주면 어디가 시원해 하더라는것 까지는 알아 냈었지요.
허나, 일자무식이라 어찌 손을 볼래야 볼수가 없었습니다 !!
이제 그만 포기하고 생긴데로 살려고 하던차에 이곳을 밝견했습니다.
머리가 맑아 지는군요. (득도를 한것 같습니다 ^^;; )
스킨에 대해서 문의 좀 드리겠습니다.
http://sshong.com
짧은 여행 스킨을 쓰고 있는데요. IE 에서는 멀정한데 파이어폭스에서는 두번째 사이드바가 한참 오른쪽으로 정렬이 됩니다.
혹 이부분을 해결 하는 방법 좀 소개 좀 부탁 드립니다.
스킨이 이뻐서 이번에 버꾸었습니다. 먼저 감사 합니다.
leezche님 안녕하세요?^^
관련 문의를 드릴데가 없어 여기에 댓글을 달았습니다.
티스토리에도 혹시 움직이는 top 버튼을 달 수 있는 방법이 없을까요?
행복한 연말 연시 되세요~
티스토리에도 사용할 수 있을것입니다.
제꺼 소스보기 하셔서 긁어서 쓰셔도 되용.. ^^
흐흐 제 스킨은 오른쪽정렬이다죠 -_-;;
..아무래도 좀 그렬려나.. ㅋㅋ
개성이죠뭐.. ^^
리체님 그런데 제가 최근에 만들고 있는 페이지가 있는데
그건 컨테이너에서 margin:0 auto; 지정하면
FF에서는 가운데 정렬이 되는데 IE에서는 그냥 왼쪽에 붙어있습니다. 도대체 왜 그런건지 모르겠어요-_ㅠ
혹시 시간나시면 한번 봐주세요.
http://skyfac.com/main.htm