float과 display:inline 차이 여쭤봅니다ㅠ ㅠ
다슬
css부분에서 빨간색으로 표시된 부분에 대해 여쭤보고 싶습니다.
display:inline을 쓰면 p태그 부분은 ul라인 아랫줄에 오고,
float:left로 바꾸면 p태그 부분까지 일렬로 옆으로 붙더라구요ㅠ ㅠ
float은 좌우측으로 정렬하는 것이고, display:inline은 딱 그 영역만큼에 한해서 적용되는걸로 알고있는데
ul li 안에서 float을 썼는데도왜 별개인 p태그 부분까지 옆으로 붙는건가요?
개념이 명확하지 않은 것 같아요.. 도움 부탁드립니다!
css부분
style type=text/css
#footer {padding:20px 0 30px; font-size:12px; font-family:나눔고딕, 맑은고딕, 돋움; color:#999; border-top:1px dashed #3cf; text-align:center;}
#footer ul li {display:inline; margin:0 10px 0 0; list-style:none; line-height:12px;}
#footer ul li a {text-decoration:none; color:#333;}
#footer ul li a:hover {text-decoration:line-through;}
#footer .info {font-size:11px; line-height:15px;}
/style
html부분
div id=footer
ul
li class=frsta href=#사이트 도움말/a/li
lia href=#사이트 이용약관/a/li
lia href=#사이트 운영원칙/a/li
lia href=#strong개인정보취급방침/strong/a/li
lia href=#책임의 한계와 법적고지/a/li
lia href=#게시중단요청서비스/a/li
lia href=#고객센터/a/li
/ul
p class=info
테스트 하는 중입니다. 비가 그치고 자전거를 타러 갑니다.
/p
address
a class=logo href=#
img alt=nhn src=http://static.naver.com/common/footer/logo_nhn.gif width=62 height=15 /
/a
emcopyright(c)/em
a href=#nhn corp./a
spanall right reserved./span
/address
/div
-
큰뫼
저는 float이 약간 비슷하게 생각하자면 position:absolute와 느낌은 비슷하다고 생각합니다.
그냥 제 생각으로는 absolute의 inline버전이라 생각하고 있구용..
float속성을 사용시엔 그 이후에 block속성태그 혹은 clear속성 객체가 없으면,
부모가 그 아이의 영역을 인식 못해서 부모의 사이즈가 그만큼 작아지는데요..
그 자식 객체의 영역을 인식시키기 위해 부모에게 overflow:hidden을 넣어주면 자동으로 영역인식 -
날애
아 그렇군요~! 궁금수다님답게 목적도 아시고 정보 고맙습니다, 공부할게 많네요ㅎㅎ
-
올해1살
요즘은 레이아웃 잡을 때 많이 사용하지만,
float 속성의 원래 목적은 글 위에 그림 삽입을 위해 만들어졌다고 합니다.
해서 float속성을 더 이상 원하지 않을땐 float 해제를 꼭 해주셔야 해요... -
냐하
댓글 고맙습니다! P태그에 clear:both 주니까 아랫 줄로 내려오긴하네요
float은 원래 어떤 태그 안에 쓰였어도 태그 닫힌 후 별개의 다음 부분에도 적용되나요? -
Hotpants
li에 float 해주셨으면 ul 에서 float를 해제 해주셔야 p태그가 아래로 내려오실거에요~
float해제는 4가지 방법이 있어요~ 상황에 맞는걸 찾아서 반영 하시면 될 것 같아요~