HTML ---> (HyperText Markup Language)
Web의 창시자는 웹의 저작권을 포기하여 public domain으로 두었다. 이 덕분에
google, microsoft, naver와 같은 기업들은 각자의 browser를 개발할 수 있었다.
(빨리 가려면 혼자 가고, 오래 가려면 같이 가라.)
web은 특정 기업이 독점하는 만큼 빨리 발전하진 못했지만,
독점되지 않기 때문에 1990년 이후로 32년이 지난 지금까지도 살아 남았고, 앞으로 32년 뒤에도
살아남았을 확률이 매우 높은 기술이다.
혁명적인 변화
시험의 목적은 누가 열심히 공부했는지를 구분하는 것이기 때문에 자연스럽게 틀릴만한 것(어려운 것)이 출제된다. 이런 상태에 오래 노출되면, 공부에 있어서 크리티컬한 잘못된 생각을 하게된다 : 어려운 것은 중요하고, 쉬운 것은 사소하다.
But, 꼭 그런 것은 아니다. 쉬운 것이 많이 쓰이고 그 만큼 중요할 확률이 높다.
우리는, 모르는 것이 무엇인지 알고 있다면, 검색할 수 있는 시대에 살고있다.
통계에 기반한 학습
지금 우리가 배우고 있는 것들을쉽다고 무시하지 마세요.
1990년부터 지금까지 복잡해진 거대한 웹은지금까지 배운 것들의 토양 위에 서 있습니다.지금까지 배운 것이 없다면뒤에서 배우는 것들은 존재하지 않습니다.뒤에서 배우는 것이 존재하지 않아도지금까지 배운 것들은 잘 지낼 수 있습니다.
공부하실 때통계를 기반으로 공부 방향을 스스로 설정하셨으면 좋겠습니다.
또가야 할 길 보다,거쳐온 길을 보면서자기에게 유리하게 상황을 해석하셨으면 좋겠습니다.자기만큼은 자기의 편이 되어야죠.
HTML이 중요한 이유
일반인과 지식인이 만든 코드의 차이를 살펴보시죠.
1<h3>coding</h3>
지식인의 제목은 coding이 제목이라는 의미를 나타내고 있습니다.
1<strong><span style="font-size:22px;">coding</span></strong>
일반인의 제목은 coding이 22px의 크기를 가졌고, 진하게 표시되어야 한다는 시각적인 장식만을 가지고 있습니다.제목이라는 정보는 어디에도 없습니다.
일반인의 제목과 지식인의 제목은 눈으로 보기에는 완전히 같습니다.
하지만, 똑같은 모양의 두 제목은 코드가 완전히 다릅니다.
코드가 다른 것이 얼마나 중요한 지를 공감할 수 있게 설득해 보겠습니다.
위와 같이 일반인과 지식인의 코드가 있을 때 누구의 코드가 더 좋은 지에 대한 심판을 검색엔진에게 맡겨 보겠습니다.
일반인과 지식인이10년 동안 1억개의 웹페이지를 만들었다면 어떤 차이가 생길까를 봅시다.
검색엔진은 전세계의 웹페이지를 분석합니다.그리고 사용자가 검색을 했을 때 검색결과를 보여줍니다.
만약 사용자가 검색엔진에게 coding이라는 정보를 검색했다면 검색엔진은<h3>로 감싸진 페이지와<strong><span style="font-size:22px">로감싸진 페이지 중에 어떤 페이지를 먼저 보여줄까요?
<h3>로 감싸진 페이지를더 먼저 보여줄 것입니다.<h3>는 제목을 의미 하지만 <strong><span style="font-size:22px">는 시각적인 장식이기 때문입니다.
오늘날 정보의 세계에서 검색엔진의 검색결과에서 노출되느냐는 실제로 존재하는냐, 존재하지 않는냐의 문제라고할 수 있습니다.100페이지 밖에 있는 검색결과를 누가 보겠어요.
의미에 맞는 태그로 웹페이지를 만든 지식인과 그렇지 않은 일반인은 10년 뒤에 인생이 달라져 있을 것입니다.
정보사회에서 HTML을 의미에 맞게 잘 사용하는 것은 비즈니스적인 측면에서 매우 중요합니다.
한편, HTML이 중요한 또 하나의 이유가 있습니다.
웹의 핵심적인 철학은 접근성입니다.웹은 모든 운영체제에서 동작하고,웹페이지의 소스코드는 누구나 볼 수 있고,웹은 저작권이 없는 순수한 공공재입니다.웹의 이런 특징들이 웹을 다른 기술들과 구별되는 특별한 것으로 만든다고 생각합니다.
거기에 더해서 누구나 차별 없이 정보에 접근할 수 있어야 한다는 철학을 접근성(accessibility)라고 합니다.
특히 웹이 중요하게 생각하는 접근성은 신체적인 장애가 있는 사람도 웹을 통해서 정보에 접근할 수 있어야 한다는 것입니다.
예를 들어서 시각 장애가 있는 사람은 스크린리더(screen reader)와 같은 프로그램을 이용해서 정보를 청각화해서 접하게 됩니다.
그런데 웹페이지를 예쁘게 하기 위해서HTML을 사용하지 않고 웹페이지 전체를 이미지로 만든다면 시각 장애가 있는 분들에게는 암흑과도 같은 상태가 됩니다.
자신도 모르는 사이에 누군가를 소외시키고 있는 것입니다.
반대로,HTML을 의미론적으로 잘 사용한다면자신도 모르는 사이에 누군가에게 정말 큰 도움을 주고 있는 것입니다.
이렇게HTML은비즈니스적인 측면에서도 중요하지만,휴머니즘적인 측면에서도 중요한 기술입니다.
부모 자식과 목록
<li> 리스트화 시킬 내용<li>
<ul> 리스트를 그룹화 (넘버링 x)
<li> </li>
</ul>
<ol> 리스트를 그룹화 (넘버링까지 제공)
<li> </li>
</ol>
※ Ordered List / Unordered List 로 기억
문서의 구조와 슈퍼스타들
<title> 탭의 제목 </title>
<meta charset="utf-8"> : 한글 깨지지 않도록 함. web에 utf-8의 양식을 썼다는 것을 알려줌
<!doctype html> : 최상단 위치하는 형식
<html> head와 body 를 감싼다</html>
<head> 해당 페이지의 설정</head>
<body> 해당 페이지의 본문 </body>
HTML 태그의 제왕
우리 수업에는 두 개의 혁명적 순간이 있습니다.
하나는 태그라는 문법을 배운 순간이고, 또 하나는 지금부터 설명할 태그를 알게 된 순간입니다.
이 태그가 무엇일지 맞춰 보세요.
태그가 웹의 왕국이라면
지금부터 설명드릴 태그는 이 왕국의 제왕입니다.
현대의 HTML은 150여개의 태그로 이루어져 있지만 이들 모두 이 태그의 아래에 있습니다.
이 태그가 무엇일까요?
검색엔진들은이 태그 덕분에 전 세계의 웹을 항해하면서 웹페이지들을 발견할 수 있고,이 태그 덕분에 더 좋은 검색 결과를 만들 수 있었습니다.이 태그가 없다면 검색엔진은 존재하지 않았을 것입니다.우리의 일상에서 검색엔진이 없다면 어떤 일이 생길지 생각해 보세요.이 태그가 무엇일까요?
이 태그는 도시의 길과 인체의 혈관과 같은 것입니다.
이 태그가 없다면 전세계의 모든 웹페이지는 고립될 것이고, 정보혁명도 시작되지 않았을 것입니다.
이 태그가 무엇일까요?
이 태그는 매일 백 번 넘게 사용하는 기능을 표현하는 태그입니다. 하루에 백 번도 넘게 하는 일은 많지 않습니다.
HTML의 약자 HyperText Markup Language의 HyperText가 바로 이 태그를 의미합니다.
이 태그의 이름은 anchor의 첫글자 a입니다. 앵커는 배가 정박할 때 사용하는 닻을 의미합니다.
정보의 바다에 정박한다는 의미의 시적인 표현인 a 태그는 어떤 기능을 표현하는 것일까요?
이 태그는 바로
링크입니다
<a> 링크할 주소와 여러가지 옵션들 </a>
ex)
위의 예시는 : 새 창(target옵션)에서 해당 링크를 열고 , 커서를 올려놓을 때 html5 specification를 보여준다 (title옵션)
태그 (Tag)
<strong> 굵은 글씨로 표시할 내용 </strong>
<u> 밑줄을 표시할 내용 </u>
<h1> 제목 </h1> ----> (큼) h1, h2, ,, h6 (작음)
~~ <br> ~~ -----> 줄바꿈
<p> 문단 </p> -----> 문닾 앞 뒤로 줄바꿈
※ 본 포스팅은 생활코딩의 WEB1 - HTML & Internet 강의를 정리한 것입니다.
'Web' 카테고리의 다른 글
| 효율적인 Docker 빌드: 캐시를 활용한 속도 개선 (0) | 2024.06.27 |
|---|---|
| WEB2 - JavaScript 핵심 정리 (by 생활코딩) (0) | 2022.01.28 |
| WEB2 - CSS 핵심 정리 (by.생활코딩) (0) | 2022.01.20 |
