> For the complete documentation index, see [llms.txt](https://simian114.gitbook.io/blog/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://simian114.gitbook.io/blog/undefined-1/diary/2021/march/20210322.md).

# 20210322(월)

## 2021-03-22

### 1. 학습 날짜

* 2021-03-22

### 2. 학습 시간

* 09:00 \~ 23:30

### 3. 학습 범위 및 주제

* HTML, CSS

### 4. 학습 목표

* 강의 들으면서 html, css 정리

### 5. 학습 정리

* [CSS 팁](https://simian114.gitbook.io/blog/undefined/html-css/undefined-1/css)

### 6. 상세 학습 내용

#### position

* 요소의 position 옵션에는 static, sticky, relative, absolute, fiexd 등이 존재한다.
  * static 은 기본값이다. static 에는 left, top 등의 옵션을 사용해도 아무런 변화가 없다.
  * relative는 자신이 존재하는 박스에서 자신의 위치를 상대적으로 잡는다. left, right 등을 아무리 변경해도 같은 박스의 다른 요소들의 위치는 바뀌지 않는다. 자신의 위치만 수정한다.
  * absolute 는 요소의 위치를 지정한 만큼 움직인다. 중요한건 **기준** 이다. 해당 옵션이 사용되면 기준은 근접 부모 요소 중에서 position 이 static 이 아닌 것들이다. 잘못하면 root 를 기준으로 위치를 지정하게 될 수도 있다.
    * 이럴 때의 꿀팁은 상위 부모의 position 을 relative 로 변경해주는것.
  * sticky는 요소가 존재하는 상위 요소(박스) 에서 상대적인 위치를 잡은 다음에 해당 위치를 계속 고수한다. 스크롤링을 해도 해당 요소는 계속 같은 곳에 둥둥떠있는 모습을 보인다.
  * fiexd 는 sticky 와 다르게 viewport 를 기준으로 포지션을 지정한다. 즉 굉장히 깊은 곳에 선언된 요소라도 fixed 라는 옵션이 쓰인 순간 그 position 은 절대적으로 viewport 에 따라 지정된다.

#### 수평정렬

* 요소는 크게 두 종류로 나눌 수 있다. inline 과 block.

**block**

> margin: auto 를 사용하자

* block 은 사용되면 왠만한 경우 자동으로 margin 이 생긴다. 그리고 이 margin 은 상위 블록의 사이즈에서 자신의 사이즈의 차이만큼 생기고 디폴트로 오른쪽에 생긴다.
  * 이런 이슈 때문에 박스 안에 박스를 만들면 **왼쪽으로 치우쳐있는걸 확인할 수 있다.**
* 이렇게 margin 때문에 정렬이 되지 않을 때는 **margin: auto** 를 사용하면 단박에 정렬을 할 수 있다.

**inline**

> text-align: center 를 사용하자

### 7. 오늘 학습 내용에 대한 개인적인 총평

* 흠.. 뭔가 너무 급하게 서두르는 것 같다. 천천히 하자.
* 오늘은 정리가 부족했다. 내일은 조금은 정리하면서 공부를 진행하자.

### 8. 다음 학습 계획

* 드림코딩 강의 자바스크립트 끝내고 정리하기


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://simian114.gitbook.io/blog/undefined-1/diary/2021/march/20210322.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.