HTML
Hypertext Markup Language
HTML : “웹 페이지”를 만드는 언어
<>~</> : 태그 ( tag )
- ~에 들어가는 내용을 설명 해준다
[ 1. 강조하기 ]
( 굵게 )
<strong>굵게 표기하고 싶은 내용</strong>
( 밑줄 )
- u : underline
<u>굵게 표기하고 싶은 내용</u>
[ 2. 제목(헤딩) ]
<h1> ~ <h6> 까지, 총 6단계의 제목 유형이 존재
- h : heading
<h1>1번째로 큰 제목</h1>
<h3>3번째로 큰 제목</h3>
[ 3. 빈 줄 / 문단 생성 ]
- <br> : 한 줄 띄기 ( = 빈 줄 생성 )
- <p> ~ </p> : 단락 생성
여기까지 한 내용 쓰고 한줄 띄어야지 <br> 여기까지 한 내용 쓰고 새로운 문단으로 넘어가야지. <p> 새로운 문단 작성 ....<\p>
- 문단과 문단 사이에 margin을 수동으로 지정해주고 싶다면?
문단 1 작성 중 <p style='margin-top:45px;'> 문단 2 작성 중 <\p>
[ 4. 이미지 넣기 ]
(tip) unsplash.com : 저작권 구애 받지 않는 이미지 모음 사이트
- 절대적 크기
- 상대적 크기 ( % )
모두 가능하다
<img src="myimage.jpg", width="450">
<img src="myimage.jpg", width="100%">
[ 5. 부모 & 자식 태그 ]
- 기본 구조 :
<parent>
<child></child>
</parent>
부모가 있는 곳어 어떠한 특정 자식이,
자식이 있는 경우 반드시 특정 부모가 있는 경우가 있다.
목차 tag
- 목차/목록 = list = li
<li> 1. 목차 1번 </li>
<li> 2. 목차 2번 </li>
<li> 3. 목차 3번 </li>
- <li>의 부모 태그 : <ul>
- 하위의 내용과 구분을 지어준다.
<ul>
<li> 1. 목차 1번 </li>
<li> 2. 목차 2번 </li>
<li> 3. 목차 3번 </li>
</ul>
( 그런데… 1~3 일일히 다 직접 달아줘야하나? )
NO! use <ol>
- ol : Ordered list
- ul : UNordered list
<ol>
<li> 1. 목차 1번 </li>
<li> 2. 목차 2번 </li>
<li> 3. 목차 3번 </li>
</ol>
[ 6. Title ]
웹브라우저에 뜨는 제목란
<title>여기에는 제목이</title>
[ 7. UTF8 ]
한글이 깨지는 문제!
웹 브라우저가, UTF8 방식으로 열게끔 하려면?
- charset
- char : character (문자)
- set : 규칙
<meta charset='utf-8'>
[ 8. 본문 설명 & 본문 구분하기 ]
<!doctype html>
- 이 문서는 html문서라는 것을 관용적으로 표현하는 부분
<!doctype html>
<html>
<head>
<title>~~</title>
<meta charset='utf-8'>
</head>
<body>
<ol>
<li>~~~</li>
<li>~~~</li>
</ol>
~~~ <br> ~~~~ <p> ~~~ </p>
</body>
</html>
[ 9. 링크 걸기 ]
<a href="주소 적기",target = "_blank",title="title here" > 여기 문자에 링크를 </a>
- target = “_blank” : 클릭 시, “새 탭”으로 열리게 하고 프면
- title=”title here” : 마우스 갖다 대면 “설명 문구(툴팁)” 뜨게 하고 프면
[ 10. Webpage -> Website ]
서로 연관된 webpage를 연결시켜서 website만들기!
<ol>
<li><a href='1.html'> HTML </a></li>
<li><a href='2.html'> CSS </a></li>
<li><a href='3.html'> Javascript </a></li>
</ol>
[ 11 . client & server ]
Client는 Server에게 요청(request)를 하면,
Server는 Client에게 응답(response)한다.
Web Hosting
우리가 직접 웹 서버를 운영하기 어렵다. 24시간 켜놓고 있어야 하고 …
이러한 것을 대신 해주는 “웹 호스팅” 업체가 존재한다.
- 대표적인 무료 web hosting : 깃헙
( Apache 웹 서버를 윈도우에 설치하기 실습! )
[ 12. 체크박스 ]
<input type='checkbox'>
[ 13. 마무리 & 나아갈 길 ]
WEB 기본 : HTML & INTERNET
WEB 응용 :
- CSS : 웹페이지를 아름답게 꾸미고 싶은 경우
- web publisher / web designer
- Javascript : 이용자와 상호작용하는 웹페이지를 만들고 싶을 경우
- web front end engineer / web interactive designer
- PHP/JSP/Node.js : 수 많은 웹 페이지를 손 쉽게 관리/변경하기 위해
- backend engineer