본 문서는 https://www.w3schools.com/html/default.asp를 공부하기 좋게 요약해 놓은 것입니다.

HTML 텍스트 서식

<!DOCTYPE html>
<html>
<body>

<p><b>This text is bold</b></p>
<p><i>This text is italic</i></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>

</body>
</html>

<b> - 굵은 텍스트
<strong> - 중요한 텍스트
<i> - 기울임꼴 텍스트
<em> - 강조된 텍스트
<mark> - 표시된 텍스트
<small> - 더 작은 텍스트
<del> - 삭제된 텍스트
<ins> - 삽입된 텍스트
<sub> - 아래 첨자 텍스트
<sup> - 위 첨자 텍스트

HTML <b> 및 <strong> 요소

HTML <b>요소는 추가적인 중요성 없이 굵은 텍스트를 정의합니다.

<!DOCTYPE html>
<html>
<body>

<p>This text is normal.</p>
<p><b>This text is bold.</b></p>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<p>This text is normal.</p>
<p><strong>This text is important!</strong></p>

</body>
</html>

HTML <작은> 요소

HTML <small>요소는 더 작은 텍스트를 정의합니다.

<!DOCTYPE html>
<html>
<body>

<p>This is some normal text.</p>
<p><small>This is some smaller text.</small></p>

</body>
</html>

HTML <mark> 요소

HTML <mark>요소는 표시하거나 강조 표시해야 하는 텍스트를 정의합니다

<!DOCTYPE html>
<html>
<body>

<p>Do not forget to buy <mark>milk</mark> today.</p>

</body>
</html>

HTML <del> 요소

HTML <del>요소는 문서에서 삭제된 텍스트를 정의합니다. 브라우저는 일반적으로 삭제된 텍스트에 줄을 긋습니다.

<!DOCTYPE html>
<html>
<body>

<p>My favorite color is <del>blue</del> red.</p>

</body>
</html>

HTML <ins> 요소

HTML <ins>요소는 문서에 삽입된 텍스트를 정의합니다. 브라우저는 일반적으로 삽입된 텍스트에 밑줄을 긋습니다.

<!DOCTYPE html>
<html>
<body>

<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>

</body>
</html>

HTML <sub> 요소

HTML <sub>요소는 아래 첨자 텍스트를 정의합니다. 아래 첨자 텍스트는 일반 줄 아래 반 문자로 나타나며 때로는 더 작은 글꼴로 렌더링됩니다. 아래 첨자 텍스트는 H 2 O 와 같은 화학식에 사용할 수 있습니다 .

<!DOCTYPE html>
<html>
<body>

<p>This is <sub>subscripted</sub> text.</p>

</body>
</html>

HTML <sup> 요소

HTML <sup>요소는 위 첨자 텍스트를 정의합니다. 위 첨자 텍스트는 일반 줄 위의 문자 반으로 나타나며 때로는 더 작은 글꼴로 렌더링됩니다. 위 첨자 텍스트는 WWW [1] 와 같은 각주에 사용할 수 있습니다 .

<!DOCTYPE html>
<html>
<body>

<p>This is <sup>superscripted</sup> text.</p>

</body>
</html>

인용을 위한 HTML <blockquote>

HTML <blockquote>요소는 다른 소스에서 인용된 섹션을 정의합니다.

브라우저는 일반적으로 <blockquote>요소를 들여씁니다 .

<!DOCTYPE html>
<html>
<body>

<p>Browsers usually indent blockquote elements.</p>

<blockquote cite="http://www.worldwildlife.org/who/index.html">
For nearly 60 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by more than one million members in the United States and close to five million globally.
</blockquote>

</body>
</html>

짧은 인용문을 위한 HTML <q>

HTML <q>태그는 짧은 인용문을 정의합니다.

브라우저는 일반적으로 따옴표 주위에 따옴표를 삽입합니다.

<!DOCTYPE html>
<html>
<body>

<p>Browsers usually insert quotation marks around the q element.</p>

<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>

</body>
</html>

약어용(줄임말) HTML <abbr>

HTML <abbr>태그는 "HTML", "CSS", "Mr.", "Dr.", "ASAP", "ATM"과 같은 약어 또는 두문자어를 정의합니다.

약어를 표시하면 브라우저, 번역 시스템 및 검색 엔진에 유용한 정보를 제공할 수 있습니다.

팁: 전역 제목 속성을 사용하여 요소 위에 마우스를 놓을 때 약어/약어에 대한 설명을 표시합니다.

