10월 29일 일지

오늘 공부에 투자한 순수한 시간: 1h

학습한 개념:
마진: ex) 할일 목록 -> 할일 목록이 딱 붙어 보이면 마진을 늘리면 됨
패딩: ex) 할일 목록 -> 할일 목록 속 글자가 테두리에 딱 붙어 있으면 패딩을 늘리면 됨.

*미디어 쿼리

• media는 출력 매체(화면, 인쇄, 스크린 리더)를 뜻하고, query는 질문
  -> 지금 이 페이지를 보여주는 매체가 어떤 사애인지 묻는 문법
  -> 이전 pc용과 모바일 사이트를 따로 만들어서 관리해야 했지만, html 하나에 pc, 태블릿, 폰에 모두 화면을 맞출 수 있음.

ex)

1. body {
   grid-template-columns: 2fr 1fr;
   grid-template-areas: "header header" "main aside" "footer footer";
   }
   @media (max-width: 768px) {
   body {
   grid-template-columns: 1fr;
   grid-template-areas: "header" "main" "aside" "footer";
   }
   }

1. 데스크톱 우선: 넓은 화면 기준으로 만들고 좁아지면 고치기 (지금 플래너 방식)
   @media (max-width: 768px) { .task-form { flex-wrap: wrap; } }

*wrap이 줄바꿈인 이유: wrap(감싸다)(실의 끝에 닿으면 감싸져서 다시 돌아오는 것 연상)

2. 모바일 우선: 폰 기준으로 만들고 넓어지면 추가하기 (요즘 권장 방식)
   .layout { display: block; }
   @media (min-width: 769px) { .layout { display: grid; grid-template-columns: 2fr 1fr; } }

3. 다크 모드: 사용자의 OS 설정에 맞추기
   @media (prefers-color-scheme: dark) { :root { --bg: #0f131c; --text: #e8ebf3; } }

4. 인쇄: 플래너를 종이로 뽑을 때 버튼 숨기기
   @media print { button, .task-form { display: none; } }

5. 마우스가 있는 기기에서만 hover 효과 주기
   @media (hover: hover) { .task:hover { background: #eef1f7; } }

@media (조건) { } "만약 (조건)이 맞으면, { } 안의 규칙을 적용해"
대상 { } "(대상)에게 { } 안의 지시를 내려"
속성:값; "(속성)은 (값으로 해)." ;는 문장 끝 마침표
.이름 "class 이름이 ~인 요소"

AI 대화 내역 링크: https://claude.ai/share/dc5e6809-2f55-4ba8-924a-1a3db279dd03

잘한 점: 코드를 하나하나 이해해보려고 노력한 점.