20210322(월)

2021-03-22

1. 학습 날짜

• 2021-03-22

2. 학습 시간

• 09:00 ~ 23:30

3. 학습 범위 및 주제

• HTML, CSS

4. 학습 목표

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

5. 학습 정리

• 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. 다음 학습 계획

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