11월 10일 학습일지

총학습시간 :3시간

오늘 목표: 브라우저 탭에 "전국 배드민턴 체육관" 뜨게 만들기

-내가 만들고자 하는 페이지 프롬프트-
우리나라 운영중인 배드민턴 체육관 정보를 주는
(지도, 운영시간,입장료, 운영방식 ,샤워실 유무 등등 )웹페이지 만들거야.
목적은 전국 팔도 여행을 다니더라도 배드민턴 가방 들고다니면서
운동하려는 사람들이있어. 현실에서 아쉬운점은
문의하고자했을때 직접 전화연결이 안되는 경우가 많아.
그래서 일단 가보고 헛걸음 하는경우도 생겨.
그런 사람들을 위한 웹페이지를 만들어볼거야.


Step1. 문서 뼈대 만들기

<!DOCTYPE html>
1.무엇인가: "이 파일은 최신 html(html5) 문서다" 라는 선언. 항상 맨 첫줄에 쓴다.
2.왜 이런 이름? : DOCument TYPE, 즉 문서의 종류라는 뜻.
옛날에는 html버전이 여러개라 길게 적었는데, html5 부터 html 한단어로 줄었다.
3.브라우저에서는? 화면에 보이지 않는다. 빠트리면 브라우저가 옛날방식(호환모드)로 해석해서
나중에 css가 이상하게 적용될수도있다.

<html lang="ko"> ... </html>
1. 무엇인가: 문서 전체를 감싸는 가장 바깥 상자
2.왜 이런 이름? : HyperTextMarkupLanguage
하이퍼텍스트는 링크로 서로 연결된 글, 마크업은 글에 표시(태그)를 붙인다는 뜻
3.브라우저에서는? 보이지 않는다. lang="ko" 는 한국어 문서 라는 표시라서 번역 기능이나
화면 읽기 프로그램(시각장애인용)이 올바르게 동작하게 해준다.

<여기서 내질문1> ----------------------------------------------------------------------------
Q1. "ko" 이런 따옴표가 들어가는 기준은 뭐야?

1.답: 따옴표는 속성의 값을 감쌀 때 쓴다.
속성이름="값"

lang = "ko"

2.자주햇갈리는 3가지
1)숫자도 따옴표로 감싼다
<td colspan="2">휴관</td>

2)큰 따옴표" "와 작은따옴표' '모두 동작한다
<html lang="ko"> ← 관례 (이걸로 통일)

<html lang='ko'> ← 이것도 동작은 함

3)따옴표 없이도 동작하는 경우가 있지만, 항상 붙인다.
lang=ko 처럼 값에 띄어쓰기가 없으면 브라우저가 알아서 읽어주기도 한다.
하지만 "언제는 되고 언제는 안되는" 규칙을 외우는것보다 항상 붙이는 습관이 실수를 줄인다.

왜 값에만 붙일까?
값이 어디서 시작해서 어디서 끝나는지 브라우저에 알려주는 울타리이기 때문이다.
값에 띄어쓰기가 있으면 특히 중요해진다.

</여기서 내질문1>-----------------------------------------------------------------------------

3.<head> ... </head>
1.무엇인가 : 화면에 보이지 않는 문서설정을 넣는 곳이다.
2.왜 이런 이름? : 머리(head)는 몸을 지휘하지만 겉으로는 하는일이 안보이기때문
3.브라우저에서는?: 이 안의 내용은 화면 본문에 나오지 않는다.

4.<meta charset="UTF-8">
1.무엇인가: 글자를 어떤 규칙으로 저장하고 읽을지 정하는 설정
2. 왜 이런 이름? meta는 "~에 대한 정보" , character set 은 문자 집합
UTF-8은 한글,영어,이모지까지 전 세계 문자를 다루는 표준규칙
3.브라우저에서는? 보이지않는다. 빠지만 한글이 깨져서 나온다.

*이 코드처럼 닫는 태그가 없는 태그도 있다. 이처럼 meta 안에 감쌀 내용이 없어서 !

