11월 9일 학습 일지 (코드 공부)

11월 9일 (코드 공부)

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

학습한 개념 : 코드 질문

<!DOCTYPE html>

1. 이름이 붙은 이유

맨 처음에 나오는 DOCTYPE는 DOC와 TYPE 이렇게 두개로 나눠져 있는 코드이다. DOC는 Document라는 영단어의 약자이고 '문서'라는 뜻이다. TYPE는 '종류'라는 뜻으로 두 단어를 합치게 되면 '문서 종류'가 된다. 이 문서가 어떤 브라우저에서 사용될것인지를 알려주는 뜻이다.

이후에 나오는 html은 어떤 문서가 사용되는지 알려주는 것이고, 지금은 뒤에 html이라고 나와 있으니 이 문서의 종류는 html이다 라고 생각하면 된다.

<html>이나 <p>와 달리 맨 앞에 ! 가 붙어 있기 때문에 화면에 보이는 태그가 아닌 브라우저에게 주는 안내문이라는 표시이다.

2. 이 코드가 무엇인가?

이 코드는 브라우저에게 어떤 형식으로 나아갈지 길을 알려주는 것이고, 브라우저는 이것을 보고 표준 모드로 읽게 된다. 만약 앞에 <!DOCTYPE html>가 붙지 않는다면 옛날 형식(쿼크)으로 보여주게 된다. 이것은 선언문에 비슷하기에 화면에 표시되지는 않는다.

만약 <!DOCTYPE html>가 붙지 않는다면 위에서 설명했듯 쿼크 상태로 되는데 쿼크 상태일 경우 CSS 작업을 할때 구상한 내용과는 다르게 나올 수 있다.

<!DOCTYPE html>는 항상 맨 앞줄에 붙어야 한다. 어떠한 명령어보다 가장 앞에서 안내해줘야 한다.

3. 화면에는 어떻게 작동하는가?

안내해주는 명령어이기에 화면에는 어떠한 형태로 보이지 않고, 이후에 작성하게 되는 다음 명령어들이 그 명령어에 맞춰지게 된다.

<html lang="ko">

1. 이름이 붙은 이유

html - 링크로 연결되는 글의 표시를 붙여쓰는 약속된 언어

lang - 언어라는 줄임말, 속성의 이름

ko - 한국어를 뜻하는 말 (한국에서는 kr로 쓰는데 언어코드로는 ko로 사용됨)

2. 이 코드가 무엇인가?

<html lang="ko">는 위에서 설명한 내용과 비슷한데 안내코드라고 생각하면 된다. 위에서 html이라고 선언을 했는데, 이건 여기서부터 html이 시작되는것이고 언어는 한국어라고 설명해주는 코드이다. 중간에 나오는 = 는 연결해주는 것으로 이해하면 되는데 'lang는 ko이다'

즉 '언어는 한국어이다.' 라고 생각하면 된다. "ko" 처럼 큰따옴표에 담겨있는 단어는 속성의 값이라고 생각하면 된다.

마지막으로 띄어쓰기에도 영향이 있는데 서로의 공백 즉 태그와 속성을 나눠주는 칸막이라고 생각하면 된다. 만약 htmllang라고 적게 되면 인식을 하지 못한다.

3. 화면에는 어떻게 작동하는가?

이 코드 또한 안내하는 코드이기 때문에 화면에서는 보이지 않는다. 뒤에 lang="ko"가 있기 때문에 언어를 알려주는 코드이다.

ㄴattribute(속성)와 element(요소)가 어디서 나와서 알려주는거야?

attribute나 element는 글자에 적혀있는 요소가 아닌 코드의 각 부분을 알려주는 용어이다.

attribute(속성)은 lang="ko" 부분을 이야기 하는데 태그 안에서 이름="값"을 이야기 해주는것이다. 여기서는 lang="ko"부분이 하나의 속성이 된다.

element(요소)는 시작태그부터 끝태그까지 나타내는 것이다.

