닷넷 개발을 하면서 가장 많이 했던 질문 : "이게 무슨 뜻이에요?"
웹을 해본 적이 없으니 아예 코드를 읽을 줄을 몰라서 공부를 시작했다.
HTML, CSS, JavaScript 의 순서로 기본적인 문법을 조금 공부하도록 하겠다!
HTML을 작성하기 위한 도구가 많은데, 나는 notepad++을 사용하고 있다. 진짜 불친절한 에디터라 좀 공부가 될까 해서..^^ 여러분은 아톰을 사용해도 좋을 듯 합니다..
HTML이란?
HTML은 Hyper Text Markup Language의 줄임말이다.
hyper text가 뭐지..? 싶었는데 우리가 다 아는 하이퍼링크 연결해주는 글씨를 의미한다.
markup language는 글자의 모양이나 속성에 대한 정보를 담고 있는 언어다. 예를 들어, 단어 앞뒤로 **를 2개씩 붙여주면 강조가 된다. 또한, 앞뒤로 _를 붙여주면 기울임이 된다.
HTML 실습하기
에디터를 열고 아무 글이나 입력하고 .html로 저장을 해보자. 그다음 그 파일을 열면 웹페이지 형식으로 출력이 된다. 나는 크롬 사용자라 html 파일이 크롬처럼 생겼고, 더블클릭 하면 크롬에서 열린다!
태그란?
HTML 코드를 보면 <> 이런거 사이에 글씨들이 써있다. 이 하나하나를 태그라고 부른다. 옷에 태그 붙어 있는 것 처럼 코드에 대한 설명이다.
<> 이렇게 끝나는 애들도 있고 <></> 이렇게 끝나는 애들도 있다. 뭐가 뭔지는 보다보면 익숙해짐.^^
이것은 가장 많이 쓰이는 태그를 통계로 뽑은 것이다.
각각의 의미를 간단하게 정리해보았다. (거의 다 써본듯)
<head></head> : 사용자에게 보이지 않는, 컴퓨터에게 주는 정보
<body></body> : 사용자가 보는 부분의 정보(화면 내용)
<html></html> : 여기서부터 html 코드에요~
<title></title> : 인터넷 탭에 뜨는 내용(제목)
<meta> : 메타 데이터; 데이터에 대한 데이터. 나중에 더 자세히..
<div></div> : 화면 분할을 돕는 태그.
<a></a> : anchor, 링크 만들기 (href(hypertext reference) 통해)
<script></script> : 여기는 자바스크립트 코드에요~
<link></link> : 다른 파일을 불러오기
<img> : 사진 첨부
<p></p> : paragraph, 단락을 만들어줌
<span></span> : 자식의 크기 만큼만 차지하는 화면 분할
<li></li> : list
<ul></ul> : unordered list (bullet point list) <-> ol(ordered list; 숫자 매김)
<br> : 단순 줄바꿈
<style></style> : 여기는 css 코드에요~
<h1></h1> : header 1 (제일 큰 제목)
<h6></h6> : header 6 (제일 작은 제목)
<input> : form의 하위 태그. 입력을 받는 공간(텍스트, 버튼 등)
<form></form> : 입력값을 받게 해줌. 여러 input을 묶을 수 있다.
<strong></strong> : 굵은 글씨
<table></table> : 표
<tr></tr> : table row, 표의 행. th(head; 제목)와 td(data; 값)를 가진다.
웹사이트 만들기 실습
간단하게 하이퍼링크가 있는 페이지를 만들어보자.
메인 화면 - index.html
HTML 화면 - html.html
CSS 화면 - css.html
JavaScript 화면 - js.html
index.html
<!doctype html>
<html>
<head>
<title>WEB1 - html</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<ol>
<li><a href="html.html">HTML</a></li>
<li><a href="css.html">CSS</a></li>
<li><a href="js.html">JavaScript</a></li>
</ol>
<div id="article">
<h2>Welcome</h2>
!write article here!
</div>
</body>
</html>이 코드를 실행하면
이런 식으로 화면이 그려진다.
벌써 html, head, title, meta, body, h1, a, ol, li, div, h2 태그를 사용해보았다.
body에서 a를 통해 하이퍼링크를 만들어 다른 html들과 연결이 된다는 것만 이해하자.
웹 호스팅 실습
웹페이지를 만들어서 친구에게 보내고 싶어졌다! 그러나 지금 우리의 웹은.. 주소창을 보면 알겠지만 파일로 열리는 것이기 때문에 이 파일이 없는 사람은 열지 못한다.
외부 사용자도 연결을 시키고 싶으면 웹호스팅을 해야 한다.
우리가 직접 웹서버를 운영하지는 못하지만, 여러 사이트를 통해 도움을 받을 수 있다.
https://opentutorials.org/course/3084/18891
: github 에서 페이지 호스팅 하기
https://opentutorials.org/course/3084/31144
: web server for chrome 에서 페이지 호스팅 하기
