HTML
1) 정의
- HTML은 웹 페이지의 구조와 내용을 정의
2) 기능
- 웹 페이지에서 볼 수 있는 모든 텍스트, 이미지, 비디오 및 다른 콘텐츠의 뼈대를 만든다.
3) 종류
- 콘텐츠를 가지는 태그
ex) <div>
- 콘텐츠를 가지지 않는 태그
ex) <br>
- block 요소(줄 바꿈)
ex) <div>, <article>
- inline 요소(한 줄)
ex) <a>, <span>
- inline-block 요소
ex) CSS로 성질을 바꾸는 것.
4) 구조
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML Example</title>
</head>
<body>
<h1>HTML Example</h1>
<p>This is an example of HTML code.</p>
<img src="image.jpg" alt="An example image">
</body>
</html><html> 태그는 HTML 문서의 루트 요소를 나타낸다.
<head> 태그는 문서의 메타데이터를 담고 있다.
<body> 태그는 실제 문서의 내용을 담고 있다.
<meta> 태그는 문서의 인코딩 방식 등 추가 정보를 담고 있다.
* charset: 문서에서 허용하는 문자의 집합
<title> 태그는 문서의 제목을 나타내며, 브라우저의 탭 제목으로도 사용된다.
CSS
1) 정의
- CSS는 HTML 문서의 디자인과 스타일을 정의
2) 기능
- 웹 페이지에서 볼 수 있는 모든 색상, 레이아웃, 폰트 및 기타 시각적 요소를 제어한다.
3) 구조
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}* 만약 파일을 나눠서 HTML에 넣는다면?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML Example</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<h1>HTML Example</h1>
<p>This is an example of HTML code.</p>
<img src="image.jpg" alt="An example image">
</body>
</html>JavaScript
1) 정의
- JavaScript는 HTML 및 CSS와 함께 사용하여 웹 페이지의 동적인 요소를 제어
2) 기능
- 사용자 상호 작용, 애니메이션, 비동기 통신 등을 가능하게 한다.
const button = document.getElementById("myButton");
button.addEventListener("click", function() {
alert("Hello, World!");
});* 만약 파일을 나눠서 HTML에 넣는다면?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML Example with JavaScript</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<h1>HTML Example with JavaScript</h1>
<p>This is an example of HTML code.</p>
<img src="image.jpg" alt="An example image">
<button id="myButton">Click me</button>
<script src="script.js"></script>
</body>
</html>태그 정리
1) img vs svg
- 이미지의 크기나 형태가 고정되어 있거나, 자주 변경되지 않는 경우에는 <img> 태그를
- 반면, 그래픽의 크기나 형태가 동적으로 변경되거나, 상호작용적인 그래픽이 필요한 경우에는 <svg> 태그를
2) 이미지, 영상, 그래프 등
- img, video(source), audio(source), figure(figcaption), canvas
<!-- 이미지 태그 -->
<img src="image.jpg" alt="이미지 설명">
<!-- 영상 태그 -->
<video controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<!-- 오디오 태그 -->
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
Your browser does not support the audio tag.
</audio>
<!-- 이미지와 설명을 함께 나타내는 태그 -->
<figure>
<img src="image.jpg" alt="이미지 설명">
<figcaption>이미지 설명</figcaption>
</figure>
<!-- 그래프를 그리는 캔버스 태그 -->
<canvas id="myCanvas"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50);
</script>
3) 리스트
- ul(li): 정렬되지 않은 목록 태그(·,,·)
- ol(li): 정렬된 목록 태그(1,2,3...)
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ol type="a">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<dl>
<dt>HTML</dt>
<dd>Hyper Text Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
<dt>JS</dt>
<dd>JavaScript</dd>
</dl>
4) 테이블
- thead: 표의 헤더
- tbody: 표의 본문
- tfoot: 표의 바닥
<table border="1">
<caption>Example Table</caption>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Age</th>
<th scope="col">Gender</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>25</td>
<td>Male</td>
</tr>
<tr>
<td>Jane</td>
<td>30</td>
<td>Female</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Total: 2 people</td>
</tr>
</tfoot>
</table>
5) ifram
- HTML 문서 안에 다른 웹 페이지를 삽입하는 데 사용
- 일반적으로 외부 페이지, 광고, 지도 등을 삽입하는 데 사용
<iframe name="test" src="http://example.com"></iframe>
<a href="https://www.wikipedia.org/" target="test">위키피디아</a>
6) form
- 웹 페이지에서 사용자 입력 폼을 만들기 위해 사용되는 요소
<!-- 폼 전송 URL 지정 -->
<form action="submit.php">
<!-- HTTP 요청 방식 지정 -->
<form method="post">
<!-- 폼 이름 지정 -->
<form name="myform">
<!-- 폼 데이터 인코딩 방식 지정 -->
<form action="submit.php" method="post" enctype="multipart/form-data">
<!-- 폼 데이터 전송 대상 지정 -->
<form action="submit.php" method="post" target="_blank">
<!-- 자동완성 기능 여부 지정 -->
<form autocomplete="off">
<!-- 폼 데이터 유효성 검사 비활성화 -->
<form novalidate>
<!-- 폼 데이터 전송 이전에 실행할 자바스크립트 코드 지정 -->
<form onsubmit="return validateForm()">
<!-- 제출 버튼 -->
<button type="submit">제출</button>
<!-- input으로도 가능함 -->
7) label
- 입력 요소를 설명하는 데 사용
<!-- label에 for와 input의 id를 연결 시켜 사용자 이름을 누르면 input창으로 focus가 간다. -->
<label for="username">사용자 이름:</label>
<input type="text" id="username" name="username">
<!-- label에 for와 input의 id를 따로 만들지 않아도 연결 시켜 사용자 이름을 누르면 input창으로 focus가 간다. -->
<label for="username">
사용자 이름:
<input type="text" id="username" name="username">
</label>- input hidden 기능
<input type="hidden" name="where" value="samplecode">백으로 넘어갈 때 숨겨져서 데이터가 넘어간다.
'Database & Data > 데이터 분석' 카테고리의 다른 글
| 데이터 크롤하고 분석(Seleniuum) - 5 (0) | 2023.04.20 |
|---|---|
| 데이터 크롤하고 분석(정적 페이지와 동적 페이지) - 4 (0) | 2023.04.19 |
| 데이터 크롤하고 분석(BeautifulSoup) - 3 (0) | 2023.04.19 |
| 데이터 크롤하고 분석(Web Scraping 기초) - 2 (0) | 2023.04.18 |
| 서울 자치구 별로 가장 매매값이 높은 아파트 선별(실거래가) (0) | 2023.02.12 |
