HTML영역설정,문자와 관련된 태그들

블록 요소★★:
 1. 사용 가능한 최대 가로너비를 사용한다.
  2.css로 너비와 높이값을  설정할 수 있다.
  3. 블록 요소는 초기값이 width=100% height=0으로 시작한다.
  4. 수직으로 요소가 쌓인다(가로너비가 100%이기 때문에)
  5. margin, padding의 위아래 좌 우 값을 설정할 수 있다.
  6. 주로 레이아웃을 잡는 용도로 사용된다.
ex) div, h1, p 태그

인라인 요소★★: 
1. 필요한 만큼의 너비만을 사용한다.
2.css로 너비와 높이값을 설정할 수 없다.
3인 라인 요소는 초기값이 width=0 height=0으로 시작한다.
4 수평으로 쌓인다.(width값이 0이라서)
5 margin과 padding의 위아래는 값 설정이 불가능하다.(오른쪽 왼쪽은 값 설정 가능)
6 주로 text를 다룰 때 인라인 요소를 사용한다.
7인 라인 요소에 크기, margin, padding을 설정하기 위해선 인라인 요소를 block요소로 바꿔 사용할 수 있다. 이때 css에 속성 중 display:block;을 사용한다.
ex) span, img태그


head태그와 body태그에 대한 내용

haed태그: 사용자에게 보이지 않는 문서의 내부정보를 저장하는 부분이다.

head태그에 들어가는 태그들 
title태그 ★: title태그는 문서의 제목을 설정하는 기능을 한다.
ex)
<title> 네이버 </title>

link태그★: 외부 css파일을 불러오는 기능을 한다 이때 외부 문서와 html에 관계를 명시하는 rel과 그 문서의 위치를 명시하는 href라는 속성을 필수로 적어줘야 한다.
ex)
<link rel="stylesheet" href="./js.css">
위 코드를 해석하면 rel부분에서 불러올 문서는 스타일시트이고 href를 보면./js.css라는 곳에 위치하고 있어라고 말할 수 있다.

style태그:css를 외부 파일 형식이 아니라 html에 내장하여 작성할 때 작성하는 태그로써 안에는 css에 대한 내용이 들어간다 body태그에 작성할 수 있지만 주로 head태그에 작성한다.
ex)

<style>
 p{width: 100px;
   height: 50px;} 
</style>

mata태그★ : 문서에 기타 정보를 삽입하는 기능이 있다. 주로 name과 content라는 속성을 사용하는데 name부분에는 어떠한 속성을 사용할지 명시하고 content부분에는 name에 대한 값이 들어간다.

name에 들어가는 속성들
name에는 많은 속성이 들어갈 수 있는데 그중에서 
author과 description이 대표적이다. 

author= 문서의 작성자를 명시한다.

description= 페이지에 대한 요약을 한다.
ex) 

<mata name="author" content="JungHwan">
<mata name="description" content="운동에 대한 사이트입니다.">

위와 같이 코드를 작성할 수 있다.

body태그에 들어가는 태그들

body태그: 사용자가 보이는 화면에 내용을 작성하는 태그이다.

header태그 : header태그는 웹사이트에 상단 영역을 지정할 때 사용한다. 주로 navigation바, 로고, 회원가입 로그인 버튼을 명시한다.
주의! header태그 안에는 header와 footer태그를 넣을 수 없다. 넣어도 내용은 출력되지만 잘못된 방식이라는 것을 알아두자
block요소이다.

ex1)

<header>
  <ul>
    <li>햄버거</li>
    <li>피자</li>
    <li>치킨</li>
  </ul>
</header>

main태그 : 웹사이트에 주요 내용을 작성하는 영역이다. 주로 웹사이트에 핵심 내용이나 중요한 내용이 들어간다
호환성 부분에서 internetExplore에서는 사용이 불가능하다. 
block요소이다.

footer태그 :  footer태그는 웹사이트에 하단 영역을 지정할 때 사용한다 주로 웹사이트에 작성자, 저작권 데이터, 주소 등등을 명시한다. 
block요소이다.

aside태그 : 문서의 별도 콘텐츠를 설정  보통 광고나 기타 링크 등의 사이드바를 설정한다. 
block요소이다.

