[Web] HTML

🤔 HTML ?

HTML(Hypertext Markup Language, 하이퍼텍스트 마크업 언어)는 프로그래밍 언어는 아니며, 우리가 보는 웹페이작 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어이다.

HTML은 elements로 구성 되어 있으며, 이들은 적절한 방법으로 나타내고 실행하기 위해 각 컨텐츠의 여러 부분들을 감싸고 마크업 한다.

😃 HTML 문서의 구조

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
  </body>
</html>

<!DOCTYPE html> : 문서 형식을 나타낸다.
<html> : 전체 페이지의 콘텐츠를 포험하며, 기본 요소로도 알려져 있다.
<head> : 이용자에게는 보이지 않지만 검색 결과에 노출 될 키워드, 설명, CSS 등 HTML 페이지의 모든 내용을 담고 있다.
<meta charset="utf-8"> : HTML 문서의 문자 인코딩 설정을 UTF-8로 지정
<title> : 페이지 제목이 설정 되며 페이지가 로드되는 브라우저 탭에 표시되는 제목으로 사용된다.
<body> : 텍스트, 이미지, 비디오 등을 비롯해 페이지에 표시되는 모든 콘텐츠를 포함한다.

📘 자주 쓰이는 HTML 태그 정리

`<div>`

<div> 태그는 HTML 문서에서 특정 영역이나 섹션을 정의 할 때 사용한다.
여러 HTML 요소들을 하나로 묶어주어 CSS로 스타일을 변경하거나 자바스크립트로 특정 작업을 수행하기 위한 일종의 컨테이너(Container)로 자주 사용 된다. 또한, CSS와 함께 레이아웃(layout)을 설정하는데 사용한다.

예제

<style>
    div {
        background-color: orange;
        font-style: italic;
    }
</style>

<p>HTML의 모든 요소는 해당 요소가 웹 브라우저에 어떻게 보이는가를 결정짓는 display 속성을 가집니다.</p>
<div><p>div 요소는 다른 HTML 요소들을 하나로 묶는 데 자주 사용되는 대표적인 블록(block) 요소입니다.</p></div>
<p>span 요소는 텍스트(text)의 특정 부분을 묶는 데 자주 사용되는 인라인(inline) 요소입니다.</p>

`<span>`

<span> 태그는 HTML 문서에서 인라인(inline) 요소들을 하나로 묶을 때 사용한다.
어떠한 의미도 가지지 않지만, class 나 id와 같은 전역 속성과 함께 사용하여 요소들을 그룹화 한다.

예제

<style>
    .word { background-color: orange; font-style: italic; }
</style>

<p>HTML의 모든 요소는 해당 요소가 웹 브라우저에 어떻게 보이는가를 결정짓는 display 속성을 가집니다.</p>
<p><span class="word">span 요소</span>는 텍스트(text)의 특정 부분을 묶는 데 자주 사용되는 
  <span class="word">인라인(inline) 요소</span>입니다.</p>
<p>div 요소는 다른 HTML 요소들을 하나로 묶는 데 자주 사용되는 대표적인 블록(block) 요소입니다.</p>

`<a>`

<a> 태그는 하나의 페이지에서 다른 페이지를 연결할 때 사용하는 하이퍼링크(hyperlink)를 정의할 때 사용한다.

가장 중요한 속성은 링크의 목적지를 가리키는 href 속성이다.

예제

<a href="http://www.naver.com">네이버 사이트로 이동!</a>

사용 가능한 속성

`<p>`

<p> 태그는 문단을 정의할 때 사용한다.

브라우저는 자동으로 위쪽과 아래쪽에 약간의 여백을 추가한다.

예제

<p>이 문장은 단락입니다.</p>
<p>이 문장은 단락입니다.</p>
<p>이 문장은 단락입니다.</p>

`<br>`

<br> 태그는 텍스트 내의 줄바꿈을 정의할 때 사용한다.

HTML 소스 코드 내에서는 엔터(Enter)키를 사용하여 줄바꿈을 실시하여도 브라우저 화면에 실제로 적용되지 않는다.

예제

<p>
    HTML은 HyperText Markup Language의 약자입니다.<br>
    웹 페이지는 HTML 문서라고도 불리며,<br>
    HTML 태그들로 구성됩니다.
</p>

`<ul>`

<ul> 태그는 순서가 없는 HTML 리스트(list)를 정의할 때 사용 한다.

예제

<ul>
    <li>아메리카노</li>
    <li>카페라떼</li>
    <li>핫초코</li>
    <li>차
        <ul>
            <li>녹차</li>
            <li>홍차</li>
            <li>자스민차</li>
        </ul>
    </li>
</ul>

`<ol>`

<ol> 태그는 순서가 있는 HTML 리스트(list)를 정의할 때 사용 한다.

예제

<ol>
    <li>아메리카노</li>
    <li>카페라떼</li>
    <li>핫초코</li>
</ol>

