1) 학습한 내용

1.메뉴 두 줄로 설정

position: fixed; : 메뉴가 스크롤을 내려도 고정되어 움직이지 않음.
padding-top:90px; : 본문 내용이 intro(메뉴)에 가려지지 않게 intro보다 크게 padding을 줌

화면이 768px보다 클 때

-메뉴가 1단

화면이 768px보다 작을 때

-메뉴가 2단

2.grid-column

height: 150px; line-height: 150px; : 텍스트 상하 가운데 정렬
margin:50px auto; : 50px띄우고 가운데 정렬

기본

column-count:2; :기본 column수는 2개

3.grid-표준

기본

display: grid; : grid로 설정
grid-template-columns: repeat(2,200px); :기본 columns수 2개

기본

900px 이상

-column수를 3개

1100px 이상

-column수를 4개

4.과제

미디어쿼리 사용해서

• 화면 크기가 700px보다 작을 때
• 폰트 사이즈를 64px로 줄이기

one-page 과제 제출

2) 학습내용 중 어려웠던 점

텍스트를 중앙 정렬하는게 어려웠다

3) 해결방법

상하 중앙 정렬,좌우 중앙 정렬을 나눠서 설명해주셔서 이해하게 되었다.

4) 학습소감

처음에 어려웠던 내용도 반복해서 코드를 작성하다보니 조금씩 이해가 되어서 좋았다.