TIL 2. &html/css 기초(2)

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. CSS Layout

2-1. 영역 구분 태그

• 일반적으로 div태그를 사용해 각 영역을 구분하는데, div태그는 non-sementic(의미가 드러나지 않는) 태그이기 때문에 class나 id를 명시해 어떤 태그인지를 알려주게 된다.
• 이런 div를 대신해 조금 더 sementic한 태그를 제공하고 있으므로 이를 사용할 줄 아는 것도 중요하다.
• sementic 태그의 종류는 여러가지가 있지만 기본적으로 다음과 같은 레이아웃을 정의하는데 사용되는 것들이 있다.