Web/HTML

[HTML] HTML 태그(html5)

kimbangul 2020. 5. 15. 05:39

- (한글이 깨질 때) 파일을 UTF-8 방식으로 열기

<meta charset="utf-8">

 

- 문자를 진하게 강조하는 방법(볼드)

<strong>강조하고 싶은 내용</strong>

 

- 문자에 밑줄을 쳐 강조하는 방법

<u>강조하고 싶은 내용</u>

 

- HTML headings (제목)

: <h1> 부터 <h6> 까지는 제목을 나타내는 태그이다. <h6>까지만 있으며 <h7>은 없다.

 

-줄바꿈 태그

<br>

 

- 단락을 표현하는 태그

<p>단락 내용</p>

 

* css를 통해 단락 위에 여백 추가

<p style="margin-top:(여백크기)px";>단락 내용</p>

: 해당 <p> 태그 위로 지정한 만큼 여백이 생김.

 

 

 

- 사진을 첨부하는 태그

<img src=" ">

 

* 이미지가 너무 크다면 이미지 크기를 조절 가능

<img src="이미지 파일.jpg" width="100%">

속성 태그끼리는 순서 상관없음.

 

 

 

- 목록을 표현하는 태그

<li>목록 내용</li>

 

*<li> 태그의 부모 태그: <u1> </u1> unordered list

어디서부터 어디까지가 연관된 항목인지를 구분하기 위한 목적. <li> 태그는 반드시 부모 태그를 가지고 있어야 함.

<ul>

  <li>벵갈</li>

  <li>아비니시안</li>

  <li><strong>김방울</strong></li>

</ul>

 

* <o1> 태그: 자동으로 숫자를 매겨 줌

<ul>

  <li>벵갈</li>

  <li>아비니시안</li>

  <li><strong>김방울</strong></li>

</ul>

 

 

- 테이블(표)을 생성하는 태그

<table>

    <tr>

        <td>head</td>

        <td>98.1%</td>

    </tr>

    <tr>

        <td>body</td>

    </tr>

    <tr>

        <td>html</td>

        <td>97.9%></td>

    </tr>

</table>

 

 

- <title> 태그를 이용해 제목 설정

<title>제목</title>

 

 

- <head>, <body>,<html> 태그

<head> 태그는 본문을 설명하고, <body> 태그는 본문이다. <html>은 이 둘을 감싸는 최고위층 태그이다.

 

<!DOCTYPE HTML>  <- 이 문서에는 HTML이 담겨 있다는 관용적 표현

<html>

    <head>

        본문설명

    </head>

    <body>

        본문

    </body>

</html>

 

 

- 링크를 거는 태그 <a> (하이퍼텍스트)

<a href="주소">링크를 걸 내용</a>

 

* 링크를 클릭했을 때 새 탭에서 열리게 만들고 싶다면 <a> 태그에 target 속성을 추가한다.

<a href="주소" target="_blank">문자</a>

 

*링크를 클릭하기 전에 툴팁처럼 무언가를 알려주고 싶다면 <a> 태그에 title 속성을 추가한다.\

<a href="주소" target="_blank" title="알려주고 싶은 내용">문자</a>

 

 

 

www.evernote.com/l/AlenuOoNUtVMdZ7jd9qfnZwHPqjK_PU0T9k/ Evernote 에서 옮김.

 

HTML 태그

- (한글이 깨질 때) 파일을 UTF-8 방식으로 열기- 문자를 진하게 강조하는 방법(볼드) 강조하고 싶은 내용 - 문자에 밑줄을 쳐 강조하는 방법 강조하고 싶은 내용

www.evernote.com