학습 내용
HTML / 웹사이트 만들기
<!doctype html>
<html>
<head>
<title>web</title>
<meta charset="utf-8">
</head>
<body>
<h1>Web is...</h1>
...
</body>
</html>- head는 웹페이지를 설명, body는 내용이다.
<!doctype html>
// 이 문서가 html이라고 선언, 문서 맨 위에 작성
<title></title>
// 웹페이지 이름, 페이지 탭에 표시됨
<meta charset="utf-8">
// utf-8 선언문, 웹페이지가 utf-8이라는 방식으로 저장되었음을 의미html tags
- 텍스트 관련 태그
<u></u> // 밑줄
<strong></strong> // 굵게
(bold도 비슷한 기능이나 의미가 달라strong 태그를 쓰는 것을 추천)
<br> // 줄바꿈- 중요한 태그
<h1></h1> // 제목 태그, heading, 숫자가 커질수록 작은 글자
<li></li> // 리스트 태그
<ul></ul> // unordered list 순서가 없는 리스트, 점으로 목차를 만듦
<ol></ol> // ordered list 순서가 없는 리스트, 숫자로 목차를 만듦- li 태그와 ul/ol 태그는 함께 쓰인다.
- ul tag 사용
<ul>
<li>html</li>
<li>css</li>
<li>JavaScript</li>
</ul>
- ol tag 사용
<ol>
<li>one</li>
<li>two</li>
<li>three</li>
</ol>
- 이미지 태그
<img scr="이미지주소" width="가로사이즈" height="세로사이즈">- 링크 태그 (중요한 태그)
<a href="주소"></a>
// href - 클릭했을 때 어디로 갈지 지정하는 속성 (hypertext reference)<a href ="http://www.google.com">google</a>
<a href ="second.html">두번째페이지</a>웹사이트 서비스하기
Web Server for chrome 사용
- Web Server for chrome : chrome에서만 동작하는 간단한 서버 프로그램
1 검색해서 크롬에 설치해서 실행
2 'choose folder' 눌러서 웹서버가 사용할 디렉토리를 지정
3 토글로 서버를 껐다가 키면 아래에 ip address가 생성됨
-> ip address를 확인해보면 127.0.0.1인데 자기자신을 의미한다.
즉, 이 웹페이지는 내 컴퓨터에서만 작동하는 것이다.
집에서 웹서버를 운영하기 어려우니 웹서버를 빌려주는 서비스를 쓴다.
- hosting : 웹서버(host)를 빌려주는 비즈니스, hosting은 그냥 컴퓨터를 빌려주는 것
- Web hosting : 컴퓨터에 web server와 같은 프로그램을 설치해서 빌려주는 비즈니스
- hosting을 요즘에는 cloud라고 한다. 본질적으로는 같은 표현
GitHub 사용
GitHub : 소스코드를 보관하고 보관된 소스코드로 협업하는 사이트
소스코드를 보관하는 저장소를 만들고 소스코드를 보관해두면 GitHub가 제공하는 부가기능 중 하나인 웹호스팅 기능으로 누구나 웹사이트를 볼 수 있게 하는 것을 무료로 할 수 있다
학습 후기
강사님이 태그를 쓰는 이유와 목적을 잘 설명해 주셔서 html를 학습하는 것엔 어려움이 없었다.
하지만 사고한 오타로 실행에러가 자주 나서 html과 html 태그에 익숙해지도록 많은 연습을 해야할 것 같다.
오늘은 기초라 생각보다 수월했는데 다음으로 배울 수업들은 또 어떻게 진행될지 기대된다.
html tag는 수업에서 배운 것보다 많다는데 추가학습을 하며 찾아봐야겠다.
열심히 하는 중