Extension 에서 추가해야할 것들
Live Server -> Extension Settings
local 검색해서 Use local IP as host 선택.
모두 설치해주자.
이제 HTML에 대해 알아보자!
HTML
Hyper Text Markup Language
웹에서 정보를 표현할 목적으로 만든 마크업 언어.
Hyper Text : 다른 페이지로 이동 가능한 링크가 포함된 텍스트
Markup Language : 태그를 통한 정보의 계층구조를 표현하는 언어
웹페이지를 작성하기 위해 사용되는 언어로 웹 브라우저에게 보일 문자열과 이를 감싸는 해석기호(태그들)로 이루어져 있다.
ㄴ마크업 (태그) : 문서의 논리적인 구조를 정의하고, 출력장치에 어떠한 형태로 보여질 것인지를 지시하는 역할
ㄴ마크업 언어 : 마킁업(태그)의 형식과 규칙을 정의한 언어
HTML5 특징
- 구조적 설계 지원(시멘틱)
- 그래픽 및 멀티미디어 기능 강화
- CSS3 , Javascript 지원
- 다양한 API제공
- 모바일 웹 지원 , 장치 접근가능(배터리 정보, 카메라, GPS 등)
- 웹 브라우저 서버와 양방향 통신 가능
- 인터넷이 연결되지 않은 상태에서도 애플리케이션이 동작
HTML의 구성요소
|
구성요소
|
내용
|
|
태그(Tag)
|
'<' 와 '>'로 묶인 명령어
시작태그(<태그>) 와 종료태그 (</태그>)를 한쌍으로 이용 |
|
요소(Element)
|
시작태그와 종료태그로 이루어진 모든 명령어
하나의 HTML문서는 요소들의 집합 |
|
속성(Attribute)
|
요소의 시작태그에만 사용 , 명령어 구체화하는 역할
여러 개의 속성을 사용할 수 있으며 속성의 구분은 공백 |
|
변수/속성값(Argument)
|
속성이 가지는 값, 값 입력시 " " 혹은 ' '를 이용
|
HTML 작성시 주의사항
- 태그는 대소문자를 구분하지 않음, 소문자 권장
- 시작태그로 시작하면 반드시 종료태그로 종료
- 파일 확장자는 반드시 html, htm으로 설정
- 문자의 공백은 한개만 인식. 공백 추가하기 위해서는 사용
- 주석은 <!-- --> 한개로 여러줄 , 한줄 전부 사용
!누르고 탭 누르면, 기본적인 맨위의 <head>에 대해 자동 작성된다.
이제 본격적으로 html 코드에 대해서 배워보자
미리 해둔 라이브 서버 세팅이 되어있으므로, Open with Live Server에서 짜여진 html을 확인하면 된다.
파일을 로드할때는 file -> Add Foler to Workspace 로 연다.
그럼 라이브서버로 코드를 볼때, 포트명 (5500)뒤에 파일 위치가 뜨는 것을 확인할 수 있다.
index.html
<!DOCTYPE html>
<html>
<head>
<!-- head 태그는 페이지 설정정보이고, 화면에 render되지 않는다. -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!-- 주석 : 화면에 render 되지 않는다. -->
<!-- body태그 하위 내용이 화면에 render 된다-->
<h1>Hello HTML</h1>
<h2>Hyper Text Markup Language</h2>
<!--
Hyper Text : 다른 페이지로 이동 가능한 링크가 포함된 텍스트
Markup Language : 태그를 통한 정보의 계층구조를 표현하는 언어
-->
<!-- ul (순서없는 목록) > li -->
<ul>
<li><a href="01_text.html">문자관련</a></li>
<li><a href="02_list.html">목록관련</a></li>
<li><a href="03_table.html">표관련</a></li>
</ul>
</body>
</html>
<li> <a href="01_text.html"> 문자관련</a></li> 를 쓰고, Ctrl + 클릭 "01_text.html" 을 하면, 파일을 생성할 수 있다.
저장 후 문자관련 을 클릭하면, 다른 페이지로 넘어가는 것을 확인할 수 있다.
01_text.html
맨 첫줄에 <a href="index.html"> 인덱스로 돌아가기 </a>를 작성해준다. (인덱스 파일로 돌아가는 코드)
<!DOCTYPE html>
<head>
<!-- head 태그는 페이지 설정정보이고, 화면에 render되지 않는다. -->
<meta charset="utf-8">
<title>HTML Index</title>
</head>
<body>
<!-- 주석 : 화면에 render 되지 않는다. -->
<!-- body태그 하위 내용이 화면에 render 된다-->
<h1>문자관련</h1>
<!--
Hyper Text : 다른 페이지로 이동 가능한 링크가 포함된 텍스트
Markup Language : 태그를 통한 정보의 계층구조를 표현하는 언어
-->
<a href="index.html">인덱스로 돌아가기</a>
태그 요소
- block 요소 : 화면 끝까지 영역을 차지 (br을 쓰지 않아도 다음칸에 생긴다)
- inline 요소 : content만큼만 영역을 차지
크롬에서 Ctrl+Shift+C로 블록요소인지, 인라인 요소인지 확인 가능
문자관련 태그
<h1> <h2> <h3> <h4> <h5> <h6>
heading 이라는 뜻. 블록요소이다.
<!-- heading h1 ~ h6-->
<!-- h${HelloWorld}*6-->
<h1>HelloWorld</h1>
<h2>HelloWorld</h2>
<h3>HelloWorld</h3>
<h4>HelloWorld</h4>
<h5>HelloWorld</h5>
<h6>HelloWorld</h6>
<p> 태그
paragraph 라는 뜻. 문단 태그이고, 블록 요소(한줄 다 차지)이다.
<!-- h1{helloWorld}-->
<!-- paragraph 문단태그 -->
<p>안녕하세요.</p>
<p>반갑습니다.</p>
<p>좋은 밤 보내세요.</p>
<span> 태그, <br> 태그, 공백문자  
<span>은 짧은 문장 태그, 인라인요소이다.
<br>은 html의 개행 태그이다.
 는 html 에서 공백을 딱 하나의 공백문자로 처리하기 때문에, 여러칸의 공백을 주고 싶을 때 사용한다.
