- position 속성 - relative, absolute, fixed
- position: static - default
- position: relative;
: top, right, bottom, left 는 position이라는 프로퍼티가 있을 때만 적용되는 프로퍼티. 마이너스 값을 주면 아래로 떨어지지 않고, 위로 올라가게 됩니다. - position: absolute;
: 절대적 위치
부모 중에 position이 relative, fixed, absolute 하나라도 있으면 그 부모에 대해 절대적으로 움직이게 됩니다.
-position: fixed;
header {
position: fixed;
top:0;
left:0;
right:0;
}
헤더에 움직이지 않는 메뉴바 만들기 - top, left, right 값을 0을 줘서 맨 윗 자리에 딱 붙임.
- css에서 inline, inline-block, block
- inline
span 태그의 용법과 같음.
수평으로 나란히 배열된다.
화면에 표시되는 영역만큼만 차지합니다.
inline 요소 안에 inline 요소가 포함 가능하나 block 요소는 포함할 수 없습니다.inline 요소 태그: <img>, <br>, <a>, <span>, <input>, <button>, <label> - block
div 태그의 용법과 같음.
하나의 태그가 한 줄, 블록을 차지함.
즉, 해당 요소의 너비가 100%라는 의미입니다.
따라서 그 요소의 왼쪽이나 오른쪽에 다른 요소가 올 수 없으므로 세로로 배열된다.
width, margin, padding을 이용하여 크기나 위치를 지정하려면 block 요소여야 합니다.
block 요소가 다른 block 또는 inline 요소를 감쌀 수 있습니다.
block 요소 태그: <div>, <p>, <h1> ~ <h6>, <ul>, <ol>, <li>, <form> <hr> <table> <address>- inline-block 은 말그대로 inline의 특징과 block의 특징을 모두 가진 display 형태.
inline 형태처럼 수평으로 배치된다 (줄바꿈이 일어나지 않음)
inline과 달리 width와 height를 지정 할 수 있다.
만약 width와 height를 지정하지 않을 경우, inline과 같이 컨텐츠만큼 영역이 잡힌다.
최대 단점 : 반응형 디자인 (Responsive Design) 을 지원하지 않음 inline-block을 화면에 여러개 배치했을때 모니터 크기마다 다르게 나와서 추천하지 않음
