2시간 전•

10월 29일 공부일지

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

학습한 개념

1. 시맨틱(semantic)=의미있는.
-> 이름 자체로 역할을 알려주는 묶음태그

- header : 머리말
사이트 제목 + 소개
-main : 핵심본문(페이지1개)
사이트 내에 목록전체
-section : 주제별 구역
사이트 내에서 서울,경기,인천 등
-footer : 꼬리말
사이트에서 저작권, 만든사람

주의사항
- 묶음 태그는 화면에 보이지않음. 나중에 css로 디자인 할때 드러남.
- section은 제목(h2)와 함께 시작된다.
section 안 첫 줄에 h2를 둡니다.
제목없는 section은 사용안함
- 들여쓰기가 한 단계씩 깊어진다.

2. 리스트+링크
리스트: 같은 종류의 항목이 여러개 나열될때 사용한다. 편의시설이 딱 그 경우입니다.
<ul> : unordered list 순서없는 목록 전체를 감쌈
<li> list item 목록의 항목 하나

ul은 li만 자식으로 쓸수있음, p나 글자를 쓰면 안됨. li는 혼자 쓸 수 없고 반드시 ul(또는 ol) 안에 있어야됨.
<ol>
앞에 1,2,3 번호가 붙습니다. 순위처럼 순서가 의미 있을 때 쓴다.

3. 링크
<a href=“이동할 주소”>클릭할 글자</a>

a = anchor(닻). Href에 적힌 곳으로 이동시킵니다.

링크를 입력할때 주소는 반드시 http://부터 써야됨.

target=“_blank” 새탭에서 열기(안쓰면 내사이트가 이동함)
rel=“noonpener noreferrer” 새 탭이 내 페이지를 조작하지 못하게 막는 보안 설정

두개는 항상 세트로 사용됨.

4. 전화걸기
tel: 뒤에 번호를 쓰면 폰에서 누를 때 바로 전화 앱이 열립니다.

5. 페이지 안에서 이동
section에 id를 붙이면 그 이름표로 이동합니다.

<section id="seoul">  <a href="#seoul">서울</a>

-id : 페이지 안에서 딱1개만 존재하는 이름,
영어 소문자, 공백없이 입력.
-# : 이페이지 안의 id를 찾아라는 표시

이런 메뉴 링크 묶음은 nav(navigation)으로 감싸서 header안에 둡니다.

<header>
<h1>...</h1>.
<p>...</p>
<nav>
<a href="#seoul">서울</a>
<a href="#incheon">인천</a>
</nav>
</header>

AI 대화 내역 링크:

(링크 생성 방법)

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

오늘 잘한 점: 그래도 조금 눈에 익혀가는 중입니다.

오늘 부족했던 점: 아직은 구조짜는게 좀 어렵게 느껴졌습니다. 그래서 클로드에게 이걸어디에 넣어야하는지 물어보면서 작업했습니다. 시간이 좀 부족했습니다.ㅠㅠ

오늘 총평: 흐름을 파악해 가면서 구조를 좀더 이해해야 할것 같습니다. 그래도 뭔가 고도화 되어가는 것 같습니다.

여기에 파일을 드롭하세요