공부기록

[생활코딩_WEBn] 문서의 구조와 슈퍼스타들

[생활코딩_WEBn] HTML 태그의 제왕

[생활코딩_WEBn] 웹사이트 완성

[생활코딩_WEBn] 원시웹

[생활코딩_WEBn] 인터넷을 여는 열쇠 : 서버와 클라이언트

[생활코딩_WEBn] 웹호스팅 (github pages)

[생활코딩_WEBn] 웹서버 운영하기 - 1 (Bitnami 설치)

'생활코딩 WEBn' 카테고리의 다른 글

[생활코딩_WEBn] 웹서버 운영하기 - 1 (Bitnami 설치) (0)	2020.09.04
[생활코딩_WEBn] 웹호스팅 (github pages) (0)	2020.09.04
[생활코딩_WEBn] 인터넷을 여는 열쇠 : 서버와 클라이언트 (0)	2020.09.03
[생활코딩_WEBn] 원시웹 (0)	2020.09.03
[생활코딩_WEBn] 웹사이트 완성 (0)	2020.09.03

---------------------------------------------------------

* 생활코딩 WEBn 정독하기 project *

웹사이트 완성

LINK : https://opentutorials.org/course/3084/18431

----------------------------------------------------------

링크로 연관된 페이지 연결하여 웹사이트 만들기

링크 : 본드 / 실, 연관된 페이지를 연결해서 책(웹사이트)을 만드는 역할
생활코딩의 예제 : https://web-n.github.io/web1_html_internet/index.html
- ~~내가 만든 웹사이트를 보여주고 싶은데 아직 배포하는 법을 모른.. 다.. (초보.. )~~

1. 어떤 부분을 어떤 페이지와 연결할 것인가. !

Let's Play Games ! : index.html > 웰컴 페이지
1. 리그 오브 레전드 : 1.html
2. 배틀그라운드 : 2. html
3. 어몽 어스 : 3.html

2. 링크 연결하기.

3. 페이지 만들기.

기존에 있었던 '1.html'외의 'index.html' / '2.html' / '3.html' 만들기

1) 기존에 있던 1.html을 우클릭 - duplicate 하고 파일명 바꾸기.

1.html 을 template으로 사용할 것.

2) 페이지 내용 수정하기.

<!doctype html>
<html>
<head>
<title>Game Information-LOL</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="index.html">Let's Play Games!</a></h1>
<ol>
<li><a href="1.html">리그 오브 레전드</a></li>
<li><a href="2.html">배틀그라운드</a></li>
<li><a href="3.html">어몽어스</a></li>
</ol>
<h2>리그 오브 레전드란?</h2>
<p><a href="https://na.leagueoflegends.com/ko-kr/" target="_blank" title="leagueoflegends official site">리그 오브 레전드</a>는 5명의 강력한 챔피언으로 구성된 양 팀이 <strong>서로의 기지를 파괴하기 위해 치열한 사투를 벌이는 <u>전략 게임</u></strong>입니다. 140여 명의 챔피언 중 하나를 선택해 화려한 플레이를 펼치며 적을 처치하고 포탑을 파괴해 승리를 쟁취하세요.
....
.....
</body>
</html>

각 페이지에 있는 코드에서, 보라색 부분 (제목 + 목차 + 구조 tag) 는 유지하고, 분홍색 부분의 내용만 수정한다.
2.html,3.html, index.html 모두 적절히 내용을 채워 넣는다.
그리고 저장하면 웹사이트 완성!

< 조잡하지만 내가 만든 사이트>

index.html / Let's Play Games! 를 클릭하면 이동하는 페이지.

* 관련된 게시물 *

[생활코딩_WEBn] 문서의 구조와 슈퍼스타들

[생활코딩_WEBn] HTML 태그의 제왕

'생활코딩 WEBn' 카테고리의 다른 글

[생활코딩_WEBn] 인터넷을 여는 열쇠 : 서버와 클라이언트 (0)	2020.09.03
[생활코딩_WEBn] 원시웹 (0)	2020.09.03
[생활코딩_WEBn] HTML 태그의 제왕 (0)	2020.09.03
[생활코딩_WEBn] 문서의 구조와 슈퍼스타들 (0)	2020.09.02
[생활코딩_WEBn] 부모 자식과 목록 (0)	2020.09.02

