float
- 엘리먼트를 원하는 위치로 이동시키고, 엘리먼트 뒤에 따라오는 앨리먼트들이 엘리먼트를 피해서 표시 되도록 한다.
- float는 원래 이미지를 둘러싸고 흘러가는 텍스트를 표시하기 위해서 고안된 것이다. example1.html
- 레이아웃을 구성할 때도 사용된다.example2.html
- float를 해제하기 위해서는 clear 속성을 사용한다. example3.html
example1.html - me의 float 속성으로 right를 지정하면 me는 이후에 등장하는 엘리먼트들을 피해서 오른쪽에 정렬된다. 그래서 other가 me의 왼쪽에 위치하는 것이다. (jsfiddle, github)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > <style type="text/css">.other { border: 4px solid green;}.me { float: right;} </style> </head> <body><p class="other"> 문제는 이렇다. (생활코딩에 입문하려는 여러분처럼) 만들 것이 있는 사람들은 만들 줄을 모른다. (베테랑 개발자들처럼) 만들 줄 아는 사람은 무엇을 만들줄 모른다. 그래서 고안된 것이 '분업'이고, 다른 말로 '직장'이라고 부른다. </p> <p class="other"> 한 때 이 땅위에는 컴퓨터학원이 국영수학원 만큼 있었다. 지금은 이 수요가 대학이나 직업학원으로 단일화 되었다. 옛날에는 취미인인 꼬꼬마들도 하던 프로그래밍이 이제는 직업인의 영역으로 퉁쳐진 것이다. 그런데 생각해보면 컴퓨터학원이 우후죽순 생겨나던 시절에 프로그래밍을 배워봐야 할 수 있는게 많지 않았다. 지금은 어떤가? 구글의 지도 API는 직전까진 삼엄한 군사정보였고, 제발 나 좀 공짜로 써달라고 애걸하는 오픈소스는 또 얼마나 많은가? 그런데 이제는 취미인들을 위한 컴퓨터학원이 없다. 몸에 좋은 개똥은 귀한 법인가? 그래서 시작한 개똥 같은 캠페인이 생활코딩이다. 장담하건데 프로그래밍의 시대가 다시온다. 직업인들은 이미 이 사실을 감지하고 있는데 이를 암시하는 인상적인 풍경이 아이폰이다. 아이폰이 등장하면서 수 많은 개발자들이 직장을 박차거나, 주경야코하며 자기만의 프로그램을 개발하고 있다. 이들이 직장의 힘을 빌리지 않고 자영업 개발자가 될 수 있었던 것은 더 이상 개인이 고립되지 않았다는 것을 암시한다. 이것은 모바일 열풍 못지 않게 중요한 행간이다. </p> </body></html> |
example2.html - float를 이용해서 레이아웃을 만드는 예제. nav에 float:left, content에 float:right를 줘서 화면을 분활한 후에 footer에 clear:both를 부여해서 float를 해제하고 있다. (jsfiddle, github)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | <!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > <style type="text/css"> body { font-size: 12px; } ul { padding-left: 10px; } li { list-style: none; } .wraper { width: 400px; } .navigation { float: left; width: 100px; background-color: red; color: white; } .content { float: right; width: 300px; background-color: green; color: white; } .footer { clear: both; background-color: purple; color: white; } </style> </head> <body> <div class="wraper"> <div class="navigation"> <ul> Navigation <li> 생활코딩이란? </li> <li> 커리큘럼 </li> <li> 커뮤니티 </li> <li> 강의장소협찬 </li> <li> 수업요청 </li> </ul> </div> <div class="content"> Content 한 때 이 땅위에는 컴퓨터학원이 국영수학원 만큼 있었다. 지금은 이 수요가 대학이나 직업학원으로 단일화 되었다. 옛날에는 취미인인 꼬꼬마들도 하던 프로그래밍이 이제는 직업인의 영역으로 퉁쳐진 것이다. 그런데 생각해보면 컴퓨터학원이 우후죽순 생겨나던 시절에 프로그래밍을 배워봐야 할 수 있는게 많지 않았다. 지금은 어떤가? 구글의 지도 API는 직전까진 삼엄한 군사정보였고, 제발 나 좀 공짜로 써달라고 애걸하는 오픈소스는 또 얼마나 많은가? 그런데 이제는 취미인들을 위한 컴퓨터학원이 없다. 몸에 좋은 개똥은 귀한 법인가? 그래서 시작한 개똥 같은 캠페인이 생활코딩이다. 장담하건데 프로그래밍의 시대가 다시온다. 직업인들은 이미 이 사실을 감지하고 있는데 이를 암시하는 인상적인 풍경이 아이폰이다. </div> <div class="footer"> Footer </div> </div> </body></html> |
example3.html - float의 활용 (jsfiddle, github)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > <style type="text/css"> .first { float: left; font-size: 30px; } </style> </head> <body> <div class="first"> 한 </div> 때 이 땅위에는 컴퓨터학원이 국영수학원 만큼 있었다. 지금은 이 수요가 대학이나 직업학원으로 단일화 되었다. 옛날에는 취미인인 꼬꼬마들도 하던 프로그래밍이 이제는 직업인의 영역으로 퉁쳐진 것이다. 그런데 생각해보면 컴퓨터학원이 우후죽순 생겨나던 시절에 프로그래밍을 배워봐야 할 수 있는게 많지 않았다. 지금은 어떤가? 구글의 지도 API는 직전까진 삼엄한 군사정보였고, 제발 나 좀 공짜로 써달라고 애걸하는 오픈소스는 또 얼마나 많은가? 그런데 이제는 취미인들을 위한 컴퓨터학원이 없다. 몸에 좋은 개똥은 귀한 법인가? 그래서 시작한 개똥 같은 캠페인이 생활코딩이다. 장담하건데 프로그래밍의 시대가 다시온다. 직업인들은 이미 이 사실을 감지하고 있는데 이를 암시하는 인상적인 풍경이 아이폰이다. 아이폰이 등장하면서 수 많은 개발자들이 직장을 박차거나, 주경야코하며 자기만의 프로그램을 개발하고 있다. 이들이 직장의 힘을 빌리지 않고 자영업 개발자가 될 수 있었던 것은 더 이상 개인이 고립되지 않았다는 것을 암시한다. 이것은 모바일 열풍 못지 않게 중요한 행간이다. </body></html> |
