지구정복
[HTML] HTML기초1 본문
목차
- HTML 개념
- HTML 구조
- HTML 기본 태그 ( <h1>, <br>, , <p>, <div>, <a>, <img>, <b>, <i>, <small>, <sub>, <sup>, <hr> <pre>, <blockquote>, <q> )
- 리스트<ul><li> / <ol><li> / <dl><dt><dd>
- 테이블 <table><tr><td>
ㅇHTML이란
Hyper Text Markup Language의 줄임말로
Hyper Text는 <>태그를 사용하는 프로그램 언어이고
Markup Language는 링크를 의미한다.
따라서 HTML은 웹 페이지를 만드는 언어이다.
-만드는 과정
개발자가 태그를 이용하여 html문서 작성 ->
브라우저가 tag가 작성된 html문서 해석
태그를 해석하는 과정을 렌더링이라고 함 ->
웹페이지의 구조를 디자인해서 사용자에게 보여줌
-요소와 속성
HTML요소는 시작태그, 종료태그, 그 안의 내용으로 구성된다.
속성은 요소에 대해서 추가적인 정보를 제공하고 이들은 항상 시작태그 안에 포함되어 있다.
속성은 이름/값 쌍으로 이루어진다. (name = "value" 형식)
-HTML을 어디서 규정하나?
World Wide Web Consortium (W3C)
W3C Launches Initiative to Improve the Web for Merchants 21 October 2020 | Archive W3C today launched the Merchant Business Group, an open forum to address challenges for customer experiences and business needs using Web technologies. Merchants, integrator
www.w3.org
여기서 권고안을 정한다.
하지만 브라우저를 만드는 업체마다 해석이 틀리기 때문에 같은 HTML이라도 다른 디자인 렌더링이 가능
HTML언어를 배우기 위한 사이트는
W3Schools Online Web Tutorials
HTML Example:
This is a heading
This is a paragraph.
Try it Yourself » CSS Example: body { background-color: lightblue; } h1 { color: white; text-align: ce
www.w3schools.com
ㅇHTML 구조
<!DOCTYPE html>
<html>
<head>
<title> Page Title </title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
</body>
</html><!DOCTYPE html> 이 문서가 html5 버전임을 알림
<html></html> 는 html 문서의 시작과 끝
<head></head> 는 웹페이지에 대한 전체적인 설명
<body></body> 는 웹페이지에 대한 구체적인 내용이 들어간다.
브라우저에서는 오직 <body>태그의 내용들만 보여진다.
-html의 지원 정도를 보는 곳
각 브라우저마다 html5가 지원하는 정도를 나타내고 점수가 높을수록 더 많이 지원함을 의미
-html의 주석
주석의 의미는 브라우저가 주석처리가 된 코드를 해석하지 않고 설명을 적는 것.
주석의 표시는 다음과 같다.
<!-- 내용 -->
ㅇhtml의 기본적인 태그
-Headings 머릿글
<h1>부터 <h6>까지 있으며 숫자가 커질수록 글자가 작아진다.
<body>
<!--내용-->
<h1>Header</h1>
<h2>Header</h2>
<h3>Header</h3>
<h4>Header</h4>
<h5>Header</h5>
<h6>Header</h6>
</body>
<h1>의 특징은 뒤에 자동으로 엔터가 쳐진다.
-엔터키 역할 br
<br>태그를 사용하면 엔터를 치는 효과와 같다. 닫는 태그가 없으며
엔터할 위치에 사용하면 된다.
<body>
내용내용내용<br>
내용내용내용<br>
내용내용내용<br>
</body>
-스페이스바 기능
스페이스기능을 나타내려면 위 명령어를 사용
<body>
내용 내용 내용<br>
내용 내용 내용<br>
내용 내용 내용<br>
</body>
-단락 Paragraphs
<p></p> 태그를 사용하여 단락을 구분한다. <p>태그는 사용하면 엔터가 두번이 처진다.
<body>
<!--내용-->
<p>This is a paragraph.</p>
<p>This is another paragrapg</p>
</body>
문단을 나타내는 태그는 <div></div>도 있다. <div> 태그는 사용하면 엔터가 한번만 처진다.
또한 <div>태그 안에 또 다른 <div>태그를 사용할 수 있다.
다음으로 <span></span>이 있다. 이는 영역만 구분해준다.
-링크를 넣고 싶을 때
<a href="경로/파일명" or "url"> 태그를 이용한다.
<body>
내용 내용 내용<br>
내용 내용 내용<br>
내용 내용 내용<br>
<a href="https://www.w3schools.com">This is a link</a>
</body>
<a></a> 태그에 사용되는 href는 a태그의 속성이다.
속성은 HTML 태그에 대한 추가적인 정보를 제공해준다.
href에는 링크의 홈페이지 주소를 ""안에 작성해서 저장한다.
또한 우리가 만든 html 문서도 링크 태그를 이용해서 웹페이지를 이동할 수 있다.
아래 코드 예시를 참고
이를 이용해서 웹페이지의 메뉴를 만들 수 있다.
-다운로드 기능
폴더 안에 있는 파일들을 모두 알집(.7z형식)으로 압축하고
<a href="./html.7z"> </a> 태그를 쓰면 다운로드가 된다.
-링크를 새 탭에서 불러오기
새로운 탭에서 링크를 불러오려면 아래 속성을 사용한다.
바로가기를 눌렀을 때 새로운 탭에 띄워지는 것을 알 수 있다.
-이미지를 넣고 싶을 때
먼저 이미지를 불러올 때에 경로는 두 가지로 나뉜다.
절대경로: 절대적인 위치
컴퓨터상에 경로: 드라이브경로
(C:\html\apache-tomcat-9.0.39\webapps\ROOT\tomcat-power.gif)
URL상에 경로: 도메인경로 (http://127.0.0.1:8080/tomcat-power.gif) 또는
인터넷상에 있는 아무 이미지 오른쪽버튼-이미지주소복사
상대경로: 지금보고 있는 파일
현재 디렉터리에서 파일을 가져오거나 폴더로 들어갈 때 : 도트( ./)
현재 디렉터리가 아니라 한 단계 전 폴더(상위 디렉터리)에서 이미지를 가져오거나 폴더로 들어갈 때 : 도트 두 개 (../)
이미지를 불러올 때 보통 상대경로를 많이 쓰고 특별한 경우 url 경로를 사용한다.
<img> 태그를 사용한다.
먼저 사용할 사진을 html 파일이 있는 폴더안에 저장해준다.
<img> 태그에서 src와 alt는 필수속성이다.
src 속성은 파일의 이름이고
alt 속성은 이미지에 대한 설명이다. 브라우저상에는 나타나지 않는다.
만약 브라우저상에 이미지가 나타나지 않는 경우에 이 설명이 나타난다.
width는 그림의 가로길이
heigth는 그림의 세로길이이다.
만약 width 만 쓰고 height를 안쓰면 heigth길이는 width 길이를 따라간다.
-글자형식 바꾸기
<b></b> 글자를 굵게
<i></i> 글자를 기울여서 표시
<small></small> 글자를 작게 표시
<sub></sub> 글자 배치를 아래로 배치
<sup></sup> 글자 배치를 위로 배치
-구분선 만들기
<hr> 태그 사용
-인용 태그
<pre></pre> 인용구문을 표현
이 태그 안에서 엔터나 스페이스를 치면 표현된다.
<pre>
HelloHello
Hello Hello
</pre>
<blockquote></blockquote> 인용구문이 하나의 단락으로 만들어져서 표현
<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature.
The world's leading conservation organization,
WWF works in 100 countries and is supported by
1.2 million members in the United States and
close to 5 million globally.
</blockquote>
<p>WWF's goal is to:
<q>Build a future where people live in harmony with nature.</q>
</p><q></q> ""쌍따옴표 안에 인용구문이 들어감
ㅇ리스트
-순서가 없는 리스트
<ul>
<li>Apple</li>
<li>strawberry</li>
<li>watermelon</li>
</ul>
-순서가 있는 리스트
<ol>
<li>Apple</li>
<li>strawberry</li>
<li>watermelon</li>
</ol>
시작하고 싶은 번호가 있는 경우 start 속성을 추가한다.
<ol start="50">
<li>Apple</li>
<li>strawberry</li>
<li>watermelon</li>
</ol>
-중첩사용
<ol>
<li>Coffee</li>
<li>Tea
<ul>
<li>Bliack Tea</li>
<li>Green Tea</li>
</ul>
</li>
<li>Mlik</li>
</ol>
-사전식 표현
<dl>
<dt>Title</dt>
<dd>consentsconsentsconsentsconsentsconsents</dd>
<dd>consentsconsentsconsentsconsentsconsents</dd>
<dt>Title2</dt>
<dd>consentsconsentsconsentsconsentsconsents</dd>
</dl>
ㅇ테이블
표를 만드는 태그
table은 말그대로 테이블을 만드는 태그
tr을 행
td는 열을 의미
각 행의 열은 똑같이 들어가야된다.
만약 1행이 3열이었는데
2행은 2열일 수 없다.
border는 테이블의 윤곽을 나타냄. 숫자가 늘어날수록 테두리 굵기가 두꺼워짐
<table border="1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
테이블의 각 행렬들이 너무 좁으므로 width, height 속성을 설정한다.
<table border="1" width="300" height="150">
<tr>
<td width "200">1</td>
<td width "200">2</td>
<td width "200">3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
각 열이나 행에도 속성값을 줄 수 있다.
이때는 첫 번째 행이나 첫 번째 열에 속성값을 주면 모두 적용된다.
<table border="1">
<tr>
<td width="200" height="50">1</td>
<td width="100">2</td>
<td width="300">3</td>
</tr>
<tr>
<td width="100" height="50">4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
-테이블의 각 행렬을 합치기
먼저 행을 합친다. 2가 적혀있던 행렬칸이 1로 합쳐졌다.
<table border="1" width="400" height="200">
<tr>
<td colspan="2">1</td>
<td>3</td>
</tr>
<tr>
<td colspan="3">4</td>
</tr>
</table>
다음으로 열을 합친다.
<table border="1" width="400" height="200">
<tr>
<td rowspan="2">1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
</table>
'데이터 엔지니어링 정복 > HTML-CSS-JavaScript-Spring-Node.js' 카테고리의 다른 글
| [HTML] HTML 기초4 (0) | 2020.10.28 |
|---|---|
| [HTML] 검색사이트 구현하기(form태그사용) (0) | 2020.10.28 |
| [HTML] HTML기초3 (0) | 2020.10.28 |
| [HTML] HTML 기초2 (0) | 2020.10.28 |
| [HTML]HTML 톰캣 설정(catalina.bat) (0) | 2020.10.28 |