---------------------------------------------------------

* 생활코딩 WEBn 정독하기 project *

HTML 태그의 제왕

LINK : https://opentutorials.org/course/3084/18418

----------------------------------------------------------

링크 태그 <a></a>

1. 링크 태그의 수식어

태그의 제왕
검색엔진의 원천
정보의 고립을 막음
하루에 백번도 넘게 사용함
HTML의 약자 Hyper Text Markup Language에서 Hyper Text
anchor(배가 정박할 때 사용하는 닷. 정보의 바다에 정박한다의 시적인 표현)의 첫 글자 <a>

2. 링크태그 <a> 사용

이전에 만들어 놓은 웹페이지에 링크를 넣을 것.

원하는 홈페이지의 주소 복사.
- 강의에서는 검색어 : html specification - W3C에서 만든 HTML 공식 설명서
- 나는 LOL 을 주제로 페이지를 만들고 있기 때문에, 리그 오브 레전드 공식 사이트 사용
아래의 코드 작성 : a태그와 href 속성
1. <a href="https://na.leagueoflegends.com/ko-kr/">리그 오브 레전드</a>
위의 코드 결과. 링크를 누르면 해당 사이트로 이동한다.
새로운 탭에서 열리고, 마우스 올렸을 때 설명이 나오도록 속성 추가
1. <a href="https://na.leagueoflegends.com/ko-kr/" target="_blank" titie="leagueoflegends official site">리그 오브 레전드</a>

3. 링크와 공부

링크를 타고 타고 하며 정보를 얻는 것도 공부이다. 이것을 즐기고 있다면 공부를 즐기는 사람이다.

* 관련된 게시물 *

[생활코딩_WEBn] 문서의 구조와 슈퍼스타들

'생활코딩 WEBn' 카테고리의 다른 글

[생활코딩_WEBn] 원시웹 (0)	2020.09.03
[생활코딩_WEBn] 웹사이트 완성 (0)	2020.09.03
[생활코딩_WEBn] 문서의 구조와 슈퍼스타들 (0)	2020.09.02
[생활코딩_WEBn] 부모 자식과 목록 (0)	2020.09.02
[생활코딩_WEBn] 최후의 문법 속성과 img (0)	2020.09.02

---------------------------------------------------------

* 생활코딩 WEBn 정독하기 project *

문서의 구조와 슈퍼스타들

LINK : https://opentutorials.org/course/3084/18409

----------------------------------------------------------

html의 구조

문장 모여서 페이지 - 페이지 모여서 책 - 책에는 제목과 저자.
정보가 많아짐에 따라 정보를 잘 정리 정돈하기 위한 책-구조가 필요함.
- 책의 제목, 저자 등

html tag frequency 그래프에서 최상위 권의 태그들 공부할 것.

1. 책(웹)의 제목 짓기

1) 현재의 제목 : 파일명

2) title 태그 : <title>웹의 제목 </title>

위의 코드를 이전에 작성한 태그 위에 넣어준다.

<title>Game Information-LOL</title>

제목을 명시적으로 알려줄 수 있을 뿐 아니라. 검색엔진에서 노출되기 유리함.

2. 책의 방식 알려주기 - 한글 출력하기 (난 이거 없이도 잘 나왔었는데..? )

1) 컴퓨터에서의 정보 저장 방식

컴퓨터는 모든 정보를 0, 1로 저장.
그것에 관련된 약속이 있는데, 우리는 지금 UTF-8으로 저장된 상태.

이것 웹브라우저가 열 때 utf-8으로 열어야 문제가 없음.
따라서 브라우저에게 utf-8으로 열라고 말해줘야 함.

2) meta 태그 : <meta charset="인코딩방식">

<title>Game Information-LOL</title>
<meta charset="utf-8">

3. 전체적인 구조 (head, body, html, doctype)

1) head와 body tag

