TIL - Grouping Content

📖 URL, IP, PORT

1. URL, 도메인

• IP 주소의 이름 (www.naver.com)
• URL 치면 DNS에서 IP를 가져다 주는 방식
• fragment - 나 이거 제대로 이해 못함 다시 공부해야지
• DNS가 도메인을 IP주소로 전환해주는 것 말고 역으로도 전환함 - 리버스 도메인

• HTTP(HyperText Transfer Protocol)
  • 인터넷 상에서 클라이언트와 서버가 자원을 주고 받을 때 쓰는 통신 규약
  • HTTP는 텍스트 교환
  • 누군가 네트워크에서 신호 가로채면 내용이 노출되는 보안 이슈 발생
    
    
• HTTPS(HyperText Transfer Protocol Secure)
  • 인터넷 상에서 정보 암호화하는 SSL 프로토콜을 사용해
    클라이언트와 서버가 자원을 주고 받을 때 쓰는 통신 규약
• HTTPS는 공개키 암호화 방식으로 텍스트 암호화함.

2. IP

• Internet Protocol 의 준말로 인터넷 상의 주소 (223.130.200.104)
• IPv4와 IPv6
  IPv4&IPv6
  
  

3. PORT

• IP주소 뒤에 있는 숫자, IP 주소가 가르키는 곳에 접속하는 문 (22, 23, 80, 443...)
  
  

---

📖 HTML Living Standard

W3C는 계속 HTML5.1~ 5.2를 발표하며 완결된 HTML5버전을 만들고 싶었지만, WHATWG는 지속적으로 살아있는 표준형식으로 개발하는 Living Standard로의 개선 및 발전되기를 바라면서 결국 두 단체는 각자의 길을 걷게 되었음.

2019년 W3C는 HTML5.3 권고안을 내세우지만 WHATWG가 거부의사를 보이면서, 표준화 이슈가 본격적으로 다시 시작됨. 결국 W3C는 신규 HTML5 이후 버전의 표준발행을 포기하고 WHATWG의 방식을 수용하도록 합의 되었고, 2019년 부터는 HTML5 대신 HTML Living Standard로 불리며 WHATWG가 주관하게 되었음.

WHATWG - HTML Living Standard
호환성 확인 사이트 caniuse

---

📖 Grouping Content

1. <ol>,<ul>,<li>

• <ol> : ordered list, 순서가 있는 목록 ( type: a, A, i, I )
• <ul> : unordered list, 순서가 없는 목록
• <li> : list item

<li> 요소는 <ol> 혹은 <ul> 요소 안에서만 사용되어야 하며,
<ol>, <ul> 의 직계 자식 요소로는 <li> 요소만 사용되어야 함.

<ol>의 type : a, A, i, I

2. <dl>,<dt>,<dd>

어떠한 것을 정의할 때 쓰이는 목록

• <dl> : 정의 목록 (definition list)
• <dt> : 정의할 용어 (definition term)
• <dd> : 용어 설명 (definition description)

3. <div>

• 레이아웃을 나눌 때 사용하는 태그
• 여러 요소 묶어 스타일 변경 가능
• 보다 적합한 요소를 찾은 후 대용할 태그가 없을 경우 사용하는 것이 좋음

4. <figure>, <figcaption>

• <figure> 이미지와 캡션 연결
• <figcaption> 이미지에 캡션 추가

5. <p>

• 단락 표시 (하나의 완결된 문단 의미)
• <p>안에 <p>를 사용하지 않으며 줄바꿈 용도로도 사용하지 않음.

6. <pre>

• HTML에 작성한 내용 그대로 화면에 표현
• 컴퓨터 코드를 표현할 때 사용

7. <blockquote>

• 인용 블록
• <q>는 인용구, 주로 문장 안에서 사용

8. <main>

• 문서의 주요 콘텐츠
• 핵심 주제나 웹 어플리케이션의 핵심 기능에 직접적으로 연결되어 있는 부분 뜻함
• 메인 요소 안에 들어가는 내용은 문서의 유일한 내용이어야 함.
• 다른 페이지나 섹션에서 반복적으로 표시 될수 있는 정보는 들어가지 않음
  (ex.사이트 로고, 검색 폼, 저작권 정보 등)

9. <hr>

• 가로줄 표현하기 위해 사용했으나 HTML5에 오면서
  이야기에서의 장면 전환 혹은 문단 안에서 주제가 변경되었을 때
  그 구별을 위해 사용
• 단락을 구분할 때 사용하므로 <p>태그 내 사용은 웹 표준에 어긋남

<!--grouping contents-->
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore itaque sint ut iste mollitia ullam! Asperiores tempora accusantium corporis delectus deleniti assumenda quos facilis tenetur dolorem itaque dicta aperiam consequuntur possimus cumque odit aliquid dolores qui ratione dignissimos ab, ipsam quia earum quibusdam facere. </p>
  <ul>
      <li>one</li>
      <li>two</li>
      <li>three</li>
  </ul>
  <ol type="I"> 
      <li>one</li>
      <li>two</li>
      <li>three</li>
  </ol>
  <p>type : a, A, i, I</p>
  <dl>
      <dt>HTML</dt>
      <dd>마크업 언어 입니다.</dd>
  </dl>

  <div>
      <h2>hello &nbsp; world</h2>
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis possimus hic autem voluptate magnam. Magnam facere autem repellat, suscipit soluta fugit eos dolor? Unde aspernatur placeat quos eligendi earum atque!</p>
  </div>

  <div>
      <h2>helloworld</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus voluptate provident repellendus quod delectus error harum, reiciendis totam dolore aperiam numquam omnis quia sequi quos laudantium beatae dolorum tenetur et?</p>
  </div>

  <figure>
      <img width="auto" height="100px" src="a.jpg" alt="엄마 코끼리와 아기 코끼리">
      <figcaption>
          관심 받고싶어하는 아기
      </figcaption>
  </figure>

  <pre>
      <code>
          function 제곱(x){
              return x**2;
          }
      </code>
  </pre>

  <blockquote>
      <p><q>제발 그만해.. 이러다 다 죽어</q></p>
      <cite>오징어 게임 오일남</cite>
  </blockquote>

  <main>
      <section></section>
      <section></section>

      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda minus perferendis voluptatibus reprehenderit alias obcaecati numquam? Consectetur at eligendi nesciunt, nobis veritatis, ipsa pariatur quibusdam doloribus nostrum id facilis officia.</p>
  </main>