<!-- span 짧은 문장 태그-->
<!-- 공백/개행문자는 딱 하나의 공백문자로 처리.-->
<span>안녕하세요.</span>
<br> <!-- html의 개행태그-->
<span>반갑습니다.</span>
<br>
<span>좋은 밤 보내세요.</span>
<br>
<!-- 공백문자 -->
안녕하세요.
반갑습니다.
좋은 밤 보내세요.
<!-- pre pre-formatted태그-->
<pre>안녕
잘가
반가웠어~
pre 태그
</pre>
<hr>태그
수평선 태그.
<!-- 수평선태그-->
<hr>
<blockquote>태그
인용구 태그. screen reader, 포탈 검색봇
<!--blockquote 인용구 태그-->
<!-- screen reader, 포탈 검색봇-->
<blockquote cite="https://iei.or.kr">소 잃고 외양간 고치랴~</blockquote>
<arcronym> 태그
축약어 태그
<!-- acronym 축약어 -->
<acronym title="Hyper Text Markup Language">HTML</acronym>을 공부합시다.
<code> 태그
코드를 작성할 수 있는 태그
<!-- code 코드-->
<pre>
<code>
function foo(a,b){
return a+b;
}
</code>
</pre>
<kbd>태그
키보드 값을 나타내는 태그.
<!-- keyboard 키값-->
취소하려면 <kbd>Ctrl</kbd>+<kbd>Z</kbd>를 누르세요.
<em> , <strong>, <mark>, <del>, <ins> 태그
phrase tag. 강조용
기울이기, 볼드체, 하이라이트, 취소선처리, 밑줄강조 태그
<!--phrase tag-->
<!-- 강조 -->
<em>기울여서 강조</em><br>
<strong>볼드체로 강조</strong><br>
<mark>하이라이트효과로 강조</mark><br>
<del>취소선처리</del><br>
<ins>밑줄로 강조</ins><br>
<!--태그는 중첩해서 사용 가능-->
<em><strong>몹시 강조!!!</strong></em>
목록 관련 태그
<ul> 태그
unordered list 태그. 블록요소
list style으로 스타일 지정 가능
<!-- unordered list ul>li / ul은 블록요소 , li는 블록요소-->
<ul style="list-style-type: disc;">
<li id="li-html5-1">HTML5</li>
<li>CSS3</li>
<li>JAVASCRIPT2015</li>
</ul>
불릿 모양을 다음과 같이 바꿀 수 있다. (크롬에서 F12(개발자도구) 누르고 확인하기)
<li>태그
ordered list 태그. 블록요소
list style으로 스타일 지정 가능, 시작 숫자 지정 가능.
<ol style="list-style: decimal;" start="3">
<li>HTML5</li>
<li>CSS3</li>
<li>
JAVASCRIPT2015
<ol>
<li>React</li>
<li>Vue.js</li>
</ol>
</li>
</ol>
여기서 확인
<dl> <dt> <dd> 태그
설명목록 태그, dl = description list , dt = definition title , dd = define description. 블록요소
<!--
설명 목록 태그 (block 요소)
dl (description list
dt (define title
dd (define description
-->
<dl>
<dt>HTML</dt>
<dd>Hyper Text Markup Language</dd>
<dt>Css</dt>
<dd>Cascade Style Sheet</dd>
<dt>JS</dt>
<dd>Javascript</dd>
<dd>Ecmascript</dd>
</dl>
표 관련 태그
<table> , <thead>, <tr> , <th>, <td> 태그
table
thead 헤더행 묶음
tr
th | td
tbody 본문행 묶음
tr
th | td
tfoot 정리행 묶음
tr
th | td위와 같은 구조로 사용.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<title>table</title>
<style>
table{
border: 1px solid black;
border-collapse: collapse;
}
th,td{
border: 1px solid black;
padding: 10px;
}
</style>
</head>border : 1px solid black; 헤더에 표 1px짜리 검정색 고정길이로 표시
border-collapse : collapse; 표 실선 사이의 공백 없음처리
padding : 10 px; 표 주변을 10 px 만큼 공백처리
<!-- table>thead>tr>th*3-->
<table>
<thead>
<tr>
<th>브라우저</th>
<th>벤더사</th>
<th>홈페이지</th>
</tr>
</thead>
<!--tbody>tr>td*3-->
<tbody>
<tr>
<td>크롬</td>
<td>구글</td>
<td>
<a href="https://google.com">https://google.com</a>
</td>
</tr>
<tr>
<td>사파리</td>
<td>애플</td>
<td>
<a href="https://apple.com">https://apple.com</a>
</td>
</tr>
<tr>
<td>웨일</td>
<td>네이버</td>
<td>
<a href="https://naver.com">https://naver.com</a>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="3">총 브라우저 수 : 3</th>
</tr>
</tfoot>
</table>
테이블 조절 응용
colspan = " n " -> 테이블 행 길이 n으로 지정
rowspan = " n " -> 테이블 열 길이 n으로 지정
width = " n px " -> 테이블 가로길이 n픽셀로 지정
height = " n px " -> 테이블 높이 n픽셀로 지정
<!--table>thead>tr>th[colspan]-->
<table>
<thead>
<tr>
<th colspan="4">자기소개</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2" rowspan="2" width="130px" height="150px">사진</td>
<td width="80px">이름</td>
<td width="200px"></td>
</tr>
<tr>
<td>연락처</td>
<td></td>
</tr>
<tr>
<td width="70px" height="50px">주소</td>
<td colspan="3"></td>
</tr>
<tr>
<td width="70px" height="100px">자기소개</td>
<td colspan="3"></td>
</tr>
</tbody>
</table>
+ html 유명한 짤
HTML은 css랑 javascript를 써야하기 때문에, 단독 프로그래밍은 불가능해서
마크업 언어이지, 프로그래밍 언어가 아니다.