위의 두 태그와 아래의 태그는 차이가 있음.
아래 코드 : 본문 -> body로 묶기로 약속함
위의 코드 : 본문을 설명함. -> head 태그로 묶기로 약속함.
- title : 본문의 제목
- meta ~ : 본문이 어떤 방식으로 저장되어 있는지.
즉, html의 모든 태그는 body 혹은 head 태그 안에 들어가야 함.

2) html 태그와 <!doctype html>

html : head, body tag를 감싸는 최고위층의 태그. (코드 전체를 감싼다.)
<!doctype html> : html 태그 위에 관용적으로 써줘야 함. - html이라는 뜻

<!doctype html>
<html>
<head>
<title>Game Information-LOL</title>
<meta charset="utf-8">
</head>
<body>
<ol>
<li>리그 오브 레전드</li>
<li>배틀그라운드</li>
<li>어몽어스</li>
</ol>
...
<body>
</html>

* 관련된 게시물 *

'생활코딩 WEBn' 카테고리의 다른 글

[생활코딩_WEBn] 웹사이트 완성 (0)	2020.09.03
[생활코딩_WEBn] HTML 태그의 제왕 (0)	2020.09.03
[생활코딩_WEBn] 부모 자식과 목록 (0)	2020.09.02
[생활코딩_WEBn] 최후의 문법 속성과 img (0)	2020.09.02
[생활코딩_WEBn] HTML이 중요한 이유 (0)	2020.09.02

---------------------------------------------------------

* 생활코딩 WEBn 정독하기 project *

부모 자식과 목록

LINK : https://opentutorials.org/course/3084/18408

----------------------------------------------------------

1. 부모-자식 태그

1) 포함하고 있는 태그 : 부모 태그

2) 포함된 태그 : 자식태그

-> HTML에서는 부모자식 태그가 막 바뀜

-> 부모-자식 관계가 정해진 태그가 몇 가지 있음.

목차 만들기

1. ul - li

list를 만들기 위해서는 <li> 태그 사용. (줄 바꿈 해준다/ br 대신 사용)
list를 하나로 묶기 위해서 <ul>태그 사용. (까만 동그라미 만들어줌)
<li> 태그와 <ul> 태그는 서로가 꼭 필요한 부모-자식 관계

<ul>
<li>1. 리그 오브 레전드</li>
<li>2. 배틀그라운드</li>
<li>3. 어몽어스</li>
</ul>

2. ol-li

ul으로 순번을 매기려면 너무 어렵다. (제거/추가 시 난감함)
순번을 매겨주는 li의 부모 태그 : <ol>

<ol>
<li>리그 오브 레전드</li>
<li>배틀그라운드</li>
<li>어몽어스</li>
</ol>

3. ul-ol의 어원

ol : Ordered List
ul : Unordered List4

4. 부모-자식 태그의 응용 : table 태그

3대가 같이 다님. (table, tr, td)

<table border=1>
<tr>
<td>챔피언</td>
<td>139개</td>
</tr>
<tr>
<td>룬</td>
<td><ul>
<li>핵심 룬: 3개</li>
<li>일반 룬: 9개</li>
<li>총 12개씩 다섯빌드 : 전체 63개</li>
</ul></td>
</tr>
<tr>
<td>아이템</td>
<td>257개</td>
</tr>
</table>
</p>

* 관련된 게시물 *

'생활코딩 WEBn' 카테고리의 다른 글

[생활코딩_WEBn] HTML 태그의 제왕 (0)	2020.09.03
[생활코딩_WEBn] 문서의 구조와 슈퍼스타들 (0)	2020.09.02
[생활코딩_WEBn] 최후의 문법 속성과 img (0)	2020.09.02
[생활코딩_WEBn] HTML이 중요한 이유 (0)	2020.09.02
[생활코딩_WEBn] 줄바꿈 (0)	2020.09.01

---------------------------------------------------------

* 생활코딩 WEBn 정독하기 project *

최후의 문법 속성과 img

LINK : https://opentutorials.org/course/3084/18407

----------------------------------------------------------

속성 : 태그의 심화된 문법. -> 태그와 속성이면 HTML의 모든 문법 마스터.

