먼지나는 블로그

HTML_기본문법 본문

프론트엔드 공부/html

HTML_기본문법

고먼지 2021. 6. 18. 23:22

Tag

위의 그림에서 <head>. <body>와 같은 것을 HTML에선 문법적으로 태그라고 부른다

<title>HTML STUDY</title> 이런식으로 문장이 있을 경우 앞에 있는 태그를 열리는태그

뒤에 있는 태그를 닫히는 태그라고 부르는데 닫히는 태그는 태그명 앞에 /이 붙는다

 

기본적인 코드를 통해 살펴보자면

<!doctype html>
<html>
<body>
  <p>Hypertext Markup Launguage (HTML) is the
  standard markup language for
  <strong>creating <u>web</u>
  pages </strong> and web applications.</p>
  <p style="margin-top:100px;">This HTML usage data comes from 11.3 million
  index pages gathered from top twenty Google results,
  for about 30 million keywords - chosen by keyword volume.
  To learn more about this data,
  visit the FAQ section.</p>
</body>

 

맨 첫번째 줄 <!doctype html>은 HTML문서에서 <html> 태그를 정의하기 전에

가장 먼저 선언되어야 하는 선언으로 태그는 아니지만 해당 페이지의 HTML 버전이

무엇인지를 웹 브라우저에 알려주는 역할을 하는 선언문이다

 

<html>태그는 모든 웹페이지에서 쓰이는 태그로

<html>로 시작해 </html>로 끝나게 된다

 

<body>는 브라우저에 실제 표시되는 내용으로 어떤 그림이나

문장, 보여주고 싶은 내용이 있다면 해당 태그 안에 적어 표시하게 된다

 

<body> 태그 내에 있는 <p>와 <strong> <u> 태그는

필수적인 태그라기 보다는 문장을 꾸며주는 역할을 한다 보면 되는데

<p> 태그의 경우 내용 앞뒤를 띄어 한 단락을 만들어주고

<strong>태그는 내용을 강조하고 싶을때 굵게 보이게 만들어준다

또한 <u>는 글씨 밑에 밑줄을 넣을 때 사용되는 태그다

 

이처럼 태그의 종류는 많지만 자주 쓰이는 태그는 위 사진에

나와있는 5개 정도라고 볼 수 있다

 

<parent>
    <child></child>
</parent>

 

해당 이름의 태그가 있는 건 아니지만 위 코드의 경우 parent 태그에 대해서 child 태그를

자식태그라고 한다 반대로 child태그에 대해서 parent 태그는 부모태그라고 할 수 있다 

 

<p>
    <strong>Parent Tag & Child Tag</strong>
</p>

 

위의 경우를 비교해보자면

<p> 태그는 <strong> 태그의 부모태그

<strong> 태그는 <p> 태그의 자식태그라고 볼 수 있는데

꼭 a 태그가 strong 태그의 부모태그일 필요는 없다

 

필요에 따라서 관계는 달라질 수 있지만

위의 태그와 달리 부모자식관계로 고정되어 있는

태그 또한 존재한다

 

<li>1. HTML</li>
<li>2. CSS</li>
<li>3. JavaScript</li>

 

예를 들어 목차를 표시하고 싶을 때 사용되는 <li>태그의 경우

여러가지의 목록을 한꺼번에 표시하고 싶을 때 만약

아래 코드로 표현하게 된다면 구분이 가지 않게 된다

 

<li>1. HTML</li>
<li>2. CSS</li>
<li>3. JavaScript</li>

<li>4. AAA</li>
<li>5. BBB</li>
<li>6. CCC</li>
result
  • 1. HTML
  • 2. CSS
  • 3. JavaScript
  • 4. AAA
  • 5. BBB
  • 6. CCC

 

이런 경우에 목록끼리 구분할 수 있도록 도와주는 것이

바로 <ul>태그다

 

<ul>
  <li>1. HTML</li>
  <li>2. CSS</li>
  <li>3. JavaScript</li>
</ul>
<ul>
  <li>4. AAA</li>
  <li>5. BBB</li>
  <li>6. CCC</li>
</ul>
result
  • 1. HTML
  • 2. CSS
  • 3. JavaScript

 

  • 4. AAA
  • 5. BBB
  • 6. CCC

<li>태그는 <ul> 태그를 꼭 필요로 하고 <ul>태그 역시 <li>태그를 필요로 한다

서로 밀접한 관계라고 볼 수 있다 하지만 이때 한가지 가정을 들어본다면?

 

만약 목록이 천개까지 만들어 놓은 상태에서 중간에 있는 목록을 몇개

지우게 된다면 앞에 붙은 숫자들을 일일히 수정해줘야하는 번거로움이 발생한다

 

이때 사용하는 것이 바로 <ol>태그다

 

<ol>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>
result
  1. HTML
  2. CSS
  3. JavaScript

 

<ul>태그를 <ol>태그로 수정하게 된다면

번호를 표시할 필요없이 번호대로 결과창에 나오게 된다

 

실습

<!doctype html>
<html>
<head>
  <title>WEB1 - html</title>
  <meta charset="utf-8">
</head>
<body>
  <ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
  </ol>
  <h1>HTML이란 무엇인가?</h1>
  <img src="cat.jpg" width="100%">
  <p>Hypertext Markup Launguage (HTML) is the
  standard markup language for
  <strong>creating <u>web</u>
  pages </strong> and web applications.</p>
  <p style="margin-top:100px;">This HTML usage data comes from 11.3 million
  index pages gathered from top twenty Google results,
  for about 30 million keywords - chosen by keyword volume.
  To learn more about this data,
  visit the FAQ section.</p>
</body>

'프론트엔드 공부 > html' 카테고리의 다른 글

생활코딩 11강-16강 실습  (0) 2021.06.22
'프론트엔드 공부/html' Related Articles more