10월 28일 공부일지

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

학습한 개념

1. rel, href, src

<link>태그는 css전용이 아닌, 여러 종류의 외부 파일을 연결하는 범용 태그
href만 쓰면 브라우저는 “ 이 파일을 가져와서 뭘 하라는거지?” 알 수 없음
rel이 그 용도를 설명해준다.

예시

<!— 이 파일은 스타일시트다 -> 디자인에 적용해라 —>
<link rel=“stylesheet” herf=“css/style.css”>

같은 <link>태그 인데 rel의 값에 따라 브라우저의 행동이 달라짐

src는 저 파일을 이 자리에 가져와라 -> 끌어온다
<img src=“kitchen.jpg”>


파일            연결하는태그                                   용도
.css           <link rel=“stylestheet” herf=“”> 디자인
.js              <script src=“”>                             동작
.jpg .png   <img src=“”>                                사진
아이콘.png. <link rel=“icon” herf=“”>            파비콘

2. body
글자를 넣는 태그

   1. 제목 h1 ~ h6
       h(heading)제목, 숫자가 작을수록 상위 제목
       예를들어 h1= 책 제목, h2=장, h3=절
       - 규칙
          h1는 페이지에 1개만, 순서를 건너뛰지 않기, 글자 크기때문이 아니라 문서 구조상 몇단계 제목인지 고르기.
 
   2. 문단 p
       p(paragraph)문단. 일반 글은 전부 p로 감싼다.
      주의 : html은 코드 안의 줄바꿈,연속, 공백을 무시합니다.
      -> 문단을 나누려면 p를 따로 써야됨

3. 강조 : strong
     문장 안의 일부를 중요하다고 표시한다. 기본적으로 굵게보임.
     주의 : 닫는 순서는 strong을 먼저 닫고 p를 닫는다.

4. 줄바꿈 : br(필요할때만)
    문단은 그대로 두고 줄만 바꿀때.
    주의 : 빈요소라 닫는 태그가없음, 남용금지, 간격은 css가 담당하므로 의미상 줄이 바뀌는곳에 사용함.

오늘 실행 목표 : 뼈대,텍스트 태그 

AI 대화 내역 링크:

(링크 생성 방법)

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

오늘 잘한 점: 어제 공부한 용어부분을 가볍게 훑고 공부를 시작했습니다. 그리고 헷갈리는 부분도 다시 짚어 보았습니다. vs코드에 직접 입력해보았는데 재밌었습니다.

오늘 부족했던 점: 오늘은 뼈대와 텍스트태그 (제목, 소개문단, 식당이름 주소정도만 나오게 했습니다.
어제 공부를했는데 헷갈려서 한번 다시보고 공부했습니다. 그럼에도 잘 기억이 안나서 계속 가볍게 훑으면서 진행했습니다. 그리고 실행하면서 하니 시간이 더 걸렸습니다.

오늘 총평: 외우거나 완벽하게 알고 하려니 시간이 더 걸리는 듯 해서 단계를 나누고 흐름파악-> 실행 -> 앞에꺼 훑고, 다음단계 흐름파악-> 실행 의 속도록 하고있습니다. 아직은 큰 뼈대만 만드는거라 어렵진 않았는데 생각보다 오래걸렸습니다.  하지만 재밌었습니다.