h1~h6태그: h1~h6태그는 주로 웹사이트에서 문서에 제목을 구현할 때 쓴다 이때 글자크기가 1 이 가장 크고 6이 가장 작은데 글자크기에 따라 h1~h6를 사용하는 게 아니라
문서에 주제별로 큰 주제부터 작은 주제까지 h1~h6를 사용하는 것이 효율적이다. 글자크기는 css로 제어할 수 있기 때문이다.  또한 이 h1~6 태그는 순차적으로 작성해야 한다.
즉 h1을 사용 후 h2를 건너 띄고 h3를 사용하면 잘못된 방식이라는 이야기다 또한 h1태그는 문서에서 전체 제목으로써 1번만 사용하는 것을 권장한다.
block요소이다.

ex1)

<h1>Heading elements</h1>
<h2>Summary</h2>
<p>Some text here...</p>

<h2>Examples</h2>
<h3>Example 1</h3>
<p>Some text here...</p>

<h2>See also</h2>
<h3>Example3</h3>
<p>Some text here...</p>

ex2)

<h1>주제1</h1>
<h3>주제3</h3>
<h5>주제5</h5>

ex2 와같이 작성하면 잘못된 방식이다

article태그: 독립적으로 구분되거나 재사용 가능한 영역을 설정함 
주로 기사나, 신문에 대한 내용을 작성할 때 사용하고 h1~6 태그를 사용하여 주제를 정한다. 
block요소이다.
ex)

<article class="forecast">
    <h1>Weather forecast for Seattle</h1>
    <article class="day-forecast">
        <h2>03 March 2018</h2>
        <p>Rain.</p>
    </article>
    <article class="day-forecast">
        <h2>04 March 2018</h2>
        <p>Periods of rain.</p>
    </article>

section태그 : 문서의 일반적인 영역을 설정한다. 
독립적으로 사용되지 않아도 상관없고 주로 h1~h6태그를 사용하여 주제를 정한다.
block 요소이다. 
ex)

<section>
    <h2>Introduction</h2>
    <p>This document provides a guide to help with the important task of choosing the correct Apple.</p>
</section>

article과 section이 영역을 설정한다는 공통점이 있지만 무엇이 다른 가는 추상적 일수 있다. article안에 section태그가 들어갈 수 있고 
section태그 안에 article이 들어갈 수도 있다. 

기능적인 부분에선 동일하지만 차이점이 있다면 독립성이 핵심일 것이다 article은 혼자 쓰여도 상관없다 즉 독립성이 강하다는 의미를 지니지만
section태그는 독립성에 대한 부분을 크게 신경 쓰지 않고 주로 영역을 나누는 데에 초점이 맞춰져 있다.

nav태그 : 다른 페이지의 링크를 제공하는 영역을 설정하는 기능을 가졌고 주로 ul태그와 li태그 a태그를 함깨사용해 내비게이션 바를 만드는대 사용된다.
block요소이다
ex)

<nav class="crumbs">
    <ul>
        <li class="crumb"><a href="#">home</a></li>
        <li class="crumb"><a href="#">information</a></li>
        <li class="crumb"><a href="#">community</a></li>
    </ul>
</nav>

address태그 : body,article, footer태그 등에서 연락처 정보를 제공하는기능을 한다.
block요소이다.
ex)
<address>
  <a href="mailto:jim@rock.com">jim@rock.com</a><br>
  <a href="tel:+13115552368">(311) 555-2368</a>
</address>

위 코드에서 address태그 안에 a태그를 같이 사용함으로써 해당 내용을 클릭하면 href에 해당하는 특정 페이지로 이동하게 된다.


div태그★: 의미가 없는 태그이다 주로 영역을 설정할 때 사용된다 
block요소이다.
ex)

<div class="warning">
    <img src="/media/examples/leopard.jpg"
         alt="An intimidating leopard.">
    <p>Beware of the leopard</p>
</div>

ol ul li태그
ol태그 :순서가 있는 리스트를 만들어주는 태그이다. , block요소이다  type이라는 속성을 통해 순서의 유형을 알파벳 소문자, 대문자 등등으로 설정할 수 있다.
ul태그 : 순서가 없는 리스트를 만들어주는 태그이다. , blcok요소이다
li태그 : 리스트 안에 내용을 만들어주는 태그이다 , display값은 list-item이지만 부모 요소인 ul태그나 ol태그가 block요소이므로 block요소처럼 사용된다
속성 값으로 value를 설정해주면 그 번호부터 시작된다.
ex1)

<ol type = "a">
  <li value =3>Mix flour, baking powder, sugar, and salt.</li> 
  <li>In another bowl, mix eggs, milk, and oil.</li>  
  <li>Stir both mixtures together.</li>
