div position 쉽게 설명한 블로그나 사이트 추천 좀 해주세요. 정보
div position 쉽게 설명한 블로그나 사이트 추천 좀 해주세요.
본문
질문게시판에 질문을 올려도 조금 어려운 질문인지
답변을 구하기가 어렵네요.
<div id=...> 아래 <div id=...>를 삽입했는데,
부모 엘리먼트에 높이값을 주지 않으면, 자식 엘리먼트 높이값만큼 포함하지를 못하니......ㅠㅠ
컨텐츠 하나를 div로 만드는 중인데,
position에 대해 쉽게 설명한 블로그나 사이트 있으면 추천 부탁드립니다.
포지셔닝은 아무리 들여다봐도 모르겠어요.ㅠㅠ
초보나 입문에 딱 걸맞는 곳으로 추천 부탁드립니다.
추천
0
0
댓글 13개
position:absolute <- 영향 안받음
position:relative <- 영향 받음
이렇게 이해 하셔야 할듯 ..
즉
<div id="sample1" style="position:absolute;">
<div id="sample2" style="position:relative;">
</div>
</div>
이렇게 했을때 sample1 이라는 속성에 의존에 값이 매겨진다 ..
<div id="sample1" style="position:absolute;">
<div id="sample2" style="position:absolute;">
</div>
</div>
이렇게 했을때에는 바디값에 영향을 받죠 .. 즉 어디에 상속을 받는지를 이해를 못하시면
아무리 설명을 해도 이해가 안됩니다.
즉 만약에 테이블에 했을경우
<table>
<tr><td>
<div id="sample2" style="position:relative;">
</div>
</td></tr>
</table>
이렇게 되면 테이블에 영향을 받아서 저 위치에 나타나게 되지만
<table>
<tr><td>
<div id="sample1" style="position:absolute;">
</div>
</td></tr>
</table>
이렇게 한다면 이위의 테이블에 영향을 안받고 이 div 위의 relative 영향을 받습니다.
설명이 쉽나 모르겠네요 ^^;;
사실상은 실제 적용을 해가면서 해보셔야 이해가 가겠죠 ..
position:relative <- 영향 받음
이렇게 이해 하셔야 할듯 ..
즉
<div id="sample1" style="position:absolute;">
<div id="sample2" style="position:relative;">
</div>
</div>
이렇게 했을때 sample1 이라는 속성에 의존에 값이 매겨진다 ..
<div id="sample1" style="position:absolute;">
<div id="sample2" style="position:absolute;">
</div>
</div>
이렇게 했을때에는 바디값에 영향을 받죠 .. 즉 어디에 상속을 받는지를 이해를 못하시면
아무리 설명을 해도 이해가 안됩니다.
즉 만약에 테이블에 했을경우
<table>
<tr><td>
<div id="sample2" style="position:relative;">
</div>
</td></tr>
</table>
이렇게 되면 테이블에 영향을 받아서 저 위치에 나타나게 되지만
<table>
<tr><td>
<div id="sample1" style="position:absolute;">
</div>
</td></tr>
</table>
이렇게 한다면 이위의 테이블에 영향을 안받고 이 div 위의 relative 영향을 받습니다.
설명이 쉽나 모르겠네요 ^^;;
사실상은 실제 적용을 해가면서 해보셔야 이해가 가겠죠 ..
너무나 상세하게 풀이해 주셔서 감사드립니다.
건방질지 모르겠지만, 말씀해 주신 내용은 대략 감은 잡고 있습니다.
제 머리를 쥐나게 하는 현재의 작업은,
div로 몇 개의 레이어들을 겹쳐서 구현해야 할 상황이라서요.
바탕에 부모엘리먼트 깔고, 그 위에 자식엘리먼트 깔고.... 그 위에 또 손자 엘리먼트 깔고 있는......
이런 작업을 하는 중이랍니다.^^
그래서 바탕에 깔린 부모엘리먼트가 자식엘리먼트 높이값을 인식하고,
자식엘리먼트를 자동으로 감싸안아야 하는데,
그게 뜻대로 되질 않아서요.
사실 질문드리기도 죄송한 내용이지요.
인터넷으로 이런저런 블로그 뒤져보지만, 딱히 제 상황에 알맞은 설명이 없네요.........
건방질지 모르겠지만, 말씀해 주신 내용은 대략 감은 잡고 있습니다.
제 머리를 쥐나게 하는 현재의 작업은,
div로 몇 개의 레이어들을 겹쳐서 구현해야 할 상황이라서요.
바탕에 부모엘리먼트 깔고, 그 위에 자식엘리먼트 깔고.... 그 위에 또 손자 엘리먼트 깔고 있는......
이런 작업을 하는 중이랍니다.^^
그래서 바탕에 깔린 부모엘리먼트가 자식엘리먼트 높이값을 인식하고,
자식엘리먼트를 자동으로 감싸안아야 하는데,
그게 뜻대로 되질 않아서요.
사실 질문드리기도 죄송한 내용이지요.
인터넷으로 이런저런 블로그 뒤져보지만, 딱히 제 상황에 알맞은 설명이 없네요.........
<div class="해당클래스속성"><-부모div
<div style="position:absolute;">자식</div>
<div style="position:absolute;">손자</div>
<div>
이렇게 하면 되지 않나요 ?? ^^;;
어자피 세개의 속성이 중복이 되서 보이기 때문에 top 값이나 left 값으로
조절을 해야 겠죠 ^^;;
<div style="position:absolute;">자식</div>
<div style="position:absolute;">손자</div>
<div>
이렇게 하면 되지 않나요 ?? ^^;;
어자피 세개의 속성이 중복이 되서 보이기 때문에 top 값이나 left 값으로
조절을 해야 겠죠 ^^;;
진행중인 작업이 말씀하신 대로 하고 있는 거거든요.^^
그런데 어디서 벌레가 끼었는지 어젯밤부터 고생입니다.
관심 가져주셔서 감사드려요~^^
그런데 어디서 벌레가 끼었는지 어젯밤부터 고생입니다.
관심 가져주셔서 감사드려요~^^
해결했습니다. ㅠㅠ
그런데, 뭐가뭔지 아직도 모르겠어요.
정리 좀 해 봐야겠어요.
그런데, 뭐가뭔지 아직도 모르겠어요.
정리 좀 해 봐야겠어요.
#부모div {*zoom:1;} /* IE5.5~7 브라우저 대응 Hack */
#부모div:after {content:" "; display:block; clear:both;} /* 표준계열 브라우저에 대응하는 float 해제용 가상 엘리먼트의 생성 */
질답게시판에도 남겼는데 링크주소도 남길게요.
http://naradesign.net/wp/2008/05/27/144/
#부모div:after {content:" "; display:block; clear:both;} /* 표준계열 브라우저에 대응하는 float 해제용 가상 엘리먼트의 생성 */
질답게시판에도 남겼는데 링크주소도 남길게요.
http://naradesign.net/wp/2008/05/27/144/
헉... 한번 적용해 보겠습니다.
감사합니다~
감사합니다~
안되네요.........ㅠㅠ
계속 연구 좀 해야겠습니다.^^
계속 연구 좀 해야겠습니다.^^
계속 안되시면 소스 남겨주세요.^^
휴.... 해결했습니다.
도움말씀까지 주셨는데, 워낙에 제가 초보 수준이라서 초보 css로 대충 끼워맞췄네요.
소프트님께 다시한번 감사드려요~^^
도움말씀까지 주셨는데, 워낙에 제가 초보 수준이라서 초보 css로 대충 끼워맞췄네요.
소프트님께 다시한번 감사드려요~^^
http://www.websp.co.kr ^^ ㅋㅋㅋ
넵~ 참고하겠습니다. 감사합니다.
<div id="sample1" style="position:absolute;">
<div id="sample2" style="position:relative;">
</div>
<div style="clear:both;"></div>
</div>
<div id="sample2" style="position:relative;">
</div>
<div style="clear:both;"></div>
</div>