CSS 수업

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

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

포지셔닝

포지셔닝

positioning, CSS를 이용해서 HTML 엘리먼트들의 위치를 제어하는 방법

포지셔닝의 종류

엘리먼트에 CSS 속성으로 position을 지정하면 여러가지 방법으로 위치를 지정할 수 있다.

  • 상대위치(relative positioning)
    • position:relative
    • 자신의 위치를 기준으로 한 상대위치 값을 지정한다.
    • 자식 엘리먼트의 크기에 따라서 부모 엘리먼트의 크기가 자동으로 변경되지만, 엘리먼트의 위치에 따라서는 변경되지 않는다.

example1.html - position의 값이 relative인 경우, me의 속성으로 top을 주었을 때 me의 원래 위치에서 10px아래로 내려온다.이 때 parent의 크기가 변하지 않기 때문에 me가 parent위에 표시된다. (jsfiddle, github)

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
		<style type="text/css">
			.other, .parent {
				border: 4px solid green;
				margin: 5px;
			}
			.me {
				background-color: red;
				position: relative;
			}
		</style>
	</head>
	<body>
		<div class="other">
			other
		</div>
		<div class="parent">
			parent
			<div class="me">
				me
			</div>
		</div>
	</body>
</html>
  • 절대위치(absolute positioning)
    • position:absolute
    • 문서를 기준으로 위치가 정해지기 때문에 부모 엘리먼트의 위치와는 무관하다.
    • 엘리먼트의 크기가 부모 엘리먼트의 크기에 반영되지 않는다. 

example2.html - position의 값을 absolute로 했을 때 me의 offset은 기본적으로 원래 위치의 값을 가지고, parent와의 관계가 완전히 사라지기 때문에 parent는 me의 크기가 전혀 반영되지 않는다. (jsfiddle, github)

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
		<style type="text/css">
			html {
				border: 1px solid blue;
			}
			.other, .parent {
				border: 4px solid green;
				margin: 5px;
			}
			.me {
				background-color: red;
				position: absolute;
			}
		</style>
	</head>
	<body>
		<div class="other">
			other
		</div>
		<div class="parent">
			parent
			<div class="me">
				me
			</div>
		</div>
	</body>
</html>
  • 고정위치(fixed positioning)
    • position:fixed
    • 문서를 기준으로 위치가 정해지기 때문에 부모 엘리먼트의 위치와는 무관하다.
    • 엘리먼트의 크기가 부모 엘리먼트의 크기에 반영되지 않는다.
    • 스크롤의 영향을 받지 않는다.

example3.html - me가 절대위치와 동일한 성격을 갖지만, 화면을 스크롤해도 고정된 위치에 위치함 (jsfiddle, github)

<html>
	<head>
		<style type="text/css">
			.other, .other2, .parent {
				border: 4px solid green;
				margin: 5px;
			}
			.me {
				background-color: red;
				position: fixed;
			}
			.other2 {
				height: 1000px;
			}
		</style>
	</head>
	<body>
		<div class="other">
			other
		</div>
		<div class="parent">
			parent
			<div class="me">
				me
			</div>
		</div>
		<div class="other2">
			other2
		</div>
	</body>
</html>
  • 정적위치(static positioning)
    • position:static
    • 자식 엘리먼트의 크기에 따라서 부모 엘리먼트의 크기가 자동으로 변경된다.
    • position 속성의 값을 지정하지 않으면 기본적으로 static의 값이 주어진다.
    • left, top, right, bottom과 같은 offset이 무시된다.

example4.html - position의 값이 static인 경우 class가 me인 엘리먼트가 parent 엘리먼트 안에 포함되어 있고, parent는 me의 크기에 따라서 사이즈가 변함  (jsfiddle, github)

<!DOCTYPE html>
<html>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
	<style type="text/css">
		.other, .parent {
			border: 4px solid green;
			margin: 5px;
		}
		.me {
			background-color: red;
		}
	</style>
	<title></title>
	</head>
	<body>
		<div class="other">
			other
		</div>
		<div class="parent">
			parent
			<div class="me">
				me
			</div>
		</div>
	</body>
</html>

포지셔닝 비교

  정적위치(static) 상대위치 (relative) 절대위치 (absolute) 고정위치(fixed)
기준위치 자기위치 자기위치 문서(html), 시작 위치는 static 기준으로 원래의 위치에 맞춰져 있음. 절대위치와 동일
부모의 크기 자식의 크기에 따라 변경 자식의 크기에 따라 변경되지만 위치를 변경함에 따라 부모의 크기가 변경되지는 않음 부모의 크기에 영향을 끼치지 않음 절대위치와 동일
자신의 크기 width:100%로 부모의 크기를 따름 width:100%로 부모의 크기를 따름 포함하고 있는 컨텐트의 크기 만큼 늘어남 절대위치와 동일
offset 사용(left,right.top,bottom) 불가 가능 가능 가능
스크롤 따라감 따라감 따라감 고정

 

