ssoL2 TISTORY

HTML 기본 문법과 태그 본문

com/html,css

HTML 기본 문법과 태그

ssoL2 2021. 2. 23. 13:36

- 현재 최신 버전의 HTML 150개 이상의 태그 존재, 맨 처음엔 18개로 시작, 평균 사용 태그는 26개

 

 

- 랭킹 순위

<head> <body> <html> <titile> <meta> <div> <a> <script> <link> <img> <p> <span> <li> <ul> <br> <style> <h1> <h2> <input> <form> <strong> <h3> <table> <tr> <td>

 

 

- 앞에 있는 태그 -> "열리는 태그"

- 뒤에 있는 태그 -> "닫히는 태그"

 

 

<strong> tag
  • 진하게 표현
Hypertext Markup Language (HTML) is the standard markup language for <strong>creating web pages</strong> and web applications.

 

 

<u> tag
  • underline
Hypertext Markup Language (HTML) is the standard markup language for <strong>creating <u>web</u> pages</strong> and web applications.

 

 

- W3C(http://www.w3.org/) -> 국제민간표준화기구의 홈페이지로, 웹을 만드는 곳

 

 

<h1> ~ <h6> tag
  • 제목을 나타내는 태그
  • 1부터 6까지 존재
  • 숫자 커질수록 글씨 작아짐
  • 일반적인 텍스트보다 글씨가 더 두꺼움
  • 줄바꿈이 됨
Hypertext Markup Language (HTML) is the standard markup language for <strong>creating <u>web</u> pages</strong> and web applications.

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

 

 

- 그냥 엔터만 하면 줄바꿈이 안됨 -> h 태그로 제목을 강조해야함

HTML
Hypertext Markup Language (HTML) is the standard markup language for <strong>creating <u>web</u> pages</strong> and web applications.

 

 

<h1>
  • 제목 태그, 제목임을 강조할 때 사용하는 태그
<h1>HTML</h1>
Hypertext Markup Language (HTML) is the standard markup language for <strong>creating <u>web</u> pages</strong> and web applications.

 

 

<br> 한 번
  • 줄바꿈하는 태그
  • 시각적인 의미만 가지고 있어 닫는 태그 X
<h1>HTML</h1>
Hypertext Markup Language (HTML) is the standard markup language for <strong>creating <u>web</u> pages</strong> and web applications.
Web browses receive HTML documents from a web server or from local storage and render them into multimedia web pages. HTML describes
the structure of a web page semantically and originally included cues for the appearance of the document.<br>
HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects, such as interactive forms,
may be embedded into the rendered page. It provides a means to create structured documents by denoting structual semantics for text
such as headings, paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written using angle brackets.

 

 

<br> 두 번
<h1>HTML</h1>
Hypertext Markup Language (HTML) is the standard markup language for <strong>creating <u>web</u> pages</strong> and web applications.
Web browses receive HTML documents from a web server or from local storage and render them into multimedia web pages. HTML describes
the structure of a web page semantically and originally included cues for the appearance of the document.<br><br>
HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects, such as interactive forms,
may be embedded into the rendered page. It provides a means to create structured documents by denoting structual semantics for text
such as headings, paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written using angle brackets.

 

 

<br> 세 번
<h1>HTML</h1>
Hypertext Markup Language (HTML) is the standard markup language for <strong>creating <u>web</u> pages</strong> and web applications.
Web browses receive HTML documents from a web server or from local storage and render them into multimedia web pages. HTML describes
the structure of a web page semantically and originally included cues for the appearance of the document.<br><br><br>
HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects, such as interactive forms,
may be embedded into the rendered page. It provides a means to create structured documents by denoting structual semantics for text
such as headings, paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written using angle brackets.

 

 

<p> tag
  • 단락을 표현 하기 위한 태그
<h1>HTML</h1>
<p>Hypertext Markup Language (HTML) is the standard markup language for <strong>creating <u>web</u> pages</strong> and web applications.
Web browses receive HTML documents from a web server or from local storage and render them into multimedia web pages. HTML describes
the structure of a web page semantically and originally included cues for the appearance of the document.</p>
<p>HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects, such as interactive forms,
may be embedded into the rendered page. It provides a means to create structured documents by denoting structual semantics for text
such as headings, paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written using angle brackets.</p>

 

 

<p> + css
  • <br> 3번 한 것과 비슷한 모습
  • br은 줄바꿈, p는 단락 => 적절한 상황에서 각자 사용해야함(단락 이용시 p가 더 적절)
<h1>HTML</h1>
<p>Hypertext Markup Language (HTML) is the standard markup language for <strong>creating <u>web</u> pages</strong> and web applications.
Web browses receive HTML documents from a web server or from local storage and render them into multimedia web pages. HTML describes
the structure of a web page semantically and originally included cues for the appearance of the document.</p>
<p style="margin-top:40px;">HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects, such as interactive forms,
may be embedded into the rendered page. It provides a means to create structured documents by denoting structual semantics for text
such as headings, paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written using angle brackets.</p>

 

 

- 검색 엔진은 웹 페이지에 담긴 HTML 코드를 분석한다.

-> 태그에 근거해서 정리정돈 하는 것이 CSS로 정돈한것보다 앞에 보여줌

 

 

<img> tag
  • 이미지를 웹 페이지에 포함시킬 때 사용하는 태그
  • <img src="coding.jpg" width="100%"> 혹은 <img width="100%" src="coding.jpg">
  • 언스플래시 사이트 (저작권 X) -> unsplash.com/
<h1>HTML</h1>
<p>Hypertext Markup Language (HTML) is the standard markup language for <strong>creating <u>web</u> pages</strong> and web applications.
Web browses receive HTML documents from a web server or from local storage and render them into multimedia web pages. HTML describes
the structure of a web page semantically and originally included cues for the appearance of the document.</p>
<img src="coding.jpg" width="100%">
<p style="margin-top:40px;">HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects, such as interactive forms,
may be embedded into the rendered page. It provides a means to create structured documents by denoting structual semantics for text
such as headings, paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written using angle brackets.</p>

 

 

- 자식과 부모 사이와 같은 태그가 존재한다.

태그가 서로 포함 관계에 있을 때

포함하고 있는 태그 -> 부모 태그

포함된 태그 -> 자식 태그

 

 

<li> tag
  • 목차 또는 목록 태그(List)
<li>1. HTML</li>
<li>2. CSS</li>
<li>3. JavaScript</li>
<h1>HTML</h1>
<p>Hypertext Markup Language (HTML) is the standard markup language for <strong>creating <u>web</u> pages</strong> and web applications.
Web browses receive HTML documents from a web server or from local storage and render them into multimedia web pages. HTML describes
the structure of a web page semantically and originally included cues for the appearance of the document.</p>
<img src="coding.jpg" width="100%">
<p style="margin-top:40px;">HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects, such as interactive forms,
may be embedded into the rendered page. It provides a means to create structured documents by denoting structual semantics for text
such as headings, paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written using angle brackets.</p>

 

 

- 한 번에 작업하는 방법 (ctrl)

CTRL로 클릭하면 클릭하는 위치마다 커서가 나타난다. -> 한 번에 커서되어 태그 한번에 입력 가능

 

 

<ul> tag
  • <li> tag의 부모 태그
  • List 간의 띄어쓰기
  • "Unordered List"의 약자로 순서가 없는 List
  • 어디서부터 어디까지가 연관된 항목인지 구분하기 위한 부모 태그
<ul>
  <li>1. HTML</li>
  <li>2. CSS</li>
  <li>3. JavaScript</li>
</ul>
<ul>
  <li>egoing</li>
  <li>k8805</li>
  <li>youbin</li>
</ul>
<h1>HTML</h1>
<p>Hypertext Markup Language (HTML) is the standard markup language for <strong>creating <u>web</u> pages</strong> and web applications.
Web browses receive HTML documents from a web server or from local storage and render them into multimedia web pages. HTML describes
the structure of a web page semantically and originally included cues for the appearance of the document.</p>
<img src="coding.jpg" width="100%">
<p style="margin-top:40px;">HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects, such as interactive forms,
may be embedded into the rendered page. It provides a means to create structured documents by denoting structual semantics for text
such as headings, paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written using angle brackets.</p>

 

 

<ol> tag 
  • <li> tag의 부모 태그
  • 목록이 수억개 일 때 일일이 숫자를 매길 순 없다. 그럴 때 자동으로 첫번째 li tag부터 순서 표현
  • "Ordered List"의 약자로 순서가 있는 List이다.
<ol>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>
<h1>HTML</h1>
<p>Hypertext Markup Language (HTML) is the standard markup language for <strong>creating <u>web</u> pages</strong> and web applications.
Web browses receive HTML documents from a web server or from local storage and render them into multimedia web pages. HTML describes
the structure of a web page semantically and originally included cues for the appearance of the document.</p>
<img src="coding.jpg" width="100%">
<p style="margin-top:40px;">HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects, such as interactive forms,
may be embedded into the rendered page. It provides a means to create structured documents by denoting structual semantics for text
such as headings, paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written using angle brackets.</p>

 

 

<table> <tr> <td> tag
  • table -> tabe
  • tr -> table row
  • td -> table cell
<table>
  <tr>
    <td>head</td>
    <td>98.1%</td>
  </tr>
  <tr>
    <td>body</td>
    <td>97.9%</td>
  </tr>
  <tr>
    <td>html</td>
    <td>97.9%</td>
  </tr>
</table>

'com > html,css' 카테고리의 다른 글

HTML 인터넷 동작 과정  (0) 2021.02.23
HTML 웹페이지  (0) 2021.02.23
HTML 링크  (0) 2021.02.23
HTML 구조  (0) 2021.02.23
HTML  (0) 2021.02.23
'com/html,css' Related Articles more
Comments