<ol>
ex2)
<ul>
    <li>Milk</li>
    <li>Cheese
        <ol>
            <li>Blue cheese</li>
            <li>Feta</li>
        </ol>
<ul>

위와 같이 리스트를 만들어줄 수 있는데 이때 리스트를 구성하는 태그는 li태그로써 목록을 구성하고 ol태그로 작성된 리스트는 1,2,3과 같이
순서를 먹이고 ul태그로 작성된 리스트는 ●으로 순서가 정해지지 않는데 ol태그든 ul태그든 안에 또 다른 ol, ul태그를 작성할 수 있고 
ol태그든 ul태그든 li태그와 함께 사용되야한다. 
li태그는 단독으로 사용될 수 없다.

dl, dd, dt태그:용어와 용어에 대한 설명을 정의하고  여러 개의 용어와 용어설명에 대한 영역을 설정하는 기능을 한다. block요소이다
dl태그: 여러 개의 용어와 용어 설명에 대한 영역을 설정해준다
dt태그: 어떠한 용어를 정의한다
dd태그: 그 용어에 대한 설명을 정의한다 

dt태그와 dd태그는 하나의 세트이다 dt로 용어를 정의했다면 dd태그로 용어에 대한 설명을 해줘야 한다.
ex)

<dl>
    <dt>Beast of Bodmin</dt>
    <dd>A large feline inhabiting Bodmin Moor.</dd>

    <dt>Morgawr</dt>
    <dd>A sea serpent.</dd>

    <dt>Owlman</dt>
    <dd>A giant owl-like creature.</dd>
</dl>

dl, dt, dd태그는 css로 스타일링을 하는 것이 까다롭기 때문에 용어와 용어에 대한 설명을 해야 한다면 ul, ol, li태그를 이용해 정의하는 것을 권장한다.

p태그 하나의 문장이나 문단을 설정한다. 
블록 요소이다

hr태그 :빈 태그(empty element)로써 태그가 하나만 사용되고 이때 /는 생략 가능하다 <hr>과 같이 작성한다 
수평선을 넣어주는 기능이 있는데 주로 문단을 분리할 때 사용된다.
블록 요소이다. 

p태그와 hr태그의 ex)

<p>Geckos are a group of usually small, usually nocturnal lizards. They are found on every continent except Australia.</p>
<hr> 
<p>Some species live in houses where they hunt insects attracted by artificial light.</p>

위 코드를 확인해보면 p태그와 p태그 사이에 hr태그가 들어감으로써 p태그와 p태그를 구분하는 수평선이 생겼음을 확인할 수 있다.

pre태그: 글자의 공백과 줄 바꿈을 유지하여 내용을 출력한다 
pre태그를 설명하기 위해 p태그에 대해 이야기하자면 p태그에서 내용을 작성한 후 enter를 눌러도 줄 바꿈 되지 않고 space를 여러 번 눌러도 1번밖에 띄어쓰기가 되지 않지만
pre태그는 태그 안에서 enter를 누르면 줄 바꿈이 되고 space 바를 여러 번 눌러 띄어쓰기해도 그만큼에 내용이 띄어지게 된다.  block요소이다.
ex)

<pre>L          TE
    A       A
      C    V
       R A
       DOU
       LOU
      REUSE</pre>

이때 주의사항은 태그를 작성할 때 주로 내용이 끝나는 지점 밑에 끝나는 태그를 작성하는데 이때 줄 바꿈과 공백이 생긴다 근데 pre태그는 그 공백까지도 
전부 줄 바꿈 띄어쓰기를 해버리기에 내용이 끝나는지 점 밑이 아닌  바로 뒤에 내용이 끝나는 태그를 작성해 줘야 한다 시작 태그 또한 마찬가지이다. 이 말이 이해가 안 간다면 
css파일에 pre {background-color: red;}을 설정하여 영역을 확인해 보기 바란다.

blockquote태그: blockquote태그는 인용문(남이 한말이나 글을 사용하는 것) 작성할 때 사용된다 이때 속성으로 cite라는 것을 사용할 수 있는데 이속성은 해당 인용문에 대한 url(주소)를 명시하는 기능을 한다 
ex)

 <blockquote cite="https://www.huxley.net/bnw/four.html">
        <p>Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.</p>
    </blockquote>

위와 같이 인용문을 작성할 거야라고 blockquote태그를 사용했고 그 인용문에 대한 주소를 cite태그를 이용해 명시한 후 p태그를 통해 인용문을 적어준 것을 확인할 수 있다.