[HTML] 웹 개발을 위한 HTML 첫 기초지식!

intro

웹 개발에 대해 본격적으로 학습하기에 앞서
간단하지만 꼭 알아두어야할 웹 기초지식을 짚고 넘어가볼까 합니다.
이 글은 학습내용 정리를 위한 목적으로 작성된 글로 부족한 부분이 있을 수 있습니다.
오류와 의견 댓글로 남겨주시면 감사하겠습니다;)

코딩과 HTML의 이해

---

어떤것이 사람이 하는일이고 어떤것이 기계가 하는일일까? 어떤것이 원인이고 어떤것이 결과일까?
원인(input)을 만들고 결과(output)로 보여주는 것,
여기서 이 원인을 제공하는 것이 사람 , 그것을 결과로 보여주는 것이 기계다.

이 원인을 부르는 여러가지 표현이 있다.

• 부호 또는 신호라는 의미의 코드(Code)
• 원천이라는 뜻의 소스(Source)
• 기계도 이해할 수 있고 사람도 이해할 수 있는 공통의 약속이라는 의미에서 언어(Language)
  → 이는 컴퓨터 언어라는 표현을 사용한다.

마찬가지로 결과 를 부르는 여러가지 표현 또한 있는데

애플리케이션(app), 응용프로그램(Program),
구체적으로는 웹페이지(Weppage), 웹페이지가 모여있는 웹사이트(Website) 등의 여러가지 표현들이 있다.
→ 이러한 다양한 표현들은 같은 대상을 바라보는 관점에 따라 표현이 조금씩 달라지는것에 불과하다.

즉, 원인인 코드를 통해서 결과를 만든다는 것이 코딩을 이해하는 핵심이다.

HTML과 웹브라우저

---

세상에는 다양한 종류의 코드들이 있는데 그중 웹페이지를 만드는 코드가 HTML(Hyper Text Markup Language)이다.

html으로 작성된 파일은 .html 이라는 확장자를 가지고 있고 이 .html이라는 문서를 구동할 수 있는 프로그램이 웹 브라우저다.

웹브라우저는 단순히 html 문서를 보여주는 뷰어 역할만 하는것이 아니라
사용자의 입장에서는 웹 서핑을 도와주는 다양한 부가기능을 제공하고
개발자의 입장에서는 웹페이지를 분석할 수 있는 개발도구들을 제공한다.

웹 개발을 할 때 브라우저를 이해하는것도 매우 중요한 일.

HTML이란?

HTML(HyperText Markup Language)은 웹을 이루는 가장 기초적인 구성 요소로, 웹 콘텐츠의 의미와 구조를 정의할 때 사용한다.

"Hypertext(하이퍼텍스트)"란 웹 페이지를 다른 페이지로 연결하는 링크를 말하며 링크는 웹의 근본적인 속성으로, 인터넷에 자료를 올리고 다른 사람이 만든 페이지로 링크함으로써 브라우저를 사용하는 누구나 월드 와이드 웹 세계의 능동적인 일원이 될 수 있다.

• HTML은 웹 브라우저에 표시되는 글과 이미지 등의 다양한 콘텐츠를 표시하기 위해 "마크업"을 사용한다.

• HTML 마크업은 다양한 "요소"를 사용하는데, HTML 요소는 "태그"를 사용해서 문서의 다른 텍스트와 구분한다.

• 태그는 "<", 태그 이름, ">"로 이루어지며 많은 태그들이 존재한다.

간단히 말하자면 HTML은 컴퓨터(웹브라우저)가 이해할 수 있도록 작성된 언어로 사람(개발자)과 컴퓨터(웹브라우저)가 소통할 수 있도록 만들어진 언어이다.
→ 여기서 주의해야 할 점은 HTML은 프로그래밍 언어가 아니라는 점이다. HTML은 컴퓨터에게 특정 일을 시킬 수 있는 언어가 아닌 단지 브라우저가 볼 수 있는 문서를 적는 언어다.

+ 프로그래밍 언어와 마크업 언어의 차이

프로그래밍 언어는 어떠한 데이터를 가공을 해서 이 데이터를 가지고 ‘무엇을 해라’라고 ‘action’에 대한 명령을 하는 언어.

마크업 언어는 데이터를 가공하고 무엇을 하는 개념이 아니라 데이터자체를 어떤 방식으로 어디에 어떻게 표현할지 기술하는 언어로 어떠한 구조를 나타내고 데이터들이 각자 어떤 역할을 가지고 있는지, 어떻게 보여질지를 정의하는 언어.