<head>

1. 이 이름이 붙은 이유

head는 머리라는 뜻으로 가장 위쪽에 사용되는 태그이다. 사람의 머리가 가장 위에 있으니까 head라는 이름이 붙었다. head 부분에는 그 문서가 무엇인지를 설명해주는 태그라고 생각하면 된다. 편지로 예시를 들면 본문보다 위에 있는 받는 사람, 제목, 날짜 등이라고 생각하면 된다. 여기서 head와 header은 다르게 쓰이는데 head는 보이지 않는 곳이라면 header은 보여지는 부분으로 생각하면 된다. 비슷하지만 전혀 다른 태그이기에 주의해야 한다.

2. 이 코드가 무엇인가?

<head>는 여기서부터 문서의 설정 정보가 시작한다는 뜻으로 다음 </head>가 나오기 이전까지 문서의 설정 정보를 나타낸다고 생각하면 된다. 여기서 /는 끝맺음을 나타내는데 /가 나타나기 전까지는 head부분을 보강해준다고 생각하면 된다. 쉽게 생각하면 <head>라는 상자안에 내용물을 담고 </head>라는 뚜껑을 덮어 하나의 상자를 완성한다고 생각하면 쉽다.

3. 화면에 어떻게 작동하는가?

위에서 설명했듯 <head>는 설정부분을 다듬어주는 상자이기 때문에 화면에는 나오지 않는다.

<meta charset="UTF-8">

1. 이 이름이 붙은 이유

meta는 문서에 대한 정보를 담는 내용인데 메타데이터라고도 한다. 내용에서 추가로 설명해줘야하는 부분을 메타 정보라고 한다

charset은 character(캐릭터)의 줄인말인데 여기서 이야기하는 캐릭터는 글자를 뜻한다. 또 뒤에 들어오는 set 부분은 모음이라는 뜻인데 단어가 너무 길어서 charset으로 압축했다. 합치면 이 문서가 어떤 글자 모음표를 사용하는지 알려주는 것이다.

마지막으로 오는 UTF-8은 Unicode Transformation Format 8-bit의 줄임말이다.

Unicode(유니코드)는 각 세계의 모든 글자에 번호를 매겨서 정리한 국제 표준이다.

Transformation Format(변환 형식)은 그 컴퓨터가 사용할 수 있는 모양으로 변하게 해주는 형식이다.

마지막 8은 8비트 (컴퓨터가 쓰기 가장 작은 단위인 0과 1을 8개 모은것)단위를 기본으로 사용한다.

charset="UTF-8"은 글자를 어떤 번호표로 읽을지를 알려주는 것이다. 만약에 틀리거나 잘못 작성하게 되면 글자가 깨지게 되는데 이는 '모지바케'라고 부르기도 한다.

2. 이 코드가 무엇인가?

하나하나 정리하면 처음에 나오는 meta는 태그의 이름이며 '문서에 대한 정보를 알려주는 부분'이고 charset="UTF-8"은 어떤 번호표로 읽을지 알려주는 부분이다. charset="UTF-8"로 쓰이기 때문에 속성이며 charset은 앞서 이야기했듯 메타 정보를 물어보는 것이고 "UTF-8"은 글자 변환표는 UTF-8이라는 대답을 해준것이다.

그런데 <meta charset="UTF-8">에는 닫는 표현인 </meta>가 없는데 이는 안에 담을 내용 없이 안에 charset="UTF-8"이라고 모두 나왔기 때문에 담지 않고 그 안에서 모두 마무리 한 것이다.

<meta>는 문서에 대한 정보만 알려주는 것이 아닌 페이지의 설명이나 화면의 크기를 바꿔줄때 사용하기도 한다.

3. 화면에 어떻게 작동하는가?

