정의
HTML(HyperText Markup Language)
- 웹 페이지와 그 내용을 구조화하기 위해 사용하는 마크업 언어, 코드
참고 개념 정의
- 마크업 언어(Markup Language): 태그 등을 사용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지
- 인터넷(Internet): 컴퓨터가 서로 연결되어 통신을 주고받는 컴퓨터끼리의 네트워크
- 웹(Web)/월드 와이드 웹(World Wide Web, WWW, W3): 인터넷에 연결된 컴퓨터들을 통해 사람들이 정보를 공유할 수 있는 정보 공간(public domain)
- 웹 페이지(web page): 웹 상에 있는 개개의 문서
문법
요소 (element)
<tagname>content</tagname>열리는 태그,닫히는 태그,콘텐츠로 구성- 태그는 열리고 닫히는 구조를 갖고 있음
닫히는 태그는열리는 태그와 구분하기 위해 태그 이름 앞에/를 붙임- 태그 이름은 태그의 역할을 설명해야 하기 때문에 일상적으로 사용되는 단어들 중 태그의 기능과 유사한 것을 사용
- 콘텐츠는 해당 태그가 적용되는 텍스트 문구
태그 (tag)
| 이름 | 기능 |
|---|---|
<h1> to <h6> | 헤딩 표시(번호가 작을수록 중요도가 큼) |
<br> | 줄바꿈 태그 - '줄바꿈'이라는 시각적 의미만 있기 때문에 닫히는 태그 없음 - 줄바꿈 여러 번 하려면 여러 번 쓰면 됨 |
<p> | 단락 태그 - 해당 태그가 감싸는 부분이 '단락'임을 의미론적으로 표현 - 열리는 태그, 닫히는 태그 둘다 있음 - 자동으로 간격이 생기기 때문에 시각적으로 자유도가 떨어짐(이것을 해결하기 위해 CSS를 통해 제어 가능) |
<li> | 목차/목록의 각 항목 표시 |
<ul> | unordered list |
<ol> | ordered list |
<!doctype html> | 문서 형식이 html임을 정의 |
<html> | 전체 문서를 묶음 |
<title> | 웹페이지의 제목 - 검색엔진과 같은 기계들은 해당 태그를 책 표지 같은 정보로 활용 |
<meta> | 문서의 메타데이터 정의 - 닫히는 태그가 없는 태그 |
<head> | 본문에 대한 설명을 묶음 |
<body> | 본문을 묶음 |
<a> | 하이퍼링크 정의 |
속성 (attribute), 속성 값 (attribute value)
<img src="coding.jpg" width="100%">속성: 열리는 태그에 들어가는, 해당 요소의 성격 및 스타일을 나타내는 상태구분값 (위 코드에서src및width)속성 값: 속성에 대한 값 (위 코드에서"coding.jpg"및"100%")- 속성의 순서는 상관 없음
구조
부모-자식 구조
<parent>
<child></child>
</parent>
- 태그가 위와 같이 포함 관계에 있을 때, 포함하고 있는 태그는
부모 태그, 포함된 태그는자식 태그 - e.g.,
<li>태그의 부모 태그는<ul>태그 (<li>태그는 반드시 부모 태그를 가지며,<ul>태그는 반드시 자식 태그를 가짐)
문서 구조
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" value="hi" onclick="alert('hi')">
<input type="text" onchange="alert('changed')">
</body>
</html><meta charset="utf-8">: 코드 파일은 utf-8 방식으로 저장된 상태로, 작성한 파일을 웹 브라우저가 열 때도 utf-8로 열어야 문제가 없음
를 활용. charset = character set (문자 규칙). 즉 utf-8로 문서를 읽으라고 하는 것.
서버와 클라이언트
- 인터넷이 동작하기 위해 필요한 2개의 컴퓨터:
Web Browser,Web Server Web Server: 내 서비스를 전 세계 누구나 인터넷이 연결된 컴퓨터에 웹 브라우저를 깔면 가져다가 볼 수 있도록 하는 것
(1) 자신의 컴퓨터에 web server 직접 깔기 -> 어려움, 여러가지 배울 수 있음
(2) 대행 업체에게 맡기기 (web hosting) -> 쉬움
웹 호스팅
- Host = 인터넷에 연결된 컴퓨터 하나 하나
- Hosting / Cloud = 인터넷에 연결된 컴퓨터를 빌려주는 사업
- Web Hosting = Hosting 중에서 컴퓨터의 웹 서버와 같이 웹을 동작하기 위해 필요한 소프트웨어들까지 설치해서 빌려주는 것
Github에서 Web Hosting하는 방법
- 소스 코드 저장할 Repository 만들기
- Repository에 파일 업로드
2-1. Repository에 올린 파일 수정 후 다시 업로드하고 싶을 경우 Upload files하면 알아서 갱신해줌 - GitHub Pages 사용
eunsuh-kim/my-first-web-site에서
Settings > Pages
Branch > main으로 변경
Save 누르면 저장소의 Web Server 기능 활성화
3-1. 진행상황 보려면 Actions > pages build and deployment
Web Hosting 과정 정리
참여자
- my: 로컬 컴퓨터 w/ 우리가 만든 웹페이지
- visitor: 우리가 만든 웹페이지를 보고 싶어하는 방문자 w/ web browser
- hosting: 서비스를 대신해서 제공할 호스팅 업체 (GitHub)
과정
- 우리가 파일을 업로드하면 소스 코드가 web hosting으로 업로드됨
- 웹 호스팅 업체에서는 웹 호스팅에 설치되어 있는 web server를 활성화하며,
- 컴퓨터에 도메인의 이름 부여
- 이제 방문자가 도메인 주소로 접속하면 web server가 index.html을 읽고,
- web server는 방문자에게 index.html의 소스 코드를 전송
- 방문자의 web browser에 웹 페이지가 표시 (끝)
참고
생활코딩 WEB1- HTML & Internet
Web Club #1 HTML이란 무엇인가?
HTML Element Reference
안녕하세요!