+ HTML이 좋은 이유

1. 쉽다. (앞으로 배울 어떤 컴퓨터 언어들 보다 가장 배우기 쉽다.)
2. 중요하다. (인류가 생산하는 거의 모든 디지털정보가 담기는 그릇이자 가장 많이 접하게되는 것이 웹페이지. 이것을 만드는 언어가 HTML)

+ 웹이 좋은 이유

웹은 퍼블릭 도메인 (Public Domain). 즉 저작권이 없다.
웹을 만든 팀 버너스 리는 웹을 어떠한 저작권도 존재하지 않는 완전한 자유를 의미하는 퍼블릭 도메인으로 선언했다.
→ 웹이라는 기술 자체에 저작권이 없다는 것이지 웹페이지에 대한 저작권이 없다는것이 아니니 혼동하지 말자!

때문에 각각의 회사들은 각자의 브라우저를 만들수 있으며 우리가 만든 웹페이지를 여러 브라우저에서 열어 볼 수 있다.

HTML이 중요한 이유

---

간단한 예시로 HTML이 왜 중요한지 조금 더 이해해보도록 하겠다.

heading이라는 기능을 모르는 상태의 일반인과 그것을 알고있는 지식인이 똑같이 생긴 'coding'이라는 제목을 만들고 싶다고 가정해보자.

• 일반인은 글자크기를 키우고 볼드를줘서 글씨를 두껍게 만들었다.
• 지식인은 format의 Title 항목을 선택해 heading을 만들었다.

일반인과 지식인이 만든 결과물의 차이를 코드로 살펴보자
(우리가 편집기를 이용해서 글을 쓴다는 것은, 컨텐츠를 만든 다는 것은 내부적으로 HTML 코드를 생산하는 행위이다.)

지식인이 만든 코드는

<h3>coding</h3>

깔끔하다. <h3>로 감싸져있기 때문에 ‘어디서 부터 어디까지가 세번째로 중요한 제목이다.’ 라는 정보가 태그(코드)상에 나타나고 있다.

일반인의 코드는

<strong><span style="font-size:22px;">coding</span></strong>

일반인의 'coding'은 22px의 크기를 가졌고, 진하게 표시되어야 한다는 시각적인 장식만을 가지고 있다.
'coding'이라는 content가 제목이라는 정보는 어디에도 없다.

일반인의 제목과 지식인의 제목은 눈으로 보기에는 완전히 같은 상황이다.
하지만, 똑같은 모양의 두 제목은 코드가 완전히 다르다.

코드가 다른것이 얼마나 중요한지 검색엔진을 예시로 들어 조금 더 확인해보겠다.

검색엔진은 전세계에 있는 모든 웹페이지를 다운로드 받아서 그 웹페이지의 HTML코드를 분석한다.
그리고 그 HTML코드의 태그를 근거로 정리해놓는다.

만약 사용자가 와서 ‘coding’이라고 검색했을 때, 수 많은 웹페이지들 중에서
제목이 ‘coding’인 사이트와 그냥 시각적으로만 제목처럼 보이는 ‘coding’이라는 정보를 가지고 있는 사이트 중에 어떤것을 보여주겠는가?
→ 당연히 제목이 coding인 사이트를 후자보다 훨씬 먼저 보여줄 것이다.

오늘날 현대사회에서 검색엔진이 차지하는 위상이 너무나 크기때문에 검색엔진에 노출이 안된다는 것은
실질적으로 존재하지 않는다, 라는 의미를 갖는다고 봐도 무방하다.

우리가 웹페이지를 만들면서 뭔가 더 화려하고 편리하게 만들고 싶다는 욕심이 생길 수 있지만 그런것들보다 어쩌면 훨씬 더 중요한 것은 바로,
웹이 갖고 있는 본래의 의미. ‘정보’라는 것을 탄탄히 하는 것이 훨씬 더 중요한 이슈라는 것이다.

( + 경우에 따라서 가끔 정보를 예쁘게 하기위해서 포토샵을 이용해 이미지로 글을 쓰는 경우가 있는데 그렇게되면 검색엔진에게는 존재하지 않는 페이지가 될 수 있다... → 10년 뒤에는 큰 손해로 이어질수도...)

