다이어리 만들기
학습한 내용을 바탕으로 다이어리 사이트 만들기 실습을 진행했다. CSS를 따로 적용했을 때는 간단하다고 느낀 내용이 사이트 전체를 만드는 것에 적용하니 어렵게 다가왔다. 코드를 적기는 하지만 이게 어떤 기능인지 이해가 되지 않아 시간을 두고 코드를 하나하나 분석하는 작업이 필요하다 느꼈다.
미디어쿼리 적용하기
HTML로 만든 웹페이지에 미디어쿼리를 적용하는 실습을 미리 진행해보았다. 수업시간에 같이 하지만 어떻게 적용되는지 먼저 학습할 필요성을 느껴 자습 시간에 만들어보았다. 기본 사이즈의 사이트 만드는 것은 조금 시간이 걸릴 뿐 작업하는데 큰 어려움은 없었다.
사이트를 어떤 구조로, 덩어리는 어떻게 나눌 것인지 파악을 한 후 flex를 이용하여 사이트의 위치를 조정하는 작업을 진행했다. 페이지 이동은 a 태그를 할 것인지 button을 할 것인지 정하여 사이트를 만들었다. 그런 다음 미디어쿼리를 적용하기 위해 @media를 사용했는데 문제는 여기부터 발생했다.
사이즈는 총 3가지가 있다. 최대 사이즈, 최소 사이즈, 중간 사이즈.
문제는 중간 사이즈에 @media를 적용할 때이다. 중간 사이즈는 min-width, max-width 두 가지가 모두 필요해서 작성을 했는데 중간 사이즈를 적용하면 최소, 최대 사이즈의 값이 적용되지 않는 문제가 발생했다. 이유가 무엇인지 찾아보니 @media (min-width: 401px) , (max-width: 900px){}이 아닌 @media (min-width: 401px) and (max-width: 900px){}로 값을 지정해주어야 되었다.
값에 문제가 있는 것인지 display 적용에 문제가 있는 것인지 다른 코드를 보면서 혼자 고민했는데 답은 아주 쉽고 가깝고 간단한 곳에 있었다.
,를 and로 바꾼 뒤 적용하니 내가 원하는 미디어쿼리 값들이 적용되었다.
CSS 코드를 살펴보면 조금 더 간단하게 줄일 수 있을 것 같지만 혼자 고민해보고 실습한 코드로는 지금까지 한 코드가 최선인 것 같다.
내일 학습시간에 같이 한 코드와 내 코드를 비교하면서 코드 작성을 더 공부해야겠다.
