position에서 사용하는 값은 relative, absolute, fixed 3가지가 있다.🐶
static은 거의 사용하지 않는다.
- position: relative;
- position: absolute;
- position: fixed;
1. relative
자체로는 특별한 의미가 없지만, 딱히 어느 위치로 이동하지는 않는다.
위치를 이동시켜주는 top, right, bottom, left 프로퍼티가 있어야 원래의 위치에서 이동할 수 있다.
여기서 top, right, bottom, left는 position이 있을 때만 적용되는 프로퍼티이다.
.relative {
position: relative;
}
.top-20 {
top: -20px;
left: 30px;
} div.relative.top-20은 위로 20px 이동하고, 왼쪽에서 30px만큼 떨어졌다.
2. absolute
이름과 같이 절대적인 위치에 둘 수 있다.
특정 부모에 대해 절대적으로 움직이게 되고 부모중에 position이 relative, fixed, absolute 하나라도 있으면 그 부모에 대해 절대적으로 움직이게 된다.
일반적으로 absolute를 쓸 경우, 절대적으로 움직이고 싶은 부모에게 position: relative;를 부여하면 된다.
- p태그는 block-element이기 때문에 가로크기가 부모 너비만큼 전부 차지해야 하는데, 마치 inline처럼 내용의 크기만큼만 너비가 생긴다.
이렇게 absolute 값을 갖게 되면, 내용의 크기만큼만 가로크기가 생긴다.
3. fixed
말그대로 고정됐다는 뜻 (ex, 애플 상단바 ...)
absolute는 relative를 가진 부모가 필요했는데, fixed는 부모가 필요없다.
fixed는 눈에 보이는 브라우저 화면 크기만큼, 화면 내에서만 움직인다.
예를 들어, right: 0; bottom: 0; 라고 설정하면 오른쪽 하단에 붙어져서 나온다.
*컬러 설정 중 rgba로 설정한다면 왼쪽부터 세가지는 컬러에 대한 수치이며, 마지막은 opacity 불투명도를 나타낸다.
css에서 display속성은 웹페이지 상에서 엘리먼트들이 어떻게 보여지고 다른 엘리먼트와 어떻게 상호 배치되는지 결정한다. 여러가지 display 속성값 중에서 기본이지만 헷갈릴 수 있는 3가지를 짚고 넘어가즈앗 !!! 🙋🏻♀️🙋🏻♀️🙋🏻♀️
4. inline
display 속성이 inline으로 지정된 엘리먼트는 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치된다.
대표적인 inline 엘리먼트 : <span>, <a>, <em>태그 등을 들 수 있다.
5. block
display 속성이 block으로 지정된 엘리먼트는 전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄을 차지한다.
대표적인 block 엘리먼트 : <div>, <p>, <h1>태그 등을 예로 들 수 있다.
6. inline-block
display 속성이 inline-block으로 지정된 엘리먼트는 기본적으로 inline 엘리먼트처럼 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치됩니다. 하지만 inline 엘리먼트에서 불가능하던 width와 height 속성 지정 및 margin과 padding 속성의 상하 간격 지정이 가능해집니다.
대표적인 inline-block 엘리먼트 : <button>, <select>태그 등을 예로 들 수 있다.
inline-block 엘리먼트는 위와 같이 명시적으로 헤당 엘리먼트의 스타일을 display: inline-block로 지정해줘야 합니다. inline-block을 이용하면 여러 개의 엘리먼트를 한 줄에 정확히 원하는 너비만큼 배치할 수 있기 때문에 레이아웃에 활용할 수 있습니다
7. float
float은 주로 이미지 주변에 텍스트를 감싸기 위해 만들어진 프로퍼티입니다.
하지만 페이지 전체의 레이아웃을 잡을 때에도 정말 중요한 도구가 된다.
float 속성에는 left, right, none 가운데 하나를 값으로 줄 수 있다.
그런데 float 속성을 가진 요소는 부모가 높이를 인지할 수 없어서 부모를 벗어나기도 한다.
float 해결하려면 clear 라는 속성이 필요하다.
자주 많이 사용하는 해결방법은 바깥 div(.wecode-box)에 overflow: hidden;을 주기
