[WEB] 3. HTML: 기초

19. 주제

다시 만나 반갑습니다 HTML 첫 번째 섹션을 시작하겠습니다 여기서는 매우 기초적인 내용을 다룰 것입니다 따라서 지금 다룰 내용 대부분이 앞으로 강의를 듣는 데 필수적이라고 할 수 있습니다 

문단 요소, HTML 머리말 HTML 목록, 앵커 태그까지 HTML에 링크를 만들어 웹페이지나 이미지에 연결할 수 있습니다 늘 사용하는 방법이죠 

제가 만든 이 웹페이지에도 머리말이 있습니다 이미지도 있고요 제 얼굴인데 사진이 별로네요 앵커 태그도 있어서 클릭하면 다른 곳으로 연결됩니다 다 제가 10초 만에 만들었죠 이게 우리가 매번 쓰는 중요한 요소들입니다 

아직 HTML을 배우지 않아서 이것밖에 얘기를 못 하겠네요 이런 자료가 모여 있는 곳도 살펴보겠습다

Mozilla Developer Network입니다 이것도 매우 중요하지만 필수는 아닙니다 MDN을 대체할 만한 곳들이 있으니까요 제가 그냥 알려드리고 싶어서요

이 스택에서 HTML 상용구 카드 하나만 노란색입니다 지금 시점에서는 상용구가 뭔지 설명할 수가 없네요 노란색인 이유는 단순히 여기에 작업이나 설명이 조금 더 많이 포함되기 때문입니다 하지만 이 섹션에는 아주 복잡한 개념이나 시간을 많이 잡아먹는 주제는 없습니다

다음으로 Chrome Inspector를 가져옵니다 이것도 중요하지만 필수는 아닙니다 강의에서 크롬을 쓰니까 우리한텐 중요하죠 하지만 Firefox 등을 쓰는 개발자에겐 Chrome Inspector가 거의 소용이 없습니다

마지막으로 VSCode의 간단한 기술을 알려 드리겠습니다 HTML이나 웹 개발과는 전혀 상관없지만 제가 그냥 이 섹션에 넣었어요 영상을 건너뛰어도 괜찮습니다 그래도 배울 가치는 있어요 꽤 유용하거든요 그럼 이제 HTML을 알아보겠습니다 말씀드렸다시피 이 섹션의 내용은 대부분 중요합니다 하지만 다행히 거의 다 짧고 이해하기 쉬운 내용이죠 그러면 시작할까요?

 

20. HTML 개요

HTML 강의를 시작하겠습니다 

저번 시간 내용을 복습해 보면 HTML은 웹페이지의 명사 같은 것으로 콘텐츠의 구조를 규정하는 것입니다 

즉 페이지에 무엇이 있는지 나타내는 거죠 이건 버튼, 이건 양식, 이건 링크, 그런 식으로요 

하지만 스타일은 아닙니다 그건 CSS지요 

행동도 아닙니다 그건 Javascript예요 

그래서 일단 HTML을 완성한 뒤 CSS를 추가하고 Javascript를 더하면 모든 게 완벽해지는 거죠 

 

일단은 HTML부터 배워야겠네요 HTML은 소위 마크업 언어입니다 Hypertext Markup Language의 약자가 HTML이죠 HTML은 완전한 프로그래밍 언어가 아닙니다 

사람들이 프로그램에 대해 흔히 생각하는 복잡한 논리 같은 것도 전혀 필요하지 않습니다 

HTML은 문서에 마크업을 할 뿐입니다 화면 오른쪽을 보면 마크업이 무엇인지 알 수 있습니다 

제가 제일 좋아하는 윌리엄 블레이크의 시로군요 중학교 선생님인가 누군가가 빨간 펜으로 마킹을 해 놨네요 메모도 있습니다 이 경우엔 철자 틀린 곳에 동그라미가 처져 있습니다 주석도 달렸고요 

원래의 콘텐츠에 부수적인 정보가 추가되어 있습니다 이게 바로 HTML이 하는 일입니다 

HTML은 웹 페이지라는 문서에 마크업을 하기 위한 언어 또는 구문입니다 

