날나리 강좌. ㅋ 레이아웃 짜기, float의 이해 정보
HTML 날나리 강좌. ㅋ 레이아웃 짜기, float의 이해본문
A군 옹알옹알, "<김군 gender="내시">저리가</김군>"
김군 왈, "모하는 거야? "
A군 왈, "벽사 태그 만들고 있어..."
김군 왈, "벽사라고? 사악한 모라도 퇴치시켜? ㅎㅎ 태그가 무슨 마법진이야? 근데 태그가 요상하다... -.- "
A군 왈, "악.. 벽사 태그가 작동하지 않아. 사악한 것이 계속 옆에서 떠들고 있어. 에잇.. 급하다 급해. <김군/닥쳐/, ... <김군<하리수/성별변경/"
김군 왈, "ㅡ.,ㅡ... 근데 모 그런 태그도 다있어? 문법에 맞어?"
A군 왈, "아직도 사악한 것이 말을 하고 있다. Null-End Tag 나가라.. <A군/나갈래/ "
김군 왈, "그만 장난하고... 레이아웃 열로 짜는 법좀 가르쳐줘... "
A군 왈, "넹.... ㅜ.ㅜ"
김군 왈, " 살펴보니까 float를 이용하는 것 같은데, 이거 만질 수록 이상한데. 예측이 안돼. 좀 가르쳐줘봐"
A군 왈, "너 테이블로 레이아웃 짜는 것 좋아하잖아. 정렬할때 align 써봤지? "
김군 왈, "응"
A군 왈, "그런데 float를 몰라? ㅎㅎ"
김군 왈, "어.... 난 써본적이 없는데... "
A군 왈, "CSS의 'float'는... <img>요소 속성에서 'align'의 값이 left나 right인 경우와 정확히 똑같은 것이야. 자~ 어떻게 작동되는지 연상해봐. 바로 요소에다 float 속성을 주면 align의 left나 right로 한 것이니... 자~ 궁금한 무언가 뻥~하고 깨달음이 온 것 같지? 어때 별것 아니지.."
김군 왈, "아하... 그렇구나. 왠지 float가 어떻게 될지 이제 알 것 같어. "
A군 왈, "그래 이제 다 알게 되었으니.... 나 갈래... "
김군 왈, "ㅡ.,ㅡ.. 그만하고 자세히 좀 썰을 풀어봐... "
A군 왈, "그러니까 float는 말이야. 초기 넷스케이프에서 aiign이 등장하여 CSS에서 float라는 속성으로 들어왔어. 이젠 <img>나 <table> 등의 요소뿐만 아니라 CSS만으로 다른 여러 요소까지 align대신 CSS의 float로 사용할 수 있게 되었다는 점이지.
주의할 것은 align에 left나 right 인 경우에만 해당하고, HTML 요소들의 align 속성은 속성명만 같을 뿐 요소마다 그 차이가 있어. 여기서는 img나 table에서의 align이 left나 right 값을 가진 경우에 해당해.
float 사용은 특징이 있어. 이것은 display 속성도 변경을 줘. display 속성은 block값으로 변경돼. 마찬가지로 HTML요소인 <img>나 <table>의 align 속성에 left나 right 값을 주면 그 결과도 동일하게 float 속성도 같이 변경이 돼.
정리하면 <img>에서 align 속성은 display 속성이 inline 값에서 block으로 변경되고, 해당 align 값은 css의 float 값이 돼. 단 예외적으로 <table>요소만의 display값은 변경없이 여전히 table로 남아 있고 말이지비.
만일 코딩을 하는 것을 (이렇게 분류할 수는 없지만) 형식만을 가시고 자바스크립트(controller) , CSS(view), HTML(model) 같이 나누게 된다면, 아무래도 중복적 틍징을 html문서에 align속성 사용 보다는 아무래도 css측면의 view가 오히려 가깝겠지.
뿐만 아니라 이러한 MVC 개념을 별론으로 하고, align 속성 대부분은 HTML4.01이 되면서 대부분 사용하지 말기를 바라는 Deprecated 속성이야. HTML4.01 이상에서 이제 HTML 문서를 다룬다면 align 속성을 쓰지 않는 것이 좋아.
기왕에 나온 김에 한번 HTML요소에서 Align 속성의 비슷한듯 때로는 다른 경우를 한번 정리해보자.
- APPLET, IFRAME, IMG, INPUT, OBJECT 의 align (이때 input은 image type인 경우에만 align 작동)
- DIV, H1, H2, H3, H4, H5, H6, P의 align : 내부 텍스트 정렬을 의미
- COL, COLGROUP, TBODY, TD, TFOOT, TH, THEAD, TR : 상동, 단 deprecated 속성이 아님
- HR의 align
- TABLE의 align
- LEGNEND의 align
이때 float의 left와 right처럼 작동시키는 align 속성은 APPLET, IFRAME, IMG, INPUT(IMAGE) OBJECT, HR, TABLE, LEGEND 요소가 해당해 "
김군 왈, "아하.. 그렇그나. deprecated 속성이 모야? "
A군 왈, "deprecated는 속성과 요소에 관해서 지정을 하는데, 더이상 해당 요소나 속성을 이제는 사용하지 말거라 하는 의미야. 여러가지 이유로 이제는 오래되었고 현재 버전에서는 사용을 바라지 않으나 다만 브라우저 차원에서 하위 호환성을 위해서 지원할 수 있기에 사용할 수는 있으나... 좀더 여기서 나아간 것은 Obsolete(폐기)야. Obsolete는 더이상 어떠한 브라우저의 지원을 보증할 수 없는 것들이 돼. depracted 된 것들이 나중에 Obsolete가 되겠지.
DTD는 대개 같은 버전에서 Transitional과 Strict 와 같은 2개가 존재하는데, 이때 Strict를 사용한 경우에는 Deprecated 속성이나 요소는 더이상 이용하지 않겠다는 의미야. Strict DTD에서는 절대 Align 같은 Deprecated된 것들은 써서는 안돼."
김군 왈, "오.. 역시 A군의 설명은 좀 깔끔해? 문장은 더티하지만. ㅋㅋㅋ 일단은 궁금한 것이 있는데, 대충 align을 사용한 <img>요소를 보면 어떻게 위치하는지 알겠는데 한번 정리는 가능할까?"
A군 왈, "그냥 써 본만큼 알 것 아니야. 이미 몸으로 전에 많이 써봤으니 체득되었을 것 아니야?"
김군 왈, "에이 알면서 그래... 그냥 알고 제대로 썼나.. 결과가 그렇게 나오니 그렇게 하면 되겠으니 하고 썼지.. ㅎ"
A군 왈, "나도 그러면 되겠으니 하고 말할래... ㅎㅎ"
김군 왈, "아.. 오늘은 피곤타.. 그만 튕겨라."
A군 왈, " 일단은<img>나 <table> 태그의 align을 많이 써봤겠지만, img의 align 속성에 center가 없는 것은 알고 있겠지? 다만 table에서는 허용하고, align 값도 단 left와 right인 경우에만 float 처리와 같어.
주의할 점은 이러한 성질을 갖는 align이나 float를 이용해 left 또는 right로 설정할 경우, 앞서 말한 것 처럼 block 속성으로 변하는데... 이떄 이 block은 부모 요소의 height가 auto인 경우 보통 내부의 content에 따라 height가 결정되는데... float된 요소는 말그대로 붕붕떠다니는 것으로 부모 요소는 이들을 대상으로 height 계산에 참여시키지 않아. 짧게 결론을 내리면 float된 요소는 content의 height 계산에서 제외된다는 말이야. 이를 확인해보자. "
<div style="background:red;width:500px;">
가나다라마바사
<img src="http://main.nateimg.co.kr/img/cms/content_pool/2011/07/normal_bi.gif" align="left" />
</div>
<script>
window.onload = function() {
alert(document.body.offsetHeight );
}
</script>
A군 왈, "이번에는 네이트에서 훔쳐온 로고로 본래 이것의 height는 50px이얌. 그런데 body의 height를 받아보니 그저 가나다라마바사 정도의 딱 content의 height만 나온다. 모~ 여기서 추가된 body margin이 있다면 그 값이 포함되 커질 수 있으나 여튼 img의 height보다 body의 height가 더 작게 나오지? 물론 이를 둘러싼 div도 배경을 빨강을 주었는데, <img>요소 전체를 모두 포함시키지 않지? " (단, IE7이하는 width 프로퍼티를 독특하게 취급하기에 결과에 차이가 있음, 다음 강좌에서 관련 문제의 이유와 해결을 설명함)
김군 왈, "아하.. 그렇구나. 그래서... 문제가.."
A군 왈, "무슨 문제가? "
김군 왈, "그러니까 iframe resize 하는 것 만들라고 했는데, 이게 잘 작동이 안되더라고."
A군 왈, "어 그렇지. 만일 가장 밖에 table로 레이아웃을 짜는 동시에 align을 left나 right로 주면, 절대 부모가 height를 계산할 수 없겠지? "
김군 왈, "그렇다면 방법이 없어? "
A군 왈, "float 속성은 일반적인 순차적 흐름과 상관없으며 레이아웃도 영향을 주기에 참 신기한 물건이지. 이러한 float를 해제하는 것이 clear 속성이야. 습관적으로 float로 열을 짠다음에 마지막에 clear:both인 블록을 달아놓지.
다시 말해 이전에 float된 요소들이 있고, 나중에 가령 <div style="clear:both"></div>같은 빈요소가 나타난다면 이러한 것들이 자신에게 영향을 주지 않고 독자적으로 아래에 위치하게 되겠지.
그러하게 되면서 상위 부모 요소는 자신의 height가 바로 clear:both인 div를 보고 이하 보이는 것으로 취급하여height를 계산하는 것이야.
쓰다 보니까 말이 길어졌다. 좀더 예제 몇개 작성하고 싶은데 시간이 많이 갔네. 예제는 다음에 하니싹 만들어 보고... 몇개 좀더 정리를 해보고 오늘은 여기서 끝낼께"
김군 왈, "너 지금 나한테 말하고 있는 것이 아니라 글을 쓰고 있는 것이얌?"
A군 왈, " ㅡ.,ㅡ...
추가하여 float는 꽤나 신기한 동작을 하는 물건이야. 레이아웃에 예외적인 위치에 있어 보이기도 하면서, 자리 차지하는데는 다른 것들과 결코 겹치러하지 않으면서, 겹칠만하다 싶으면 알아서 이전 float된 레이어 밑으로 기어 내려오지. 또한 float된 요소에서는 상하간의 수직 마진이 병합되지 않는 예외인 경우이기도 하고....
또한 이러한 float된 요소에서 만일 음수 마진값을 이용해서 다른 블록 요소와 겹치게 할 수 있는데, 이러한 경우 해당 블록 요소의 뒷 배경과 앞 요소 사이에 lfoat된 요소가 낑겨들어가는 보기 힘든 희안한 현상도 발생하지. 이건 브라우저 처리에 오류가 아니라 CSS 명세에 그렇게 처리하도록 되어있어. 심심하면 해보시던가.. ㅎ
좀더 float된 요소들의 처리는 나중에 CSS에서 텍스트 처리할때 필요한 내용이 있어서 미뤄 두고 이정도만 알면 이제 열단위의 레이아웃도 잘수 있을 것이야. 다음에는 예제로 한번 직접 해보자고...
그럼 이만... "
----- 다음 시간으로
휘리리리릭~~
헉 다시보니.. 비문이 많아서... align 부분 좀더 내용 추가하고 수정하였음.
추천
0
0
댓글 1개
좋은 강좌네요 *^^*