replit 과제1. 레이아웃의 모든 것

1. Position

1-1. Position: relative;

• relative만으로는 아무 변화도 없지만, 그 안에 위치를 이동시켜주는 top/right/bottom/left 속성을 주면 원래의 위치에서 속성값을 준 만큼 이동하게 된다.

.relative {
  position: relative;
}
.top-20 {
  top: -20px;
  left: 30px;
}

relative만 준 div.relative는 아무 변화가 없지만 top:-20px, left:30px를 준 div.relative.top-20은 각각 아래, 오른쪽으로 이동한 것을 볼 수 있다. (각 방향은 주어진 숫자만큼 그 뱡향에서부터 이동한다는 뜻이고, 음수값일 경우 그 반대로 이동한다)

1-2. Position: absolute;

• absolute는 부모를 기준으로 위치를 정한다.
• 일반적으로 absolute를 사용할 때는 기준으로 삼고자 하는 부모에게 relative 속성을 부여한다.
• absolute 값을 갖게 되면 block-element도 부모의 크기가 아니라 내용의 크기만큼만 생성된다.

p {
  margin: 0;
  background-color: yellow;
}
.absolute {
  position: absolute;
}
.right-0 {
  right: 0;
  bottom: 0;
}

block-element인 p태그가 있음에도 내용의 크기만큼만 너비가 생겼다.

1-3. Position: fixed;

• fixed는 고정된 위치에 놓고 싶을 때 사용하는데, 페이지가 스크롤 되더라도 움직이지 않는다.
• fixed를 사용할 때는 시작 위치를 지정한 후 고정해야 하므로 top:0 left:0 등으로 위치를 지정해준다.
• header가 fixed될 경우 body 안에 있는 내용 중 처음 내용이 header와 겹칠 수 있다. 이 경우 body에 padding-top을 주거나 내용에 margin-top을 주는 방식으로 해결할 수 있다.

2.Display

2-1. inline

• inline 엘리먼트는 내용의 영역만큼만 차지하여 태그를 추가하면 옆으로 붙는 속성을 가진다.
• 그렇기 때문에 내용의 크기를 바꾸지 않고 width의 크기를 바꾸더라도 변하지 않는다.
• inline 엘리먼트의 예로는 <span>, <a> 등이 있다.

2-2. block

• block 엘리먼트는 부모 태그의 너비만큼 크기를 차지하며, width를 사용해 너비를 바꿀 수 있다.
• block 엘리먼트의 예로는 <div>, <p> 등이 있다.

2-3. inline-block

• inline-block은 이름그대로, inline속성과 block속성을 모두 가지고 있는 엘리먼트이다.
• inline과 다른 점은 크기를 설정할 수 있다는 점과 위,아래 margin/padding이 존재한다는 점이다.
• 반면 block과 다른 점은 엘리먼트가 추가되었을 때 개행하지 않고 오른쪽으로 붙는다는 점이다.

3. float

• 페이지의 레이아웃을 만들 float을 사용할 수 있다.
• float은 이름처럼 떠있는 요소이기 때문에 그 다음 요소들이 float이 적용된 엘리먼트 다음에 나타나는 것이 아니라 겹치듯 나타난다. 이를 해결하기 위한 방법으로, float이 적용된 엘리먼트의 부모 태그에 overflow: hidden; 속성을 줄 수 있다.