공부기록

[생활코딩_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

티스토리 블로그 애드센스 HTML 넣는 법

애드센스를 신청하다 보면, 어떤 태그를 블로그의 html에 붙여넣으라고 한다.

구글에 나와있는 방법이 너무 모호해서 구글링을 통해 찾아낸 방법을 간단하게 공유한다 !

1. 블로그로 들어와서 관리
2. 왼쪽 카테고리에서 꾸미기 - 스킨편집
3. 블로그 화면과 편집하는 부분으로 나뉘어지는데, 편집하는 부분 우측에서 HTML 편집
4. <head></head> 사이에 코드를 붙여넣기 하면 된다.

끝 !

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

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

웹서버 운영하기

LINK 1 : https://opentutorials.org/course/3084/18891

Window : https://opentutorials.org/course/3084/18893

MAC OS : https://opentutorials.org/course/3084/18894

Linux : https://opentutorials.org/course/3084/18895

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

내 컴퓨터에 웹서버 설치하기.

보통은 실습이 잘 작동하지 않을 것.
실제로는 보통 웹 호스팅 업체들에게 서버 운영일 맡긴다.
하지만 서버 설치 과정을 통해 인터넷에 대한 이해를 얻을 수 있을 것.
하나의 문제를 해결하는데 며칠이 걸릴 수도 있지만, 해결 과정에서 수많은 지식과 경험을 얻게 된다.

1. web server 프로그램 설치

웹서버 : 제품군, 안에는 여러 제품명이 있음.
- Apache 사용할 것
- 오픈소스, 무료
- 단 한번도 1등의 자리를 뺏긴 적 없음.
윈도우, MAC OS, LINUX 별 설치 강의가 있음. (나는Window이다. )

2. Window 에 Apache web server 설치하기 (Bitnami)

설치 방법 검색 키워드 : how to install apache http~~(web도 가능)~~ server ~~os이름 (+년도 써도 좋다)~~
직접 설치하는 것은 까다로운 일 : how to easy install apache on window 검색
- 공식 홈페이지에 window에서 어떻게 설치하는지 나와있음.
- 여러 프로그램 있어서 그중 하나 설치하면 자동으로 아파치 설치될 것.
- ~~(2020 기준 안나옴. 인터넷의 작동원리를 이해하는 것이 수업의 목적 중 하나이기 때문에 강의 따라간다! )~~
- -> bitnami WAMP Stack

1) bitnami wamp stack - 다운로드

W : window
A : apache
M: MySQL
P: PHP

공식 홈페이지 들어가서, 자신의 운영체제의 가장 최신version 다운로드
window 7.4.9
SNS 에 공유할 거냐고 물어봄 - No thanks 해도 무관
SNS 공유할거야 ~?
다운로드 완료되면 실행. next 누르다가 아래 화면이 나오면 pass word 입력
- MySQL도 지원하기 때문에, 그때 사용할 password 물어봄. 까먹지 말기
  MySQL 비밀번호 설정
체크 해제 후 Next
설치 기다리고, ( 중간에 Access 허용 눌러주기 ) Bitnami WAMP Stack 실행!
Bitnami 설치 완료
아래의 사진이 Bitnami manager / Go to application 눌렀을 때 화면
Bitnami manager

Bitnami manager에서 'Go to application' 클릭했을 때. 이거 나왔으면 설치 잘 된것
- Bitnami manager - manage servers 에서 Apache Web Server 실행 중인 거 확인 가능.
- 이거 끄면 위의 화면(Go to application) 안뜸.
Bitnami Apache Web Server

* 관련된 게시물 *

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

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

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

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

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

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

웹호스팅 (github pages)

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

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

웹 서버 운영이란?

컴퓨터가 있어야함
컴퓨터가 항상 켜져있어야 함
웹서버 프로그램 배워서 깔아야 함.
인터넷을 통해 웹서버에 연결할 수 있게 여러 조치해야 함.

웹 호스팅

웹 호스터(web host) : 인터넷이 연결되어 있는 컴퓨터 한 대 한대
웹 호스팅 회사(web hosting) : 웹서버를 운영하기 위한 컴퓨터.(=호스트)를 빌려주는 회사
검색 키워드 : 웹 호스팅 회사

github 웹 호스팅

무료이고 유명함.
- 아무리 많은 사람들이 들어와도 돈 한 푼 안내도 됨.
개발자의 성지 - 수많은 오픈소스 여기서 만들어짐.
많은 일을 하는데, 그중 하나가 웹서버 제공

웹 호스팅을 해보자!

