한바다
[HTML]html 본문
1.HTML이란 -웹에서 정보를 표현할 목적으로 만든 마크업 언어(Hypertext Markup Language)
Hypertext(하이퍼 텍스트) : 최고의 글자
Markup(마크업) : 구분지어진
Language(랭귀지) : 언어
-.HyperText문서나 정보가 서로 연결되어 있는 형태를 의미
-.Hyper(최고의) Text(글자) 무엇이든 할수 있는 최고의 글자!!!
-.Markup : 문서나 정보를 표시하는 방법을 정의하는 것을 의미
HTML에서는 태그를 사용하여 문서의 구조와 형식을 지정
브라우저에게 문서를 해석하는 방법을 알려주는 역할
2.개발환경 설정
▶VS Code설치
웹사이트에서 "vs code" 검색
다운로드https://code.visualstudio.com/download
Download Visual Studio Code - Mac, Linux, Windows
Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and cloud applications.
code.visualstudio.com
3.HTML5
- 태그는 대·소문자를 구분하지 않으나 소문자를 군정
- 시작태그로 시작하면 반드시 종료태그로 종료 <태그></태그>
- 파일확장자는 반드시 html 또는 htm으로 설정
- 문자의 공백은 몇개를 입력하든 한개만 인식하므로 공백을 추가하려면 를 이용해야 함
＊기본구조
<!doctype html> 문서유형(html 5)
<html lang="ko"> 언어 약자로 lang사용 ko korean 한국어약자
<head>
문서의 각종 정보와 문서 자체에 대한 설명내용
<title>, <meta>,<link>,<style>,<script> 등 사용
html 문서 내용 작성으로 화면에 보여질 내용은 <body>에 작성
</head>
<body>
화면에 출력해서 보여주는 모든 정보/내용
head에 들어가는 태그를 제외하고 모든 태그 사용
</body>
</html>
＊<!-- -->
HTML에서 사용하는 주석으로 코드 작성내용에 대해 설명하는 곳에 사용, 브라우저는 주석 부분을 해석하지 않고 넘어감
<style 태그 안에 주석 표시 예시>
[글자관련 태그]
＊제목을 입력할 때 사용하는 태그로 폰트의 크기가 정해져 있음
<h1>첫번째로 큰제목</h1>
<h2>두번째로 큰제목</h2>
<h3>세번째로 큰제목</h3>
<h4>네번째로 큰제목</h4>
<h5>다섯번째로 큰제목</h5>
<h6>엿서번째로 큰제목</h6>
＊ <hr> 수평선을 긋는 태그
＊<br> 엔터기능, 문장을 줄바꾸기(개행)할 때 사용
＊<p>글을 작성하는 용도의 태그 문단 앞 뒤로 공백이 생겨 줄바꿈을 진행해줌</p>
＊<pre>글을작성하는 태그 이 태그는 작성한 그대로 모양을 유지해줌</pre>
＊<b>단순히 글자를 굵게 표시하는 태그</b>
＊<strong>글자를 강조하는 용도의 태그 글자를 음성으로 나타낼 때 강조해서 읽힘,청각장애인</strong>
＊<i>단순히 글자를 기울여서 표시하는 태그</i>
＊<em>문장(글자)을 기울여서 강조하는 태그 문장을 음성으로 나타낼때 강조해서 읽힘,청각장애인</em>
＊<strong em>웹 접근성을 위해 사용되는 태그 장애인,사회적약자,고령자를 위해 웹사이트에서 제공하는 서비스를
모두 이용할 수 있또록 보장하는 것(의무사항)</ strong em >
＊<small>*참고: 글자를 작게 표시하는 태그</small>
＊<sup>위에 글자를 첨부하는 태그</sup>
＊<sub>아래에 글자를 첨부하는 태그</sub>
＊<mark>배경부분을 노란색으로 하여 형광펜 표시가 된 듯하게 출력</mark>
＊<u>밑줄(수평줄) 긋는 태그</u>
＊<s>중요도가 감소되었거나 취소되었음을 표시</s>
＊<del>글자 가운데 선을 긋는 태그(삭제선)</del>
＊<em>문자에 기울임을 주는 태그</em>
＊<i>기울임을 주는태그</i>
＊<abbr title="Hyper Text Markup Language">HTML</abbr> <-보통 title 태그안에 작성해서 어떤 문장의 줄임말인지 작성
[글자관련 태그]
＊순서가 필요하지 않은 목록을 만들 때 사용
ul(Unorderd List) 순서가 없는 목록
li(List Item) 목록의 한줄
＊순서가 있는 목록을 만들 때 사용
ol(order List)
＊용어나 문자에 대한 정의 리스트로 자동으로 들여쓰기가됨
dl(Description List)태그 :설명목록
<dl>
<dt>내용1</dt>
<dd>내용2</dd>
<dd>내용3</dd>
</dl>
[표관련태그]
＊웹문서에서 자료를 정리할 때 주로 사용, 행과 열로 이루어져 있고 행과 열이 만나는 지점을 셀이라고 함
<table>
<tr>
<td>내용</td>
<td>내용</td>
</tr>
</table>
▶ <tr></tr> 한개의 행(ROW)을 만드는 태그,가로
<td></td> 한개의 열을 만드는 태그, 세로
[표실습]
