1. Position

▶position은 크게 4가지로 나뉜다. 1)static 2)relative 3)absolute 4)fixed. 이 4가지 position에 대해서 나열한 순서대로 짚어보도록 하자.

1) static

static은 말 그대로 '정지해있다' '비활동적이다' 라는 의미를 가지고 있는 position이다. css에서 별도로 설정해주지 않으면 default position은 static이 된다. static position을 가진 요소는 html document의 흐름(flow) 그대로 웹페이지에서 위치하게 된다. 이는 웹페이지 상에서 default로 해당 요소에 대한 공간(space)가 document flow에 의해서 주어진다는 것을 의미한다.

예로

<div class="first"></div>
<div class="second"></div>
<div class="third"></div>

와 같은 html의 경우 class first, second, third 순으로 페이지 상에 공간이 주어지고 그 순서대로 나열된다.

2) relative

relative position 또한 static과 같이 html document 흐름대로 위치하고 그에 따른 공간이 페이지 상에서 제공된다. 단, css에서 별도로 지정한 top, bottom, right, left 속성에 따라 해당 위치에서 이동된 위치에 자리하게 된다.

p {
	position: relative;
} //css rule 예

3) absolute

absolute position은 위에과는 다르게 해당 html document의 흐름을 따르지 않는다. 따라서 웹페이지 내에서 어떠한 공간도 default로 제공되지 않는다. 대신에 해당 absolute 포지션의 가장 가깝고 위치가 지정된 부모태그의 위치로 부터 top, bottom, right, left 속성을 추가해 페이지 내에서 위치변경이 가능하다.

p {
	position: absolute;
} //css rule 예

4) fixed

fixed position은 absolute와 동일하게 document flow에 영향을 받지 않고 css rule을 통해 별도 지정된 위치에 고정되게 된다. 따라서 fixed 된 요소는 페이지 스크롤을 한다고 해도 해당 위치에 고정되어 계속해서 스크린에 노출되게 된다. 흔히 navigation bar의 위치를 지정하는데 사용된다.

p {
	position: fixed;
} //css rule 예

2. Display

▶CSS display property는 다양하지만 우리가 여기서 알아볼 특성은 display의 기본이 되는 1)inline, 2)block, 3)inline-block 그리고 4) flex 이다. 이제 각 각의 특성에 대해서 알아보자.

1) inline

display: inline; 은 해당 요소를 페이지 상에서 같은 행에 위치하게 하고자 할때 사용된다. html의 태그들은 default display property(별도 css rule을 사용하지 않더라도 tag가 가지는 기본적인 display 특성)를 가지는데 아래 html tag들은 전부 기본적으로 display: inline;을 가진다.
<a>, <i>, <span>, <abbr>, <img>, <strong>, <b>, <input>, <sub>, <br>, <code>, <em>, <small>, <tt>, <map>, <textarea>, <label>, <sup>, <q>, <button>, <cite>

p {
	display: inline;
} //css rule 예

▷inline 특성을 가진 html요소들은 css rule에서 margin을 추가한다고 상,하 여백에 영향을 받지 않는다. 대신에 line-height 특성을 줘야한다.

▷또한, inline 특성을 가진 요소들은 당연히 width와 height 특성의 영향을 받지 않는다.

▷inline 특성을 가진 요소를 같은 행에서 연속적으로 사용하게 되면 각 inline 요소의 사이에 5px가량의 margin이 자동생성된다.

2) block

display: block; 은 해당 요소를 페이지 상의 한 행을 전부 차지하도록 하는 목적을 가진다. inline과 마찬 가지로 html tag 중 default display property로 block을 가지는 tag들은 아래와 같다.
<address>, <article>, <aside>, <blockgquote>, <canvas>, <dd>, <div>, <dl>, <hr>, <header>, <form>,<h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <table>, <pre>, <ul>, <p>, <ol>, <video>

p {
	display: block;
} //css rule 예

▷block 요소들은 width: 100% 라는 특성을 가지고 있다.

▷inline 요소들과는 다르게 margin, width, height 특성이 모두 css rule을 통해 적용 가능하다.

3) inline-block

display: inline-block은 inline과 block의 중간단계에 있는 유익한 변종(?)이라고 할 수 있다. inline과 같이 연속 사용시 같은 행에 구현되지만, block과 같이 margin, width, height가 적용 가능하다.

p {
	display: inline-block;
} //css rule 예

▷inline-block 속성을 기본으로 가지는 요소(html tag)는 없다. 따라서 css rule을 통해 별도로 지정해주어야 한다.

4) float

float은 그 의미 그대로 해당 요소를 inline 요소 위로 띄우는 속성이다. 예를 들어 <p>태그를 사용하여 text를 가진 문장의 시작을 관련된 이미지로 시작하고 싶을때,

img {
	float: left;
}

로 하여 글의 시작보다 이미지를 더 앞에 둘수 있다.

▷float의 속성으로는 left, right, none, both 가 있다.
▷만약 어떤 요소를 float된 요소의 옆 (inline)이 아니라 밑으로 (block) 위치하게 하고 싶을때는 해당 요소에

p {
	clear: left;
}

를 적용하여 float:left 된 요소의 밑에 위치할 수 있다.

▷float: left 된 요소의 밑으로 위치하기 위해선 clear: left로 그 방향이 매칭이 되어야 한다. ex) float: right; <-> clear: right;

5) flex

flex는 flexible box, flexbox 라고 불리기도 한다.

사용하고자 하는 tag가 기본적으로 block 개념을 가지는 경우 한페이지에 열로 세우기는 용이하나 행으로 나열하기 위해선 float이나 inline-block을 써왔다. 하지만 css에 update를 통해 display: flex; 라는 특성이 추가됨으로써 많은 개발자들이 flex 사용에 익숙해 지려고 한다.

▷flex의 구조는 flex container 와 flex item으로 나뉜다.

▷flex item은 flex container 안에 있는 요소를 가르킨다.

flex container에 적용하는 속성들은 아래와 같다.

flex-direction
flex-wrap
flex-flow
justify-content
align-items
lign-content

flex item에 적용하는 속성들은 아래와 같다.

order
flex-grow
flex-shrink
flex-basis
flex
align-self