15. 가로선 채색, position, absolute, fixed, relative

https://github.com/upcake/Class_Examples

교육 중에 작성한 예제들은 깃허브에 올려두고 있습니다. 

---

▲예제 01. 가로선에 색 주기

 - hr 태그에 background-color로 hr 색을 지정할 수 있다.

 - height는 hr의 굵기를 결정한다.

 - border: 0px로 hr태그가 두 줄로 나오지 않게 한다.

 

 

▲예제 02. position: absolute

 - position: absolute를 주면 브라우저 시작점(0, 0)을 기준으로 절대 좌표로 위치를 지정할 수 있다.

 - 하위 태그에 absolute 속성을 사용하려면 부모 태그가 영역을 차지하지 않아야 한다.

 

 

▲예제 03. position: fixed

 - position: fixed를 주면 스크롤과 상관없이 고정된 위치에 항상 있는다.

 

 

▲예제 04. absolute와 relative

 - 상위 태그에 relative를 주고 absolute + top, left 좌표로 위치를 지정해줄 수 있다.

 

 

▲예제 05. absolute와 fixed 활용