반응형 웹-2일차

이주열·2022년 5월 24일

학습한 내용

실습1. 메뉴 1단 -> 2단으로 적용하기
html파일

nth-child부분을 first와 last로 해주어도 상관이 없다.

기본 설정에서 position:fixed때문에 겹쳐 보인다. 이 부분 static변경
높이도 변경해주고, h1과 nav가 각 50%로로 담당하고 있는 것을 100%로 수정

위와 같이 767px부터는 2단으로 메뉴가 내려오는 것을 확인 가능

실습2.그리드 레이아웃 디자인
화면에다 보이지 않는 모눈종이를 만든다고 생각.
원하는 대로 내용 배치 가능함.
전체 가로 길이가 있을 때, 패딩이나, column gap 도 생각해줘야 함

방법
1. 가변 그리드 레이아웃 - 너비 값 고정 후 백분률과 같은 가변 값으로 지정
2. float 속성
3. flex box layout
4. css 그리드 레이아웃 - 2차원 배치(수평.수직으로 몇 개의 박스를 얼마의 크기로 배치할 지?)

html파일
div class="card" 를 9개 반복 적용 = 다단 컬럼
css파일

각 설정을 마친후 미디어쿼리를 이용하여 900px과 1100px에서 칼럼수를 변경해 준다.

해당 가로 픽셀에 칼럼이 늘어나는 것 확인 가능

실습3. grid-css표준
html파일은 동일한 파일을 사용 후
css파일만 다르게 적용해 본다.
리셋, h1, .card, .card img, .card p 설정을 동일하게 적용후
wrapper 에서 display: grid 적용

이후 미디어 쿼리에서 기준은 동일하게, 칼럼 수를 변경하기 위해 grid-template-columns 적용

2번 실습과 동일한 결과를 볼 수 있다.

실습4. 원 페이지 만들기
필요한 내용이 한 페이지 안에 다 들어갈 것
각 영역마다 배경색, 배경의 명도를 다르게 해서 구분

먼저. https://fontawesome.com/ 이 사이트를 이용하면 그림같은 아이콘, 이미지 들을 글자처럼 이용할 수 있다. 그래서 css에서 글자의 크기라던지, 색상 등을 평소 폰트를 변경해주 듯이 적용하면 된다.
적용하기 위해 링크를 걸어줘야 하고
i 태그를 이용한다.

html파일

제목 부분을 동일한 class로 두어 css적용하기 쉽게 설정. 또한 a태그의 class를 btn으로 두어 버튼은 아니지만, 버튼 모양으로 보이게 설정하려 한다.

폰트 크기에서 rem을 사용하였는데,
특정 기준을 두지 않으면 rem은 body 폰트 크기를 기준으로 값이 적용된다고 한다.
따라서 따로 지정해주지 않으면 default값으로 16px이 적용된다.
또, 이미지의 높이를 100vh로 적용해 두었는데, 딱 내가 보는 화면에서 이미지를 꽉 찾게(맞게) 보여주고 싶을 때 사용한다.
vh는 viewport height의 약자이다.
반응형 웹에서 많이 사용한다고 한다.
마지막으로 미디어쿼리를 사용하며 title의 폰트 크기를 64px로 줄여보기로 하였다. 기준은 700px보다 작아졌을 때 적용되어야 하기에 max-width:700px를 사용하였다.

a태그를 이용해여 버튼 처럼 나타낸 모습이고
아래는 폰트어썸을 이용한 모습.
정말 이미지처럼 보이지만, 글씨로 적용된다.

마지막으로 해당 기준700px밑에서 title클래스의 contact폰트 크기가 줄어든 것을 확인할 수 있었다.