[복습하기1] 블로그 게시글 만들기

* React를 하다보니 html/css의 부족함을 알게되고... html/css -> js -> react로 다시 회귀 중

* 코딩애플 수업 후 복습하는 과정

* 참고자료 

[css] clear(none, both, left, right) 의 속성 (tistory.com)

 

[핵심 정리]

 

Q1. 글과 이미지를 동시에 배치하려면?
[ 글      : 80%        ] [ 이미지 : 20% ]
-> 핵심은 각각 float: left; 사용할 것

Q2. 컨테이너에 왜 
  display: block;
  margin-left: auto;
  margin-right: auto; 넣는 이유는?

-> container를 웹사이트 중앙에 배치하기


Q3. clear: both;는?

-> 왼쪽, 오른쪽 모두 붙는 float 정렬을 취소한다
* float 속성을 적용한 해당 객체의 다음에 오는 객체가 붙지 않게 하려는 방법
= float 무효화 -> 글자가 아래로 내려감

 

 

[완성본]

https://f2iuu.csb.app/