5.<title> ... </title>
1.무엇인가 :문서의 제목
2.애 이런이름? 단어 그대로 제목
3.브라우저에서는 ? 눈에보인다. 페이지 본문이 아니라 브라우저탭에 표시되고,
즐겨찾기를 추가할때 이름으로도 쓰인다.

6. <body> ... </body>
1.무엇인가 : 화면에 실제로 보이는 내용이 들어갈 곳
2.왜 이런이름? 말그대로 몸통! , 머리(head)는설정, 몸통(body)은 보이는 것으 담당한다.
3.브라우저에서는 ? 이 태그 안에 갇힌 내용들은 화면에 보인다.

<여기서 내질문2> ----------------------------------------------------------------------------
Q2. 코드를 다음줄로 넘기는 기준은 뭐야?
결론적으로, 브라우저는 코드의 줄바꿈을 신경쓰지 않는다.
코드에서 줄을 바꾸는것은 사람이 보기 편하게 하려는 것이고,
화면에서 다음줄로 넘어가는건 태그의 종류가 정한다.

1. 코드에서 줄을 바꾸는 기준 (사람을 위한 규칙)

아래 두 코드는 브라우저에서 똑같이 보인다.

<ul><li>샤워실: 있음</li><li>주차 가능</li></ul>


<ul>

<li>샤워실: 있음</li>

<li>주차 가능</li>

</ul>

그래도 개발자들은 아래의 세가지 관례를 지킨다.
1.안에 다른 태그를 품은 태그는 줄을 나눈다.
2.안에 글자만 있는 대그는 한줄로 쓴다.
3.안쪽에 들어갈수록 들여쓴다.

들여쓰기는 폴더구조와 같다.
이렇게 쓰면 닫는 태그를 빠트렸을때 바로 눈에 띈다.
HTML 오류의 대부분이 닫는 태그 누락에서 나온다 .


2.브라우저 화면에서 줄이 바뀌는 기준 (태그 종류가 결정)
1)코드에서 엔터를 쳐도 화면에서는 줄이 안 바뀐다.

<p>강원 ○○시 ○○로 123

마지막 확인: 2026-11-10</p>

브라우저 출력화면 : 강원 ○○시 ○○로 123 마지막 확인: 2026-11-10

2)화면에서 줄을 바꾸려면 <br>

<p>강원 ○○시 ○○로 123<br>

마지막 확인: 2026-11-10</p>

브라우저 출력화면 :
강원 ○○시 ○○로 123
마지막 확인: 2026-11-10

3.태그 자체가 줄을 차지하는 경우 : 블록 vs인라인

-블록 (block)
화면에서 동작 : 혼자서 한줄을 통째로 차지한다. 앞뒤로 자동 줄바꿈
해당태그: h1~h6, p, ul, li, table, article, section

-인라인(Inline)
화면에서 동작: 글자처럼 옆으로 이어짐, 줄바꿈 없음
해당 태그: a, strong, br, img

정리
코드 줄바꿈: 사람이 읽기 위한 것이고 화면에는 영향이 없다. 품는 태그는 줄을 나누고 안쪽은 들여쓴다.

화면 줄바꿈: 블록 태그는 자동으로 줄이 바뀌고, 인라인 태그 중간에서 바꾸려면 <br>을 쓴다.

</여기서 내질문2> ----------------------------------------------------------------------------

오늘잘한점 : 코드하나씩 학습하려는것보다 이 언어의 원리와 틀부터 알고 시작하려고 그렇게
Ai에게 주문하면서 공부했더니 원리가 쉽게 받아들여져서
앞으로 이 코딩언어 공부가 재밌을듯하다 .
원리만 제대로 알면 뭐든 다 비슷할거라는 생각이든다.

오늘 못한점 : 공부시간 -> 손주보러 온다고 어머니 아버지 가 오셔서 하루종일 같이 있느라
밤늦게서야 공부하기시작했다. 어쩔수없지만 아쉽다.

총평: 공부 많이 못한건 아쉽지만 , 적은 시간와중에 원리를 제대로 이해하고 자는거같아 다행이다.