이것좀 가르쳐 주시면 안될까요... ^^;;

she · Post by **she** » 2005 05 10 23:19 54

약 반년 동안 궁금했던 건데...
아무리 따라해도 안되더군요. ㅡ.ㅡ;;;

http://www.alistapart.com
여기처럼..
좌측 컨텐츠나 우측 메뉴 길이에 상관없이 가운데 border가 유동적으로 틀에 맞게 그어지려면 어떻게 해야 하나요?

좌측 메뉴를 둘때 float을 쓰기도 해보고 margin을 쓰기도 해보고 여러가지를 시도해보았으나... 좌우 상관없이 위에서 아래까지 border가 그어지진 않던데요..
정말 궁금해요. 알려주시면 감사할텐데요;;

아.. 그리고 margin을 두지 않아도 불여우에서 보면 문서 밑에 margin이 생기던데 http://www.likejazz.com 재즈님 블로그처럼 밑이 바닥에 붙게 하려면 어떻게 해야하죠? ^^;;

박민권 · Post by **박민권** » 2005 05 11 00:09 00

she wrote:약 반년 동안 궁금했던 건데...
아무리 따라해도 안되더군요. ㅡ.ㅡ;;;

http://www.alistapart.com
여기처럼..
좌측 컨텐츠나 우측 메뉴 길이에 상관없이 가운데 border가 유동적으로 틀에 맞게 그어지려면 어떻게 해야 하나요?

좌측 메뉴를 둘때 float을 쓰기도 해보고 margin을 쓰기도 해보고 여러가지를 시도해보았으나... 좌우 상관없이 위에서 아래까지 border가 그어지진 않던데요..
정말 궁금해요. 알려주시면 감사할텐데요;;

아.. 그리고 margin을 두지 않아도 불여우에서 보면 문서 밑에 margin이 생기던데 http://www.likejazz.com 재즈님 블로그처럼 밑이 바닥에 붙게 하려면 어떻게 해야하죠? ^^;;

Code: Select all

<div style="가운데 백그라운드 라인">
    <div>좌측</div>
    <div>우측</div>
</div>

위의 코드처럼 좌측 혹은 우측의 레이어가 늘어나면 둘러싸고 있는 레이어가 늘어나면서
가운데 백그라운드 라인이 같이 늘어나게 됩니다.
만약 좌우 배치를 위해서 위의 두 div를 float:left 하신다면

Code: Select all

<div style="가운데 백그라운드 라인">
    <div style="float:left">좌측</div>
    <div style="float:left">우측</div>
    <div style-"clear: left"></div>
</div>

<div style-"clear: left"></div>를 사용하여 float 영향을 없애야 테두리의
레이어가 아래 <div style-"clear: left"></div>를 감싸기 위해 늘어나게 됩니다.
<div style-"clear: left"></div>가 없이 float 속성을 상용하신다면 테두리의
div가 float속성을 가진 레이어를 크기만큼 감싸지 못합니다.

이외도 방법은 몇가지가 있습니다.

float를 사용하지 않는 방법이 있습니다.
좌측의 레이어만 기준으로 잡는다면 좌측 레이어의 최소 높이를 잡아주는 방법으로도
가능합니다. css의 min-height를 쓰시면 됩니다.
하지만 익스에 대한 처리도 필요합니다.
min-height에 대한 자세한 사용법은 아래의 링크를 참조하시기 바랍니다.

viewtopic.php?t=3483&highlight=

두번째 질문은 <body style="margin:0;">을 써보세요. 이 문제가 맞는지는 잘 모르겠습니다.

she · Post by **she** » 2005 05 11 01:10 10

또 도움 주셨군요. 감사해요. !!!^^

Code: Select all

<div style="가운데 백그라운드 라인">

이건 백그라운드 라인을 그림으로 삽입하라는 뜻인지요? 텍스트로 처리하려면 구체적으로 어떻게 써야 하지요?^^

Code: Select all

<body style="margin:0;">

이건 이미 써봤는데 안되네요? ^^:;;

아무튼 감사드립니다. ㅜ_ㅜ!!

Post by **hyeonseok** » 2005 05 11 09:58 14

두 부분의 역영을 나누는 선을 말씀 하시는 것이지요?

선이 좌측이나 우측에 상관없이 하단까지 내려와야 되기 때문에 좌측이나 우측에서 처리를 해줄 수는 없습니다.
그래서 그 상위에서 background-image 로 처리를 해 줘야 되고요. border 등으로는 해결이 안됩니다.
상위 블록에서 좌, 우에 선을 넣는 것은 가능한데 가운데에 선을 그어주는 css 속성은 없거든요.