1. 사진 넣는 법

1) img 태그 <img>

<h1>리그 오브 레전드란?</h1>
리그 오브 레전드는 5명의 강력한 챔피언으로 구성된 양 팀이 <strong>서로의 기지를 파괴하기 위해 치열한 사투를 벌이는 <u>전략 게임</u></strong>입니다. 140여 명의 챔피언 중 하나를 선택해 화려한 플레이를 펼치며 적을 처치하고 포탑을 파괴해 승리를 쟁취하세요.
<img>
<p style="margin-top:40px;">기지 파괴하기
<br>넥서스는 양 팀 기지의 심장부입니다. 적의 넥서스를 먼저 파괴하는 팀이 게임에서 승리합니다.</p>
<p>아군 넥서스<br>넥서스에서 미니언이 생성됩니다. 넥서스 뒤에 있는 소환사의 제단에서 체력과 마나를 빠르게 회복하고 상점을 이용할 수 있습니다.</p>
<p>적팀 넥서스<br>적팀 기지에는 아군과 동일한 넥서스가 있습니다. 적팀 넥서스를 파괴하면 게임에서 승리합니다.</p>

이미지 안나옴 : 태그의 이름만으로는 정보가 부족

2) 속성-src(source) : <img src="">

unsplash.com : 공공재로 쓸 수 있는 이미지 많음.
다운로드 하여 현재 작업하는 소스가 있는 폴더에 넣기.

따옴표 안에 사진 파일 이름 넣기

<h1>리그 오브 레전드란?</h1>
리그 오브 레전드는 5명의 강력한 챔피언으로 구성된 양 팀이 <strong>서로의 기지를 파괴하기 위해 치열한 사투를 벌이는 <u>전략 게임</u></strong>입니다. 140여 명의 챔피언 중 하나를 선택해 화려한 플레이를 펼치며 적을 처치하고 포탑을 파괴해 승리를 쟁취하세요.
<img src="LOL.jpg">
<p style="margin-top:40px;">기지 파괴하기
<br>넥서스는 양 팀 기지의 심장부입니다. 적의 넥서스를 먼저 파괴하는 팀이 게임에서 승리합니다.</p>
<p>아군 넥서스<br>넥서스에서 미니언이 생성됩니다. 넥서스 뒤에 있는 소환사의 제단에서 체력과 마나를 빠르게 회복하고 상점을 이용할 수 있습니다.</p>
<p>적팀 넥서스<br>적팀 기지에는 아군과 동일한 넥서스가 있습니다. 적팀 넥서스를 파괴하면 게임에서 승리합니다.</p>

3) 크기 조절 : width="100%"

<img src="LOL.jpg" width="100%">

2. 속성(attribute)

1) 위치 상관없음.

2) 태그가 태그 이름만으로 부족할 때 사용.

* 관련된 게시물 *

'생활코딩 WEBn' 카테고리의 다른 글

[생활코딩_WEBn] 문서의 구조와 슈퍼스타들 (0)	2020.09.02
[생활코딩_WEBn] 부모 자식과 목록 (0)	2020.09.02
[생활코딩_WEBn] HTML이 중요한 이유 (0)	2020.09.02
[생활코딩_WEBn] 줄바꿈 (0)	2020.09.01
[생활코딩_WEBn] 통계에 기반한 학습 (0)	2020.09.01

---------------------------------------------------------

* 생활코딩 WEBn 정독하기 project *

HTML이 중요한 이유

LINK : https://opentutorials.org/course/3084/18488

----------------------------------------------------------

1. HTML 은 중요하다.

1) 보통 말하는 '기초가 중요하다.' : 응용으로 가는 과정으로써 중요하다.

2) 하지만, 기초만으로도 할 수 있는 일이 많음.

-> 우리가 배운 것만으로도 할 수 있는 것 소개할 것.

3) HTML이 왜 ! 중요한가?

2. 첫 번째 이유 : 정보성 - 비즈니스적인 측면(feat. 정보사회)

1) 게시물을 쓸 때, 아래의 두 가지로 글씨를 써보자.

