- position 속성 - relative, absolute, fixed
html 구조 순이 아닌 어느 위치든 원하는 위치로 이동하게 만들어주는 position 속성
position: static;// default값position: relative;// 위치를 이동시켜주는 top,right,bottom,left 속성 추가시 원래의 위치에서 이동position: absolute;// 특정 부모에 대해 절대적인 위치로 이동
부모 중에 position이 relative, fixed, absolute 하나라도 있으면 그 부모에 대해 절대적으로 움직인다.(일반적으로 relative 사용)position: fixed;// 특정 위치에 고정
position이 absolute이거나 fixed가 되면 주변의 요소에 상관없이 지정한 위치에 위치하게 되면서 해당 영역이 무의미해진다. 다른 요소들과 겹칠 수 있으므로 이때는 padding 이나 margin 속성을 사용하여 겹친 부분을 떨어뜨릴 수 있다.
- display 속성: inline, inline-block, block
block 요소의 의미는, 이 요소 옆(동일선상)에 다른 요소를 붙여넣을 수 없다는 뜻이다.
ex)<header>, <footer>, <p>, <li>, <table>, <div>, <h1>
inline 요소는 요소끼리 서로 한 줄에, 동일선상에 위치할 수 있다는 뜻이다.
ex)<span>, <a>, <img>
- display: inline-block; //inline 성질로 변경
- display: inline //inline 성질로 변경
- display: block; // block 성질로 변경
inline-block과 inline의 차이는?
inline-block의 경우 width, height, margin, padding-top, padding-bottom, line-height이 적용 가능하며 inline은 불가능하다.
냐하