1. position 속성 - static, relative, fixed, absolute
position은 layout구성을 위해 필요 요소이다.
-
default= static이다. -
relative를 사용시,top,right,bottom,left와 같은 요소들로 기준점으로 부터의상대적 위치를 지정하여 위치시킬 수 있다. -
fixed는화면창을 기준으로상대적인 위치에 고정된다. 이말은, 페이지를 스크롤시에도 항상같은 위치에 고정되어 보인다는 뜻이다.relative와 마찬가지로top,right,bottom,left속성 적용이 가능하다. -
absolute는 말그대로절대적 위치이다. 말은 단순한데, 무슨말인지 사실 잘 모르겠다.fixed와 유사하지만,화면창이 아닌, 가장 가까운상위 요소의상대적 위치이다. 하지만상위 요소가 없을 때는,body를 기준으로 하게되며, 스크롤과 함께 움직이다.
2. inline, inline-block, block 에 대해서
inline줄바꿈이inline-blockblock
inline은 줄바꿈이 되지 않고 다른 요소와 함께 한 줄에 위치하는 속성이다. width 와 height 속성이 적용되지 않는다.
(inline 요소의 width와 height는 태그의 사이즈에 맞춰진다)
block
block 속성은 inline과 다르게 한 줄에 위치하지 않고 태그 하나가 한 줄을 모두 차지한다.
width와 height 모두 적용된다.
inline-block
inline과 block의 특성을 모두 가지고 있다. inline 처럼 한 줄에 위치하지만 block 처럼 width와 height 속성이 적용된다.
3. float에 대해서
float은 이미지 주변을 텍스트로 감싸기 위해 사용
block요소가 inline 성질을 갖도록 하는 CSS property는
display와 float
display: inline-block;
inline요소가 block 성질을 갖도록 하는 CSS property는
display: block;
display: none; - 해당 요소가 화면에서 보이지 않음 - interactive한 웹 구현을 위하여
아마 그 새로운 클래스에는 display: block; 이라는 값이 있었을 것입니다.
이렇게 클래스 이름에 따라 요소에 display: none <-> block 가 있었다가 없었다가 하면서
요소를 보이게/안보이게 할 수 있는 것입니다.
참고
margin auto
block 요소일 때, width값을 설정해도 적용되지 않는 상황에서
margin: auto를 설정해주면 중앙정렬 됌