'Coding'이라는 글씨를 Bold로
'Coding'이라는 글씨에 제목3 적용

2) 위의 게시물을 HTML으로 바꿔서 보자.

사이즈 바꾸고 bold로 한 것은, <p> 태그로 되어있다.
제목3 적용한 것은 <h4> 태그로 되어있다.

3) 검색엔진은 전 세계에 웹페이지의 HTML을 분석하여 정보를 준다.

정보를 태그로 정리하는데, 본문 태그와 제목 태그의 내용 중 어떤 것을 더 중요하게 여길까?
--> 고민의 여지도 없이 제목 태그 (h2)
이런 것들이 쌓이면, 비즈니스 상에서 이득과 손해가 결정 날 것.

4) 웹을 만들면서 디자인 등의 여러 욕심이 생기겠지만. 가장 중요한 것은 정보를 탄탄하게 하는 것.

~~(나도 이 강의를 보고 '제목' 기능을 사용해서 게시물을 썼다.. )~~

3. 두 번째 이유 : 접근성 (accessibility) - 휴머니즘 적 측면

1) 웹은 저작권 없는 순수한 공공재.

모든 운영체제에 동작 / 웹페이지 소스코드 누구나 볼 수 있음.
다른 기술들과 구별되는 특별한 기술.

2) 휴머니즘 적 측면

웹의 접근성은 신체적인 장애가 있는 분들도 정보로부터 소외되지 않도록 하기 위함이다.
시각장애인 분들은 스크린 리더(screen reader)와 같은 프로그램 사용하여 정보를 청각화 하여 접근.
웹페이지를 만들 때, 문자까지 통으로 이미지로 만든다면 시작장애인 분들이 정보를 얻기 어려움.
HTML 태그를 정확히 알고, 의미에 맞게 사용한다면 시각장애인 분들께 큰 도움이 될 것.

HTML은 비즈니스 + 휴머니즘 적 측면에서 매우 중요한 기술.!

* 관련된 게시물 *

'생활코딩 WEBn' 카테고리의 다른 글

[생활코딩_WEBn] 부모 자식과 목록 (0)	2020.09.02
[생활코딩_WEBn] 최후의 문법 속성과 img (0)	2020.09.02
[생활코딩_WEBn] 줄바꿈 (0)	2020.09.01
[생활코딩_WEBn] 통계에 기반한 학습 (0)	2020.09.01
[생활코딩_WEBn] 혁명적인 변화 (0)	2020.08.31

---------------------------------------------------------

* 생활코딩 WEBn 정독하기 project *

줄바꿈

LINK : https://opentutorials.org/course/3084/18403

----------------------------------------------------------

1. 줄바꿈을 위한 경쟁관계에 있는 태그 두 가지.

1) 코드에서 줄바꿈을 한다고 해도, 화면에서 줄 바꿈 되어 나오지 않는다. 따라서 별도의 태그 필요.

2) br tag (추천 검색어 : HTML new line tag - 직접 검색해서 찾아보기! )

<h1>리그 오브 레전드란?</h1>
리그 오브 레전드는 5명의 강력한 챔피언으로 구성된 양 팀이 <strong>서로의 기지를 파괴하기 위해 치열한 사투를 벌이는 <u>전략 게임</u></strong>입니다. 140여 명의 챔피언 중 하나를 선택해 화려한 플레이를 펼치며 적을 처치하고 포탑을 파괴해 승리를 쟁취하세요.<br><br>기지 파괴하기
<br>넥서스는 양 팀 기지의 심장부입니다. 적의 넥서스를 먼저 파괴하는 팀이 게임에서 승리합니다.<br><br>아군 넥서스<br>넥서스에서 미니언이 생성됩니다. 넥서스 뒤에 있는 소환사의 제단에서 체력과 마나를 빠르게 회복하고 상점을 이용할 수 있습니다.<br><br>적팀 넥서스<br>적팀 기지에는 아군과 동일한 넥서스가 있습니다. 적팀 넥서스를 파괴하면 게임에서 승리합니다.

