1. HTML
HTML – 웹 어플리케이션 뷰의 뼈대 구성
CSS – HTML 을 보다 세련되게 표현
JAVA SCRIPT – HTML에 동적 기능을 구현
J QUERY – JAVASCRIPT의 라이브러리
HTML 은 프로그래밍 언어 라기 보다는 문서(Document) 에 가깝다.
2. Basic Tag
| <html> | HTML 의 시작과 끝을 정의하는 TAG |
| <head> | HTML 의 머리말 (가장 먼저 읽히게 되는) 을 정의하는 TAG |
| <body> | HTML 의 화면에 보여지는 본문을 정의하는 TAG |
| <h1> ~ <h6> | HTML 의 본문에서 Head Line 을 정의하는 TAG (숫자가 작을수록 우선순위가 높은 헤드라인) |
| <p> | 단락 줄 바꿈 TAG |
| <br/> | 단순 줄 바꿈 TAG |
| <hr/> | 가로 줄 TAG |
<!-- html 영역의 시작 -->
<html>
<!--머릿말-->
<head>
<meta charset="UTF-8">
<title>HTML PAGE</title>
</head>
<!-- 본문 -->
<body>
HELLO HTML
</body>
</html>
<!-- html 영역의 끝 -->
3. Formatting TAG
| <abbr> | 양자들에 대한 설명 tooltip 제공 |
| <b> | 특정 영역을 bold 로 처리한다. |
| <del> | 취소선 |
| <i> | 이탤릭 체 |
| <mark> | 특정 영역 표시 |
| <q> | 쿼터 |
| <sub> | 아래 첨자 |
<html>
<head>
<meta charset="UTF-8">
<title>글자 꾸미기</title>
</head>
<body>
<p>
우리가 배우는 과목은
<abbr title="Hyper Text Markup Language">HTML</abbr> 입니다.
</p>
<p>
<b>HTML</b> 은 웹에서 화면을 표시해 줍니다.
</p>
<p>
특정 단어에 <del>취소선</del>, <ins>밑줄</ins>을 그어 줄 수 있다.
</p>
<p>
또한 특정 단어에 <i>이탤릭체</i> 또는 <mark>마크</mark>를 해줄 수 있다.
</p>
<p>
쿼터 표현 역시 태그로 가능하다. "그냥 해도 되지만" <q>태그로도 가능</q>
</p>
<p>
윗첨자(x<sup>2</sup>)와 아래첨자(X<sub>2</sub>)도 가능하다.
</p>
</body>
</html>
4. I-Frame TAG
I-frame 은 다른 페이지를 불러오는 기능을 한다.
다른 사이트의 페이지도 불러 올 수 있으나 해당 사이트가 허용해야만 가능 하다.
| width / height | I-frame 가로 세로 크기 지정 |
| src | 불러올 페이지의 주소 |
| title | I-frame 제목 (선택) |
| frameborder | I-frame 영역 경계선 두께 (기본 1) |
| allow | I-frame 기타 옵션들을 명시 (원본 사이트에 대한) |
| allowfullscreen | I-frame 을 전체 크기로 확장 (원본 사이트에서 허용해야 가능) |
<html>
<head>
<meta charset="UTF-8">
<title>아이프레임</title>
</head>
<body>
<!--<iframe width="550px" height="500px"
src="./02_formatting.html" frameborder="0"></iframe>-->
<!--<iframe width="550px" height="500px"
src="naver.com" frameborder="0"></iframe> -->
<iframe
width="853" height="480"
src="https://www.youtube.com/embed/ZszUbuHYoOI"
title="구디아카데미 자바 개발자 국비지원 민경태 강사 인터뷰(2): 취업, 좋은 회사, 중도포기, 고민하시는 분들에게"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
</body>
</html>
'HTML' 카테고리의 다른 글
| 03. List, Table, Span (0) | 2024.02.27 |
|---|---|
| 02. Input, Form, Link (0) | 2024.02.27 |