과학 연구 논문을 생각해 보세요 거기서 HTML이 나왔습니다 HTML은 1989~1990년에 학술 논문의 구조 설명을 돕고 초기 인터넷에 그 내용을 공유하기 위해 탄생한 언어입니다 잘 모르시는 분을 위해 말하자면 논문에는 특별한 서식이 있습니다 굵은 글씨, 숫자나 기호가 붙은 목록 같은 것들입니다 여기에는 다른 페이지나 다른 섹션으로 이어지는 링크도 있네요 이탤릭체도 있고 문단이 나뉜 것도 보입니다 문단과 문단 사이에는 일정한 간격이 있습니다 다른 문서에서도 흔히 볼 수 있는 형식이죠 만약 서식을 다 없애 버리면 이 논문은 단순한 텍스트가 될 겁니다 

 

HTML의 목적은 이런 텍스트 콘텐츠를 마크업하여 이런 식으로 구조화하는 것입니다 여기를 보면 the question(s) you investigated가 굵은 이탤릭체로 표시되어 있고 옆에 마침표가 생겼죠 하지만 콘텐츠를 보면 그냥 텍스트입니다 이 부분은 굵은 글씨로 하고 여긴 이탤릭체로 하고 여기에 마침표를 넣으라고 지시하려면 어떻게 해야 할까요? 제가 지시라는 말을 썼는데 HTML의 진정한 목적은 웹 브라우저에 굵은 글씨, 이탤릭체나 마침표가 들어갈 곳을 지시하는 겁니다 

 

HTTP 요청에 관한 설명을 다시 떠올려 봅시다 특히 브라우저는 웹 페이지를 불러올 때 HTML, CSS, Javascript가 포함된 반응을 어딘가의 서버로부터 받습니다 그건 단순한 정보이자 텍스트입니다 단순히 0과 1이 나열된 정보입니다 그런데도 브라우저에는 이렇게 표시되죠 그냥 텍스트로요 

그러나 이 텍스트 안에는 브라우저가 알아야 할 모든 페이지의 구조와 규칙이 들어 있습니다 HTML이 규칙을 알기 때문에 이런 화면이 나오는 거죠

굵은 글씨를 표시하는 법을 알고 굵은 글씨나 마침표를 표시하는 HTML 구문을 알고 있습니다 

논문에서 HTML이 탄생했다고 했는데 학술 연구자들도 연구 보고서를 공유하고 구조를 공유하는 방법을 고민했습니다.

텍스트를 마크업하는 방법은 여러 가지입니다 샌프란시스코 부트캠프에서 이것을 직접 가르칠 때 학생들에게 자신만의 전략을 짜보라고 시켰던 적이 있습니다 이 부분을 이탤릭체로 표시하고 싶거나 이 부분을 이탤릭체로 하고 싶다면 하나의 선택지는 이렇게 'italics'를 입력하고 화살표를 넣는 겁니다 그런데 이 경우 언제 끝날지 모르는 것이 문제입니다 어디까지 이탤릭체로 해야 하죠? 줄 전체인가요? 그럼 이 줄이 이탤릭체가 되겠네요 그런데 굵은 글씨도 적용해야 한다면? 여기 이 줄 전체가 굵은 글씨인지 아니면 일부분만 굵은 글씨인지 알아야겠죠 어렵네요, 

그래서 HTML에 접근하는 더 나은 방법이 필요한 겁니다 그 접근법이란 뭘까요? HTML을 작성하려면 HTML 요소가 필요합니다 이미지 요소, 양식 요소 등 꽤 많은 요소가 있는데요 링크 요소, 머리말 요소, 굵은 글씨, 이탤릭체도 있고요 그 외에도 많은 요소가 있지만 일반적인 패턴이 있는 태그 구문을 쓰면 어렵지 않습니다 

태그로 텍스트를 이렇게 감싸는 거죠 여는 태그를 여기, 닫는 태그를 여기에 다음 영상에서 HTML을 작성해 보겠지만 어쨌든 기본 방식은 이렇습니다 이 부분을 이탤릭체로 하고 싶으면 이탤릭체 요소, 즉 i 요소를 쓰면 됩니다 나중에 자세히 이야기하겠지만 어렵지 않아요 조금 헷갈리긴 하지만요 전체를 이탤릭체로 하려면 여기에 이렇게 씁니다 