이렇게 HTML을 의미에 맞게 정확하게 사용한다 (이것을 시맨틱 마크업(semantic markup) 이라고 부른다.)
, 라는 것은 비즈니스적인 측면에서 정말 중요한 문제라는 것을 인지해야 한다.

HTML이 중요한 이유가 또 하나 있다.

웹의 핵심적인 철학은 접근성이다.

웹은 모든 운영체제에서 동작하고, 웹페이지의 소스코드는 누구나 볼 수 있고, 웹은 저작권이 없는 순수한 공공재이다.
웹의 이런 특징들이 웹을 다른 기술들과 구별되는 특별한 것으로 만드는데

거기에 더해서 누구나 차별없이 정보에 접근할 수 있어야 한다는 철학을 접근성(accessibillity)이라고 한다.

특히 웹이 중요하게 생각하는 접근성은 신체적인 장애가 있는 사람도
웹을 통해서 정보에 접근할 수 있어야 한다는 것이다.

시각장애가 있는 사람들은 스크린리더(screen reader)와 같은 프로그램을 이용해서 정보를 청각화 해서 접한다.

그런데 웹페이지를 예쁘게 하기 위해서 HTML을 사용하지 않고 웹페이지 전체를 이미지로 만든다면 시각장애가 있는 분들에게는 암흑과도 같은 상태가 되는것이다.

시각장애인을 배려하기위한 여러가지 기술과 테크닉이 있지만 그 중요한 첫 출발은 HTML의 태그를 정확히 알고 의미에 맞게 사용하는 것이다.

이렇게 HTML은 비즈니스적인 측면에서도 중요하지만, 휴머니즘적인 측면에서도 매우 중요한 기술이다.

웹 표준 . 웹 접근성 . 웹 호환성

---

웹 표준(Web Standards)

우리가 어떤 웹페이지를 html로 만들었을 때 그 웹페이지를 여러가지 웹브라우저에서 열 수 있는데
이 브라우저를 만든 회사들이 각각 다르기 때문에 각 브라우저에서 보여지는 모습이 상이하다.
(이를 동일하게 보이게 하기위해 개발자가 css 처리를 하기도 한다.)

실제로 같은 코드로 버튼을 만들어서 각각 다른 브라우저에서 열었을 때 각 브라우저에서 보여지는 버튼의 모습이 다르다.
그러나 다행인 것은 사용자의 입장에서 보자면 모두 누를 수 있는 ‘버튼’의 형태를 가지고 있다는 것이다.

만약 이렇게 서로 약속된 ‘표준’ 이라는게 없다면 특정 브라우저에서는 버튼을 버튼모양이 아닌 다른 모양으로 보이게할 수도 있을것이다.

그렇게 되면 사용자는 혼란을 느낄것이고 개발자는 이 것이 버튼처럼 보일 수 있도록
그 특정 브라우저 만을 위한 별도의 코드를 작성해야 하는 상황이 생길것이다.

이런 상황을 방지하기 위해 브라우저들은 어떤 법칙을 만들게 되고 이 언어에 대한 문법의 정의를 사전으로 만든것이 바로 웹 표준(Web Standards)이다.

보통 웹 표준을 이야기 할 때는 통상적으로 HTML5를 기준으로 이야기 한다.

• HTML5는 W3C에서 2014년에 공식 표준화 함.
• 2019년에 WHATWG에 의해 HTML Living Standard가 표준화 됨.

W3C(World Wide Web Consortium)는 회원 조직 , 정규 직원 및 일반 대중이 함께 협력하여 웹 표준 을 개발하는 국제 커뮤니티 로 웹 발명가이자 이사 인 Tim Berners-Lee 와 CEO인 Jeffrey Jaffe 가 이끄는 단체이다. W3C의 사명은 웹의 가능성을 최대한으로 끌어내는 것이다.

WHATWG(Web Hypertext Application Technology Working Group, WHATWG)은 HTML 및 관련 기술을 발전시키는 데 관심이 있는 사람들의 모임으로 2004년 애플, 모질라 재단, 오페라 소프트웨어의 개인들이 설립하였다.
그 후, 당시 WHATWG 규격의 편집장이었던 이안 힉슨(Ian Hickson)이 오페라 소프트웨어에서 구글로 이직함에 따라 구글도 WHATWG의 일원이 됐다.

