2007년 10월 30일
[css] 태그 각 요소 가운데 정렬먹이기.
1. 상단에 올바른 DTD를 정의한다.
2. <body> style에 text-align:center을 준다 (for FF)
3. 원하는 요소에 다음 스타일을 먹여준다.
ex) <div style="width:100px; margin:0 auto; text-align:center;">
간단한 설명, margin을 주는 몇가지 방법이 있다.
1) margin:0 5px 0 5px; /*top left bottom right */
이렇게 준다면 순서가 top left bottom right순으로 margin이 먹게 된다. 요걸 좀 더 간단하게 줄여보자.
2) margin:0 5px; /* top+bottom, left+right */
실제 값을 더했다는 의미는 아니고, 첫번째껀 top, bottom값이고, 두번째껀 left, right값이란 이야기.
3) margin:5px; /* top+left+bottom+right */
대충 알것도 같지 않은가? 모든 요소의 값이 5px로 통일된것이다.
설명을 한 이유는 3번에서 margin: 0 auto; 이 값을 설명하기 위해서이다. 이것은 top bottom margin은 0px이며 left right는 auto란 이야기이다.
덧무리 :: margin을 제외한 padding에서도 위의 기법을 활용할 수 있다.
덧무리1 :: 주의할 점은 0을 제외한 숫자에는 반드시 단위를 붙여줘야 한다. 브라우저마다 동작하는 방식이 다르기 때문에 본인이 원하는 화면을 구성하려면 반드시 단위를 붙여줘야지 제대로된 페이지를 확인할 수 있다.
ex) <div style="width:100px; margin: 5 2 4 6;">
위와 같은 코드는 비록 IE6에서는 px단위로 화면을 확인할 수 있지만, FF등에서는 원하는 화면을 확인할 수 없을 것이다. 삽질하지 않도록 주의하길 바란다.
2. <body> style에 text-align:center을 준다 (for FF)
3. 원하는 요소에 다음 스타일을 먹여준다.
ex) <div style="width:100px; margin:0 auto; text-align:center;">
간단한 설명, margin을 주는 몇가지 방법이 있다.
1) margin:0 5px 0 5px; /*top left bottom right */
이렇게 준다면 순서가 top left bottom right순으로 margin이 먹게 된다. 요걸 좀 더 간단하게 줄여보자.
2) margin:0 5px; /* top+bottom, left+right */
실제 값을 더했다는 의미는 아니고, 첫번째껀 top, bottom값이고, 두번째껀 left, right값이란 이야기.
3) margin:5px; /* top+left+bottom+right */
대충 알것도 같지 않은가? 모든 요소의 값이 5px로 통일된것이다.
설명을 한 이유는 3번에서 margin: 0 auto; 이 값을 설명하기 위해서이다. 이것은 top bottom margin은 0px이며 left right는 auto란 이야기이다.
덧무리 :: margin을 제외한 padding에서도 위의 기법을 활용할 수 있다.
덧무리1 :: 주의할 점은 0을 제외한 숫자에는 반드시 단위를 붙여줘야 한다. 브라우저마다 동작하는 방식이 다르기 때문에 본인이 원하는 화면을 구성하려면 반드시 단위를 붙여줘야지 제대로된 페이지를 확인할 수 있다.
ex) <div style="width:100px; margin: 5 2 4 6;">
위와 같은 코드는 비록 IE6에서는 px단위로 화면을 확인할 수 있지만, FF등에서는 원하는 화면을 확인할 수 없을 것이다. 삽질하지 않도록 주의하길 바란다.
이 글과 관련있는 글을 자동검색한 결과입니다 [?]
- 디자인 레이아웃 CSS by luckydana
- 훔...스킨.. by 스프
- 스킨 교체 실패 by 루미
- 내 스킨 수정에 대한 간략한.. by 緣。
- 본문과 덧글에 이미지 넣는 방법 by 오필리아
# by | 2007/10/30 09:26 | 셈틀 | 트랙백 | 덧글(3)
☞ 내 이글루에 이 글과 관련된 글 쓰기 (트랙백 보내기) [도움말]
말씀하신 부분은 아예 모든 것을 가운데로 몰아버리는 것 같습니다.
div 태그로 만든 레이어(라고 합시다)를 가운데로 정렬하기 위해서는
margin:0 auto;
이면 충분합니다.
text-align은 div 태그 안쪽의 element들을 가운데로 정렬하는 것이 됩니다.
덧붙여서 body에 text-align 값을 center로 하면 이 값은 하위 element로 상속되기 때문에 div 태그에 굳이 text-align을 쓰지 않아도 됩니다.
오히려 body에 text-align:center;를 붙였기에 가운데 정렬을 원하지 않는 모든 곳에 text-align값을 변경시켜야 합니다.
그리고 margin:0 auto;를 하고서 body에 text-align:center; 까지 붙여야 div 가 가운데로 정렬되는 것은 IE6은 CSS해석입니다. ^^
Joo8111 // 제가 실수로 메인까지 나가도록 포스팅을 하는 바람에, 이 창피함 ;ㅁ; 지적 감사합니다.. 실제 div자체만 가운데 정렬 하려면 margin값만 조정하면 되는데 text-align을 주면 그 안쪽까지 같이 가운데 정렬이 되는군요~ 감사합니다. 이제 아는게 근 28384개 정도 남았네요. 하하..