하지만 이건 엄밀히 말해 HTML이 아니라서 브라우저에 적용하지는 않았습니다.

 

단지 일반적인 방식을 보여드리는 거예요 i 태그 구문으로 텍스트를 감쌌습니다 이탤릭체가 될 부분을 표시한 거죠 제가 앞에서 이탤릭이라고 쓰고 화살표를 넣은 것과 크게 다르지 않은 방식이죠 원리는 똑같습니다

더 간단하고 꺾쇠를 사용할 뿐입니다 됐네요 여기를 이탤릭체로 하라고 문서에 마크업을 했습니다 그러나 실제 HTML에서는 많은 요소들이 한꺼번에 쓰입니다 여러 요소를 한데 묶어서 이 부분을 굵은 글씨로 만들기도 합니다 그러려면 단순히 굵은 글씨 태그를 'investigated' 앞에서 열고 뒤에서 닫는 게 좋겠죠 하지만 제가 원했던 건 이게 아닙니다 이걸 굵은 이탤릭체로 하고 앞에 마침표를 달고 싶었습니다.

 

아무튼 중요한 건 이런 식으로 문서에 마크업을 한다는 사실입니다

수필이든 베껴 쓴 시든 상관없이 말이죠 웹 문서를 마크업하면 실제로 웹 페이지에 반영되어 나타납니다 이런 방식으로 텍스트의 문단을 만들고 이미지를 만들고 Facebook 링크를 만들고 굵은 글씨를 만들 수 있습니다 물론 머리말도요

Hypertext Markup Language, 즉 HTML로 할 수 있죠 여기까지 개념 설명을 마치겠습니다 다음 시간에는 말씀드린 요소들을 가지고 이것저것 시도해 보겠습니다.

 

21. 우리의 첫 HTML 페이지

