position 속성
1. relative
position: relative자체로는 큰 의미가 없으나, 위치를 이동시켜주는 top, right, bottom, left의 속성을 부여해야 원래의 위치에서 이동할 수 있다.
2. absolute
position: absolute는 값의 이름과 같이 절대적인 위치에 둘 수 있다.
기준은 부모의 위치에서 절대적인 위치를 부여하는 것이며, right: 0 이라는 속성이 부여되어 있으면, 부모의 위치에서 오른쪽으로 0만큼 떨어진 것이라고 생각하면 편하다.
3. fixed
position: fixed는 absolute와 비슷하지만 부모요소에 영향을 받지 않으며, 브라우저 화면에서의 상대적인 위치를 결정한다.
display 속성
1. inline
요소를 나란히 둬도 줄바꿈 없이 한 줄에 다른 요소들과 나란히 배치된다. 대표적 inline 요소는 <span>, <a>, <em> 등이 있다. 특징으로는 inline요소에 width, height 속성을 부여해도 무시된다는 것인데, 이것은 inline요소 안의 컨텐츠의 크기만큼만 차지하도록 되어있기 때문이다. 또한, margin과 padding은 좌우 간격만 반영되고 상하 간격은 반영되지 않는다.
2. block
요소를 나란히 둬도 줄바꿈이 일어나 한 줄을 전부 차지하는 요소이다. 대표적인 block요소는 <div>, <p>, <h1> 등이 있다.
3. inline-block
기본적으로는 inline 속성처럼 한줄에 요소들이 나란히 정렬되지만 margin, padding, width, height 등의 속성들을 지정할 수 있다. 대표적인 lnline-block요소로는 <button>,<input>,<select> 등이 있다.
특징으로는 inline-block요소를 만들기 위해서는 display: inline-block을 지정해줘야 사용할 수 있다.