바닥이 딱 안붙는 것은 먼저
body 의 margin 기본값을 0 으로 해주시고요
그래도 안붙으면 하단 박스에 margin 이 없는지 확인해 보세요.
p 같은 것은 기본적으로 margin 이 있기 때문에 margin-bottom 을 0 으로 해 주어야 바닥에 딱 붙습니다.

박민권 · Post by **박민권** » 2005 05 11 11:30 40

she wrote:
Code: Select all
<div style="가운데 백그라운드 라인"> 
이건 백그라운드 라인을 그림으로 삽입하라는 뜻인지요? 텍스트로 처리하려면 구체적으로 어떻게 써야 하지요?^^

네, 그림으로 삽입하라는 뜻입니다.
세로 1px의 가로로 길다란 배경이미지를 만드셔서

style="background: url(이미지경로) repeat-y"

이렇게 하시면 배경 이미지가 세로로 반복되어 죽 내려갑니다.

she입니다. · Post by **she입니다.** » 2005 05 11 12:11 38

감사합니다. ^^ 밑에 붙는 건 도대체 안되는군요. ㅜ_ㅜ;;;

Code: Select all

<div style="가운데 백그라운드 라인">
    <div style="float:left">좌측</div>
    <div style="float:left">우측</div>
    <div style-"clear: left"></div>
</div>

여기에선

Code: Select all

<div style-"clear: left">&nbsp;</div>

라고 공간을 넣어줘야 불여우에서도 가운데 줄이 생기더군요. 이것때문에 장시간 헤맸네요^^:;;
감사합니다. 덕분에.. ^^

왜 밑에 붙는게 안되는지 알 수 없어요.
전체 레이아웃에도 마진없고. body에도 마진없고 bottom의 p에도 마진없고 bottom자체에도 마진이 없는데 ㅜ_ㅜ ...

소프트원트 · Post by **소프트원트** » 2005 05 11 13:33 16

body에 margin값을 0으로 처리해보세요.

Code: Select all

body {
margin:opx;
}

<body topmargin=0px leftmargin=0px>

브라우저에 따라 margin/padding값 처리가 다른 경우가 있습니다. 오페라브라우저의 경우 margin-top이 적용되지않기 때문에 body에 대한 스타일시트 이외에도 topmargin=0 형식으로 처리를 해주어야 합니다.

Post by **hyeonseok** » 2005 05 11 14:23 23

소프트원트 wrote: <body topmargin=0px leftmargin=0px>

비표준 코드 입니다.

Code: Select all

body {
margin: 0;
padding: 0;
}

과 같이 하시면 opera 에서도 영역을 없앨 수 있습니다.

소프트원트 · Post by **소프트원트** » 2005 05 11 14:47 44

Code: Select all

<body topmargin=0px leftmargin=0px>

현석님이 말한대로 body에 넣은 margin값은 비표준입니다.
저의 경우 CSS에서 body에 margin만 이용하다보니 padding값을 생각지 않았습니다. 현석님 덕분에 알았내요. 불필요한 타이핑을 줄였습니다. 감사합니다. ^^

오페라를 포함하여 IE/파이어폭스에 상하좌우여백을 없애려면 margin과 padding 모두를 사용해야 적용됩니다.

오페라에서 padding만 주면 오페라에서는 여백이 생기지 않지만, IE나 파이어폭스에서 여백이 생기게 됩니다. 그러니 둘다 필요하겠죠.

she입니다. · Post by **she입니다.** » 2005 05 11 15:32 53

아... 제가 태터툴즈를 쓰는데 치환자 때문이었습니다. -_-;;; 치환자때문에 그렇게 되는 거였네요. ㅜ_ㅜ; 이휴휴. 불여우만의 버그인가 했어요;
그래도 공부 많이 되었습니다. 답변 주신 분들 너무 감사드립니다. ^-^

박민권 · Post by **박민권** » 2005 05 11 22:52 27

축하드려요.

Mozilla 한국 커뮤니티

이것좀 가르쳐 주시면 안될까요... ^^;;

이것좀 가르쳐 주시면 안될까요... ^^;;

Re: 이것좀 가르쳐 주시면 안될까요... ^

감사합니다.

Re: 감사합니다.

이흉흉

해결하셔서 다행이네요.

Who is online