당니의 개발자 스토리
What is HTML & Internet - 생활코딩 WEB1 본문
4강 코딩과 HTML
세상에는 다양한 언어가 있다. C/C++, java, javaScript, Php, python 등..
이 중에서 웹페이지를 만드는 code가 Html 이라는 이름의 코드이다.
html 이라는 언어의 사용법을 살펴보기에 앞서서 장점을 알아보자.
1) 쉽다 - 10분이면 문법을 다 알 수 있다. HyperText Markup Lnaguage
2) 중요하다
3) PUBLIC DOMAIN - 무료(저작권 X)
5강 HTML 코딩과 실습환경 준비( 2023년 개정판 )
준비물) 1. 웹브라우저 , 2. 코드 편집기(Editor) 이미 가지고 있다.
Editor는 Windows에는 메모장, MAC에는 텍스트 편집기
그러나, 이 수업에서는 VScode를 사용할 것이다.
나중에 vscode가 없어진다면?
2023년 최고의 웹개발 에디터는 무엇인가? (2023 vest web development editor) 라고 검색하자 !
이제, vscode를 실행하자.
floder명은 WEB이고 이 폴더 안에 웹페이지들을 만들 것이다.
맥북 상단바에서 file 밑에 open folder를 선택하자.
WEB을 연 상태에서 우클릭하면 New File이 있다.
1.html 1
처음 아무것도 없는 상태에서 vscode에 Hello World를 작성하자.
그 다음 왼쪽에는 웹브라우저(ex. Google), 오른쪽에는 vscode 화면을 띄운다.
어떻게 웹브라우저에 1.html를 띄우냐?
1. 웹브라우저에 file명을 드래그 해서 주소창에 올려놓고 엔터키
2. 파일찾기 기능 이용, 윈도우는 ctrl+o, 맥북은 cmd+o를 하면 파일찾기 기능이 실행된다.
파일을 선택한 후 <열기>버튼 누르기.
6강 기본문법 태그
우리가 작성하고자 하는 기획서이다.
한꺼번에 만들 수 없기 때문에 조각조각내서 하나씩 완성해가면 된다.
먼저 화면에 표시할 부분은 빨간색 박스이다.
원하는 text를 복사해서 1.html에 붙여넣고 웹페이지를 리로드하면 바뀐 게 뜬다.
왼쪽이 결과이고 오른쪽이 원인(Sorce, Code)이다.
creating web pages를 bold체로, 즉 다른 문자들과 구분되게 진하게 표시하고 싶다.
like creating web pages 이렇게.
여기서 웹을 지배하는 가장 중요하는 문법이 나온다. = 인터넷을 지배하는 문법
뭐냐면, 태그이다.
볼드체를 만드는 태그는 strong 이다.
<strong>creating web pages</strong>위처럼 태그를 작성하고 리로드 하면 된다.
이번엔 creating web pages 와 같이 underline(밑줄)을 하고싶다.
따라서 underline의 약자인 u로 태그를 다시 작성한다.
<strong>creating <u>web</u> pages</strong>TAG는 '설명한다'라는 역할을 담당한다.
7강 혁명적인 변화
웹페이지에서 우클릭을 하면 <페이지 소스 보기>가 있는데 이걸 누르면 code를 볼 수 있다.
여기서, 만약 h1이라는 태그를 우리가 알고싶다고 하자.
그럼 검색엔진에다가 HTML h1 tag 라고 검색하면 h1이 어떤 기능을 하는 태그인지 알려줄 것이다.
검색하면 Example(예제)가 나올 것이다. 정의는 대부분 영어라 이해가 안 갈 수도 있으니,
예제에 있는 코드를 우리의 Editor에 가져와서 붙여넣기하자.
h1~6은 headings(제목)이고 볼드체로 표시되며, 숫자가 커질수록 크기가 작아지고, 줄바꿈이 된다.
8강 통계를 기반한 학습
이 사이트의 그래프는 전 세계 수많은 웹페이지들이 몇 개의 태그를 가지고 있는지 보여준다.
26개만 알아도 평균은 된다.
9강 줄바꿈 : br vs p
두 가지 태그를 살펴볼 것이다.
두 태그는 경쟁관계에 있다. 또한, CSS라는 기술도 깜짝 출연할 것이다!
줄바꿈을 하는 태그를 찾아보자
검색엔진에 html new line tag를 검색하자.
코드에서의 줄바꿈(엔터키)는 의미가 없기 때문에, <br>만 삽입하면 알아서 줄바꿈이 된다.
<br>은 딱 한 번의 줄바꿈 역할을 하므로, 단락처럼 표현하기 위해선 <br><br><br> ... 을 사용하면 된다.
html을 사용하는 사람들은 <br>태그 말고 단락을 표현하기 위한 태그를 따로 만들어놨다.
검색엔진에 html paragraph tag 를 검색하자!
<p>태그는 <br>태그와 달리,
어디서부터 어디까지가 한 단락인지 표시가 가능하기 때문에
닫하는 태그 </p>가 존재한다.
<p>태그는 <br>태그보다 자유도가 떨어진다는 단점이 있다.
원하는 여백만큼 줄바꿈하기 위해선 <br>태그를 여러번 사용하면 되는데,
<p>태그는 정해진 여백만큼 벌어지게 되기 때문이다.
하지만, 우리에게는 css 기술이 있다.
태그와 태그 사이의 여백을 나타내는 css 코드가 있는데, style이라는 문법이 있다.
11강 최후의 문법 속성 & img
'속성'이라는 태그의 심화된 문법을 배워보자
이것만 HTML의 모든 문법을 마스터했다고 얘기할 수 있다.
이미지를 웹페이지에 포함시킬 때 사용하는 태그의 이름은 <img> 이다.
이 말은 즉슨, 태그의 이름만으로는 정보가 부족하다는 의미이다.
여기에 필요한 정보를 알려주는 문법이 필요하다. 그것이 속성이다.
어떤 이미지인지를 알려주기로 약속된 속성이 source인데 길어서 src라고 하자.
src="여러분이 원하는 이미지의 주소" 를 적어주면 웹브라우저는 저 주소에 있는 이미지를
저 위치에다가 표현하게 된다.
unsplash.com라는 이미지를 모아놓은 사이트를 소개하겠다.
저작권에 구애X, 마음대로 사용 가능하다.
원하는 사진을 선택하고 상단에 Download Free를 누른다.
그런 다음 팝업창에 파일 저장을 선택하고 우리가 작업하고 있는 디렉토리, WEB1에다가 다운 받는다.
vscode에서 해당 이미지를 우클릭해서 이름을 짧게 변경한다.
여기서는 coding.jpg라는 파일명으로 변경하였다.
그냥 리로드하면 이미지의 크기가 너무 크기 때문에 width를 사용하여 크기를 450로 조절한다.
따라서, 코드는 다음과 같다.
아직도 사진이 조금 크다.
알아서 사진이 적절하게 맞도록 width를 100%로 바꿔준다.
사이트에 맞게 알아서 조절된 이미지가 보인다.
이제, 속성이 무엇인지 알 수 있게 되었다.
여기서 속성(Attribute)는 src="coding,jpg" width="100%" 이다.
이 속성은 위치가 상관 없으므로 width="100%" src="coding,jpg" 도 의미가 동일하다.
즉, 태그가 태그의 이름만으로는 정보가 부족할 때, 위와 같은 속성을 통해서 더 많은 의미를 부가할 수 있게 된 것이다.
12강 부모자식과 목록
이렇게 태그가 서로 포함 관계로 연관되어 있을 때,
포함하고 있는 태그를 부모 태그,
포함된 태그를 자식 태그라고 한다.
HTML에 있는 여러 태그들은 서로 부모 자식 관계가 막 바뀐다.
그러나, 어떤 태그들은 자식 있는 곳에 항상 부모가 있고,
부모가 있는 곳에 항상 특정한 자식 태그가 있는, 사이가 아주 좋은 태그들이 몇 개 존재한다.
이번 시간에는 그러한 태그들을 살펴볼 것이다.
또한, 밑에 빨간 박스에 해당하는 부분(목차)를 해결해볼 것이다.
HTML, CSS, JavaScript가 목차를 해결할 때 쓰인다.
목차를 만드는 과정에서 부모 자식 관계에 해당되는 태그를 살펴볼 것이다.
먼저, 우리가 배운 태그들로 목차를 작성해보자.
그럼 다음과 같이 코딩할 수 있을 것이다.
그런데, HTML을 만드는 사람들은 목차를 쓸 때 사용하라고 어떤 태그를 고안해냈다.
그러니, 우리는 목차를 만들 때 그 태그를 사용하여야 한다.
그래야지만 그 태그가 의미에 맞게 사용되는 거라고 할 수 있다.
목록의 영어인 list, 앞의 두 글자 li가 태그명이 된다.
<li> ; 목차 태그
원하는 위치에 option를 누른 상태에서 클릭을 하면 한꺼번에 바꿀 수 있다.
이번에는 수업의 참여자들을 목차로 작성해보자.
원래의 목차와 수업 참여자들의 이름 목차를 구분하고 싶어서 <br>을 사용한 코드가 다음과 같다.
그러나, 이런 경우에 쓰라고 고안된 태그가 있다.
바로, <li> 태그의 부모인 <ul> 태그이다.
즉, <li> 와 같은 항목들은 그 항목이 어디서부터 어디까지가 서로 연관된 항목인지를
경계 짓기 위한, 그룹핑을 하기 위한 부모 태그인 <ul> 태그가 필요한 것이다.
위와 같이 작성하면 <br> 태그 없이도 줄바꿈이 된다.
따라서, <li> 태그는 반드시 부모 태그를 갖고 있다.
그리고 부모 태그인 <ul> 태그는 반드시 자식 태그를 가지고 있다.
라는 것을 기억해야 한다.
자 이제, 우리가 목차를 1억개 작성하였다고 해보자.
그런데 1. HTML을 지워야 하는 상황이 발생했다.
이런 경우 그 다음에 있는 애들의 번호를 전부 다 바꿔줘야 할 것이다.
어떻게 해야할까 ?
<ul> 태그를 <ol> 태그로 바꿔준다.
그리고 우리가 작성하였던 숫자를 지우고 리로드 하면 다음과 같다.
앞의 숫자들이 자동으로 넘버링 되는 것을 볼 수 있다.
번외로, 나중에 우리가 표를 작성할 때는
<table>이라는 태그를 사용하는데,
<table>의 경우에는 <li> 와는 다르게 3대가 같이 다닌다.
반면, <li>는 2대가 같이 다닌다.
13강 문서의 구조와 슈퍼스타들
정보량이 많아짐에 따라서, 그 정보를 잘 정리 정돈하기 위한 체계, 혹은 구조라는 것이 필요한데
이번 시간에는 그 구조를 만드는 방법을 살펴보자.
또한, HTML 태그의 빈도수 상위를 차지하는 슈퍼스타들에서도 살펴볼 것이다.
우리가 여태까지 한 코드를 보면 페이지의 이름이 우리의 파일명과 동일하다.
부끄럽지 않은가?
부끄럽다고 해! 그러니 바꿔보자.
<title>WEB1 - html</title>위와 같은 코드를 삽입하면, 페이지명이 바뀐다.
검색엔진의 경우, 이와 같은 웹페이지의 title들을 책으로 치면 책 표지와 같은 정보로 사용한다.
그렇기 때문에 우리가 웹페이지를 만들 때, <title> 태그를 쓰지 않는 것은
굉장한 손해가 된다.
이번에는 HTML이라는 제목을 HTML은 무엇인가?로 바꿔보자.
코드에 작성한 한국어 문자가 그대로 출력되지 않고, 이상하게 출력된다.
왜냐하면, 코드에 작성한 글씨 그대로가 컴퓨터에 저장되지 않기 때문이다.
컴퓨터는 모든 정보를 0과 1로 최종적으로 저장한다.
그 0과 1을 어떻게 저장할 것인지에 대한 여러가지 약속들이 존재하는데,
약속들 중 하나가 utf-8이다.
utf-8이 뭔지 몰라도 되지만, 우리가 작성한 코드의 이란 무엇인가? 는 utf-8로 저장된 상태이다.
그렇다면 우리가 작성한 이 파일을 웹브라우저가 열 때도,
utf-8로 열어야지만 열리지 않겠는가?
그래서 우리가 웹브러우저에게 "웹브라우저야 이 웹페이지를 열 때는 utf-8로 열어야 해"라고 알려줘야 하는데
그 의미에 해당하는 코드가 다음과 같다.
<meta charset="utf-8"><meta 까지 입력하고 엔터를 치면 vscode가 다음에 작성하면 좋은 코드들을 추천어들로 나열해준다.
여기서, charset은 'chracter(문자) + set(규칙)'의 합성어이고,
"utf-8로 문서를 읽어라" 라고 브라우저에게 얘기를 해준다.
자, 이번에는 위에 작성한 두 줄의 코드를 보자.
위의 두 줄 코드 ( <title>WEB1 - html</title>과 <meta charset="utf-8"> )는
밑에 작성된 코드 ( <ol>부터 끝까지 )와 다르다.
위의 두 줄은 본문을 설명하고, 밑에 코드들은 본문이다.
즉, <title>WEB1 - html</title>은 본문의 제목이 무엇인지를 설명하고 있고,
<meta charset="utf-8">는 본문이 utf-8이라는 방식으로 저장되어 있다. 라는 것을 설명한다.
HTML을 만든 사람들은 본문을 <body> 라는 태그로 묶기로 약속했다.
그리고, 본문을 설명하는 태그들은 <head> 태그로 묶기로 약속했다.
즉, HTML에 있는 모든 태그는 <head> 태그 또는 <body> 태그,
이 둘 중에 하나 아래에 놓이게 된다라는 것이다.
그런 점에서 <head> 태그와<body> 태그는 상당히 고위직 태그라고 볼 수 있다.
그리고 이 고위직 태그들을 감싸는 단 하나의 초고위층 태그가 있는데 그것이 바로
<html> 태그이다.
그리고 <html> 태그 위에 관용적으로 써야할 표현이 있다.
이 문서는 HTML이다. 라는 뜻에서
<!doctype html><!doctype html> 라고 써주면 된다.
이제 우리는 모든 페이지 소스들을 분석할 수 있게 되었다.
14강 HTML 태그의 제왕
태그가 웹의 왕국이라면 이번 강의에서 나오게 될 태그는 이 왕국의 제왕이다.
검색 엔진들은 이 태그 덕분에 전 세계의 웹을 항해하면서 웹페이지를 발견할 수 있었고
이 태그 덕분에 최고의 검색 결과를 만들 수 있었다.
다시말해, 이 태그가 없었다면 검색엔진은 존재하지 않는다.
또한, 이 태그는 정보혁명의 시작이며 우리가 하루에 100번도 넘게 한다.
그리고 HTML의 약자 HyperText Markup Language의 첫 글자 HyperText가 바로 이 태그를 의미한다.
이 태그의 이름은 anchor의 첫 글자를 딴 <a>이다.
anchor는 배가 정박할 때 사용되는 닻을 의미한다.
정보의 바다에 정박한다는 의미인 <a> 태그는 어떤 기능을 표현한 걸까?
바로 링크이다.
본문에 있는 Hypertext Markup Language (HTML) 에 HTML이라는 기술의 공식 사용설명서의 링크를 달고 싶다.
검색 엔진에 html specification 을 검색하자.
specification은 한국어로는 명세라고도 하는데 설명서라는 의미도 있다.
즉, HTML을 만드는 W3C라는 국제기구에서 만든 공식 설명서로 생각하면 된다.
짜잔. 링크가 걸렸다.
h는 하이퍼텍스트의 약자이고, ref는 reference의 약자이다.
만약, 클릭하였을 때 새 탭으로 열리게 하고 싶으면 추가적으로 target="_blank"를 입력하면 된다.
만약, 클릭하기 전에 이 링크가 무엇인지 알려주는 툴팁이 뜨게 하고 싶다면.
또 추가적으로 title="html5 specification" 을 작성하고 커서를 갖다대면, 툴팁이 뜰 것이다.
- .html은 HTML의 확장자이다. [본문으로]