티스토리 툴바


요즘 많은 사람들이 홈페이지를 만들거나 블로그를 만들어서 인터넷에 글을 올립니다. 그런데 그 중 신경쓸 것중 하나가 스킨인데.... 여기서도 레이아웃이 중요합니다. 그 중 보통 사람들이 힘들어 하는 홈페이지 중앙정렬에 대해서 알아아보죠.

 예전이라면 보통 더블 table이나 javascript를 이용해서 구현했는데... CSS만 조금 알면 복잡한 더블 table이나 어려운 javascript보다 훨씬 쉽게 중앙정렬을 시킬수 있습니다.

일단 아래의 코드를 보죠.

<HTML>
<HEAD>
<TITLE> 홈페이지 중앙정렬 </TITLE>
<style type="text/css">
#contain {
         width: 940px;
         margin: auto;
      
}

</style>
</HEAD>

<BODY>

<div id="contain">
중앙정렬 확인!

</BODY>
</HTML>


 최소한의 html 코드만을 가진 간단한 코드인데... 여기서 자세히 봐야될 것은 margin: auto이예요.이 한줄을 추가 함으로써 [contain]이라는 id를 가진 div가 단번에 홈페이지 중앙정렬이 됩니다... 간단하죠? ^^

이제 직접 해봅시다. 예는 티스토리로 듭니다.

[관리자] - [스킨] - [편집하기]로 들어옵니다. style.css에서 [#contain]을 검색하고 아래 그림과 같이 코드를 넣어준 뒤 저장하면 끝입니다. [#container] 에 코드를 삽입하는 이유는 container div에 실제로 화면에 표시되는 내용들이 모두 들어가 있기 때문입니다.

사용자 삽입 이미지


















[코드 적용 전]

사용자 삽입 이미지

























[코드 적용 후]

사용자 삽입 이미지


























 이제까지 간단하게 홈페이지 중앙정렬 하는 법을 알아보았습니다. 유용하게 사용하시고... 궁금한 점은 코맨트 남겨주세요 ^^



크리에이티브 커먼즈 라이선스
Creative Commons License

comment

  1. Favicon of http://leegh.com BlogIcon 지인우인 2007/08/20 07:35  address  modify  write

    좋은 정보입니다. ^_^

  2. Favicon of http://moryun.tistory.com BlogIcon 모륜 2007/09/12 17:14  address  modify  write

    좋은 정보 감사합니다~,,
    이올린에 북마크해갑니다~^^

  3. Favicon of http://moryun.tistory.com BlogIcon 모륜 2007/09/12 17:24  address  modify  write

    저기 그런데 div에 대해 질문 한가지만 할게요.. 지금 java와 jsp를 이용해서 홈페이지를 만들고 있어요,, 레이아웃을 네이버 메인과 비슷하게 꾸몄습니다. (위쪽에 메뉴, 왼쪽에 로그인 창, 오른쪽에 본문) 표로 구성했더니 본문 내용에 따라 로그인 창이 있는 표의 크기가 자꾸 변하더라구요. 값을 절대값으로 줬는데도 그렇습니다,,;; 그래서 혹시, div로 크기가 절대 변하지 않게 하는 방법이 있는지 여쭤보고 싶습니다,, 프레임을 생각해봤는데,, 로그인시 세션을 만들어 그 세션이 살아있는 동안에만 로그인이 유지되는 방법을 썼거든요.. jsp명령인 @include 를 쓰고 있기 때문에 한 페이지 내에서 전체적으로 코딩되서 문제가 없는데, 프레임을 쓰면 각각 로딩되기 때문에 과연 될지 의문입니다..(아직 안해본 1人;;;)
    긴 질문 죄송합니다..ㅠㅠ 제가 설명을 이상하게 해서,,ㅠㅠ; 이해가 안되는 부분이 있으시다면 그냥 div에 대해 간략하게라도 설명 부탁드려요..>_<;

    • Favicon of http://moss2.tistory.com BlogIcon Tip 2007/09/14 23:11  address  midify

      일반적으로 div에 절대값을 입력하면 크기가 변하지 않는데 어떤코드로 짜셨는지가 궁금하네요...

      div 를 id로 지정하셨는지 아니면 class로 지정하셨는지... 그리고 수치를 px로 지정하셨는지도요...

      간단히

      <div id="log_in"> <- html or jsp 문서상 이렇게 정의가 되어있다면....

      css에서는
      #log_in { width: 200px; heigh: 100px; }


      이런식으로 코딩이 되셨는가 하네요... 저도 jsp는 예전에 수업을 들어야 되어서 조금 해보았지만 전문적인 것은 잘 모르는 관계로 그쪽까지는 설명해 드리기가 힘드네요... 그리고 프레임을 사용하는 방법은 최대한 자제 하셨으면 하는것이 제 견해입니다 ^^