본 학습은 1분 코딩 'CSS 레이아웃 - 처음부터 반응형 웹까지 핵심만 간단히 정리해 봅시다.' 을 시청하고 모르는 내용을 정리하였다.

1. CSS Layout : 기본 ~ 반응형 웹

5) 부모와 자식 & vertical align

.container 안에 .item item-a와 .item item-b를
column으로 바꾸고자 한다.

.item item-a와 .item item-b 의 width를 변경하고 display를 inline-block으로 변경했지만 두개가 현재 row로 되어 있다.

왜?

바로, 하단과 같이 < /section과 < / section class= "item item-b"> 사이에 공백이 있기 때문이다.

물! 론!
그냥 공백을 지우기 위해 < /section>옆으로 바로 붙여줄 수 있지만
보기 싫은 코딩이 되어버린다.
따라서, 검정 부분을 없애기 위해 폰트사이즈를 0으로 만들어보자.

그랬더니 이번엔 자식태그가 영향을 받아서 section에 들어간 모든 내용이 사라져 버렸다. 허허. 하지만 해결하는 방법은 간단하다.
부모는 폰트를 0을 주고, 자식에게는 따로 폰트 크기를 지정 하는 것!

section b의 top부분에 빈 공간이 보인다.
vertical-align을 줘서 수직공간을 채워보자.
(fyi, https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align)

6) max-width

width가 px이 아닌 %단위로 되어 있어서, 왼쪽 해당창의 크기를 늘리거나 줄이면 % 비율을 지켜가며 자동적으로 늘어난다.

만약 max-width라는 property를 사용하게되면,
해당 크기보다 작을 땐 상관없지만, 그 크기를 넘을경우 아래처럼 공백이 생기는등 달라진다.

(fyi, https://www.w3schools.com/cssref/pr_dim_max-width.asp)

7) margin-left/right: auto;

만약 위에 처럼 empty space가 있을 시, 해당 space를 section a/b 가 반반 공간을 나눠 가지려면? (= 혹은 empty space있을 시, section a/b 중앙 정렬 시키고 싶다면?)

답은 margin-left/right: auto; 를 사용하면 된다.

그리고 margin-left:auto; margin-right: auto; 대신
margin: 0 auto;로 쓸 수 있다.
0 은 상/하 , auto쓴 부분은 좌/우 이다.

8) float

지금까지 section a와 b를 column으로 위치 시켜봤다.
div가 block element이였지만, inline-block으로 변경해주면서
다양한 attribute를 사용하여 진행했다.

이 방법 외에 간단하게 a,b를 column으로 위치시킬 수 있는 방법이 있는데
그것은 float을 사용하는 것 이다,

float= left;를 사용하였더니 section a (왼쪽) 로 section b가 감싸는 것을 확인 할 수 있다.

그런데 이러한 속성때문에 발생하는 문제가 있는데
바로, 이렇게 다음 코드도 왼쪽으로 붙는 것 이다

이 부분은 float: clear;로 해결 할 수 있다.

float의 또다른 특징은 만약 자식태그가 float을 쓰면, 부모 태그는
자식을 '없는 자식'이라고 생각하여 부모태그에 속하는 background-color나 font-size등 적용되지 않는다.