11월 4일 공부일지

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

학습한 개념
css 레이아웃
1. 너비제한 + 가운데 정렬
max-width: 960px
최대 960까지만 넓어짐. 화면이 더 작으면 화면에 맞춰 줄어듦.

(최대 960하는 이유는 제한이 없으면 한 줄이 화면 끝에서 끝까지 이어지면 가독서잉 떨어짐.
업계에서 오래쓰던 기준값)

margin: 0 auto 위아래0, 좌우 auto=남은 공간을 양쪽에 똑같이 -> 가운데 정렬
padding: 0 16px 폰에서 글자가 화면 가장자리에 붙지 않게 좌우 16px

2. 이미지 넘침 방지
: html에서 img에 width="400”을 줬기 때문에, 카드가 400보다 좁아지면 이미지가 카드 밖으로 나올 수 있음

max-width: 100% : 부모(카드) 너비를넘지마라
height: auto : 너비가 줄면 높이도 비율대로 줄여라

3. 카드 나란히:grid
section에 grid를 걸면, h2제목까지 카드 한칸으로 취급됨. 그래서 div로 따로 묶어줘야함.

div는 의미없는 묶음

계란판 = div.card-list (Grid를 건 부모)

계란 = article 카드들 (자식)

계란을 넣으면 왼쪽 위부터 순서대로 한 칸씩 채워지고, 줄이 차면 다음 줄로

display: grid 표처럼 배치하겠다
grid-template-columns 칸을 어떻게 나눌지
gap: 20px 칸사이 간격

repeat(auto-fill, minmax(280px, 1fr))
minimal (최소, 최대)

1fr = 1 fraction(1조각). 남은 공간을 똑같이 나눈다 라는 뜻
auto-fill 칸 개수 규칙
repeat(개수, 크기)

-> 칸을 최소 280으로 만들고, 들어가는 만큼 넣고, 남은 공간은 똑같이 나눠 채워라

text-decoration: none : 링크 밑줄 없애기
글자에 붙는 장식을 말하며 none은 그장식 없애라는 뜻
display: inline-block : 글자처럼 옆으로 나란히

- block : 한줄 전체를 차지하는 상자/ inline 글자처름 흐르는 요소 a, strong,img 등)
-배치 : block 한 줄씩 쌓임/ inline : 옆으로 나란히

list-style: none : li 앞에 점 없애기
:hover : 마우스 올렸을때 적용

@는 css특수 명령
이런것들을 at-rule(앳 규칙)
일반규칙은 h1라인데, @media 인경우는 이런 조건일 때만 아래 규칙을 적용해라

. : class
#: id
@: 특수명령

@media :화면 조건별
@import: 다른 css파일 불러오기
@font-face:웹폰트 등록
@keyframes: 애니메이션정의


AI 대화 내역 링크:

(링크 생성 방법)

클로드: https://claude.ai/share/a195690f-4515-4811-b68d-ea8672415f53

오늘 잘한 점: css 마무리! 

오늘 부족했던 점: 지난주 몇일 빠져서 .. 좀더 하려고하는데 뜻ㅠ로 잘 되지않네요 ㅠㅠ마음에 들진않지만 학습하고 경헙해보는 정도이기때문에 여기까지..하겠습니다..
js에 좀더 시간을 써보겠습니다.

오늘 총평: 키워드들이 오늘은 좀 중복되었습니다. 그래서 이해하고 머릿속에 정리하려고 했습니다. 그리고 또 헷갈리면 다시 물어보고 했습니다. 앞에서 이해했다고 생각했던것들이 좀더 정리가 되었습니다.