이 또한 설정을 표현해주는 태그이기 때문에 화면에 보이지 않는다. 브라우저가 파일을 인식할때 위에서 부터 읽기 시작하는데 파일을 인식할때 UTF-8의 변환표로 읽으면 되는것으로 인식하고 넘어가기 때문에 보이지는 않는다.

<title>HTTP 정리</title>

1. 이 이름이 붙은 이유

title는 제목이라는 뜻이고 웹 페이지의 제목을 적는 곳이다. 책 표지 제목처럼 이 문서가 무엇인가를 알려주는 이름이다.

2. 이 코드가 무엇인가?

이 코드는 처음에 <title>로 시작하는데 위에서 설명했듯 제목이라는 뜻이다. 이 다음에 오는 자연어 'HTTP 정리'는 실제로 나오는 제목이며 그 다음에 오는 </title>는 앞에 / 가 붙었으니 끝이라는 것이다.

코드를 정리하면 제목이라고 브라우저에 알려주는 제목 태그와 끝을 알려주는 제목 태그 사이에 HTTP 정리 가 나와있으니 HTTP 정리가 제목이라는 것을 알려주는 태그이다.

문서에는 제목이 하나뿐이기 때문에 <title>는 하나만 쓰이게 되고 반드시 <head> 안에 써야 한다.

3. 화면에 어떻게 작동하는가?

먼저 본문 화면에는 보이지 않고, 브라우저 탭에 나타나게 된다. 또 다른 곳에서도 이 제목으로 사용되는데

즐겨찾기- 저장할때 이 제목으로 저장이 됨

방문 기록 - 어제 본 페이지를 볼때 이 제목으로 나오게 됨

검색 결과 - 구글 같은 검색 사이트에서 파란색 큰 글씨 링크 이름으로 보이는 경우가 많음

만약에 <title>를 아에 작성하지 않는다면 제목이 파일 이름이나 주소로 표시될 수 있다.

다음에 들어오는 단어는 </head>로 head 파일을 마무리 짓는 태그이기 때문에 다음으로 넘간다

<body>

1. 이 이름이 붙은 이유

body는 몸이라는 뜻으로 head와 뜻이 이어진다. 위에서도 설명했듯 설정을 담는 머리와 실제 내용을 담는 몸으로 나눠게 되었다. body는 본문 내용을 담고 있다고 생각하면 된다.

2. 이 코드는 무엇인가?

<body> 부터는 실제로 보여지는 본문 내용을 시작하는 태그이다. head에는 설정 두 줄로 마무리 되었지만 실제로 보여지는 body에는 상당히 많은 내용이 들어가게 되는데 제목이나 목차, 요약박스부터 맨 아래 문구까지 사용자가 보여지는 모든 부문을 이 상자안에 담는다고 생각하면된다. 또 <html> 안에서 <head> 다음에 나오며 순서가 바뀌면 안된다.

3. 화면에 어떻게 작동하는가?

<body>에는 실질적으로 보여지는 부분은 없지만 <body>와 </body>사이에 들어오는 모든 내용은 보여지게 된다. 단 CSS를 쓰기 전에는 그냥 흰 배경에 검은 글씨로만 나오게 되고 작은 여백을 주기 때문에 딱 붙지 않고 살짝 떨어져서 보이게 된다.

<header>

1. 이 이름이 붙은 이유

header은 머릿말이라는 뜻으로 머리를 뜻하는 head와 '~하는 것'의 단어인 -er을 붙여서 만들어진 내용이다. head는 보이지 않는 설정, header은 실질적으로 보이는 윗 부분(제목)을 뜻하는 것이다.

시맨틱 태그(semantic tag)는 semantic은 '의미를 가진'이라는 뜻이다. 실제로 사용하는 태그는 아니고 종류를 부를때 사용하는 이름이라고 생각하면 된다. 제목이나 메뉴 링크, 본문 내용 등 실제로 사용되는 태그들을 명확하게 나타내주는 내용이다. 각 태그별로 이 곳이 어떤 곳인지를 좀 더 명확하게 구분짓는 이름이라고 생각하면 된다.

