웹기초 - html

학습 내용

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는 수업에서 배운 것보다 많다는데 추가학습을 하며 찾아봐야겠다.

좋은 웹페이지 즐겨찾기