참고
display
- inline: content 자체만 꾸며준다. CSS에서
width,height를 무시하고, 컨텐츠에 들어있는 내용에 맞춰서 변경된다. - inline-block: 한 줄에 다 넣는데, block 단위로 넣는다.
- block: 상자인데, 한 줄에 하나씩 들어간다.
position
1. position은 기본 값으로 static을 가지고 있다.
.container {
background: yellow;
top: 20px;
left: 20px;
position: static; // 기본값이 static이라서 top, left property에 px값을 주어도 위치가 변화지 않는다.
}2. position: relative, 원래 아이템이 있어야하는 자리에서 상대적으로 이동한다.
.container {
background: yellow;
top: 20px;
left: 20px;
position: relative; // position의 value를 relative로 바꾸면 top, left에 준 value만큼 이동하는 것을 볼 수 있다.
}3. postion: absolute, 아이템이 담겨있는 상자 안에서 이동한다.(여기에서는 container를 기준으로 top, left 값을 준 만큼 이동한다.)
.box {
background: blue;
left: 20px;
top: 20px;
position: absolute;
}4. position: fixed, 아이템이 담겨있는 상자 안에서 벗어나서, window에서 이동한다. (웹페이지 안에서 top, left 값을 준 만큼 이동)
.box {
background: blue;
left: 20px;
top: 20px;
position: fixed;
}5. position: sticky, 원래 있는 자리에 있으면서 스크롤링을 해도 안 보이지않고, 원래 있던 자리에 그대로 있다.
.box {
background: blue;
left: 20px;
top: 20px;
position: sticky; // top, right, left, bottom 중 하나라도 스타일 되어야 적용이 된다.
}5. position 정리
- position의 기본값은 static이다.
- relative를 쓰면, 원래 있어야하는 자리에서 변경된다.
- absolute를 쓰면, 가까이에 있는 상자에서 위치 변경된다.
- fixed를 쓰면, 상자에서 벗어나서 페이지 상에서 위치 변경된다.
- sticky를 쓰면, 원래 있어야하는 자리에 있는데, 스크롤링을 해도, 그 자리에 계속 붙어있다.
추가적인 내용
- 예전에는 jQuery, Bootstrap 같은 라이브러리를 많이 사용했으나, 요즘에는 CSS가 강력해지고, 모든 것들이 발달되었기때문에 jQuery, Bootstrap이 필요하지 않다. (다만, 두 라이브러리를 사용하는 회사가 있다면 배워야한다.)
- 최신 기술이 Chrome, Safari, Edge 등 모든 브라우저에 호환이 되는지 검사해야한다. MDN 또는 Can I Use에서 확인 할 수 있다.
- 호환이 잘 안되는 internet explorer 같은 브라우저는 해외에서 많이 안 쓰니까 무시하고, 나중에 PostCSS와 같은 프레임워크를 쓰면 개발자는 최신 CSS로 깔끔하게 정리하고, PostCSS가 개발자를 대신해서 더러운 작업들을 해준다.
- 배울 때는 너무 걱정하지말자.
👨🏻💻☕️ 🎹🎵 🐰🎶 🛫📷