1. position 속성 - relative, absolute, fixed
position은 특정 요소를 지정한 위치로 이동시켜주는 프로퍼티이다.
사용가능한 값은 총 4가지로
- position : static;
- position : relative;
- position : absolute;
- position : fixed;
가 있으며 이 중 static은 거의 사용되지 않는다.
- relative
기존에 있던 위치를 기준으로 이동한다.
좌표 지정을 위해서는 top, bottom, left, right 등과 함께 사용한다.
- absolute
부모 중 position 이 relative, fixed, absolute 가운데 한가지라도 가지고 있다면 그 부모의 위치에 대해 절대적으로 움직인다.
또한 absolute 및 fixed로 position 을 설정할 시 가로 크기가 100%가 되는 block 태그의 특징이 사라지게 된다.
- fixed
고정되어 있다는 의미로 브라우저에서 보여지는 화면에 고정시킨다.
브라우저 화면을 기준으로 top, bottom, left, right 등을 이용하여 위치를 지정할 수 있다.
2. inline, inline-block, block 에 대해서
- inline
해당 text 또는 content 의 길이 만큼의 width만을 가지는 성질. 그렇기 때문에 바로 줄을 띄우지 않고 바로 옆에 추가로 text를 작성할 수 있다.
문구 중간에 몇몇 단어에 간단한 효과를 주기 위해 주로 사용할 수 있다.
그러나 가로/세로 적용 불가, margin, padding-top/bottom 값 적용 불가 등의 문제점이 존재한다.
- inline-block
inline의 성질을 가지고 있는 태그를 block의 성질로 변경해준다.
기존에 inline 성질일때 불가능했던 기능들이 적용 가능해진다.
- block
html 상의 최대한의 width를 가지는 성질.
최대한의 width를 가지기 때문에 text 또는 content의 길이가 짧더라도 한줄에 한개의 요소만 적용이 가능하다.
위 세가지를 css에서 적절히 사용하면 기존에 inline 성질 태그, block 성질 태그라고 하더라도 언제든 변경하여 사용할 수 있다.
3. float에 대해서
float은 오른쪽 또는 왼쪽끝으로 특정 요소를 배치하여 웹페이지의 레이아웃을 다양하게 만들 수 있는 프로퍼티이다.
float:left 또는 float:right 등을 사용하여 좌우 끝으로 특정 content를 배치할 수 있으며 그 옆에 또 다른 content를 배치할 수 있다.
div 안에 있는 img를 float을 사용하여 좌/우 끝으로 배치하였는데 이미지의 크기가 div의 크기를 초과하여 div 벗어난 경우 해당 css에서 해당 div에 overflow:auto; 를 사용해주면 크기를 맞출 수 있다.
