.png)
생활코딩 강의를 듣고 자기소개 웹페이지를 만들어보자!
HTML(HyperText Markup Language)
Preparing environment
기본적으로 메모장, textEdit 등의 코드 작성 프로그램(editor)이 있지만, 코드 작성을 목적으로하는 프로그램은 아니기 때문에 코드 작성에 최적화된 도구를 먼저 준비한다. 여러가지가 있지만, 그림판 클론코딩을 하며 사용한 VS Code를 사용하기로 했다.
- 폴더 생성 -> vs code에서 폴더 열기
- index.html파일 만들기 -> 폴더 내 파일 생성된 것 확인
- 파일 열기 : 브라우저에서 cmd + o
- 파일 저장 : cmd + s
Basic syntax: Tags
html에는 150개가 넘는 태그가 있다. 이를 다 외울 수는 없으니 자주 사용하는 것 위주로 확인해보자.
<strong></strong> bold
<u></u> underline
<h1...6></h1...6> heading1~6
<br> <br><br> <br><br><br> 줄바꿈
<p></p> 단락
<img src="" width:100%> 이미지 삽입: 속성(attribute) 순서는 상관없음
<ul> li의 부모태그, unordered list
<li>list</li>
<li>list</li>
<li>list</li>
</ul>
<ol></ol> ordered list, 자동으로 넘버링
<table> 표 만들기
<th>1</th>
<th>2</th>
<tr><!-- 첫번째 줄 시작 -->
<td>첫번째 칸</td>
<td>두번째 칸</td>
</tr><!-- 첫번째 줄 끝 -->
<tr><!-- 두번째 줄 시작 -->
<td>첫번째 칸</td>
<td>두번째 칸</td>
</tr><!-- 두번째 줄 끝 -->
</table>| 1 | 2 |
|---|---|
| 첫번째 칸 | 두번째 칸 |
| 첫번째 칸 | 두번째 칸 |
Document structure
<!doctype html>
<html>
<head>
<title></title> web page 제목
<meta charset="utf-8"> utf-8로 열어야 문제가 없음, char은character
</head>
<body>
본문
</body>
</html>link
<a href="" target="_blank" title=""></a> a는 anchor을 뜻하며, href는 hypertext reference를 뜻한다. 'target="_black"'를 하면 새 탭에서 열리고, "title: " 적용을 하면 마우스 올렸을 때 title이 표시된다. 아래와 같이 URL뿐만 아니라 html 문서를 연결할 수도 있다.
<ul>
<li><a href="1.html">AboutMe</a></li>
<li><a href="2.html">Favorites</a></li>
<li><a href="3.html">Contact</a></li>
</ul> web
웹 호스팅 서비스
다양한 웹 호스트 서비스 중 깃허브를 사용하고자 한다.
www.bitballoon.com
neocities.org
Amazon S3
Google Cloud Storage
Azure Blob
Github
managing a web server
Apache http server를 사용하고자 한다. Mac에서는 bitnami mamp stack을 검색해 MAMP를 다운로드 받으면 자동으로 아파치가 설된다.
https://bitnami.com/stack/mamp/installer
html파일을 브라우저에서 열었을 때 주소가
- http(hypetext transfer protocol): 웹서버를 거쳐 에체템엘 파일 받아서 웹 브라우저에 전달하겠어!
- file: 웹서버를 통하지 않고 직접 웹브라우저에 표시함
IP(Internet Protocol)가 http://127.0.0.1:8080/로 되어있는 것은 web server를 하나 더 깔았기 때문에 원래 있던 것과 구분하기 위해 8080(port)를 사용한 것이다.
다른 컴퓨터 웹서버에 있는 html파일을 가져오고 싶을 때는 어떻게 해야 할까?
스마트폰으로 같은 네트워크에 접속해서 safari에 http://나의ip:8080/index.html를 치니 문서가 열리는 것을 확인해보았다.
embed
동영상
유튜브라면 share를 누르고 embed에 있는 코드를 복사해 html에 붙여넣기 한다.
댓글 서비스
댓글 서비스는 어려운 기능이다. 지금 이를 구현하고 싶다면 discus의 universial code를 추가해볼 수 있다.
채팅 embed
https://www.tawk.to/ 를 사용해보자.