<!DOCTYPE html>
<html>
<body>

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
<p>Marking up abbreviations can give useful information to browsers, translation systems and search-engines.</p>

</body>
</html>

연락처 정보용 HTML <주소>

HTML <address>태그는 문서 또는 기사의 작성자/소유자에 대한 연락처 정보를 정의합니다.

연락처 정보는 이메일 주소, URL, 실제 주소, 전화번호, 소셜 미디어 핸들 등이 될 수 있습니다.

<address>요소 의 텍스트는 일반적으로 기울임꼴로 렌더링되며 브라우저는 항상 <address>요소 앞뒤에 줄 바꿈을 추가합니다 .

<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

작품 제목에 대한 HTML <cite>

HTML <cite>태그는 창작물(예: 책, 시, 노래, 영화, 그림, 조각 등)의 제목을 정의합니다.

참고: 사람의 이름은 작품의 제목이 아닙니다.

<cite>요소 의 텍스트는 일반적으로 기울임꼴로 렌더링됩니다 .

<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>

양방향 재정의를 위한 HTML <bdo>

BDO는 양방향 재정의를 의미합니다.

HTML <bdo>태그는 현재 텍스트 방향을 재정의하는 데 사용됩니다.

<bdo dir="rtl">This text will be written from right to left</bdo>

HTML 주석 태그

다음 구문을 사용하여 HTML 소스에 주석을 추가할 수 있습니다.

시작 태그에는 느낌표(!)가 있지만 끝 태그에는 없습니다.

HTML 색상

HTML에서 색상 이름을 사용하여 색상을 지정할 수 있습니다. ex) <h1 style="background-color:Tomato;">Tomato</h1>

HTML 요소의 배경색을 설정할 수 있습니다. ex) <h1 style="background-color:DodgerBlue;">Hello World</h1>

HTML에서 텍스트 색상을 설정할 수 있습니다. ex) <h1 style="color:Tomato;">Hello World</h1>

HTML에서 테두리 색상을 설정할 수 있습니다. ex) <h1 style="border:2px solid Tomato;">Hello World</h1>

HTML에서는 RGB 값, HEX 값, HSL 값, RGBA 값 및 HSLA 값을 사용하여 색상을 지정할 수도 있습니다.

다음 세 개의 <div> 요소에는 RGB, HEX 및 HSL 값으로 설정된 배경색이 있습니다.

ex) <h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

CSS 란 무엇입니까?

CSS는 Cascading Style Sheets의 약자입니다.

CSS는 많은 작업을 절약합니다. 그것은 한 번에 여러 웹 페이지의 레이아웃을 제어할 수 있습니다.

CSS(Cascading Style Sheets)는 웹 페이지의 레이아웃 형식을 지정하는 데 사용됩니다.

CSS를 사용하면 색상, 글꼴, 텍스트 크기, 요소 사이의 간격, 요소가 어떻게 배치되고 배치되는지, 어떤 배경 이미지나 배경색을 사용할지, 다양한 장치와 화면 크기에 따라 다른 디스플레이를 제어할 수 있습니다. 훨씬 더!

CSS는 3가지 방법으로 HTML 문서에 추가할 수 있습니다.

인라인 - styleHTML 요소 내부 의 속성 사용
내부 - 섹션 의 <style>요소 사용<head>
외부 - <link> 요소를 사용하여 외부 CSS 파일에 연결

인라인 CSS

인라인 CSS는 단일 HTML 요소에 고유한 스타일을 적용하는 데 사용됩니다.

인라인 CSS는 styleHTML 요소 의 속성을 사용합니다 .

다음 예제에서는 <h1>요소 의 텍스트 색상 을 파란색으로 설정하고 요소의 텍스트 색상 <p>을 빨간색으로 설정합니다.

<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>

내부 CSS

내부 CSS는 단일 HTML 페이지의 스타일을 정의하는 데 사용됩니다.

내부 CSS는 요소 <head>내의 HTML 페이지 섹션에 정의됩니다 <style>.

다음 예제 <h1>에서는 해당 페이지에 있는 모든 <p>요소 의 텍스트 색상을 파란색으로 설정하고 모든 요소 의 텍스트 색상 을 빨간색으로 설정합니다. 또한 페이지는 "powderblue" 배경색으로 표시됩니다.

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

외부 CSS

외부 스타일 시트는 많은 HTML 페이지의 스타일을 정의하는 데 사용됩니다.

외부 스타일 시트를 사용하려면 <head>각 HTML 페이지 의 섹션에 외부 스타일 시트에 대한 링크를 추가 하십시오.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

