position
position 속성은 박스 구성요소들을 배치하기 위한 속성. 어떤 position 속성을 사용 하느냐에 따라 위치가 달라질 수 있으므로 전체적인 내용을 잘 이해하고 익숙하게 사용할 수 있도록 해야 한다.
CSS position
1) Static
position 속성의 기본값으로, 요소를 나열한 순서대로 배치하며 원하는 위치에 콘텐츠를 배치할 방법은 없다.
순서대로라는 의미는 콘텐츠를 왼쪽에서 오른쪽으로 추가해 나가고 오른쪽에 공간이 없을 경우 다음 줄로 넘겨 배치하는 것을 의미 한다.
뒤에 나오는 float 속성을 이용해 좌우로 배치할 수 있다.
2) Relative
static과 같이 나열한 순서대로 배치되지만 top, right, bottom, left 속성을 사용해 원하는 위치를 지정할 수 있다.
이때 좌표값은 원래 있던 위치 즉, static 기준으로 원래 위치해야 할 곳이 기준이 되며 지정한 속성에 따라 상/하/좌/우 원하는 자리에 배치하는 것이 가능 하다.
3) Absolute
top, right, bottom, left 속성값을 이용해 요소를 원하는 위치에 배치할 수 있다.
이때 기준 위치는 가장 가까운 상위 요소 중 position 속성이 relative인 요소.
따라서 absolute를 사용하는 경우 콘텐츠 박스를 감싸는 컨테이너를 만들고 position을 relative로 지정해놓고 사용.
상위 요소가 없다면 브라우저 화면의 좌측상단을 기준으로 설정.
4) Fixed
absolute 속성처럼 좌표로 위치를 결정하지만 기준이 부모요소가 아닌 브라우저 창(Browser Window)임.
페이지를 스크롤하더라도 계속 고정되어 표시됨. 즉, 항상 같은 위치를 유지.
5) z-index
박스들이 중첩되는 경우 박스들의 수직 위치를 조정하기 위한 속성.
파워포인트에서 박스들을 맨위로 보내거나 맨뒤로 보내는것과 같다.
z-index 값이 높을수록 위, 작을수록 아래에 배치되며 -인 경우 기준 콘텐츠의 아래쪽을 의미.
position 속성이 적용된 경우에만 의미가 있음.
float/display
1) float 속성
float 속성은 속성의 명칭과 같이 요소를 화면위에 떠있는 형식으로 배치 합니다. float 속성을 이용하며 좌측 혹은 우측부터 정렬되는 박스 콘텐츠를 배열할 수 있습니다.
float
float: left; 혹은 float: right;를 지정하면 width는 콘텐츠를 표시할 때 필요한 만큼만 차지하고 다른 요소가 들어올 만큼의 공간을 비워 둠.
float 속성이 더이상 동작하지 않도록 원할 경우 다음에 나오는 clear 속성을 반드시 지정해 주어야 함.
clear
clear 속성은 float 속성이 더 이상 유용하지 않다고 알려 주는 속성.
만약 float: left;로 왼쪽으로 배치했다면 clear: left;로 무효화시킴.
2) display 속성
display 속성은 요소를 보여주는 방식을 지정하는 속성. 콘텐츠를 보이지 않게 할수도 있고 float 을 대체해 콘텐츠를 나란히 배치하는데 사용되기도 함.
none : 보이지 않음 , visibility:hidden 속성과 유사하나 영역 자체가 없어짐.
block : 블록 박스
inline : 인라인 박스
inline-block : block과 inline의 중간 형태
block과 inline
html 을 배우면서 block 태그와 inline 태그의 차이점에 대해 배웠습니다. block 태그는 width=100% 인 태그들로 요소를 나란히 배치할 수 없습니다. inline 은 콘텐츠의 크기만큼만 자리를 차지하기 때문에 다른 콘텐츠와 나란히 배치될 수 있습니다. 다만 width와 height 를 사용할 수 없어 주변 콘텐츠와 균형을 맞추기가 어려운 문제가 있습니다.
inline-block
display 속성을 사용하면 block 태그에 inline 속성을 가지도록 변경할수도 있고 그 반대도 가능합니다. 또한 inline 속성을 가지면서 즉, 다른 콘텐츠와 나란히 배치 되면서 block 요소의 width, height 등의 속성이 적용되도록 하는 inline-block 속성도 있습니다.
CSS를 활용한 캐릭터 만들기
