HTML
1. 개념
- 하이퍼텍스트 마크업 언어 (HyperText Markup Language)
- 네트워크가 연결된 웹페이지에서 문서를 작성하고, 읽고, 공유하기 위해서 만들어진 체계
- 웹 페이지에서 문서를 작성하는데 정해진 약속
- 태그를 통해 웹페이지에서 보여질 내용을 나타낸다
URL
1. 절대번지
http://localhost:8080/HTML5/image/mangom.jpeg
2. 상대번지
../image/mangom.jpeg
태그
1. 개념
- 하나의 약속된 명령어
- HTML Element(요소) : 시작태그 + 내용 + 종료태그
- < > 안에 들어간 문법에 따라 고유한 기능을 가진다
2. ref.
3. 특징
block & inline
- HTML에 존재하는 모든 태그들은 각자의 사이즈를 가지고 있다
- 또한 각자의 사이즈는 block과 inline 둘 중 하나로 표현된다
| block | inline |
| : 페이지의 가로 넓이 전체를 차지하는 요소 |
: 자신의 해당 HTML 요소의 내용만큼만 차지하는 요소 |
|
|
| <address> <article> <aside> <blockquote> <canvas> <dd> <div> <dl> <dt> <fieldset> <figcaption> <figure> <footer> <form> <h1>-<h6> <header> <hr> <li> <main> <nav> <noscript> <ol> <p> <pre> <section> <table> <tfoot> <ul> <video> | <a> <abbr> <acronym> <b> <dbo> <big> <br> <button> <cite> <code> <dfn> <em> <i> <img> <input> <kdb> <label> <map> <object> <output> <q> <samp> <script> <select> <small> <span> <strong> <sub> <sup> <textarea> <time> <tt> <var> |
<!-- Block 요소 -->
<h1 />
<div />
<p />
<!-- Inline 요소 -->
<span />
<input /> <!-- text, checkbox, radio 모두 동일 -->
<a />
<button />
<label />block & inline 예제
| exam14-inline_block.html | <div> <p> <em> <span> |
4. 종속 태그
다른 태그와 함께 상호작용을 해야 작동하는 태그
- 선택박스 태그
<!-- Language -->
javascript
php
java
python
c#<form action="#">
<label for="lang">Language</label>
<select name="languages" id="lang">
<option value="javascript">JavaScript</option>
<option value="php">PHP</option>
<option value="java">Java</option>
<option value="python">Python</option>
<option value="c#">C#</option>
</select>
<input type="submit" value="Submit" />
</form>
- 목록 태그
1. 순서가 있는 리스트 1번 // 순서(O)
2. 순서가 있는 리스트 2번
3. 순서가 있는 리스트 3번
● 순서가 없는 리스트 // 순서(X)
● 순서가 없는 리스트
● 순서가 없는 리스트<!--ordered list, 번호 매겨짐 -->
<ol type="A">Laungage
<li>javascript</li>
<li>php</li>
<li>java</li>
<li>python</li>
<li>c#</li>
</ol>
<!--unordered list -->
<ul>
<li>javascript</li>
<li>php</li>
<li>java</li>
<li>python</li>
<li>c#</li>
</ul>
- 표 태그
| 헤더1 | 헤더2 |
| 섹션1 | 섹션2 |
| 섹션3 | 섹션4 |
<table>
<tr>
<th>헤더1</th>
<th>헤더2</th>
</tr>
<tr>
<td>섹션1</td>
<td>섹션2</td>
</tr>
<tr>
<td>섹션3</td>
<td>섹션4</td>
</tr>
</table>
HTML 문서구조 및 설명
// HTML5 버전 선언 방법
<!DOCTYPE html>
<html>
// 검색엔진을 위한 영역
<head>
<title>사이트 이름</title>
<meta name="description : 사이트 소개"/>
<meta property="og:image" /> <!-- 다른 사이트(카톡 등)에 이미지 알리기 -->
<meta property="og:title" /> <!-- 다른 사이트(카톡 등)에 사이트명 알리기 -->
<meta property="og:description" /> <!-- 다른 사이트(카톡 등)에 사이트상세 알리기 -->
</head>
// 브라우저에서 보여지는 영역
<body>
<header></header> <!-- 웹페이지의 상단(또는 상단메뉴) 부분 -->
<nav></nav> <!-- 웹페이지의 좌측(또는 우측메뉴) 부분 -->
<section></section> <!-- 웹페이지의 독립적인 섹션 부분 -->
<article></article> <!-- 웹페이지의 블로그, 뉴스, 기사 등 -->
<footer></footer> <!-- 웹페이지의 하단 기업정보 부분 -->
</body>
</html>- <title></title> 태그에 입력한 내용 ; 사이트의 좌측 상단 제목 부분에 표시
- <meta name="description" />태그에 입력한 내용 ; 구글, 네이버 등 검색엔진에서 사이트 검색시상세 설명 내용 부분에 표시
<meta name="description" content="네이버 메인에서 다양한 정보와 유용한 컨텐츠를 만나 보세요." />
- <meta property="og:" />태그에 입력한 내용 ; 검색엔진이 아닌 여러 서비스들(카카오톡, 슬랙, 페이스북 등)에서 주소를 직접 입력하는 경우, og 태그에 입력된 정보를 보여줌
- <meta property="og:image" content="다음로고.png" />
- <meta property="og:title" content="Daum" />
- <meta property="og:description" content="나의 관심 콘텐츠를 가장 즐겁게 ..." />
semantic tag
1. 개념
- 의미론적 tag
- 문서의 정보를 보다 잘 표현하기 위해서는 의미에 맞는 태그를 잘 사용해야 한다. 특히 HTML5에서는 웹페이지에서 통상 많이 사용하는 구조에 의미를 분명히 부여하기 위해서 의미론적 태그(semantic element)를 새롭게 정의해서 제공하고 있다
2. SEO (Search Engine Optimization)
✔️ 검색을 최적화하기 위해서 우리가 제목, 부제목, 시멘틱 태그를 잘 활용한다면 특정 키워드로 검색했을 때 내가 만든 웹사이트가 검색창에 노출될 수 있다
✔️ 다시 말해서 검색 엔진이 내가 만든 웹사이트를 어떤 결과에 띄워줘야 될지를 알려줄 수 있다 >> 유지보수성
✔️ 단순히 div tag로만 모든 구조를 짜는 것보다 더 한눈에 알아볼 수 있기 때문에, 다른 개발자들이 코드를 유지/보수하기가 더 편해진다
3. div 태그로만 구조를 짤 경우
4. semantic 태그를 사용할 경우
| article | 본문 |
| aside | 페이지의 내용과는 관계가 적은 내용 ex) 광고 |
| details | 기볹거으로 화면에 표시되지 않는 정보들 정의 |
| figure | 삽화나 다이어그램과 같은 부가적인 요소 정의 |
| footer | 화면의 하단에 위치하는 사이트나 문서의 전체적인 정보 정의 |
| header | 화면의 상단에 위치하는 사이트나 문서의 전체적인 정보 정의 |
| main | 문서에서 가장 준심이 되는 컨텐츠 정의 |
| mark | 참조나 하이라이트 표시 필요로 하는 문자 정의 |
| nav | 문서의 네비게이션 항목 정의 |
| section | 문서의 구획들 정의 |
| time | 시간 정의 |
5. 예제
| exam01.html | <header> <nav> <section> <aside> <footer> |
| exam02.html | <header> <nav> <section> <figure> <figcaption> |
'WEB > HTML' 카테고리의 다른 글
| HTML - Tags (0) | 2024.08.12 |
|---|
HTML
1. 개념
- 하이퍼텍스트 마크업 언어 (HyperText Markup Language)
- 네트워크가 연결된 웹페이지에서 문서를 작성하고, 읽고, 공유하기 위해서 만들어진 체계
- 웹 페이지에서 문서를 작성하는데 정해진 약속
- 태그를 통해 웹페이지에서 보여질 내용을 나타낸다
URL
1. 절대번지
http://localhost:8080/HTML5/image/mangom.jpeg
2. 상대번지
../image/mangom.jpeg
태그
1. 개념
- 하나의 약속된 명령어
- HTML Element(요소) : 시작태그 + 내용 + 종료태그
- < > 안에 들어간 문법에 따라 고유한 기능을 가진다
2. ref.
3. 특징
block & inline
- HTML에 존재하는 모든 태그들은 각자의 사이즈를 가지고 있다
- 또한 각자의 사이즈는 block과 inline 둘 중 하나로 표현된다
| block | inline |
| : 페이지의 가로 넓이 전체를 차지하는 요소 |
: 자신의 해당 HTML 요소의 내용만큼만 차지하는 요소 |
|
|
| <address> <article> <aside> <blockquote> <canvas> <dd> <div> <dl> <dt> <fieldset> <figcaption> <figure> <footer> <form> <h1>-<h6> <header> <hr> <li> <main> <nav> <noscript> <ol> <p> <pre> <section> <table> <tfoot> <ul> <video> | <a> <abbr> <acronym> <b> <dbo> <big> <br> <button> <cite> <code> <dfn> <em> <i> <img> <input> <kdb> <label> <map> <object> <output> <q> <samp> <script> <select> <small> <span> <strong> <sub> <sup> <textarea> <time> <tt> <var> |
<!-- Block 요소 -->
<h1 />
<div />
<p />
<!-- Inline 요소 -->
<span />
<input /> <!-- text, checkbox, radio 모두 동일 -->
<a />
<button />
<label />block & inline 예제
| exam14-inline_block.html | <div> <p> <em> <span> |
4. 종속 태그
다른 태그와 함께 상호작용을 해야 작동하는 태그
- 선택박스 태그
<!-- Language -->
javascript
php
java
python
c#<form action="#">
<label for="lang">Language</label>
<select name="languages" id="lang">
<option value="javascript">JavaScript</option>
<option value="php">PHP</option>
<option value="java">Java</option>
<option value="python">Python</option>
<option value="c#">C#</option>
</select>
<input type="submit" value="Submit" />
</form>
- 목록 태그
1. 순서가 있는 리스트 1번 // 순서(O)
2. 순서가 있는 리스트 2번
3. 순서가 있는 리스트 3번
● 순서가 없는 리스트 // 순서(X)
● 순서가 없는 리스트
● 순서가 없는 리스트<!--ordered list, 번호 매겨짐 -->
<ol type="A">Laungage
<li>javascript</li>
<li>php</li>
<li>java</li>
<li>python</li>
<li>c#</li>
</ol>
<!--unordered list -->
<ul>
<li>javascript</li>
<li>php</li>
<li>java</li>
<li>python</li>
<li>c#</li>
</ul>
- 표 태그
| 헤더1 | 헤더2 |
| 섹션1 | 섹션2 |
| 섹션3 | 섹션4 |
<table>
<tr>
<th>헤더1</th>
<th>헤더2</th>
</tr>
<tr>
<td>섹션1</td>
<td>섹션2</td>
</tr>
<tr>
<td>섹션3</td>
<td>섹션4</td>
</tr>
</table>
HTML 문서구조 및 설명
// HTML5 버전 선언 방법
<!DOCTYPE html>
<html>
// 검색엔진을 위한 영역
<head>
<title>사이트 이름</title>
<meta name="description : 사이트 소개"/>
<meta property="og:image" /> <!-- 다른 사이트(카톡 등)에 이미지 알리기 -->
<meta property="og:title" /> <!-- 다른 사이트(카톡 등)에 사이트명 알리기 -->
<meta property="og:description" /> <!-- 다른 사이트(카톡 등)에 사이트상세 알리기 -->
</head>
// 브라우저에서 보여지는 영역
<body>
<header></header> <!-- 웹페이지의 상단(또는 상단메뉴) 부분 -->
<nav></nav> <!-- 웹페이지의 좌측(또는 우측메뉴) 부분 -->
<section></section> <!-- 웹페이지의 독립적인 섹션 부분 -->
<article></article> <!-- 웹페이지의 블로그, 뉴스, 기사 등 -->
<footer></footer> <!-- 웹페이지의 하단 기업정보 부분 -->
</body>
</html>- <title></title> 태그에 입력한 내용 ; 사이트의 좌측 상단 제목 부분에 표시
- <meta name="description" />태그에 입력한 내용 ; 구글, 네이버 등 검색엔진에서 사이트 검색시상세 설명 내용 부분에 표시
<meta name="description" content="네이버 메인에서 다양한 정보와 유용한 컨텐츠를 만나 보세요." />
- <meta property="og:" />태그에 입력한 내용 ; 검색엔진이 아닌 여러 서비스들(카카오톡, 슬랙, 페이스북 등)에서 주소를 직접 입력하는 경우, og 태그에 입력된 정보를 보여줌
- <meta property="og:image" content="다음로고.png" />
- <meta property="og:title" content="Daum" />
- <meta property="og:description" content="나의 관심 콘텐츠를 가장 즐겁게 ..." />
semantic tag
1. 개념
- 의미론적 tag
- 문서의 정보를 보다 잘 표현하기 위해서는 의미에 맞는 태그를 잘 사용해야 한다. 특히 HTML5에서는 웹페이지에서 통상 많이 사용하는 구조에 의미를 분명히 부여하기 위해서 의미론적 태그(semantic element)를 새롭게 정의해서 제공하고 있다
2. SEO (Search Engine Optimization)
✔️ 검색을 최적화하기 위해서 우리가 제목, 부제목, 시멘틱 태그를 잘 활용한다면 특정 키워드로 검색했을 때 내가 만든 웹사이트가 검색창에 노출될 수 있다
✔️ 다시 말해서 검색 엔진이 내가 만든 웹사이트를 어떤 결과에 띄워줘야 될지를 알려줄 수 있다 >> 유지보수성
✔️ 단순히 div tag로만 모든 구조를 짜는 것보다 더 한눈에 알아볼 수 있기 때문에, 다른 개발자들이 코드를 유지/보수하기가 더 편해진다
3. div 태그로만 구조를 짤 경우
4. semantic 태그를 사용할 경우
| article | 본문 |
| aside | 페이지의 내용과는 관계가 적은 내용 ex) 광고 |
| details | 기볹거으로 화면에 표시되지 않는 정보들 정의 |
| figure | 삽화나 다이어그램과 같은 부가적인 요소 정의 |
| footer | 화면의 하단에 위치하는 사이트나 문서의 전체적인 정보 정의 |
| header | 화면의 상단에 위치하는 사이트나 문서의 전체적인 정보 정의 |
| main | 문서에서 가장 준심이 되는 컨텐츠 정의 |
| mark | 참조나 하이라이트 표시 필요로 하는 문자 정의 |
| nav | 문서의 네비게이션 항목 정의 |
| section | 문서의 구획들 정의 |
| time | 시간 정의 |
5. 예제
| exam01.html | <header> <nav> <section> <aside> <footer> |
| exam02.html | <header> <nav> <section> <figure> <figcaption> |
'WEB > HTML' 카테고리의 다른 글
| HTML - Tags (0) | 2024.08.12 |
|---|
