Fixed
position property는 위치를 아주 조금 위로, 아주 조금 오른쪽으로 옮기고 싶을 때 사용한다.
position: fixed; 스크롤을 해도 항상 그 자리에 머물게 된다. (height를 1000vh로 만들어서 스크롤을 길게 만들고 확인해본다.박스가 화면에 계속 머무르고 있다.) 처음 만들어진 자리에 고정 되어 있다.
top, left, right, bottom 라는 property 중 하나만 수정(추가)해도 서로 다른 레이어에 위치하게 된다. 원래는 한 레이어에 맞닿아 있었다. top, left, right, bottom 중 하나만 수정(추가) 하면 원래 있던 div를 신경쓰지 않게 되고, 앞에 있는 레이어로 넘어가게 된다. 즉 position: fixed; 를 사용하고 위치를 조정하면 레이어의 가장 위에 위치하게 된다.
Relative, Absolute
position: static; 레이아웃이 박스를 처음 위치하는 곳에 두는 것.
position: relative; element가 처음 위치한 곳을 기준으로 상하좌우로 조금씩 수정할 수 있다. 조금씩만 오른쪽, 왼쪽으로 옮기고 싶을 때.
⬆️ 예를 들어, top: -10px;
첫 기준점이 중요하다. 거기서부터 원하는대로 수정하는 것이다. 처음 위치를 가져다가 그 점을 기준으로 옮기는 것이다.
position: absolute; top left bottom right를 쓰고 싶을 때 사용할 수 있는데, body의 맨 오른쪽 아래 왼쪽으로 간다. (부모 박스의 기준이 아니라 body 기준)
position: absolute;는 가장 가까운 relative 부모를 기준으로 이동시켜준다.
body를 중심으로 움직이고 싶지 않다면, 부모 div에 position: relative;를 해주면, 부모 div 박스를 중심으로 움직인다. ⬇️
relative 한 것을 못 찾으면(부모 div에 position: relative;를 안해주면) body를 기준으로 옮겨질 것이다.
이렇게 position은 fixed, relative, absolute, 디폴트로 static 이 있다.
박스를 absoulte로 만들고 부모를 relative하게 만들지 않았는데 왜 부모가 아닌 body를 기준으로 옮기는지 이유를 몰라선 안된다! 부모가 relative하지 않기 때문!
<정리>
1. positon: static (default)
2. position: fixed
element가 처음 생성된 자리에 고정. 이동이 되면 가장 위의 레이어에 놓이게 된다.
3. position: relative;
element가 '처음 생성된 위치'를 기준점으로, top bottom left right으로 위치를 조금씩 수정할 수 있다.
4. position: absolute;
가장 가까운 relative 부모를 기준으로 이동.
position:relative; 를 해주면 부모가 된다. (없으면 body)
Blocks and Inlines
대부분 block이다. 옆에 아무 것도 올 수 없다.
block이 아닌 것들, 즉 inline을 기억하자!
<span>, <a>, <image>, <code>, <link>, ...
Border
border: box의 경계.
Classes
inline은 모든 속성이 다 적용되지 않고, 일부만 적용되는 경우도 있다. block으로 바꿔주면 된다.
요소를 가리킬 수 있으면서도 겹쳐도 되는 방법. 여러 요소들이 사용할 수 있도록. => class
.(classname) 로 사용하면 된다.
#tomato는 id="tomato"라는 뜻과 같다.
.tomato는 class="tomato"라는 뜻과 같다. class는 유일할 필요가 없다. 여러 개의 class명을 가질 수도 있다. <span class=tomato hello honey potato> id는 여러 개를 가질 수 없다.
Inline Block
div는 기본적으로 block. display: inline; 으로 바꿔주면 브라우저에 아무것도 보이지 않게 된다. inline은 너비랑 높이를 가질 수 없기 때문에!
inline-block은 block으로 인식하게 한다. 높이도 가질 수 있고, 사방에 margin도 가질 수 있다. 그리고 바로 옆에 다른 요소가 올 수 있다.
그러나 문제가 많다. 우선 default 값으로 주어진 것에 문제가 있다. 요소들 사이에 빈 공간이 있다. 이유는 모른다.
⬆️ margin, padding 없는데 공간이 있다. 우리는 이 공간을 만들지 않았다.
또 다른 단점은 정해진 형식이 없다는 것이다. 박스를 크게하면 요소들 사이에 빈 공간이 좁아졌다. (이유는 모른다.)
inline-block은 responsive design(반응형 디자인)을 지원하지 않는다. 창 크기가 달라지면 영향을 받는다는 것이다. 모니터의 크기에 따라 달라진다는 것이다. (한 줄에 박스들을 넣기 위해 margin-right: 10.015px; 로 지정했는데, 창 크기가 달라지면 아무 소용없다.) inline-block에 대해서는 display 속성 중에 이런 옵션도 있다는 정도로 알아두면 된다.
<정리>
block을 inline 속성으로 바꾸면 오류가 발생한다.
대신 display : inline-block을 활용하면 inline으로 block을 사용할 수 있음.
하지만
1. 정해진 형식이 없으며
2. 개체간 거리가 있음
3. respponsive design(반응형 디자인)을 지원하지 않음. => 개인마다 통일된 디자인이 아님.
=> 별로다.
flex로 해결할 수 있음!
<정리 2>
inline 엘리먼트를 사용할 때 주의할 점은, width와 height 속성을 지정해도 무시된다는 것이다. 왜냐하면 해당 태그가 마크업하고 있는 컨텐츠의 크기 만큼만 공간을 차지하도록 되어 있기 때문이다. 또한, margin과 padding 속성은 좌우 간격만 반영이 되고, 상하 간격은 반영이 되지 않는다.
반면 block 엘리먼트는 block 엘리먼트는 inline 엘리먼트와 달리 width, height, margin, padding 속성이 모두 반영된다. (내가 원하는 사이즈의 박스를 만들고 싶을때 div 태그가 편하게 쓰이는 이유가 바로 이것이다.)
display 속성이 inline-block으로 지정된 엘리먼트는 이 두 가지 속성을 합친것 과 같다. 기본적으로 inline 엘리먼트처럼 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치되지만, block 엘리먼트처럼 width와 height 속성 지정 및 margin과 padding 속성의 상하 간격 지정이 가능하다. 다시 말해서, 박스 안쪽은 block 엘리먼트의 규칙을 따르면서 박스 바깥쪽은 inline 엘리먼트의 규칙을 따르게 되는 것이다. inline-block 엘리먼트는 명시적으로 해당 엘리먼트의 스타일을 display: inline-block로 지정해줘야 한다.
