CSS 수업

HTML을 꾸며주는 아름다운 언어

CSS 수업 HTML을 꾸며주는 아름다운 언어

float

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를 해제하고 있다. (jsfiddlegithub)

<!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의 활용 (jsfiddlegithub)

<!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>

댓글

댓글 본문
작성자
비밀번호
  1. 감사합니다..늘..
  2. yihsang
    감사합니다.
  3. Rhys Jung
    감사합니다.
  4. 온달장군
    강좌 잘보고 갑니다.
  5. 여기서 기초를 시작할 수 있어서 다행입니다 ^^ 배울만한 곳이 없어서 생활코딩을 알게되었고, 없으니 이거라도 보자라고 시작한게 엄청난 행운이였나봐요
  6. 빨강머리앤
    감사합니다.
  7. JustStudy
    고맙습니다
  8. 해앵인
    타 카페 답변을 첨부합니다.

    1. boder와 레이아웃은 겹치는데 왜 content는 겹치지 않느냐...
    이건 스펙상에 그렇게 명시가 되어 있기 때문에 그렇게 구현되었다 라고 밖에는 설명이 안될 듯 합니다.
    https://www.w3.org......ats
    참고하세요

    2. z-index 가 존재하는 것인가?
    마찬가지로 z-index가 존재하는 것이 아니라, float 에 대한 스펙상의 정의가 그러합니다.
    A float can overlap other boxes in the normal flow (eg, when a normal flow box next to a float has negative margins )
    - W3C Spec
    대화보기
    • WayneKing
      CSS는 2배속으로 궁부할 때, 더 집중 잘되네요.
    • 율민아빠
      float에 대한 질문드립니다.
      제가 궁금한것은 float의 z-index 값에 대해서 궁금합니다.

      개념정리를 하는 도중 아래와 같은 부분이 너무 혼란스러워 명쾌하게 해결해주셨으면 합니다.

      1. A-div박스와 B-div박스에서 A-div에만 float: left;주면 B-div박스가 밑으로 들어갑니다.
      ( 이 부분은 A-div박스가 float로 부유한것을 명시적으로 보여집니다.)

      2. 1과 같이 진행시 B-div박스에 있는 텍스트내용들은 밑으로 들어가지 않고 A-div박스의 크기를 인정한체
      그 이외의 영역으로 텍스트 내용은 흘러갑니다.

      (소스-html)
      <div class="A-box">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur est delectus aliquid nisi suscipit saepe error, ipsa iure nemo ex ipsam tempore dolore dicta cumque, laborum nihil at rerum quo.
      </div>
      <div class="B-box">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur est delectus aliquid nisi suscipit saepe error, ipsa iure nemo ex ipsam tempore dolore dicta cumque, laborum nihil at rerum quo.
      </div>

      (소스-css)
      .A-box{
      border: 1px solid red;
      width: 300px;
      height: 400px;
      background-color: rgba(100, 10, 0, 0.5);
      float: left;
      }
      .B-box{
      border: 1px solid red;
      width: 500px;
      height: 100px;
      background-color: purple;
      color: white;
      letter-spacing: 1px;
      word-spacing: 10px;
      }

      질문드립니다.

      div로 감싸준 박스와 그안에 있는 텍스트의 z-index값은 함께하지 않고 다르게 만들어지는건가요?
      박스는 밑으로 들어가지만 콘텐츠는 들어가지 못하는것을 float 이라는 건가요?
      왜 div박스와 그안의 있는 콘텐츠는 다른 깊이를 갖고 있는건가요?
      부유한다면 어떤 z-index의 높이로 부유하는 건가요?
      너무도 궁금합니다. ㅜㅜ
    • 정민규
      보면 볼수록 빠져드는 강의~ 여기까지 무사히 잘 따라왔습니다~ 노고에 감사드려요~
    • 강의 잘 들었습니다^^
    • Sung Gil Yun
      수업도 좋지만...
      문장 내용도 감명깊습니다.
      감사합니다.^^
    • YellowBall
      잘 들었습니다.
    • 불의여신
      별모모님의 올리신 문서를 확인해 본 결과
      nov부분과 content 부분이 서로 붙어있지 않고 다음라인 오른쪽으로 이동하여 만들어지네요..
      대화보기
      • 스마트
        강의 잘 들었습니다.
      • 팽맨이러닝
        좋은 강의였습니다.
        Float는 레이아웃에서 매우 중요한 역할을 담당하는군요.
      • powerwithlove
        clear:both;

        요놈으로 문제 하나 해결하고 갑니다. ^^

        역시 기초가 튼튼해야 하나 봅니다.

        감사합니다.
      • 윤윤
        좋은 강의 정말 잘 보고 있습니다.
      • 유형찬
        감사합니다.
      • Jiikkkk
        강의 잘 보고있습니다!
      • 환글
        넘 좋은 강의 고맙습니다.
      • CreJe
        그래서 시작한 개똥 같은 캠페인이 생활코딩이다. 장담하건데 프로그래밍의 시대가 다시온다.


        (정말 좋군요)
      • egoing
        그건 그냥 약속이라고 생각하시면 되는데요.
        이미지의 경우 원래는 <img src="" /> 이런식으로 쓰시는 것이 바람직합니다.
        <img src="" />에서 /은 닫히는 태그가 필요없다는 의미로 이해하시면 되고요.
        대화보기
        • leeta
          질문 있습니다. 이미지 주소가 <img src=""> 이고 링크가 <a href="">인가요? 링크는 </a>로 닫히는데 이미지는 </img>왜 이렇게 안닫히는지 알수있을끼요^^?
        • ejaguar211
          마지막 예제의 삽입글중
          주경야코라는 말이 참 아름답습니다.ㅎㅎ
        • 별모모
          [ float, <div class="wrapper"> ... </div> ] 이렇게 <div>태그로 전체를 싼 "wrapper"이라는 class로 내부에 있는 두 개의 <div>블록을 묶어줘야 화면의 길이가 400px(왼쪽 100px, 오른쪽 300px)이상 될 때, 서로 양쪽으로 붙어서 가운데 하얀 공간이 생기는 현상을 막을 수 있습니다.

          [ 제가 궁금한 것은... ] 이렇게 <div>를 css "wrapper" 클래스로 묶어 좋으면, 화면이 커져도 정해진 크기 이상으로 볼 수 없어 답답할 것입니다. 때문에, 정해진 px(픽셀)보다는 비율(%)를 사용하면 훨씬 유용하지 않을까 생각합니다. 그러면, 별도의 <div class="wrapper">처럼 "wrapper"로 둘러싸지 않아도 될 것 같습니다.
          (예)
          body {
          font-size: 12px;
          }
          ul {
          padding-left: 10px;
          }
          li {
          list-style: none;
          }
          .navigation {
          float: left;
          width: 30%;
          background-color: red;
          color: white;
          }
          .content {
          float: right;
          width: 70%;
          background-color: green;
          color: white;
          }
          .footer {
          clear: both;
          background-color: purple;
          color: white;
          }
          대화보기
          • 빈누
            부모 엘리먼트가 없으면 left로 정렬하는 기준이 body(전체 width)로 되어서 오른쪽 끝으로 붙어버려서 그런것 아닌가요? ^^
            대화보기
            • Rafy
              독서 대신 코딩으로 일부로 재밌게 바꾸신 내용 같아요 :)
              대화보기
              • 퍼블릭 퍼블리셔
                example 3>본문내용중에 주경야코 -> 주경야독 ^^수정 부탁드려요~
              • Harvey Kim
                오호 매우 유용하네요!!
              • Nick Cho
                강의 감사히 잘 듣고 있습니다. 그런데 궁금한게 하나 있는데요. 예제2에서 .wraper를 부모엘리먼트로 두지 않았을때 네비게이션과 컨텐츠의 공백은 왜 생기는 건가요? 이유가 궁금합니다!
              • 김창세
                실뭉치에서 실을 하나하나 풀고 있는 느낌입니다...더더욱 집중하게 되는군요.^^
              • David Chang
                요즘 워드프레스 테마 소스들을 보면 float가 많이 보이는데 이런 데 쓰는거군요. 소스 이해하는 데 큰 도움이 됐네요. ^^ 감사합니다!!
              • egoing
                me의 float 속성으로 right를 지정하면 me는 이후에 등장하는 엘리먼트들을 피해서 오른쪽에 정렬된다. 그래서 other가 me의 왼쪽에 위치하는 것이다.
                이렇게 수정했습니다. 꼼꼼하게 체크해주셔서 고맙습니다. ^^
                대화보기
                • manorgass
                  예제7. me의 float로 right를 지정하면 float는 other 엘리먼트 뒤에서 오른쪽으로 붙는다.
                  other 엘리먼트 뒤에서 오른쪽이라는 말이 무슨 말인가요?
                  이어지는 내용, 이후에 따라오는 엘리먼트는 me를 피해서 오른쪽 측면으로 흘러내려간다.
                  'me 엘리먼트에 영향을 주지 않고 줄바꿈이 된다.'가 더 정확한 표현이라고 생각합니다.
                  강의 고맙습니다. :-)
                • Starmomo
                  overflow는 block-level 엘리멘트로 블록 포멧한 콘텐츠에 스크롤바를 보여줄 것인가, 보여주지 않을 것인가, 항상 스크롤바를 보일 것인가, 자동(필요할 때에 나타남)을 정하는 것입니다.
                  selector {overflow: value;}
                  : value is specified by using one of the following keywords: visible, hidden, scroll, auto, or inherit.
                  #test1 {overflow: visible;} /* 기본값-자르지 않고 모두 보여줌. */ #test2 {overflow: hidden;} /* 넘치는 내용은 감춤, 스크롤 없음 */ #test3 {overflow: scroll;} /* 항상 스크롤 있음 */ #test4 {overflow: auto;} /* 필요하면 스크롤 생김 */
                  대화보기
                  • Starmomo
                    clear의 속성값이 궁금해서 찾아 보았습니다. ^^ none, left, right, both, or inherit(상속)selector {clear: value;}value is specified by using one of the following keywords: none, left, right, both, or inherit.
                  • Mcmc68a
                    감사합니다.맨날 코딩을 하면 푸터가 화면 중앙에 와서 고생했었는데 clear 속성을 몰라서 그랬던 거네요.덕분에 궁금증 하나가 해결됐어요. 감사합니다.
                  • Purehsa
                    잘들었습니다~~^^overflow:hidden에 대해 자세히 알고싶네요 ㅠㅠ뿌잉
                  버전 관리
                  egoing
                  현재 버전
                  선택 버전
                  graphittie 자세히 보기