HTML 몰아서 정리

1) HTML는 엄격한 언어가 아님.
    <P>라고 대문자로 써도 <p>라고 알아서 인식함.

    그러나 소문자로 쓰는것이 권장됨.

 

 

2 title
    해당 요소에 대해 추가 정보를 알려주는 속성.

<p title="안녕하세요">환영합니다</p> 

    ---> '환영합니다'에 마우스를 대면 툴팁으로 '안녕하세요'가 노출됨.

 

 

3) pre

<p> 
  월요일 

  화요일 

  수요일 
</p> 

이라고 쓰면 소용이 없음. 이럴떄 <pre>태그로 쓰면 공백이나 줄바꿈등을 그대로 표현해줌.

 

 

4) b, strong, em
    b = 그냥 굵게 표시하고 싶을 때
    em = 중요해서 기울게 표시하고 싶을 때(중요도 ★★)
    strong = 겁나 중요해서 굵게 표시하고 싶을 때(중요도 ★★★★★)

 

 

5) dl

<dl>
  <dt>커피</dt>
  <dd> -1인용 컵으로 1/2</dd>
</dl>

 

 

6) 시멘틱 요소
    브라우저나 개발자한테 있어서 해당 요소의 의미가 정확한 요소들을 의미.
   <div>보다는 <header>, <table>, <form>과 같은 요소들이 어떤 역할을 하는지 한번에 알 수 있음.

    6-1) <section>
          제목이 있는 어떤 콘텐츠를 그룹화한 영역.

    6-2) <article>
          게시물, 동영상, 이미지, 뉴스기사 등 독립형 콘텐츠 일부.

 

          * 한 section안에 여러개의 article이 있을 수 있고, 그 반대도 가능함.

<section id="main">
  <article>
  <!-- first blog post -->
  </article>

  <article>
  <!-- second blog post  -->
  </article>

  <article>
  <!-- third blog post -->
  </article>
</section>	

<article>
  <section id="introduction">
  </section>

  <section id="content">
  </section>

  <section id="summary">
  </section>
</article>

    6-3) <header> 
          게시물, 동영상, 이미지, 뉴스기사 등 독립형 콘텐츠 일부.한 HTML안에 여러 header를 사용할 수 있으나, 

          footer나 address, header안에 또 header가 들어가는건 안됨.

<article>
  <header>
    <h1>What Does WWF Do?</h1>
    <p>WWF's mission:</p>
  </header>
  <p>WWF's mission is to stop the degradation of our planet's natural environment,
and build a future in which humans live in harmony with nature.</p>
</article>

 

 

7) XHTML
    HTML을 다른 데이터 형식(XML)과 함께 작업할 수 있도록 확장성과 유연성을 높이기 위해 개발된 마크업 언어.
    HTML보다 문법이 엄격함.
    HTML와 XHTML은 별개의 분리된 표준(HTML의 업그레이드 버전이 XHTML이런거 아님).
    갈수록 스마트폰, 태블릿 등 여러 환경이 생겨나면서 부정확한 HTML을 커버해주기 위해서 나타난 것.
    XHTML은 HTML에 포함되기에 브라우저에서 XHTML을 거의 다 제대로 표현해줌.

 

 

8) form

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form> 

submit 누르면 fname=John&lname=Doe  이게 뒤에 붙는다.

 

    8-1) GET
          중요한 데이터를 전송해야할때는 GET방식을 쓰면 안됨.
          URL의 길이는 제한적임(최대 2048자)
          결과 페이지를 사용자가 북마크로 저장하려는 경우 유용한 방식임.

   8-2) POST
          길이 제한이 없으며 대량의 데이터를 전송하는데 사용할 수 있음.
          POST를 사용한 결과 페이지는 북마크할 수 없음.

   8-3) <label>
          스크린판독기가 읽어주는 요소.
          요소 크기가 작을 때 라벨을 누르면 해당 input을 자동을 선택해줘서 유용함.

   8-4) <fieldset>
          form에 있는 관련된 데이터를 하나로 묶어주는 그룹.
          <legend>는 그 fieldset의 캡션.