float
- 엘리먼트를 원하는 위치로 이동시키고, 엘리먼트 뒤에 따라오는 앨리먼트들이 엘리먼트를 피해서 표시 되도록 한다.
- float는 원래 이미지를 둘러싸고 흘러가는 텍스트를 표시하기 위해서 고안된 것이다. example1.html
- 레이아웃을 구성할 때도 사용된다.example2.html
- float를 해제하기 위해서는 clear 속성을 사용한다. example3.html
example1.html - me의 float 속성으로 right를 지정하면 me는 이후에 등장하는 엘리먼트들을 피해서 오른쪽에 정렬된다. 그래서 other가 me의 왼쪽에 위치하는 것이다. (jsfiddle, github)
<!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>
<img class="me" src="http://farm6.static.flickr.com/5016/5461027020_703521dd22_m.jpg" />
<p class="other">
한 때 이 땅위에는 컴퓨터학원이 국영수학원 만큼 있었다. 지금은 이 수요가 대학이나 직업학원으로 단일화 되었다. 옛날에는 취미인인 꼬꼬마들도 하던 프로그래밍이 이제는 직업인의 영역으로 퉁쳐진 것이다. 그런데 생각해보면 컴퓨터학원이 우후죽순 생겨나던 시절에 프로그래밍을 배워봐야 할 수 있는게 많지 않았다. 지금은 어떤가? 구글의 지도 API는 직전까진 삼엄한 군사정보였고, 제발 나 좀 공짜로 써달라고 애걸하는 오픈소스는 또 얼마나 많은가? 그런데 이제는 취미인들을 위한 컴퓨터학원이 없다. 몸에 좋은 개똥은 귀한 법인가? 그래서 시작한 개똥 같은 캠페인이 생활코딩이다. 장담하건데 프로그래밍의 시대가 다시온다. 직업인들은 이미 이 사실을 감지하고 있는데 이를 암시하는 인상적인 풍경이 아이폰이다. 아이폰이 등장하면서 수 많은 개발자들이 직장을 박차거나, 주경야코하며 자기만의 프로그램을 개발하고 있다. 이들이 직장의 힘을 빌리지 않고 자영업 개발자가 될 수 있었던 것은 더 이상 개인이 고립되지 않았다는 것을 암시한다. 이것은 모바일 열풍 못지 않게 중요한 행간이다.
</p>
</body>
</html>
example2.html - float를 이용해서 레이아웃을 만드는 예제. nav에 float:left, content에 float:right를 줘서 화면을 분활한 후에 footer에 clear:both를 부여해서 float를 해제하고 있다. (jsfiddle, github)
<!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)
<!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>