외부 스타일 시트는 모든 텍스트 편집기에서 작성할 수 있습니다. 파일에는 HTML 코드가 포함되어서는 안 되며 .css 확장자로 저장해야 합니다.

"styles.css" 파일은 다음과 같습니다.

"styles.css":

body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}

CSS 색상, 글꼴 및 크기

여기에서는 일반적으로 사용되는 몇 가지 CSS 속성을 보여줍니다. 나중에 그들에 대해 더 배우게 될 것입니다.

CSS color속성은 사용할 텍스트 색상을 정의합니다.

CSS font-family속성은 사용할 글꼴을 정의합니다.

CSS font-size 속성은 사용할 텍스트 크기를 정의합니다.

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: blue;
  font-family: verdana;
  font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

CSS 테두리

CSS border속성은 HTML 요소 주위에 테두리를 정의합니다.

팁: 거의 모든 HTML 요소에 대해 테두리를 정의할 수 있습니다.

p {
border: 2px solid powderblue;
}

<p>This is a paragraph.</p>

CSS 패딩

CSS padding속성은 텍스트와 테두리 사이의 패딩(공백)을 정의합니다.

p {
border: 2px solid powderblue;
padding: 30px;
}

CSS 여백

CSS margin속성은 테두리 외부의 여백(공백)을 정의합니다.

p {
border: 2px solid powderblue;
margin: 50px;
}

외부 CSS에 대한 링크

외부 스타일 시트는 전체 URL 또는 현재 웹 페이지에 대한 상대 경로로 참조할 수 있습니다.

이 예에서는 전체 URL을 사용하여 스타일 시트에 연결합니다.

이 예제는 현재 웹 사이트의 html 폴더에 있는 스타일 시트로 연결됩니다.

이 예제는 현재 페이지와 같은 폴더에 있는 스타일 시트로 연결됩니다.

HTML 링크 - 구문

HTML <a>태그는 하이퍼링크를 정의합니다. 다음 구문이 있습니다.

<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>

HTML 링크 - 대상 속성

기본적으로 링크된 페이지는 현재 브라우저 창에 표시됩니다. 이를 변경하려면 링크에 대해 다른 대상을 지정해야 합니다.

target속성 지정은 어디에서 링크 된 문서를 엽니다.

target속성은 다음 값 중 하나를 사용할 수 있습니다 :

_self- 기본. 클릭한 것과 동일한 창/탭에서 문서를 엽니다.
_blank - 새 창이나 탭에서 문서를 엽니다.
_parent - 부모 프레임에서 문서를 엽니다.
_top - 창의 전체 본문에서 문서를 엽니다.

ex) <a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

target="_blank"를 사용하여 새 브라우저 창이나 탭에서 연결된 문서를 엽니다.

절대 URL과 상대 URL

위의 두 예 모두 속성에 절대 URL (전체 웹 주소)을 사용하고 href있습니다.

로컬 링크(동일한 웹사이트 내 페이지에 대한 링크)는 상대 URL ("https://www" 부분 제외)로 지정됩니다.

<h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>

<h2>Relative URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS Tutorial</a></p>

HTML 링크 - 이미지를 링크로 사용

이미지를 링크로 사용하려면 <img> 태그 안에 태그를 넣으면 됩니다 <a>.

이메일 주소 링크

속성 mailto:내부를 사용 href하여 사용자의 이메일 프로그램을 여는 링크를 생성합니다(새 이메일을 보낼 수 있도록 하기 위해):

<a href="mailto:someone@example.com">Send email</a>

버튼을 링크로

HTML 버튼을 링크로 사용하려면 JavaScript 코드를 추가해야 합니다.

JavaScript를 사용하면 버튼 클릭과 같은 특정 이벤트에서 발생하는 일을 지정할 수 있습니다.

<button onclick="document.location='default.asp'">HTML Tutorial</button>

링크 제목

title속성은 요소에 대한 추가 정보를 지정합니다. 정보는 마우스가 요소 위로 이동할 때 도구 설명 텍스트로 가장 자주 표시됩니다.

<a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML section">Visit our HTML Tutorial</a>

전체 URL을 사용하여 웹페이지에 링크:

<a href="https://www.w3schools.com/html/default.asp">HTML tutorial</a>

현재 웹 사이트의 html 폴더에 있는 페이지 링크:

<a href="/html/default.asp">HTML tutorial</a>

현재 페이지와 동일한 폴더에 있는 페이지에 대한 링크:

<a href="default.asp">HTML tutorial</a>