1. 회원가입 (sign up) - 로그인 (sign in)

2. New repository 만들기 - 코드 업로드

Repository : 저장소
우리가 지금까지 만든 소스를 git hub에 저장할 수 있음
drop box / google drive.. 와 비슷한 기능인데~~(클라우드?)~~, 프로그래머 전용
Create a new reposiotry 내용 입력하기
- Repository Name
- Public 체크
- Add a README file 체크

Upload files
Repository에서 우측, 중간정도 높이
파일 선택해서 올리기 - Commit changes

파일 select 한 후 아래.
- 파일 버전에 대한 내용 적는다 ( 버전 기록 )
- 파일 수정할 경우, upload files 사용해서 올리면 수정됨. (버전 관리/Commit change란에 버전 기록)

3. Web hosting

Settings 접속
메뉴바에서 setting
Settings 첫 화면에서 스크롤 쭉 내려서 Gitgub Pages
- Source : NONE -> mater로 바꾸기
- Save
- 아래 사진처럼 웹 주소가 나온다.
  Gitgub Pages
- 전 세계 어디에서든지 해당 주소로 내가 만든 웹사이트 접속 가능!

4. Host & Web hosting & Static web hosting

호스트(host) : 인터넷 연결된 컴퓨터
호스팅(hosting) : 호스트 대여해주는 사업
웹 호스팅(web hosting) : 호스팅의 대상이 웹인 것
static web hosting : html file만을 서비스하고 싶을 때
- 무료도 많고, 가격도 저렴함. PHP python.. 등 배우면 dynamic
FYI : 현업에서 웹 서버 운영한다고 하면, 자기가 직접 하는 경우는 없음.
- 서버 운영 전문적으로 하는 사업자에게 따로 맡겨서 사용함.

* github 외의 사이트

찾아볼 때 키워드 : free static web hosting (무료 html 호스팅 서비스)

추천할 만한 서비스 (2017년 기준) -> 찾아내는 능력 길러라

* 관련된 게시물 *

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

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

[생활코딩_WEBn] 웹서버 운영하기 - 2 (HTTP와 IP) (1)	2020.09.10
[생활코딩_WEBn] 웹서버 운영하기 - 1 (Bitnami 설치) (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/18890

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

인터넷이 동작하는 가장 기본적인 원리

컴퓨터 최소 두 대 필요. 둘이 정보를 주고받기 시작하는 순간, 새로운 시대가 열린다!

팀 버너슨 리의 두 대의 컴퓨터

web brower 가 설치된 컴퓨터
web server가 설치된 컴퓨터
- http://info.cern.ch - 하드디스크(블라블라 디렉터리 안에 index.html)

두 대는 인터넷으로 연결

웹 브라우저에서 http://info.cern.ch/index.html 을 쳤을 때 일어나는 일.

웹브라우저가 설치된 컴 : 인터넷을 통해 전기적인 신호를 웹서버 컴에 보냄
* 신호 안에 index.html 파일이 필요하다는 정보 들어있음.
웹서버가 하드디스크에서 index.html을 꺼내서, 웹브라우저가 설치되어 있는 컴으로 보냄 (전기적 신호)
웹브라우저 설치된 컴에 index.html 파일의 내용 도착. -> 코드를 웹브라우저가 읽어서 화면에 표시. (웹사이트!)

2) 웹브라우저 컴퓨터 - 웹서버 컴퓨터는 서로 정보 주고받음.

웹브라우저 컴 : 정보 요청 request - Client (=프로그램=웹 클라이언트 / 게임 클라이언트/ 채팅 클라이언트)
웹서버 : 정보 응답 response - Server(=웹서버 / 게임서버 / 채팅 서버..)

3) 낯설고 무서운 웹 서버

웹브라우저 : 물질 x 추상적인 대상. (매일 생각하니까 물질처럼 느끼는 것. )
웹 서버 : 깔고 켜서 쓰면 되는 그냥 프로그램.. 안 써봐서 낯설게 느껴지는 것뿐.
폰 노이만 (수학천재 / 컴퓨터 만든 사람 중 한 명 ) : " 수학은 이해하는 것이 아니라 익숙해지는 것 "
우리가 공부하는 최종적인 목표는 '익숙해지는 것'

4) 웹 서버를 사용한다는 것

