5.1 CSS 마무리

  오늘은 position과 position 상의 overflow프로퍼티를 어떻게 처리해야 되는지, float 프로퍼티, 프로퍼티 상속 순서 등을 공부했다. 이 또한 초점은 내가 웹사이트를 구성 할 때 어떻게 구성하고 그 구성에 따른 코드를 짤 때, 유의해야 되는 부분을 중점으로 공부했다. position 같은 경우에는 아래와 같이 박스를 만들고 그 박스를 위치시킬 때 유의해야 될 부분이 있고, overflow가 나타날 때 처리하는 방법에 대해서도 공부했다.

 

  공부를 하면 할수록 웹페이지를 볼 때 새로운 시각이 나타나고 있다. 상단에는 몇 개의 박스가 들어갔고, 소비자 입장에서 편하게 볼 수 있는 사이트를 구성하기 위해 얼마나 많은 노력과 시간을 들여 코드를 바꾸고 했을까를 떠오르곤 하낟. 그래서 더 공부할수록 재미있으면서 하나씩 배워가는 재미가 있다. 오늘은 css를 마무리했고, 내일은 HTML과 CSS를 이용해서 google 사이트를 대략적으로라도 만드는 day인데 잘 참고해서 엉성하여도 만들어보자 그리고 미니 프로젝트를 하나씩 만들어내면서 손에 익히고 복습과 반복은 언젠가 결과로 나타난다.

 

Position 프로퍼티는 요소의 위치를 정의한다.

 

static : 기본값으로 위에서 아래로, 왼쪽에서 오른쪽으로 배치되며 부모 요소 내에 자식 요소로서 존재 할때는 

부모 요소의 위치를 기준으로 배치된다.

 

relative : 기본위치를 기준으로 좌표 프로퍼티(top. bottom, left, right)를 사용하여 위치를 이동

 

absolute : static을 제외로 부모 요소 또는 가장 가까이 있는 조상요소를 기준으로 좌표 프로퍼티 만큼 이동한다.

 즉, relative, absolute, fixed프로퍼티가 선언되어 있는 부모 또는 조상 요소를 기준으로 위치를 결정된다.

 

relative 와 absolute의 차이점은 

-relative는 기본위치를 기준으로 좌표프로퍼티를 사용하여 위치를 이동시킨다. 즉 무조건 부모를 기준으로 위치한다.

-absolute는 부모에 static 이외의 position 프로퍼티가 지정되어 있을 경우에만 부모를 기준으로 위치하게 된다.

따라서 프로퍼티 요소는 부모 요소의 영역을 벗어나 자유롭게 위치한다.

 

fixed : 스크롤이 되더라도 화면에서 사라지지 않고 항상 같은곳을 위치한다. 

 

--overflow가 나타날 시--

visible	영역을 벗어난 부분을 표시한다.(기본값)
hidden	벗어난 부분을 잘라내어 보이지 않게 한다.
scroll	영역을 벗어난 부분이 없어도 스크롤 표시한다.
auto	영역을 벗아난 부분이 있을때만 스크롤 표시한다.