[SEB_FE_44] Section 1-Unit3 [CSS]기초

css를 활용해 어떤식으로 html을 디자인 하는지를 배웠다. 어제 과제로 만들었던 html로만 만든 자기소개 페이지를 css 스타일을 넣어 더 가독성이 좋은 페이지로 만드는 시간을 가졌다. 혼자 과제를 진행하며 제일 중요하게 생각했던 부분은

'어떤식으로 반응형 페이지를 만들것인가?'

에 대한 부분이었다.
과제를 진행하면서 반응형 박스를 만드는것은

.main-01{
    margin-left: auto;
    margin-right: auto;
    padding-top: 25px;
    width: 60%;
    height: 50%;
}

양쪽 margin을 auto로 두는 방식으로 만든 box들은 가운데 정렬을 하였고
이 box안쪽으로

.chat-box-04{
    padding: 5px;
    float: left;
}
.chat-box > button{
    float: right;
    margin-right: 5px;
}

와 같은 float속성을 활용해 배치를 진행 하였다.

오후 실시간 세션시간에는 멘토님이 공부했던 것들을 다시 짚어주는 시간을 가졌는데 css상대단위 단위 (오전엔 분명히 봤지만 잊어버린) rem, vh, vw 등에 대해서도 설명해 주셨다.
vh(viewport height)와 vw(viewport width)는 보는 페이지를 기준을로 크기가 반응을 하기 때문에 더 자연스러운 반응형 페이지를 만들 수 있을것 같다.

css 단위비교(%, vh, vw, em, rem) _ 참고