ㄴ시맨틱 태그에 관련해서 조금 더 알려줘

ㄴ어디에 쓰이는거야? 실제로 코드에 쓰이는 태그야?

ㄴ그럼 어딘가에 쓰이는 태그가 아니고 그냥 종류의 이름이야? 그럼 코드 안에서는 사용하지 않는것이고 위에서 이야기 하듯 그냥 구분을 나누기 위해서 있는 이름인거야? 위에서 거의 모든 웹사이트에 사용한다고 하는데 어떻게 쓰는거야?

2. 이 코드는 무엇인가?

문서에서 제목을 적는 부분이라고 생각하면 된다. 이 글에서 무엇에 관련된건지 알려주는 것이다.

<header> 부분이 제목이 시작되는 부분이고, 이 태그 또한 박스라고 생각하면 쉽다. <header>안에 어떤 제목을 담을 것인가를 물어보는 것이고, </header>은 그 상자에 제목을 담고 상자를 닫는다는 뜻이다. 안에 HTTP를 넣었으니 시각적으로 보이는 제목인 HTTP가 실제로 보여지는 것이다.

3. 화면에 어떻게 보이는가?

<header>은 보이지 않지만 안에 담았던 제목인 HTTP는 검정색 큰 글씨로 화면에 나타나게 된다. 이는 <header>이 아닌 <h1>로 넣어도 거의 똑같이 작동한다. 만약 안에 제목을 담지 않으면 제목은 아무것도 나오지 않는다.

<header>은 다른것을 붙이지 않고 가로 폭을 가득 사용하고 다른 태그와는 섞이지 않고 <header>만의 줄만 사용한다.

ㄴ만약에 header을 길게 써서 가로 화면보다 길어지면 ...으로 보이는거야? 아니면 열이 바뀌면서 두줄로 header가 나타나게 돼?

기본적으로 두번째 줄러 내려가게 된다. 글자가 가로폭을 넘기면 자동으로 내려가는 줄바꿈(word wrap)가 된다. 한글은 글자 사이에서도 줄이 바뀔 수 있어서 긴 제목도 한번에 나오게 된다.

<title>이 길면 ...으로 잘리는 경우가 생길 수 있고 CSS로 ...으로 의도적으로 나타낼 수도 있다.

만약 띄어쓰기가 없이 아주 긴 영어 글자는 옆으로 늘어질 수 있고 가로스크롤로 나타난다.

실제로 해본 결과 aaa...나 111...으로 표현했을때는 옆으로 길어지는 가로 스크롤이 생겼고, '안녕하세요' 코드를 길게 사용하니 옆으로 길어지는것이 아닌 아래로 줄바꿈이 되었다.

AI 대화 내역 링크: https://claude.ai/share/754d56ba-2b5a-4f10-a1d0-9c8fa107a11b

오늘 잘한 점: 태그를 한글자 한글자 직접 확인해가면서 해보니까 쉽게 이해가 되었고, 영단어의 앞부분만 따서 표현한 부분을 익히니까 생각보다 어렵지 않고 수월하게 이해 되었다. 학습한 양이 적어서 그럴 수 있는데 아직까지는 태그에 관련해서 어려운 부분은 없었던거 같다. 또 실제로 코드를 사용하면서 공부해서 <header> 부분에서 가로 스크롤과 줄바꿈을 질문보다 먼저 알게된 부분이 잘한거 같다.

오늘 부족했던 점: 잘 모르겠다.

오늘 총평: 전체적으로 코드가 어떻게 돌아가는지 처음부분부터 감을 잡았던거 같다. 시작과 어떤식으로 흘러가고 어떻게 사용해야하는지를 익힌거 같아서 자신감이 붙은것 같다. 조금 더 깊게 알고 태그를 더 많이 숙달하면 좋겠고, 빨리 숙달하여 스스로 결과물을 완성 할 수 있으면 좋겠다고 생각했다.