<ol type="A" start="10">
    <li>녹차</li>
    <li>홍차</li>
    <li>자스민차</li>
</ol>

사용 할 수 있는 속성

`<li>`

<li> 태그는 HTML 리스트(list)에 포함되는 아이템(item)을 정의할 때 사용한다.

예제

<ol>
    <li>아메리카노</li>
    <li>카페라떼</li>
    <li>핫초코</li>
</ol>

<ol type="A" start="10">
    <li>녹차</li>
    <li>홍차</li>
    <li>자스민차</li>
</ol>

`<table>`

<table> 태그는 데이터를 포함하는 셀(cell)들의 행과 열로 구성된 2차원 테이블을 정의할 때 사용한다.

예제

<table>
    <tr>
        <th>밥류</th>
        <th>면류</th>
        <th>분식류</th>
    </tr>
    <tr>
        <td>김밥</td>
        <td>라면</td>
        <td>떡볶이</td>        
    </tr>
</table>

`<tr>`

<tr> 태그는 테이블에서 셀들로 이루어진 하나의 행(row)를 정의할 때 사용한다.

예제

<table>
    <tr>
        <th>밥류</th>
        <th>면류</th>
        <th>분식류</th>
    </tr>
    <tr>
        <td>김밥</td>
        <td>라면</td>
        <td>떡볶이</td>        
    </tr>
</table>

`<td>`

<td> 태그는 HTML 테이블에서 하나의 데이터 셀을 정의할 때 사용한다.

예제

<table>
    <tr>
        <th>밥류</th>
        <th>면류</th>
        <th>분식류</th>
    </tr>
    <tr>
        <td>김밥</td>
        <td>라면</td>
        <td>떡볶이</td>        
    </tr>
</table>

`<button>`

<button> 태그는 클릭할 수 있는 버튼을 정의할 때 사용 한다.

예제

<button type="button" onclick="alert('Hello World!')">클릭해 보세요!</button>

사용 할 수 있는 속성

`<fieldset>`

<fieldset> 태그는 <form> 태그에서 연관된 요소들을 하나의 그룹으로 묶을 때 사용한다.

예제

<form action="/examples/media/action_target.php" method="get">
    <fieldset>
        <legend>학사 관리 로그인</legend>
        이름 : <input type="text" name="st_name"><br>
        학번 : <input type="text" name="st_id"><br>
        학과 : <input type="text" name="department"><br>
        <button type="submit">제출하기</button>
    </fieldset>
</form>

사용 할 수 있는 속성

`<figure>`

<figure> 태그는 삽화나 다이어그램, 사진 등과 같이 문서의 주요 흐름과는 독립적인 콘텐츠를 정의할 때 사용한다.

예제

<figure>
    <img src="/examples/images/img_flower.png" alt="flowers" width="350" height="263">
</figure>

`<form>`

<form> 태그는 사용자로부터 입력을 받을 수 있는 HTML 입력 폼(form)을 정의할 때 사용한다.

예제

<form action="/examples/media/action_target.php">
    이름 : <input type="text" name="st_name"><br>
    학번 : <input type="text" name="st_id"><br>
    학과 : <input type="text" name="department"><br>
    <input type="submit">
</form>

사용 할 수 있는 속성

`<nav>`

<nav> 태그는 다른 페이지 또는 현재 페이지의 다른 부분과 연결되는 네비게이션 링크들의 집합을 정의 할 때 사용한다.

일반적인 예로는 메뉴, 목차, 인덱스 등이 있다.

예제

<nav>
    <a href="/html/intro">HTML</a> |
    <a href="/css/intro">CSS</a> |
    <a href="/javascript/intro">JavaScript</a>
</nav>

`<select>`

<select> 태그는 옵션 메뉴를 제공하는 드롭다운(drop-down list) 리스트를 정의할 때 사용한다.

<option> 태그는 드롭다운 리스트에서 사용되는 각각의 옵션을 정의한다.

예제

<select>
    <option value="americano">아메리카노</option>
    <option value="caffe latte">카페라테</option>
    <option value="cafe au lait">카페오레</option>
    <option value="espresso">에스프레소</option>
</select>

사용 할 수 있는 속성

Author And Source

이 문제에 관하여([Web] HTML), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@junbeomm-park/Web-HTML

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

[Web] HTML

🤔 HTML ?

😃 HTML 문서의 구조

📘 자주 쓰이는 HTML 태그 정리

<div>

<span>

<a>

<p>

<br>

<ul>

<ol>

<li>

<table>

<tr>

<td>

<button>

<fieldset>

<figure>

<form>

<nav>

<select>

Author And Source

좋은 웹페이지 즐겨찾기

`<div>`

`<span>`

`<a>`

`<p>`

`<br>`

`<ul>`

`<ol>`

`<li>`

`<table>`

`<tr>`

`<td>`

`<button>`

`<fieldset>`

`<figure>`

`<form>`

`<nav>`

`<select>`