Wecode #1 TIL HTML/CSS Position|Display|Float

황인용·2019년 12월 6일
0

wecode TIL

목록 보기
1/12

Position

CSS(Cascading Style Sheets)에서 레이아웃을 만드는데 다양한 방법이 있지만, 이번에는 position 프로퍼티(property) 레이아웃 방법에 대해 알아보고자 한다.

position 프로퍼티에는 레이아웃에 대한 다양한 값을 설정할 수 있는데, 크게는 다섯가지 값을 설정할 수 있다.

▶static position (정적 위치) 지정 방식
▶relative position (상대 위치) 지정 방식
▶fixed position (고정 위치) 지정 방식
▶absolute position (절대 위치) 지정 방식
▶sticky

▶ static position

static position(정적 위치) 지정 방식은 HTML 요소의 위치를 결정하는 가장 기본적인 방식이다

top, right, bottom, left 속성값에 영향을 받지 않는다.

특별한 엘리먼트 속성을 받지 않는다
▶ position:static; 설정

<style>
  div.static {
      border: 3px solid #73Ad21;
      position: static;
      top: 10px; // 속성값의 영향을 안받음
  }
</style>

▶ static으로 설정된 레이아웃

▶ relative position

relative는 별도의 프로퍼티를 지정하지 않는 이상 static과 동일하게 레이아웃을 동작한다. 하지만 상대적으로 위치를 기준을 잡아서 자신의 위치를 지정할 수 있다. 지정할 때는 별도의 프로퍼티를 값을 설정한다.

별도의 프로퍼티를 설정하기 위해서는 top, right, bottom, left 프로퍼티를 사용하여 레이아웃을 이동할 수 있다.
▶ position:relative; 설정

<head>
	<meta charset="UTF-8">
	<title>CSS Position</title>
	<style>
		div.static {
			border: 2px solid #B8860B;
			position: static;
		}
		div.relative {
			border: 2px solid #CD5C5C;
			position: relative;
			left: 30px;
		}
	</style>
</head>

<body>
	<h1>상대 위치(relative position) 지정 방식</h1>
	<div class="static">이 요소는 정적 위치 지정 방식으로 위치를 설정하였습니다.</div><br>
	<div class="relative">이 요소는 상대 위치 지정 방식으로 위치를 설정한 후, left 속성값을 30px로 설정하였습니다.</div><br>
	<p>상대 위치는 해당 HTML 요소의 정적 위치(static position)에 따라 위치를 재조정하는 방식입니다!</p>

</body>

▶ 결과

▶ fixed position

fiexd는 말그대로 고정으로 뷰포트(viewport) 즉, 보여지는 웹페이지상의 화면 중 설정한 값에 위치한다.

별도의 프로퍼티를 지정하여 개발자가 원하는 위치에 레이아웃이 가능하다.

▶ position:fixed; 설정

<head>
	<meta charset="UTF-8">
	<title>CSS Position</title>
	<style>
		div.fixed {
			border: 2px solid #B8860B;
			width: 450px;
			position: fixed;
			top: 0;
			right: 0;
		}
	</style>
</head>

<body>

	<h1>고정 위치(fixed position) 지정 방식</h1>
	<div class="fixed">이 요소는 고정 위치 지정 방식으로 위치를 설정하였습니다.</div>
	<h2>제목 1</h2>
	<p>첫 번째 단락</p>

	<h2>제목 2</h2>
	<p>두 번째 단락</p>

	<h2>제목 3</h2>
	<p>세 번째 단락</p>

	<h2>제목 4</h2>
	<p>세 번째 단락</p>

	<h2>제목 5</h2>
	<p>세 번째 단락</p>

	<h2>제목 6</h2>
	<p>세 번째 단락</p>

	<h2>제목 7</h2>
	<p>세 번째 단락</p>
</body>

▶ 결과

▶ absolute position

fixed는 뷰포트에서 상대적으로 고정 위치로 레이아웃하였다면, absoulute 속성은 가장 가까운 곳에 위치한 엘리먼트(element) 즉, 부모나 조상 엘리먼트에 상속하여 고정 위치로 레이아웃하게 된다.

만약 부모/조상 엘리먼트가 없을 시 문서본문(document body)를 기준으로 삼고, 페이지 스크롤에 따라 움직이게 된다.

▶ position:absolute;설정

<head>
	<meta charset="UTF-8">
	<title>CSS Position</title>
	<style>
		div.relative {
			border: 2px solid #B8860B;
			width: 500px;
			height: 200px;
			position: relative;
		} 
		div.absolute {
			border: 2px solid #006400;
			width: 200px;
			height: 100px;
			position: absolute;
			top: 50px;
			right: 0;
		}
	</style>
</head>

<body>

	<h1>절대 위치(absolute position) 지정 방식</h1>
	<div class="relative">이 요소는 상대 위치 지정 방식으로 위치를 설정하였습니다.
		<div class="absolute">이 요소는 절대 위치 지정 방식으로 위치를 설정한 후, top 속성값을 50px로 설정하였습니다.</div>
	</div>
	<div class="absolute">이 요소는 절대 위치 지정 방식으로 위치를 설정한 후, top 속성값을 50px로 설정하였습니다.</div>
	<p>절대 위치는 해당 요소의 바로 상위의 위치가 설정된 조상(ancestor) 요소에 따라 위치를 재조정하는 방식입니다!</p>

</body>

▶ 결과

static / relative / fixed / absolute position 비교

▶ 소스

<head>
	<meta charset="UTF-8">
	<title>CSS Position</title>
	<style>
		.container {
			border: 3px solid red;
			width: 100%;
			height: 1000px;
			position: relative;
		}
		.position {
			width: 150px;
			height: 50px;
			top: 100px;
			left: 120px;
		}
		.static {
			border: 3px solid black;
			position: static;
		}
		.relative {
			border: 3px solid green;
			position: relative;
		}
		.fixed {
			border: 3px solid orange;
			position: fixed;
		}
		.absolute {
			border: 3px solid blue;
			position: absolute;
		}
	</style>
</head>

<body>

	<h1>정적 위치(static position) 지정 방식의 특징</h1>
	<div class="container">
		<div class="static position">정적 위치(static position)</div>
		<div class="relative position">상대 위치(relative position)</div>
		<div class="fixed position">고정 위치(fixed position)</div>
		<div class="absolute position">절대 위치(absolute position)</div>
	</div>

</body>

▶ 결과

Display

display 속성은 요소를 어떻게 보여줄지 그리고 영역을 어떻게 차지할지를 결정한다.

주로 4가지 속성값이 쓰이는데, 속성마다 사용할 수 있는 태그(tag)가 다르다.

▶ block (블록)
▶ inline (인라인)
▶ inline-block (인라인-블록)
▶ none

▶ block (블록)

block 속성값은 기본적으로 가로영역을 모두 채우며, block요소 다음에 오는 태그는 줄바꿈이 된 것처럼 보인다.

width, height 속성을 지정 할 수 있으나 block요소 뒤에 즉, 다음 문단에 레이아웃하게 된다.

block속성에 해당되는 대표적인 태그 :

, <h1~5>,

,

profile
황인용
dev_pang의 pang.log
다음 포스트

Wecode #2 TIL JavaScript Function

0개의 댓글