이제 첫 HTML 문서를 만들어 보겠습니다 우선 단순하게 만들고 나중에 이것저것 추가하겠습니다 닭에 대한 Wikipedia 페이지를 새로 만들어 볼까요? 여기서 텍스트를 가져다 씁시다 아무 말이나 써도 됩니다 직접 쓴 텍스트도 괜찮고요 중요한 건 태그 사이의 텍스트가 아니라 태그 그 자체입니다 우리는 태그를 배우는 중이니까요 그러니 내용이 뭐든 괜찮습니다 그럼 VSCode에 들어가 HTML 파일을 만들겠습니다 VSCode에 들어왔고요 다른 편집기를 써도 좋습니다 [File]-[New]를 눌러서 새 파일을 만듭니다 Mac 단축키는 cmd+N이죠 이제 파일을 저장할게요 파일명은 'chickens'로 할 거고 확장자는 .html로 넣습니다 확장자가 정말 중요합니다 이유는 두 가지인데 첫째, 저장할 때 VSCode에게 이게 HTML 파일임을 알려야 html 페이지로 취급하여 구문을 다른 색깔로 강조해 주기 때문입니다 둘째, 브라우저가 파일을 열 때 파일을 HTML로 인식하여 HTML로 실행하게 하기 위해서입니다 여기 보시면 제가 VSCode 테마에서 설정한 Material UI 테마의 작은 아이콘이 보입니다 없어도 상관 없지만 필요하시다면 지난 영상에서 확인하세요 먼저 여기에 텍스트를 입력하겠습니다 저는 여기 이 'Chicken'과 첫 번째 문단을 복사할게요 아무거나 쓰고 싶은 걸 쓰시면 됩니다 뭐든 괜찮습니다 'Chicken'을 입력합니다 이제 두 줄이 생겼네요 이건 정식 HTML이 아니니까 이 부분은 별로 중요하지 않아요 그냥 텍스트입니다 이 파일을 저장해서 브라우저에 띄워 볼게요 Chrome을 쓸 경우 여는 방법이 다양합니다 파일 탐색기 앱을 아무거나 열어서 파일을 실행하는 겁니다 윈도우에서는 파일을 찾아 더블클릭하면 되겠죠 우클릭해서 'Chrome으로 열기'를 선택해도 됩니다 Safari나 다른 브라우저로도 열 수 있습니다 아니면 끌어서 Chrome에 갖다 놓아도 되고요 됐습니다 지금 Chrome 브라우저에서 제 HTML 파일을 보고 있습니다 HTML 파일에는 아직 아무것도 하지 않았습니다 그냥 텍스트지만 확장자가 HTML이라서 파일을 이렇게 볼 수 있는 겁니다 이건 아무 데도 올리지 않았어요 이 파일에 담긴 콘텐츠는 어떤 웹사이트나 서버에도 공개되지 않습니다 이 기기에서 저만 볼 수 있습니다 온라인 콘텐츠가 아니니까요 이제 진짜 HTML을 작성해 볼까요? Wikipedia를 봅시다 'Chicken'이 굵은 글꼴입니다 이 텍스트와 똑같은 게 싫으면 다른 단어를 굵게 해도 됩니다 저는 그대로 할게요 여는 태그부터 넣겠습니다 그랬더니 뭔가 변화가 일어났습니다 먼저, VSCode가 색을 달리해서 구문을 강조해 주었죠 또 이걸 HTML로 인식해서 닫는 태그를 자동 완성했습니다 저는 이것만 입력했을 뿐인데요 자동으로 이게 추가됐고 커서가 여기로 이동했습니다 그런데 한층 더 빨리 b 태그를 넣는 방법이 있습니다 b를 입력하고 Tab을 누르면 됩니다 그러면 자동으로 확장되죠 저는 이미 텍스트를 썼기 때문에 조금 귀찮네요 chicken을 여는 태그와 닫는 태그 사이로 옮깁니다 마지막에 n도 빠뜨리면 안 되죠 이건 여는 태그와 닫는 태그 사이의 텍스트를 굵게 하라는 뜻입니다 저장한 다음 브라우저로 돌아가 새로 고침을 할게요 자동으로 업데이트되지 않으니 주소창에 커서를 넣고 엔터를 칩니다 보통 때처럼 단축키를 써서 새로 고침을 할 수도 있고요 여길 클릭해도 되지만 저는 주로 Mac 단축키 cmd+R을 씁니다 HTML 요소 중 첫 번째로 태그 요소를 살펴봤습니다 태그를 쓸 수 있는 경우와 쓸 수 없는 경우도 차차 알아봅시다 어떤 경우에는 다른 방법으로 굵게 만드는 게 낫습니다 그런데 만약 제가 닫는 태그를 빠뜨리면 어떻게 될까요? 새로 고침해 보죠 여는 태그 뒤의 텍스트가 전부 굵은 글꼴이 됐습니다 태그가 어디서 끝나는지 브라우저가 모르기 때문이죠 그래서 여는 태그만 넣으면 닫는 태그를 넣기 전까지의 모든 텍스트가 굵게 변합니다 찾았나요? 닫는 태그가 있나요? 없나요? 찾아봐도 보이지 않네요 그래서 모든 글자가 굵어진 거죠 그래서 여는 태그와 닫는 태그가 필요합니다 실제로는 VSCode가 자동으로 완성해 주지만요 /로 시작하면 태그를 닫으려 한다는 걸 알고 앞에서 열었던 태그가 자동으로 들어갑니다 지금까지 매우 간단한 요소인 첫 사례, 태그를 살펴봤습니다 모든 브라우저는 태그를 알아봅니다 Safari나 Internet Explorer에서도 'Chicken' 한 단어만 굵어진 걸 볼 수 있습니다 어떤 브라우저든 똑같습니다 이게 HTML의 핵심 개념입니다 표준이죠 이렇게 문서에 마크업하면 이 부분을 굵게 하라고 지시하는 겁니다 그런 다음 브라우저에서 파일을 열면 그대로 적용됩니다 이제 기본 개념은 익혔으니 나머지 엄청나게 많은 요소를 배워야겠죠? 태그뿐만 아니라 헤딩은 어떻게 만드는지 링크, 이미지, 양식과 버튼은 어떻게 만드는지 다음 영상에서 전부 다 보실 수 있습니다