11월 2일 공부일지

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

학습한 개념
이미지+article 넣기

1. 이미지img
src - 이미지 파일 위치
(source) 원천 출처

alt - dlalwl eotls qhduwnf tjfaud
(alternative) 대체,대안
: 이미지 경로가 틀리거나, 로딩 실패시 이 글자가 대신 표시됨.
시각장애인용 스크린리더가 이 글자를 읽어줌

width/height 크기(px)
: 이미지는 글자보다 늦게 로딩이됨.
크기를 미리 알려주지 않으면 이미지가 뜨는 순간 아래 내용이 밀려남. 미리 자리를 잡아두는 용도.

2. Article
개념: 지금 식당 하나는 h3+p+p+ul+p 구조의 태그5개. 이걸 감싸서 식당1개=한 묶음으로 만듦.

기준: 그 부분만 떼어서 다른 곳에 붙여도 의미가 통하는가? 식당 정보 하나는 단독으로 봐도 완결 되니 적용가능. (예를들어 뉴스기나 하나, 블로그 글 하나, 상품카드 하나 등)

section과의 차이

section 의미 : 주제별 구역 (서울/인천)
article 의미 : 독립된 컨텐츠 하나 (식당1개)

section (서울)

├── h2 서울

├── article (화목토식당)

└── article (닥터로빈)

3. Class
article마다 이름표를 붙일때 쓰임
<article class="restaurant-card">

id와 차이
id : 페이지에 1개만 가능 (링크도착점)
class: 여러개 같은이름 가능 (css로 꾸미기, js로 찾기)


-빈요소  : 스티커, 그자리에 붙이면 끝
(meta : 설정 정보 /link : 외부파일 연결 /img이미지/br : 줄바꿈/ input
-일반요소 : 봉투, 안에 내용물을 넣고 입구 닫아야함

4. 필터

위치: 필터는 식당 목록을 조작하는 도구라서 main 맨위, 첫 section 앞에 위치해야됨.
이때는 div를 사용함. 의미없는 묶음태그.
필터는 header도, section도, article도 아니라서 의미없는 상자로 묶고 닫아줌.

5. 드롭다운
select+option
select 안에는 option만 들어감.

select: 드롭다운 상자 전체 (ul처럼 감싸는역할)
option 선택지 하나 (li처럼 항목 역할)
value : js가 읽는 값
option안의 글자 : 사람이 보는 값(한글)

6. 체크박스
input+ label
input: 입력 칸, 빈요소 (닫는 태그 없음)
type= “checkbox” 입력 칸 종류=체크박스
label 체크박스 옆 글자. 글자를 눌러도 체크됨


input은 type만 바꾸면 모양이 달라집니다.
type=“text” 하면 입력창이됨.

5,6을 메인아래에 정보를 입력하고 그해당 내용을 article마다 article calss뒤에 입력. ->필터가 동작하려면 js가 각 식당 카드에서 이식당은 어느 지역이고, 놀이방이 있는가를 읽어야함. 그정보를 article에 입력함.

입력할땐 data- region=“seoul” 의 구조로 입력.
화면에는 안보임. js단계에서 해당 카드만 보여주기 식으로 쓰임.

<option value="seoul"> 짝
data-region="seoul"
<input id="playroom"> 짝 data-playroom

true false는 유무또는 여부를 표시함.

AI 대화 내역 링크:

(링크 생성 방법)

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

오늘 잘한 점: 지난주 못한 부분을 마저 이어서 진행했습니다. 조금이라도 더 하려고 노력했습니다.

오늘 부족했던 점: 오늘 시간이 부족했습니다. 세세하게 알려하지않고 아 이쯤이면 이해한것같다하고 넘어갔던부분 다시 훑어보았습니다. 내일은 좀더 해보겠습니다. 말씀하신 LLM위키 시간이없어서 못했는데 내일은 진행하겠습니다. 그리고 css도 다하는것이 내일의 목표입니다.

오늘 총평: 클로드가 설명을 자세하게 해주기때문에 꼬리질문을 하지 않고 이해하고 넘어갔던부분도 있었습니다. 애매하게 아는부분도 더 짚어보고 확인하고 넘어가도록 하겠습니다. 아무것도 모르던 제가 멘토님과 함께하면서 나아가고있고 그게 눈에 보여지는게 재밌었습니다.