오늘 공부에 투자한 순수한 시간:  2시간30 학습한 개념 1. 태그와 요소 <title>아이랑 맛집</title> <여는 태그>내용</닫는태그> /가 붙음 태그는 여기서부터 여기까지가 제목이다 내용의 의미를 붙이는 표시 2. 빈 요소 (닫는태그가 없는것) meta, link, img, br, input이 대표적. 감쌀 내용이 없는 요소는 여는 태그만 사용함. 3. 속성(attribute) 태그에 추가정보를 붙이는 방법. 여는 태그 안에만 쓰고, 여러개면 공백으로 구분 여러개일 경우에는 순서는 상관없음 주의 사항 - 하나의 속성 안에 값이 여러개인 경우 <article class="card featured"> 이건 속성 2개가 아니라 calss속성 1개에 값이 2개 해당됨 따옴표 안쪽의 공백은 값을 구분하는 것. 따옴표 바깥의 공백은 속성을 구분하는것. - <meta name="viewport" content="width=device-width, initial-scale=1.0"> viewport의 content 값 안에서는 쉼표가 사용.  HTML 규칙이아닌, 속성의 특징 (속성마다 값 쓰는 규칙이 다를 수 있음). 4. 중첩(부모-자식 관계) html ├── head │   ├── meta │   ├── meta │   ├── title │   └── link └── body     └── script (해당부분은 복사함) 요소안에 요소를 넣을 수 있고, 이 트리 구조가 HTML의 핵심. CSS와 JS가 요소를 찾을 떄 이구조를 따라간다. 규칙 : 먼저 연 태그를 나중에 닫는다. <!DOCTYPE html> : 이 문서는 HTML5 규칙으로 해석해라 왜 이런 이름이 붙었는가? 이 문서의 종류type이 무엇인지 선언한다는 뜻정식 명칭은 Document Type Declaration(문서 유형 선언) 브라우저에서 어떻게 보이는가or브라우저에서 어떻게 동작하는가? DOCTYPE을 빼먹으면 쿼크 모드로 떨어집니다. 그러면 CSS 박스 크기 계산 같은 동작이 달라져서 레이아웃이 이상하게 깨지는데, 원인을 찾을수 없음. <html lang="ko"> : 검색엔진에 한국어 문서임을 알림 문서 전체를 감싸는 최상위 요소(루트). 브라우저에서 자동 번역이 한국어페이지로 판단하는 근거 <head> :보이지 않는 정보영역 (제목, CSS 연결) 브라우저에서 보이지 않는 정보로 안에 쓴 내용은 웹페이지 본문 영역에 글자나 그림으로 표시되지 않는다는 뜻. 사람에게 보여주는 정보가 아닌 브라우저,검색엔진이 읽어가는 설정정보. <title> 브라우저, 검색엔진에서 읽음 탭 제목, 북마크이름, 검색결과 제목으로 보여짐 페이지에 1개만 쓴다. <meta charset="UTF-8"> : 이 파일의 글자를 UTF-8방식으로 해석해라 라고 브라우저에게 알려주는 설정. 이유: 컴퓨터는 글자를 모른다. 컴퓨터는 숫자0,1만 저장하므로 글자와 숫자 변환이 필요함.-> 이 변환 규칙을 문자인코딩이라고 한다. head안에서 가장 먼저 써야함. 브라우저가 이 선언을 읽기 전에 한글이 나오면 그 부분을 잘못 해석할 수 있기 때문. 그래서 <title>보다 위에 위치 <meta name="viewport" content="..."> 모바일 화면 크기 설정. 이게 없으면-> 스마트폰 브라우저가 PC용페이지로 인식하고 축소해서 보여짐. width=device-width 페이지 너비 initial-scale=1.0 처음 열 때 확대/축소 없이 100% <link rel="stylesheet" href="css/style.css"> 외부 CSS 파일을 연결 -rel : relationship. 연결된 파일이 이 문서와 어떤 관계인지 rel="stylesheet"를 지우고 저장하면, CSS 파일이 있어도 적용되지않음. 브라우저가 그 파일을 뭐에 써야 할지 모르기 때문 -herf : hypertext reference. 파일 위치 상대 경로, css폴더 안의 style.css라는 뜻으로 폴더구조와 맞아야 연결됨. 경로가 틀려도 에러 없이 그냥 스타일만 적용이안됨. <script src="js/main.js"></script> 외부 JS파일을 연결합니다. -src : source 파일위치 -</script> 꼭 닫아야한다. -body 맨 끝에 두는 이유는 브라우저는 HTML을 위에서 아래로 읽음. JS가 먼저 실행되면 아직 만들어지지 않은 내용을 찾으려다 실패하게됨. HTML을 다 읽은 뒤 실행하게 하려고 맨끝에 둔다. DOCTYPE 확인 head 읽기 →  설정, 화면 비율 설정, 탭 제목 표시, CSS 다운로드 body 읽기 → 내용을 화면에 그림 마지막에 JS 실행 → 그려진 요소들에 동작 연결 AI 대화 내역 링크: (링크 생성 방법) 클로드: https://claude.ai/share/a195690f-4515-4811-b68d-ea8672415f53 오늘 잘한 점: 익숙하지 않아서 어려웠지만 오늘 목표한 부분까지 완료. 오늘 부족했던 점: 용어들이 어려웠다. 오늘 총평: 계속 하면서 익숙해지면 더 나아질 것이라 생각됨. 내일도 열심히 해보겠습니다.