br 태그의 특징
- 보통 태그는 열고 닫히는 태그인데, br 태그는 닫지 않음.
- 줄바꿈 많이 하고 싶으면 여러 번 쓰면 된다.

3) p tag (추천 검색어 : HTML paragraph tag- 직접 검색해서 찾아보기)

<h1>리그 오브 레전드란?</h1>
리그 오브 레전드는 5명의 강력한 챔피언으로 구성된 양 팀이 <strong>서로의 기지를 파괴하기 위해 치열한 사투를 벌이는 <u>전략 게임</u></strong>입니다. 140여 명의 챔피언 중 하나를 선택해 화려한 플레이를 펼치며 적을 처치하고 포탑을 파괴해 승리를 쟁취하세요.
<p>기지 파괴하기
<br>넥서스는 양 팀 기지의 심장부입니다. 적의 넥서스를 먼저 파괴하는 팀이 게임에서 승리합니다.</p>
<p>아군 넥서스<br>넥서스에서 미니언이 생성됩니다. 넥서스 뒤에 있는 소환사의 제단에서 체력과 마나를 빠르게 회복하고 상점을 이용할 수 있습니다.</p>
<p>적팀 넥서스<br>적팀 기지에는 아군과 동일한 넥서스가 있습니다. 적팀 넥서스를 파괴하면 게임에서 승리합니다.</p>

p 태그 특징
- 열리는 태그 / 닫히는 태그 있음.
- 단락에 사용하기 위해 만든 태그이기 때문에, 웹페이지를 정보로써 가치 있게 만든다.
- 이것이 '단락'이라고 의미론적으로 표현.
- br은 단순히 줄 바꾸는 모양을 만드는 것.
- 정해져 있는 여백만큼만 움직이기 때문에 디자인에 제약이 있음.

2. p 태그에 여백을 세밀하게 조절해 줄 CSS

<h1>리그 오브 레전드란?</h1>
리그 오브 레전드는 5명의 강력한 챔피언으로 구성된 양 팀이 <strong>서로의 기지를 파괴하기 위해 치열한 사투를 벌이는 <u>전략 게임</u></strong>입니다. 140여 명의 챔피언 중 하나를 선택해 화려한 플레이를 펼치며 적을 처치하고 포탑을 파괴해 승리를 쟁취하세요.
<p style="margin-top:40px;">기지 파괴하기
<br>넥서스는 양 팀 기지의 심장부입니다. 적의 넥서스를 먼저 파괴하는 팀이 게임에서 승리합니다.</p>
<p>아군 넥서스<br>넥서스에서 미니언이 생성됩니다. 넥서스 뒤에 있는 소환사의 제단에서 체력과 마나를 빠르게 회복하고 상점을 이용할 수 있습니다.</p>
<p>적팀 넥서스<br>적팀 기지에는 아군과 동일한 넥서스가 있습니다. 적팀 넥서스를 파괴하면 게임에서 승리합니다.</p>

CSS로 디자인을 세밀하게 만질 수 있기 때문에, 최대한 의미에 맞는 태그를 쓰자.!

* 관련된 게시물 *

'생활코딩 WEBn' 카테고리의 다른 글

[생활코딩_WEBn] 최후의 문법 속성과 img (0)	2020.09.02
[생활코딩_WEBn] HTML이 중요한 이유 (0)	2020.09.02
[생활코딩_WEBn] 통계에 기반한 학습 (0)	2020.09.01
[생활코딩_WEBn] 혁명적인 변화 (0)	2020.08.31
[생활코딩_WEBn] 기본 문법 - 태그 (0)	2020.08.31

---------------------------------------------------------

* 생활코딩 WEBn 정독하기 project *

혁명적인 변화 통계에 기반한 학습

LINK : https://opentutorials.org/course/3084/18452

----------------------------------------------------------

1. HTML의 150개의 태그

1) 우리는 이 태그를 다 알 필요가 있을까?

다 알 필요없음. 이전 시간에 배운 혁명적인 변화 때문에 (태그를 알게 되었으니 검색하여 태그들을 알 수 있다. )

2) 그렇다고 해서 하나도 모르면 불편. 어떤 태그들을 공부해야 할까? -> 통계기반 학습!