HTML 이미지

HTML <img>태그는 웹 페이지에 이미지를 삽입하는 데 사용됩니다.

이미지는 기술적으로 웹 페이지에 삽입되지 않습니다. 이미지는 웹 페이지에 링크됩니다. <img>태그는 참조 된 이미지에 대한 유지 공간을 만듭니다.

<img>태그는 속성 만 포함하고, 닫는 태그가없는, 비어 있습니다.

<img>태그는 두 개의 필수 속성이 있습니다

src - 이미지의 경로를 지정합니다.
alt - 이미지의 대체 텍스트를 지정합니다.

ex)

다른 폴더의 이미지

하위 폴더에 이미지가 있는 경우 src속성에 폴더 이름을 포함해야 합니다.

다른 서버/웹사이트의 이미지

일부 웹 사이트는 다른 서버의 이미지를 가리킵니다.

다른 서버의 이미지를 가리키려면 src속성 에 절대(전체) URL을 지정해야 합니다.

HTML은 애니메이션 GIF를 허용합니다.

이미지를 링크로 사용하려면 <img>태그 안에 태그를 넣으세요 <a>

이미지 플로팅

CSS float속성을 사용하여 이미지가 텍스트의 오른쪽이나 왼쪽으로 떠 있게 하십시오.

<p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>

<p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p>

HTML 테이블 정의

<table>태그는 HTML 테이블을 정의합니다.

각 테이블 행은 <tr>태그 로 정의됩니다 . 각 테이블 헤더는 <th>태그 로 정의됩니다 . 각 테이블 데이터/셀은 <td>태그 로 정의됩니다 .

기본적으로 <th>요소 의 텍스트 는 굵게 중앙에 표시됩니다.

기본적으로 <td>요소 의 텍스트 는 일반 및 왼쪽 정렬입니다.

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
  <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

HTML 표 - 테두리 추가

표에 테두리를 추가하려면 CSS border속성을 사용하세요 .

table, th, td {
border: 1px solid black;
}

HTML 표 - 접힌 테두리

테두리가 하나의 테두리로 축소되도록 하려면 CSS border-collapse 속성을 추가합니다 .

table, th, td {
border: 1px solid black;
border-collapse: collapse;
}

HTML 테이블 - 셀 패딩 추가

셀 패딩은 셀 내용과 테두리 사이의 공간을 지정합니다.

패딩을 지정하지 않으면 테이블 셀이 패딩 없이 표시됩니다.

패딩을 설정하려면 CSS padding속성을 사용하세요 .

th, td {
padding: 15px;
}

HTML 테이블 - 왼쪽 정렬 제목

기본적으로 테이블 머리글은 굵게 중앙에 표시됩니다.

표 머리글을 왼쪽 정렬하려면 CSS text-align속성을 사용하세요 .

th {
text-align: left;
}

HTML 표 - 테두리 간격 추가

테두리 간격은 셀 사이의 간격을 지정합니다.

표의 테두리 간격을 설정하려면 CSS border-spacing속성을 사용하세요 .

table {
border-spacing: 5px;
}

참고: 테이블에 접힌 테두리 border-spacing가 있는 경우 효과가 없습니다.

HTML 테이블 - 여러 열에 걸쳐 있는 셀

셀을 두 개 이상의 열로 확장하려면 다음 colspan속성을 사용하십시오 .

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
  </tr>
</table>

HTML 테이블 - 여러 행에 걸쳐 있는 셀

셀을 두 개 이상의 행으로 확장하려면 다음 rowspan속성을 사용하십시오 .

<table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
</table>

HTML 표 - 캡션(제목) 추가

표에 캡션을 추가하려면 다음 <caption>태그를 사용하세요 .

<table style="width:100%">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

하나의 테이블을 위한 특별한 스타일

하나의 특정 테이블에 대한 특수 스타일을 정의하려면 테이블에 id 속성을 추가 하십시오.

<table id="t01">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

...

#t01 {
width: 100%;
background-color: #f1f1c1;
}

#t01 tr:nth-child(even) {
  background-color: #eee;
}
#t01 tr:nth-child(odd) {
background-color: #fff;
}
#t01 th {
  background-color: black;
  color: white;
}

'Develop > HTML' 카테고리의 다른 글

HTML 기초6 ID (0)	2021.08.15
HTML 기초5 Classes (0)	2021.08.11
HTML 기초4 Block and Inline Elements (0)	2021.08.11
HTML 기초3 List (0)	2021.08.11
HTML 기초1 (1)	2021.08.10

HTML 기초2