댓글

댓글 본문
작성자
비밀번호
  1. 한승훈
    감사합니다. 강의 너무 좋네요. 책으로도 이해 안되던 포지션 개념을 이해할수 있게 됐습니다.
  2. 감사합니다.
  3. 우욱진
    감사합니다
  4. yihsang
    감사합니다.
  5. Rhys Jung
    정말 혼란스럽고 복잡한 내용인데 너무 쉽게 설명을 해주셨네요
    위치를 설명해주시는게 넘 훌륭하네요
    감사합니다.
  6. 아하.. 왠지 보통웹사이트의 상단네비게이션이 생각나네요. 스크롤을내려도 네비는 위에 딱 달라붙어 고정위치를 지키던데 혹시 이걸활용한건가?하는 생각도 들면서 공부해보면 알것같습니다 ㅎㅎ
  7. JustStudy
    고맙습니다
  8. 빨강머리앤
    감사합니다. ^^
  9. 코딩초보
    감사합니다~!
  10. WayneKing
    고고고고고
  11. 잘생김
    명쾌한 설명 감사합니다 2015-09-18
  12. hyorim1225@naver.com
    처음에는 이해가 잘 안가실거에요. 하지만 이것저것 해보다보면 이해가 됩니다. 모두 화이팅입니다 ^^
  13. satijyin
    Kush님
    저도 초보지만, 제가 이해한대로 해석해드리면,
    Top:10px; 이면 _ 기준점과 해당 element 사이 (윗편)에 10px만큼의 공백이 생긴다고 이해하시면 됩니다.

    즉,
    ====================================

    ----------------- 이게 기준점
    ㅁㅁㅁㅁㅁㅁ 이게 me 요소라고 가정하고,


    여기다가 top:10px;을 주게되면


    ----------------기준점

    (10px 만큼의 공백)

    ㅁㅁㅁㅁㅁ 이게 me 요소

    ===============================
    라고 이해하시면 될듯합니다.

    즉, 위로 10px; 만큼의 '보이지 않는 힘'이 생겨서,' 그게 me 요소를 눌러버리니깐, 아래로 내려가게 된다.'
    라고 해석하시면 될 것 같습니다.
  14. kush
    position의 값이 relative인 경우, me의 속성으로 top을 주었을 때 me의 원래 위치에서 10px아래로 내려온다.

    상대위치에서, 이 말이 약간 헷갈리네요.

    top 으로 주면, 위로 올라가야할 거 같은 느낌인데
    왜 내려간다는건지 잘 모르겠습니다.
  15. YellowBall
    잘 들었습니다.
  16. alexmoon
    아 마지막표에 absolute 는 자신의 크기가 포함하고 있는 컨텐츠의 크기만큼 늘어난다고 되있군요 ㅎㅎ

    이것 때문인 것 같습니다. ㅎㅎ
    대화보기
    • alexmoon
      포지셔닝2 동영상에서 포지션을 relative로 하면 me가 포함된 행 전체가 전부 background가 빨간색이 되는데

      포지션을 absolute로 하면 me라는 텍스트에만 빨간색의 background가 적용되는 이유는 무엇일까요?
    • lust
      egoing님 덕분에 수업 잘듣고 있습니다.

      목소리도 너무 좋으시고, 강의의 질 또한 클래스가 있네요.

      CSS다른 강의도 준비하시는건가요?

      혹시 웹 표준 강의 계획은 없으신지요??^^
    • 혜윤아빠
      강의 듣고 있는데 픽셀이라는 단어가 자주 나왔는지 집사람이 이고잉님을 픽셀아저씨라고 하네요 ㅎㅎ
    • 김홍박
      너무너무 감사합니다
    • 윤윤
      저도 offset이 뭔지 몰라서 헷갈리던 참이었는데...
      대화보기
      • 라니
        이부분은 이해가 잘안가네요ㅜㅜ 제가 지금 집중을 못하는건지
        말이 귀에잘안들어와요 ㅠㅠㅠㅠㅠ 넘어갔다가 다시 나중에 또 봐바야겠나봐요
      • egoing
        예 그리하겠습니다. 곧 CSS 수업도 보강할 예정입니다 :)
        대화보기
        • 무른
          이고잉님 항상 잘 보고 있습니다.
          수업을 따라가다 보니 offset개념에 대한 설명이 추가된다면, 초심자가 포지셔닝 개념에 대한 이해를 하는데 좀더 수월할 것이라는 생각이 들더군요. 참고해주세요^^

          글고 질문하나만 드리겠습니다
          본인-엘리먼트(주로 me로 표기하더라고요)가 부모엘리먼트 혹은 자식엘리먼트랑 틀린 별개의 엘리먼트인지 그럼 상대적 관계가 어떻게 되는지 햇갈리더라고요. 답변부탁드립니다~!!
        • leeta
          질문 있습니다. 예제3번에서요 첫번째 보더 만드는 곳에도 other2가 있고 하단에 1000px만드는곳에도 other2가 있네요. 이는 <div class="other2">로 통합이 되는 부분이며, id로 죄다 고쳤더니 같은 역할(통합되는)을 하던데 맞나요?

          그리고 전부다 class 일때 1000px에 예를들어 .abc라고 해뒀을경우 <div class="other2 abc">하니까 역시 같네요 맞죠^^?

          저렇게 같은 엘리먼트를 따로따로 써도 한번에 겹쳐서 먹히는 지는 처음 알았습니다~
        • nosugarinmycoffee
          아닙니다..항상 제가 좀, 모자란것 같아요 '_' .. 전력투구로 강의 요리조리 잘 찾아듣고 있습니다. 감사합니다. ^ ^
          대화보기
          • egoing
            지금 이해가 안가시면 일단 다음 진도로 넘어가시면 어떨까요?
            다양한 경험을 하시다보면 자연스럽게 알게 되는 부분 입니다.
            나중에 다시 강의 만들면 그 때 좀 더 잘 만들겠습니다. ^^
            대화보기
            • nosugarinmycoffee
              저만 그런가요..ㅜ ㅜ 상대위치에 관한 내용은 세번정도 다시 보고 있습니다만 좀 처럼 머리에 쉽게 들어오기 힘드네요.
            • 별모모
              [ position:absolute; 와 position:fixed 기준점 ] "position:fixed"의 기준점은 html 이지만, "position:absolute;"의 기준점은 부모 엘리먼트의 위치인 것 같습니다. 첨부링크의 그림을 보면, 두 속성값에 따른 위치가 다르므로 absolute는 부모 엘리먼트의 위치를 기준으로 하는 것 같습니다. (그림 참조: <a href="https://www.facebook.com/photo.php?fbid=404126119732745">https://www.facebook.com/photo.php?fbid=404126119732745</a> )
            • 내일은
              .wrapper aside{
              position:fixed;
              }

              .wrapper .entry-area{
              float:right;
              }
              :)
            • egoing
              음 저는 동영상이 나오고 있는데 다시 한번 확인 부탁드립니다.
              대화보기
              • 제자
                예제 3번 유툽 영상이 안 나와요. 아.. 아쉬워요.. 그대의 목소리를 들려주세요.
              • sela
                포지셔닝이 머리 아프네요//
              • 누노
                offset이라는 용어?는 left,right,top,bottom을 이르는 용어일까요? 궁금궁금 그리고 예제1번을 실행해보니 bottom이 아래가 아니라 위로 올라가는게 이해가 안돼서 한참을 들여다봤는데ㅜㅜ 아래쪽'으로' 밀기가 아니라 아래쪽'에서' 밀기라고 생각해도 될는지요? right도 오른쪽'에서' 미는 것같은 느낌으로 배열이 되네요
              • 강준수
                absolute의 기준점은 static이 아닌 부모엘리먼트의 좌표입니다.ancestor가 모두 static이면 문서를 기준으로 잡고요.
                대화보기
                • 쾌남죠
                  부모가 relative 속성이고 자식이 absolute이면 자식의 기준점이 부모엘리면트가 기준점이 되던데 이건 어떤원리죠??
                • sugarui
                  사파리도 그렇네요. 예제가 안되어서 헤맬뻔했는데 알려주셔서 감사합니다.
                  대화보기
                  • 담요
                    와~ 잘봤습니다. 언뜻 알고 있던 것들이지만 다시 한번 정리된 걸 보니까 좋네요. ^^근데 부모도 relative, 자식도 relative면 어떤 포지션을 갖게 되는걸까요?이건 제가 한번 실험해봐야겠군요. ^^
                  • nick
                    첫번째 예제 소스를 그대로 카피했는데 안되더라구요. 그래서 왜 안되나 했더니 그대로 복사하면 공백이 들어가나봐요. 그래서 안되는 듯. 파폭에서 소스보면 공백에   가 들어가 있는거 보고 없앴더니 돌아가네요.
                  버전 관리
                  egoing
                  현재 버전
                  선택 버전
                  graphittie 자세히 보기