실제로는 우리가 지금 사용하고있는 표준어는 HTML Living Standard이며 이것이 예전부터 HTML5라고 불렸기 때문에 일반적으로 HTML5라고 하면 HTML Living Standard를 부르는 이름이라고 생각하면 되겠다.

• HTML이 표준화 되기 이전에는, 익스플로러의 액티브X처럼 독자적인 플러그인이 존재하기도 했다.(→ 때문에 개발자들이 액티브X에서만 돌아가는 기능을 넣기도해서 사용자들이 그 웹페이지를 들어가기 위해 울며 겨자먹기로 액티브X를 사용하기도 했다.)

개발자가 웹페이지를 만들때 웹 표준을 준수하여 작성한다면 운영체제, 브라우저마다 의도된 대로 보여지는 웹페이지를 만들 수 있기 때문에
항상 코드를 짤 때 웹표준에 의거해서 적합한지, 아닌지를 생각하면서 작성하는것이 매우 중요하다.

웹 접근성(Web Accessibility)

• 웹 접근성은 어떠한 제약(신체적, 물리적)이 있는 상황에서도 모두가 차별없이 웹사이트를 이용할 수 있게 하는 방식을 가리킨다.
  사이트가 올바르게 설계되어 개발되고 편집되어 있을 때 모든 사용자들은 정보와 기능에 동등하게 접근할 수 있다.

  → 웹 접근성은 장애를 갖지 않는 사람에게도 이점을 준다.

  • 작은화면, 다른 입력 모드 등을 가진 휴대폰, 스마트 워치, 스마트 TV 및 다른 디바이스를 사용하는 사람
  • 나이가 들어감에 따라 기능적 능력이 변한 연로한 사람
  • 팔이 부러지거나 안경을 잃어버려서 “일시적인 장애"를 겪는 사람
  • 밝은 햇빛이나 소리를 듣기 힘든 환경에 있어 “상황적 제약"을 겪는 사람
  • 느린 인터넷을 사용하거나 제한적이거나 비싼 대역폭을 사용하는 사람

• 웹 브라우징에 쓰이는 보조 과학기술 : 스크린리더, 화면 돋보기, 음성 인식, 키보드 오버레이 등
  이러한 기능이 잘 되어있는 사이트를 접근성이 높은 사이트라고 이야기 한다.
  

웹 호환성(Cross Browsing)

• 웹 브라우저의 버전, 종류와 관계없는 웹사이트 접근
• 웹 표준 준수를 통한 브라우저 호환성 확보
  • HTML, CSS 문법 준수
  • 동작, 레이아웃, 플러그인 호환성

이 세가지를 명확하게 알고 준수해야 우리가 앞으로 좋은 개발을 하기위한 방향성을 가질 수 있다.

웹 표준을 지키고 접근성과 호환성을 높히려는 노력으로 더 나은 코드, 더 나은 웹페이지를 만들도록 하자.

HTML, CSS 그리고 JavaScript

---

HTML, CSS, JavaScript는 웹을 구성하는 3요소 라고도 불리는 앞으로 우리가
웹페이지를 만들기 위해서, 프론트엔드 개발자가 되기위해서 꼭 필수적으로 알아야 할 언어들이다.

이 세 언어가 각각 어떤 역할을 하는지 알아보자.

[구조] HTML : 웹 문서의 기본적인 골격을 담당

[표현] CSS : 각 요소들의 레이아웃, 스타일링을 담당

[동작] JavaScript : 동적인 요소(사용자와의 인터랙션)을 담당

최근에는 JavaScript의 영역이 넓어지면서 HTML과 CSS의 역할까지 일정부분 위임해서 제어하기도 한다.
→ 그러나 HTML과 CSS, JavaScript 각각의 역할을 정확하게 인지하고 잘 구분해서 사용해야 웹페이지를 만들때 좀 더 생산적인 유지보수가 가능하다는 것을 잊지말자!

outro

앞으로 배울 수 많은 내용에 비해 별것 아닌것처럼 느껴질 수도 있지만
뭐든지 기초가 탄탄해야 단단하게, 올곧게 쌓아 나갈 수 있는법!
이것을 확실하게 알고 있어야 더 나은 웹페이지를 만들 수 있는 방향성이 생길 것이다.
이제 첫 글이지만 앞으로 적을 내용이 아주 많으니... 계속해서 화이팅!

---

Ref
https://developer.mozilla.org/ko/docs/Web/HTML