티스토리 뷰
1. HTML이란
- HTML이란 HyperText Markup Language으로 웹 페이지 제작에 가장 기본적으로 사용되는 마크업 언어
- 현재에는 주로 HTML5버전을 사용한다.
- .html( 또는 .htm ) 확장자를 사용한다.
- Html : 5를 입력하면 자동으로 표준규격 틀을 생성해준다.
2. HTML5의 기술
- (1) HTML (2) CSS3 (3) ECMAScript(과거 자바스크립트)
- HTML : 문서의 구조와 컨텐츠를 정의
- CSS : HTML 문서의 요소에
3. HTML 태그의 종류 2가지
- 1 ) 블록요소 : 컨텐츠 영역과 무관하게, 브라우저 뷰포트의 가로너비를 모두 차지해버린다. (ex. HEADER 태그)
- 2 ) 인라인 요소 : 자신의 영역(컨텐츠 영역)만큼만 브라우저 뷰포트의 가로너비를 차지하기에, 다음 태그가 옆에 출력된다. (ex. 이미지 태그)
- 태그의 종류가 구분하기 힘들면 개발자 도구를 사용하면 된다.
4. 목록 만들기 (***)
- 1 ) 순서 없는 목록 : 구성상 항목의 순서가 내용과 무관한 경우, ul과 li 태그를 사용하여 순서가 없는 목록을 생성
- 2 ) 순서 있는 목록 : 항목의 순서가 중요한 경우 ol과 li 태그를 사용하여 순서 있는 목록을 생성
[ 1. Lorem 사용법 (**) ]
<!DOCTYPE html>
<html lang="Ko">
<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">
<!-- Meta는 브라우저에게 정보를 전달해주는(설명) 역할을 한다. -->
<title>MinPractice</title>
</head>
<body>
<h1>Hello, Word!!</h1>
<!-- 하나의 테그는 하나의 요소를 만들어 낸다.(*) -->
<!-- <h1>Hello, Word!!</h1>는 테그이고, 렌더링된 이후에 나타난 Hello, Word!!는 요소에 해당된다. -->
<p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>
<!-- <p>Lorem</p> : 한 단락 출력 -->
<!-- <p>Lorem100</p> : 지정된 단어의 수만큼 출력 -->
<!-- <p>Lorem*단락수</p> : 지정된 단락 수만큼 단락 출력 -->
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus laborum placeat laudantium ullam fuga laboriosam voluptatibus ipsam, ipsa unde commodi sint quam quia, corrupti atque dolore voluptate quod at vero.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat in blanditiis magnam commodi adipisci beatae consequuntur architecto? Totam dolore aspernatur cum doloribus qui. At odit illum iure ratione facere minima omnis, non animi eius id nulla, quod ad, voluptate sapiente facilis harum et asperiores reprehenderit sint molestias vel earum nisi? Illum placeat debitis porro mollitia facilis laborum. Rerum cum alias excepturi nobis dolorum sunt fuga atque quo labore illo, consequuntur unde asperiores facere, voluptas iure, ut soluta quibusdam vitae sed harum necessitatibus. Suscipit eveniet consequatur provident asperiores commodi beatae omnis corrupti ullam itaque? Temporibus blanditiis maxime quod id, dolor laborum?</p>
<!-- p는 문단을 만드는 테그이다. -->
<!-- <p></p>에서 p는 paragrap를 의미하며, 단락을 의미한다. -->
</body>
</html>
[ 출력 결과물 ]
Hello, Word!!
Lorem ipsum dolor sit amet consectetur adipisicing.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus laborum placeat laudantium ullam fuga laboriosam voluptatibus ipsam, ipsa unde commodi sint quam quia, corrupti atque dolore voluptate quod at vero.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat in blanditiis magnam commodi adipisci beatae consequuntur architecto? Totam dolore aspernatur cum doloribus qui. At odit illum iure ratione facere minima omnis, non animi eius id nulla, quod ad, voluptate sapiente facilis harum et asperiores reprehenderit sint molestias vel earum nisi? Illum placeat debitis porro mollitia facilis laborum. Rerum cum alias excepturi nobis dolorum sunt fuga atque quo labore illo, consequuntur unde asperiores facere, voluptas iure, ut soluta quibusdam vitae sed harum necessitatibus. Suscipit eveniet consequatur provident asperiores commodi beatae omnis corrupti ullam itaque? Temporibus blanditiis maxime quod id, dolor laborum?
[ 2. Header(헤더) 태그 사용법 ]
<!DOCTYPE html>
<html lang="Ko">
<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>sample01</title>
</head>
<body>
<h1>HEADER1</h1>
<h2>HEADER2</h2>
<h3>HEADER3</h3>
<h4>HEADER4</h4>
<h5>HEADER5</h5>
<h6>HEADER6</h6>
<!-- h1+h2+h3+h4+h5+h6를 작성하고 엔터를 작성하면 테그가 자동생성된다.(Emmet) -->
<h3>에인젤 피시</h3>
<!-- HEADER(제목)은 <h1> ~ <h6>테그를 사용해서 생성한다. -->
<!-- <h1> ~ <h6>테그는 숫자가 커질수록 작아진다. (제목의 중요도에 따라서 다르게 지정) (*) -->
<!-- 제목의 크기가 클 수록 중요도가 높은 것이다. -->
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odit suscipit repudiandae quasi quae, qui laboriosam nam tempora sed earum exercitationem,
aliquam illo distinctio eum? Facere repellendus harum dolor iste! Nesciunt incidunt porro veritatis recusandae temporibus corrupti ex molestiae
impedit veniam ut magnam suscipit, quam quo quaerat, unde cumque laboriosam repudiandae?</p>
<!-- <p>는 단락 / 문단 -->
<img src="https://dimg.donga.com/ugc/CDB/WEEKLY/Article/5b/db/d5/27/5bdbd5270af1d2738de6.jpg" alt="">
<!-- <img>는 이미지 테그이며, src는 이미지의 경로를 지정하는 것이다. -->
<img src="https://picsum.photos/200/200" alt="">
<!-- picsum은 랜덤한 이미지를 지정한 크기(이 경우 200, 200)만큼 나타나게 해준다.(크기는 변경할 수 있다.) -->
<img src="img/1.jpg" alt="">
<!-- img파일 밑에 있는 1.jpg파일을 가지고 이미지를 만들라는 의미이다. -->
<img src="https://picsum.photos/id/684/400/400" alt="">
<!-- picsum을 통한 테그 생성 -->
</body>
</html>
[ 출력 결과물 ]
HEADER1
HEADER2
HEADER3
HEADER4
HEADER5
HEADER6
에인젤 피시
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odit suscipit repudiandae quasi quae, qui laboriosam nam tempora sed earum exercitationem, aliquam illo distinctio eum? Facere repellendus harum dolor iste! Nesciunt incidunt porro veritatis recusandae temporibus corrupti ex molestiae impedit veniam ut magnam suscipit, quam quo quaerat, unde cumque laboriosam repudiandae?
[ 3. CSS 맛보기 - Style 태그 ]
<!DOCTYPE html>
<html lang="Ko">
<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>HTML 기본구조</title>
<style>
body{
font-size: 20px;
color: red;
}
</style>
<!-- style테그는 css요소를 스타일링해준다. -->
<!-- 이 경우 body에 작성한 안녕하세요. 반갑습니다!!를 사이즈 20픽셀의 붉은 글자로 출력한다. -->
</head>
<body>
안녕하세요. 반갑습니다!!
</body>
</html>
[ 출력 결과물 ]
[ 4. <b> 태그 사용법 ]
<!DOCTYPE html>
<html lang="Ko">
<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>
</head>
<body>
<h3>라면 맛있게 끓이는 법</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Exercitationem,
doloremque cupiditate praesentium nesciunt veniam officiis. Saepe soluta voluptas voluptate quod laboriosam,
quos quia velit placeat sed natus illo veniam incidunt.<b>건더기 수프</b>와<b>끓인 물을</b>가지고</p>
<!-- <b>는 굵은 글씨로 출력해주는 태그이다.(인라인 요소) -->
</body>
</html>
[ 출력 결과물 ]
라면 맛있게 끓이는 법
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Exercitationem, doloremque cupiditate praesentium nesciunt veniam officiis. Saepe soluta voluptas voluptate quod laboriosam, quos quia velit placeat sed natus illo veniam incidunt.건더기 수프와끓인 물을가지고
[ 5. <br> 태그와 사용법 ]
<!DOCTYPE html>
<html lang="ko">
<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>
</head>
<body>
<p>안녕 하세요.<br><br>
<!-- <br>은 엔터키를 치는 효과로, 다음줄로 바꿔주는 기능을 한다. -->
<!-- <br>은 인라인뷰 요소에 해당한다. -->
<!-- 는 스페이스바키 누르는 것처럼 공백을 입력해주는 기능을 한다. -->
<!-- html은 직접 스페이스바를 아무리 눌러도 공백은 1개만 입력이 되고, 엔터키는 반영되지 않는다.(*) -->
반갑 습니다!!! </p>
<!-- <p>와 </p>를 합쳐서 <p/>로 작성할 수도 있다. -->
</body>
</html>
[ 출력 결과물 ]
안녕 하세요.
반갑 습니다!!!
[ 6. 순서 없는 목록 생성 - <ul>과 <li> 태그 사용법 (***) ]
<!DOCTYPE html>
<html lang="ko">
<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>
</head>
<body>
<h3>음식 박람회 입장 안내</h3>
<ul>
<li>초대권 소지자</li>
<li>사전등록자</li>
<li>일반 관람객</li>
</ul>
<!-- <ul>과 <li>는 같이 사용되며, 순서가 없는 목록을 만들 때 사용된다. -->
<!-- <ul>과 <li>는 모두 블록 요소이다. (개발자 도구에서 li는 list-item으로 표시된다.) -->
<ul>
<li>초대권 소지자2</li>
<li>사전등록자2</li>
<li>일반 관람객2</li>
</ul>
</body>
</html>
[ 출력 결과물 ]
음식 박람회 입장 안내
- 초대권 소지자
- 사전등록자
- 일반 관람객
- 초대권 소지자2
- 사전등록자2
- 일반 관람객2
[ 7. 순서 있는 목록 생성 - <ol>과 <li> 태그 사용법 (***) ]
<!DOCTYPE html>
<html lang="Ko">
<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>
</head>
<body>
<h3>얼큰 어묵탕 끓이기</h3>
<ol>
<li>냄비에 물을 붓고</li>
<li>물이 끓으면 어물을 넣어주세요</li>
<li>간장과 간을 맞쳐주면 완성</li>
</ol>
<!-- ol도 ul과 마찬가지로 블록 요소이며, ol을 사용하면 자동으로 1. 2. 3.으로 넘버링을 해준다. -->
<ol>
<li>냄비에 물을 붓고</li>
<li>물이 끓으면 어물을 넣어주세요</li>
<li>간장과 간을 맞쳐주면 완성</li>
</ol>
</body>
</html>
[ 출력 결과물 ]
얼큰 어묵탕 끓이기
- 냄비에 물을 붓고
- 물이 끓으면 어물을 넣어주세요
- 간장과 간을 맞쳐주면 완성
- 냄비에 물을 붓고
- 물이 끓으면 어물을 넣어주세요
- 간장과 간을 맞쳐주면 완성
[ 8. 이미지 파일 조절하기 - picsum (*) ]
<!DOCTYPE html>
<html lang="Ko">
<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>이미지 파일 크기 조절하기</title>
</head>
<body>
<h3>반려동물이란?</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione facilis,
explicabo delectus fugit vero obcaecati sed veritatis, qui iure molestias accusantium assumenda at recusandae dolore necessitatibus in. Ipsa, culpa omnis!</p>
<img src="https://picsum.photos/450/300" alt="">
<!-- picsum에서 id를 지우게 되면, 랜덤하게 사진이 바뀌어서 출력된다. -->
<!-- img외에도 jpg / gif / png / svg 파일도 가능하다. -->
<img src='./img/1.jpg'>
<img src='./img/1.jpg' width='200' height='200'>
<img src='./img/1.jpg' height='150'>
<!-- width와 height를 통해 픽셀단위로 사진의 크기를 조절할 수 있다. -->
<img src='./img/1.jpg' title='에베레스트 산일겁니다. 아마도'>
<!-- tittle을 통해 사지에 마우스를 올려 놓았을 때 사진에 대한 제목을 보이게 할 수 있다. -->
</body>
</html>
[ 출력 결과물 ]
반려동물이란?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione facilis, explicabo delectus fugit vero obcaecati sed veritatis, qui iure molestias accusantium assumenda at recusandae dolore necessitatibus in. Ipsa, culpa omnis!
[ 9. 오디오 넣기 - <audio> 태그 ]
<!DOCTYPE html>
<html lang="Ko">
<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>오디오 넣기</title>
</head>
<body>
<audio src='./audio/bass.mp3' controls autoplay loop muted></audio>
<!-- controls autoplay loops는 누르지 않아도 자동으로 반복재생하도록 하는 것이다. -->
<!-- 브라우저에 따라서 오디오의 형태가 달라지며, 반복재생이 안될 수도 있다. -->
<!-- autoplay를 삭제하면 수동재생이 되고, loop를 삭제하면 1번만 재생된다. -->
<!-- muted를 작성하면 음소거인 상태에서 자동재생이 된다. -->
</body>
</html>
[ 출력 결과물 ]
[ 10. 비디오 넣기 - <video>와 <source> 사용법 ]
<!DOCTYPE html>
<html lang="Ko">
<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>비디오 넣기</title>
</head>
<body>
<video width='320' height='240' autoplay controls loop muted>
<source src='./video/sample-video.mp4' type='video/mp4'>
<!-- 렌더링을 하게 되면, 해당 비디오가 자동재생하게 된다. -->
<!-- 또한 해당 비디오가 지정된 가로와 세로 크기로 만들어 진다. -->
<!-- video 태그에 src를 통해 비디오 경로를 지정해 줘도 괜찮지만, 비디오가 여러개이면 문제를 발생할 수 있기에 이렇게 작성하는 것이 좋다. -->
<!-- video 태그에서는 비디오파일의 type을 지정해 줘야 한다. -->
<source src='./video/sample-video.webm' type='video/webm'>
<source src='./video/sample-video.ogg' type='video/ogg'>
<!-- source 태그를 활용하여 같은 내용의 비디오일지라도 다른 비디오파일형식으로 지정해주어, 각 사용자의 환경에 따라서 다르게 사용할 수도 있다. -->
</video>
</body>
</html>
[ 출력 결과물 ]
[ 11. 링크 걸기 - <a>와 href 사용법 (****) ]
<!DOCTYPE html>
<html lang="Ko">
<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>링크 걸기</title>
</head>
<body>
<h2>글자에 링크 걸기(***)</h2>
<h3><a href='page1.html'>무슨 그림인지 몰라요1</a></h3>
<h3><a href='page2.html'>하나는 랜덤으로 바뀌어서 더 몰라요2</a></h3>
<!-- <a>태그는 하이퍼링크를 걸어주는 태그이다.(***) -->
<!-- a는 Anchor이라는 의미이다. -->
<!-- 이 경우에는 지정한 글자에 링크를 걸어주고 있는 것이다. -->
<h2>이미지에 링크 걸기(***)</h2>
<a href='page1.html'><img src="https://picsum.photos/id/684/300/199" alt=""></a>
<a href='page2.html'><img src="https://picsum.photos/450/300" alt=""></a>
<!-- 이 경우 사진에 링크를 걸어 사진을 클릭하여 해당 링크로 들어갈 수 있다. -->
<h3><a href="https://www.naver.com/">네이버로 이동</a></h3>
<!-- 즉, 이렇게 작성했다면 네이버로 이동을 눌러서 네이버 페이지로 갈 수 있는 것이다. -->
<a href="TTT.html" target="_blank">TTT</a>
<!-- a는 링크를 거는 역할을 하고, href는 이동할 주소를 지정해주는 역할을 한다. -->
<!-- target을 통해 링크로 걸어둔 주소를 새로운 창으로 띄울 수도 있다.(ex. 팝업창) (_blank는 새로운 창에서 띄워주는 것) -->
</body>
</html>
[ 출력 결과물 ]
글자에 링크 걸기(***)
무슨 그림인지 몰라요1
하나는 랜덤으로 바뀌어서 더 몰라요2
이미지에 링크 걸기(***)
네이버로 이동
TTT[ 12. 테이블 생성 - <table> 태그 (***) ]
<!DOCTYPE html>
<html lang="Ko">
<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>테이블 만들기</title>
<style>
table,
tr,
th,
td{
border: solid 1px rgb(223, 99, 99);
border-collapse: collapse;
padding: 8px;
}
</style>
</head>
<body>
<h3>KTX 열차 시간표</h3>
<table>
<tr>
<th>출발</th>
<th>도착</th>
<th>객실</th>
<th>요금</th>
<!-- th 태그는 각 컬럼(열)의 해더(Header)을 생성하는 것이다. -->
</tr>
<tr>
<td>서울(17:25)</td>
<td>부산(20:07)</td>
<td>일반실</td>
<td>20,800원</td>
<!-- td 태그는 실제 테이블의 데이터(deta)가 들어가는 것이다. -->
</tr>
<tr>
<td>서울(18:00)</td>
<td>부산(20:35)</td>
<td>특실</td>
<td>83,700원</td>
</tr>
<tr>
<td>서울(18:15)</td>
<td>부산(20:50)</td>
<td>일반실</td>
<td>20,800원</td>
</tr>
<!-- tr 태그는 테이블의 행(Record)을 생성하는 것이다. -->
</table>
<!-- 테이블은 하위 태그가 많기에, 많이 연습해보는 것이 좋다. -->
<!-- table 태그는 테이블에 넣고자 하는 내용을 작성하게 된다. -->
<!-- 테이블은 thead / tbody / tfoot으로 구분지어 생성하는 것이 좋다. -->
<!-- 구분짓지 않고 작성했을 경우, 모두 tbody로 들어가게 된다. -->
<!-- 테이블을 thead / tbody / tfoot으로 구분지어 준 버전 -->
<h3>KTX 열차 시간표2</h3>
<table>
<thead>
<tr>
<th>출발</th>
<th>도착</th>
<th>객실</th>
<th>요금</th>
<!-- th 태그는 각 컬럼(열)의 해더(Header)을 생성하는 것이다. -->
</tr>
</thead>
<tbody>
<tr>
<td>서울(17:25)</td>
<td>부산(20:07)</td>
<td>일반실</td>
<td>20,800원</td>
<!-- td 태그는 실제 테이블의 데이터(deta)가 들어가는 것이다. -->
</tr>
<tr>
<td>서울(18:00)</td>
<td>부산(20:35)</td>
<td>특실</td>
<td>83,700원</td>
</tr>
<tr>
<td>서울(18:15)</td>
<td>부산(20:50)</td>
<td>일반실</td>
<td>20,800원</td>
</tr>
<!-- tr 태그는 테이블의 행(Record)을 생성하는 것이다. -->
</tbody>
<tfoot></tfoot>
</table>
</body>
</html>
[ 출력 결과물 ]
KTX 열차 시간표
| 출발 | 도착 | 객실 | 요금 |
|---|---|---|---|
| 서울(17:25) | 부산(20:07) | 일반실 | 20,800원 |
| 서울(18:00) | 부산(20:35) | 특실 | 83,700원 |
| 서울(18:15) | 부산(20:50) | 일반실 | 20,800원 |
KTX 열차 시간표2
| 출발 | 도착 | 객실 | 요금 |
|---|---|---|---|
| 서울(17:25) | 부산(20:07) | 일반실 | 20,800원 |
| 서울(18:00) | 부산(20:35) | 특실 | 83,700원 |
| 서울(18:15) | 부산(20:50) | 일반실 | 20,800원 |
'KH 정보교육원 [ Java ]' 카테고리의 다른 글
| KH 56일차 - CSS 기본 다지기 2 (***) (0) | 2022.05.17 |
|---|---|
| KH 55일차 - HTML / CSS 기본 다지기 (0) | 2022.05.16 |
| KH 53일차 - INDEX (***) / 사용자 관리 (0) | 2022.05.12 |
| KH 52일차 - View (0) | 2022.05.11 |
| KH 51일차 - DDL / 제약조건 (**) (0) | 2022.05.10 |