수다닷컴

!doctype htmlhead titleChapter 7/title meta name=viewport content=width=device-width, initial-scale=1.0 / style body {min-width:760px;} /style !-- 초기화 -- style * {padding:0; margin:0;} body {font-family:Helvetica, sans-serif;} li {list-style:none;} a {text-decoration:none} /style !-- 헤더 -- style #main_header {height:60px; line-height:60px; padding-left:10px; border-bottom:1px solid #000; background:#1d4088; color:#fff;} /style !-- 내비게이션 -- style #main_gnb {overflow:hidden; border-bottom:1px solid #000; background:#32394a;} #main_gnb ul.left {overflow:hidden; float:left;} #main_gnb ul.right {overflow:hidden; float:right;} #main_gnb ul.left li {float:left;} #main_gnb ul.right li {float:left;} #main_gnb a {display:block; padding:10px 20px; border-left:1px solid #5f6673; border-right:1px solid #242a37; color:#fff; font-weight:bold;} /style !-- 콘텐츠 -- style #wrap {overflow:hidden;} #wrap #main_lnb {float:left; width:200px;} #wrap #content_wrap {float:left; width:100%; margin-right:-200px;} #wrap #content_wrap #content {padding-right:200px;} /style !-- 수직 목록 -- style /style !-- 푸터 -- style /style/head
body header id=main_header h1Fluid/h1 /header nav id=main_gnb ul class=left lia href=#Button/a/li lia href=#Button/a/li lia href=#Button/a/li lia href=#Button/a/li lia href=#Button/a/li lia href=#Button/a/li /ul ul class=right lia href=#Button/a/li lia href=#Button/a/li /ul /nav div id=wrap nav id=main_lnb ul lia href=#Button/a/li lia href=#Button/a/li lia href=#Button/a/li lia href=#Button/a/li lia href=#Button/a/li /ul /nav div id=content_wrap div id=content article h1Lorem ipsum dolor sit amet/h1 pLorem ipsum dolor sit amet, consectetur adipiscing elit. Cras rhoncus hendrerit mi, at pretium purus convallis non. Integer semper magna ac mauris hendrerit iaculis ac faucibus turpis. Praesent pharetra sem et nibh auctor auctor adipiscing augue rutrum. Ut sapien quam, bibendum eget malesuada non, porta sed ligula. Donec interdum suscipit mattis. Praesent dictum odio non nisi pharetra pellentesque. Phasellus nec quam sit amet nunc ullamcorper pulvinar nec quis tellus. Pellentesque consectetur tellus ac augue tincidunt luctus. Aenean consectetur, justo vel vestibulum cursus, risus arcu ornare dolor, nec elementum diam erat ac tortor. Morbi eleifend, erat sit amet posuere pretium, purus dui ullamcorper urna, eu rutrum mi augue tristique odio. Proin commodo mi non nibh interdum ultricies. Donec vitae leo quis ante vestibulum accumsan ut sed nulla. Maecenas ligula orci, fringilla ac elementum eget, congue quis dolor. Cras sagittis rhoncus faucibus./p pLorem ipsum dolor sit amet, consectetur adipiscing elit. Cras rhoncus hendrerit mi, at pretium purus convallis non. Integer semper magna ac mauris hendrerit iaculis ac faucibus turpis. Praesent pharetra sem et nibh auctor auctor adipiscing augue rutrum. Ut sapien quam, bibendum eget malesuada non, porta sed ligula. Donec interdum suscipit mattis. Praesent dictum odio non nisi pharetra pellentesque. Phasellus nec quam sit amet nunc ullamcorper pulvinar nec quis tellus. Pellentesque consectetur tellus ac augue tincidunt luctus. Aenean consectetur, justo vel vestibulum cursus, risus arcu ornare dolor, nec elementum diam erat ac tortor. Morbi eleifend, erat sit amet posuere pretium, purus dui ullamcorper urna, eu rutrum mi augue tristique odio. Proin commodo mi non nibh interdum ultricies. Donec vitae leo quis ante vestibulum accumsan ut sed nulla. Maecenas ligula orci, fringilla ac elementum eget, congue quis dolor. Cras sagittis rhoncus faucibus./p iv /article article h1Lorem ipsum dolor sit amet/h1 pLorem ipsum dolor sit amet, consectetur adipiscing elit. Cras rhoncus hendrerit mi, at pretium purus convallis non. Integer semper magna ac mauris hendrerit iaculis ac faucibus turpis. Praesent pharetra sem et nibh auctor auctor adipiscing augue rutrum. Ut sapien quam, bibendum eget malesuada non, porta sed ligula. Donec interdum suscipit mattis. Praesent dictum odio non nisi pharetra pellentesque. Phasellus nec quam sit amet nunc ullamcorper pulvinar nec quis tellus. Pellentesque consectetur tellus ac augue tincidunt luctus. Aenean consectetur, justo vel vestibulum cursus, risus arcu ornare dolor, nec elementum diam erat ac tortor. Morbi eleifend, erat sit amet posuere pretium, purus dui ullamcorper urna, eu rutrum mi augue tristique odio. Proin commodo mi non nibh interdum ultricies. Donec vitae leo quis ante vestibulum accumsan ut sed nulla. Maecenas ligula orci, fringilla ac elementum eget, congue quis dolor. Cras sagittis rhoncus faucibus./p pLorem ipsum dolor sit amet, consectetur adipiscing elit. Cras rhoncus hendrerit mi, at pretium purus convallis non. Integer semper magna ac mauris hendrerit iaculis ac faucibus turpis. Praesent pharetra sem et nibh auctor auctor adipiscing augue rutrum. Ut sapien quam, bibendum eget malesuada non, porta sed ligula. Donec interdum suscipit mattis. Praesent dictum odio non nisi pharetra pellentesque. Phasellus nec quam sit amet nunc ullamcorper pulvinar nec quis tellus. Pellentesque consectetur tellus ac augue tincidunt luctus. Aenean consectetur, justo vel vestibulum cursus, risus arcu ornare dolor, nec elementum diam erat ac tortor. Morbi eleifend, erat sit amet posuere pretium, purus dui ullamcorper urna, eu rutrum mi augue tristique odio. Proin commodo mi non nibh interdum ultricies. Donec vitae leo quis ante vestibulum accumsan ut sed nulla. Maecenas ligula orci, fringilla ac elementum eget, congue quis dolor. Cras sagittis rhoncus faucibus./p /article article h1Lorem ipsum dolor sit amet/h1 pLorem ipsum dolor sit amet, consectetur adipiscing elit. Cras rhoncus hendrerit mi, at pretium purus convallis non. Integer semper magna ac mauris hendrerit iaculis ac faucibus turpis. Praesent pharetra sem et nibh auctor auctor adipiscing augue rutrum. Ut sapien quam, bibendum eget malesuada non, porta sed ligula. Donec interdum suscipit mattis. Praesent dictum odio non nisi pharetra pellentesque. Phasellus nec quam sit amet nunc ullamcorper pulvinar nec quis tellus. Pellentesque consectetur tellus ac augue tincidunt luctus. Aenean consectetur, justo vel vestibulum cursus, risus arcu ornare dolor, nec elementum diam erat ac tortor. Morbi eleifend, erat sit amet posuere pretium, purus dui ullamcorper urna, eu rutrum mi augue tristique odio. Proin commodo mi non nibh interdum ultricies. Donec vitae leo quis ante vestibulum accumsan ut sed nulla. Maecenas ligula orci, fringilla ac elementum eget, congue quis dolor. Cras sagittis rhoncus faucibus./p pLorem ipsum dolor sit amet, consectetur adipiscing elit. Cras rhoncus hendrerit mi, at pretium purus convallis non. Integer semper magna ac mauris hendrerit iaculis ac faucibus turpis. Praesent pharetra sem et nibh auctor auctor adipiscing augue rutrum. Ut sapien quam, bibendum eget malesuada non, porta sed ligula. Donec interdum suscipit mattis. Praesent dictum odio non nisi pharetra pellentesque. Phasellus nec quam sit amet nunc ullamcorper pulvinar nec quis tellus. Pellentesque consectetur tellus ac augue tincidunt luctus. Aenean consectetur, justo vel vestibulum cursus, risus arcu ornare dolor, nec elementum diam erat ac tortor. Morbi eleifend, erat sit amet posuere pretium, purus dui ullamcorper urna, eu rutrum mi augue tristique odio. Proin commodo mi non nibh interdum ultricies. Donec vitae leo quis ante vestibulum accumsan ut sed nulla. Maecenas ligula orci, fringilla ac elementum eget, congue quis dolor. Cras sagittis rhoncus faucibus./p /article /div /div /div/body/html
지금 a가 200px 에 b가 100% 잖아요 ..그래서 b가 밑으로 내려가는것을 방지하려고 margin: -200px 을 하는것은 알겠는데 ..margin 음수값 지정으로 어떻게 위로 올라갈수 있는지 원리가 이해가 안돼서요 ㅜ밑에 padding-right: 200px; 은 짤린 컨텐츠를 보이게 하려고 하는것도 이해가 되요 !!근데 margin-right을 모르겠어요 ㅜㅜ ㅜㅜ margin-right: -200px;을 함으로써 b가다음으로 안넘어가고 그대로 있을수 있는지 원리를 좀 설명해 주실분 없을까요???

신청하기