내컴퓨터에 있는 문서를 전 세계에 있는 누구나, 인터넷이 연결된 컴퓨터에 웹 브라우저를 깔면 가져다가 볼 수 있게 한다.
웹 서버 사용의 두 가지 방법
1. web server : 컴퓨터에 웹 서버를 직접 깔기 - 어렵다ㅏㅏ / 인터넷 관련 개념 배울 수 있음
2. web hosting : 대행해주는 업체에 맡기기. - 쉽다 / 배울건 좀 적음
3. 추천하는 방법 : 웹 호스팅으로 쉽게 해보고, 웹 서버를 원리 파악해보기.

* 관련된 게시물 *

'생활코딩 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] HTML 태그의 제왕 (0)	2020.09.03

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

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

원시웹

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

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

WEB1의 두개의 산

웹페이지 만들기. - 코딩이 무엇인가?
웹사이트 배포 - 내가 만든 웹페이지에 인터넷을 통하여 누구나 접촉할 수 있도록

1. 웹을 이해하기

웹이 나온지는 30년이 되었다.

웹의 역사를 거슬러 올라가서, 웹이 세상에 처음 등장했을 때 도착하면 웹의 본질이 있을 것.

웹이 웹이기 위해 필요한 순수한 것만이 있을 것이고, 이것을 통해 웹을 이해할 수 있다.

그냥 지식으로써는 웹의 역사를 자세히 보지 않아도 되지만, 웹을 사용하여 '혁명' 을 일으키기 원하는 사람은 그 혁명의 과정을 알아야 한다.

1) 인터넷과 웹 : 다르다.

인터넷 : 도시 / 도로 / 운영체제
웹 : 도시위에 있는 건물 하나 / 자동차 한대 / 운영체제 위에 있는 프로그램 하나
인터넷이라는 전체 안에 웹이라는 부분이 존재. -> 웹과 동급인 여러 서비스 존재.

2) 인터넷의 등장 (1960)

이때는 핵이 화두 (핵전쟁을 치룬 직후). 핵에 대한 공포감이 엄청 컸다.

미국이 핵을 맞았을때 피해를 시뮬레이션함 - 통신쪽에 문제가 생길 것. (당시 중앙집중적이었음)

핵공격에도 견딜수 있는 강인한 통신시스템 필요 했고, 인터넷 탄생.

인터넷에는 중앙이 없음. 수많은 통신장치들이 분산해서 전화국 역할을 함. 그 중에 하나가 사라져도 나머지들이 역할 수행함.

30년의 시간동안 인터넷 천천히 확산. 인터넷이 세상에있다는걸 잘 모름 ( 기업/ 연구소 / 대학/ 군대 같은 거대기관에서 사용하던 통신시스템)

3) 웹 등장 : 1990

웹의 고향 ? 미국은 아니고.. 스위스 !

웹이 스위스에서 태어난 이유 : 제네바의 유럽입자물리연구소 (CERN)

127개국에서 모인 엄청난 엔지니어 - 과학자모여있는곳. 정보의 바다에서 허우적 대는 작은 지구와 같았던 곳 여기에서 웹이 등장함.

1980 : 유럽입자물리연구소. 팀 버너스 리가 비정규직으로 취직(프로그래머)

Enquire (무엇이든 물어보세요 ~ 같은 책에서 영감받아서 만든다. ) 프로그램 개발 : 웹의 전신
이런 프로그램 만들고 또만들고 반복.

1990 : 연구소에 인터넷 들어옴. 팀 버너스 리는 인터넷을 합성해서 위의 '무엇이든 물어보세요' 프로그램 계속 개발

1990.10 : 웹페이지 만드는 편집기 개발

1990:11 : 월드와이드웹 - 웹브라우저

1990.12.24 : 웹서버 개발 - info.cern.ch라는 이름 을 붙임

웹의 메소포타미아 ㅋㅋㅋ
지금도 접속 가능하다.

-> 이때의 웹이 바로 원시 웹 (primitive Web) !!

이 이후 인터넷이 대중화되고, (웹이 잠재력을 제대로 사용함) 인터넷과 웹이 함께 발전함.

* 관련된 게시물 *

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

[생활코딩_WEBn] 웹호스팅 (github pages) (0)	2020.09.04
[생활코딩_WEBn] 인터넷을 여는 열쇠 : 서버와 클라이언트 (0)	2020.09.03
[생활코딩_WEBn] 웹사이트 완성 (0)	2020.09.03
[생활코딩_WEBn] HTML 태그의 제왕 (0)	2020.09.03
[생활코딩_WEBn] 문서의 구조와 슈퍼스타들 (0)	2020.09.02

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

* 생활코딩 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] 인터넷을 여는 열쇠 : 서버와 클라이언트 (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] 원시웹 (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>

* 관련된 게시물 *