3) 구글에서 웹 페이지를 분석한 것 정리한 홈페이지 : https://advancedwebranking.com/html/

여기서 쭈우욱 아래로 내려가면, 태그들 마다 쓰이는 빈도가 나와있다.

결론 : 우리는 이 통계를 이용하여 어떤 태그를 배울지 판단할 수 있다.

2. 통계를 기반으로 한 학습

1) 사용빈도가 적은 것들이 어렵고 중요한 것 같지만, 사용빈도가 높은 것들을 합쳐서 만들어진다.

2) 사용빈도가 적은 것들은 편리하지만, 사용빈도가 높은 것은 창조성의 원천이다.

3) 통계를 기반으로 무엇을 공부할지 판단하기.

4) 가야 할 길이 멀다고 해서 의기소침하지 않기.

The average web page from top twenty Google results

Apparently, an average web page uses twenty-eight different element types: The twenty-eight elements used on most pages, ordered by appearance frequency:

www.advancedwebranking.com

* 관련된 게시물 *

'생활코딩 WEBn' 카테고리의 다른 글

[생활코딩_WEBn] HTML이 중요한 이유 (0)	2020.09.02
[생활코딩_WEBn] 줄바꿈 (0)	2020.09.01
[생활코딩_WEBn] 혁명적인 변화 (0)	2020.08.31
[생활코딩_WEBn] 기본 문법 - 태그 (0)	2020.08.31
[생활코딩_WEBn] 5. HTML 코딩과 실습환경 준비 (0)	2020.08.31

---------------------------------------------------------

* 생활코딩 WEBn 정독하기 project *

혁명적인 변화

LINK : https://opentutorials.org/course/3084/18400

----------------------------------------------------------

1. 우리가 태그를 알게 된 것은 혁명적인 변화이다 !

1) W3C 홈페이지에 접속해서, 우클릭-페이지소스 보기를 하면 어떤 html 코드로 홈페이지가 만들어졌는지 알 수있다.

*w3c : 웹에 대한걸 만드는 모임.

2) 엄청 복잡해 보이는 코드. 불쾌하다 하지만 불쾌만 한가?

우리는 태그를 알기 때문에, 태그를 알기 전에 봤을때와는 확연한 차이가 있다.

2. 태그를 알기 때문에, 무엇을 모르는지 알 수 있다.

1) 만약 위 코드에서 <h1></h1>이라는 코드를 발견했다.

<h1>W3C</h1>

2) 우리는 태그를 알기 때문에, 위 <h1></h1>에서 무엇을 모르는지 알 수 있다.

즉, 검색 엔진을 통해 검색할 수 있다.

3) 검색엔진에 'HTML h1 tag'검색

- 예제를 먼저 보고, editor에 직접 사용해보기.

<h1>W3C</h1>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

* 위 예제에서 확인할 수 있는 사항 :

(1) h다음에 숫자가오고, 숫자가 작을 수록 글자가 크다.

(2) 글자가 굵어진다

(3) 줄바꿈이 나온다

(4) 숫자는 6까지 있다.

- 검색 결과에서 h1태그의 definition을 확인한다.

*heading : 제목.

3. 위에서 알아낸 h1태그 사용하여 지난번에 만들어오던 1.html에 제목 달아주기.

<h1>리그 오브 레전드란?</h1>
리그 오브 레전드는 5명의 강력한 챔피언으로 구성된 양 팀이 <strong>서로의 기지를 파괴하기 위해 치열한 사투를 벌이는 <u>전략 게임</u></strong>입니다. 140여 명의 챔피언 중 하나를 선택해 화려한 플레이를 펼치며 적을 처치하고 포탑을 파괴해 승리를 쟁취하세요.

결론 : 현 시대는 검색엔진, sns 등으로 빠르게 지식을 얻어낼 수 있다.

우리가 검색할 수만 있다면, 우리가 그 지식을 이미 알고있는 것과 다르지 않다.

기초적인 교양(혁명적인 변화) 만 갖고있다면, 충분히 많은 것들을 알아낼 수 있다. !

* 관련된 게시물 *