[HTML] Grouping Content | HTML Living Standard

🚀 URL, IP, PORT 정리

 

url?

어느 사이트에 접속하기 위해서 입력해야 하는 주소를 포함한 일련의 문자 (이름과 같음)

 

ip? 

송신 호스트와 수신 호스트가 패킷교환 네트워크에서 정보를 주고받는 데 사용하는 정보의 규약이며, osi 네트워크 계층에서 호스트의 주소지정과 패킷 분할 및 조립 기능을 담당 (주소와 같음)

 

port?

직역하면 '항구' 라는 뜻으로 인터넷 프로토콜 스위트에서 포트는 운영 체제 통신의 종단점이다.

(문과 같음)

 

ex) 

www.naver.com	도메인,url	이름
223.130.195.95	ip	주소
22 ,  80 , 3000 등등..	Port	문

 

🚀 HTML Living Standard란?

 

• HTML 문법 등을 규정한 표준이다.
• 비공식적으로 HTML5라고 불린다.
• HTML과 여러 관련  API가 모두 포함된다.
• 현재, WHATWG와 W3W는 HTML을 단일 버전으로 공동 작업하기로 합의된 상태이다.

공식 사이트 :http:// https://html.spec.whatwg.org/

 

 

 

 

🚀 Grouping Content 

- 묶어서 (?) 사용하는 태그들이다.

 

 

ul (정렬되지않은리스트), ol(정렬된 리스트) , li 

<h1>공부 분야 추천<h1>
<ol type="A">
	<li>html</li>
    <li>css</li>
    <li>js</li>
</ol>

  <ul>
        <li>html</li>
        <li>css</li>
        <li>js</li>
  </ul>

  

 

[결과]

 

공부 분야 추천

1. html
2. css
3. js

• html
• css
• js

 

dl  , dt , dd

<dl>
	<dt>html</dt>
    <dd>마크업언어입니다</dd>
</dl>

 

 

[결과]

 

html

마크업언어입니다

 

div

레이아웃을 나눌 때 사용하는 태그 , 형태를 변형 시키진 않지만

하위에 있는 여러 요소를 묶어 스타일을 변경할 수 있다.

 

 

figure , figucaption

캡션(자막,설명) 이 있는 이미지를 구현하려면, 

<figure>
    <img src="images/1.jpg" alt="배경" width="auto" height="100px">
    <figcaption>
    빛이 들어오는 식물.. 
    </figcaption>
</figure>

 

[결과]

pre

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

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

 

[결과]

    
    function 제곱(x){
        return x**2;
    }
    

 

 

main

문서의 주요 콘텐츠를 나타낸다.

반복적으로 표시 될 수 있는 정보 (사이트로고,검색폼,저작권정보..등)는 들어가지 않는다.

 

 

hr

가로줄을 표현하기 위해 사용하였으나, HTML5에 오면서 의미가 생긴 요소이다.

장면전환 또는 문단 안에서 주제가 변경되었을때 구별을 위해 사용.

 

* p태그 내 사용은 웹 표준에 어긋남 *

 

---

🌈그밖에

• 무료 폰트 사용할 경우 : 눈누 , 구글 폰트
• 웹 표준을 생각보다 잘 지키지 않는 페이지가 많다 . (공공기관,은행 같은곳에서 잘지킴)
• lorem : 영어로 된 의미없는 문장 /  한글입숨 : 한글로 된 의미없는 문장을 만들어주는 곳 
• 브라우저마다 태그가 보이는게 다름 -> 이를 확인 할수 있는 곳 : can i use

 

---

 

🔥 회고

인강에서 보던 제코베 강사님의 수업을 직접 듣게 되다니 ... 너무 영광스럽고 더욱 의욕아 불타오른다.

 

마크업 언어쪽은 어느정도 다 안다고 생각하였는데 새로운 부분이 나와서 집중해서 들었다.

특히 , section/article를 어떨때 적절히 사용하는지 잘 알아두어야겠다. (div를 남발하던 예전의 나 . . . 반성하자  . . .)

 

또한 기초지식으로 네트워크 관련 수업도 짧게 들었다. 

HTTP 강의를 들어서인지 나름 쉽게 이해했다. HTTP도 조만간  다시 강의 복습하고, 정리해서 올려야겠다.