📌Today I Learned

CSS

ex23_display

ex24_float

ex25_float

ex26

CSS 초기화 작업(브라우저 설정 없애기)
1. Reset CSS -> 완전 다 날리기
2. Normalize CSS -> 기초 작업 살짝 되어있음

CSS 디자인 프레임워크

• 다양한 서식 작업을 미리 만들어 제공하는 세트 (라이브러리)

1. Bootstrap
2. Foundation
3. Tailwind
4. Pure.css
5. Meterialize
6. Skeleton
7. Semantic UI

ex27_position

요소의 위치, position
1. padding > 부모가 자식의 위치 지정
2. margin > 스스로 위치 지정
3. position > 정석(CSS1 ~ CSS3)
4. transform > 정석(CSS3)

position

• 좌표값 사용 > 위치 지정
• x(left), y(top) > 좌표를 지정하는 방식이 여러개 제공 > 원점(기준점)이 다양

1. position: static

   • 기본값
   • 정적 좌표
   • x, y 사용 불가능 (좌표를 줘도 소용 없음)
   • 워드 프로세스 방식 > FlowLayout
   • 코딩 순서대로 출력되는 방식

2. position: absolute

   • 절대 좌표
   • left, top
   • 문서의 좌측 상단을 원점으로 한다.(X) > 자신의 직계 조상 중에서 가장 처음으로 만나는 (position이 static이 아닌) 태그를 원점으로 한다.(O)
   • 원래 태그가 있던 공간은 사라진다.

3. position: relative

   • 상대 좌표
   • left, top
   • 자신의 위치를 원점으로 한다.
   • 원래 태그가 있던 공간이 그대로 유지된다.

4. position: fixed

   • 고정 좌표
   • left, top
   • 문서의 좌측 상단을 원점으로 한다.(X) > 브라우저 창의 좌측 상단을 원점으로 한다.(O) > 스크롤에 반응 안하고, 고정된다.
   • 원래 태그가 있던 공간은 사라진다.

ex28_margin

ex29_align

태그의 수평 정렬

• 인라인 태그 vs 블럭 태그