22-03-29 Assignment

박도겸·2022년 3월 29일
likelion-front-end-school

likelion-front-end-school

목록 보기
1/1

1. URL, IP, PORT

- URL (Uniform Resource Locator)

인터넷에서 웹 페이지, 이미지, 비디오 등 리소스의 위치를 가리키는 문자열

  • 구조 : http://www.website.com:80

  • 흔히 웹 사이트 주소로 알고 있지만, URL은 웹 사이트 주소뿐만 아니라 컴퓨터 네트워크상의 자원을 모두 나타낼 수 있음

  • 그 주소에 접속하려면 해당 URL에 맞는 프로토콜을 알아야 하고, 그와 동일한 프로토콜로 접속
    (ex. FTP 프로토콜 - FTP 클라이언트 / HTTP - 웹 브라우저 / 텔넷 - 텔넷 프로그램을 이용해서 접속)

    	cf. FTP (File Transfer Protocol) : 여러 해 동안 인터넷을 통해 한 호스트 (en-US)에서 다른 호스트로 파일을 전송하기 위한 표준 프로토콜이었다.
	cf. HTTP (The HyperText Transfer Protocol) : 기본적으로 하이퍼미디어 문서를 전송하는 네트워크 프로토콜
	cf. 텔넷(TELNET) : 인터넷이나 로컬 영역 네트워크 연결에 쓰이는 네트워크 프로토콜

  • source
    https://developer.mozilla.org/ko/docs/Glossary/URL
    https://ko.wikipedia.org/wiki/URL

    HTTP (The HyperText Transfer Protocol)

    • HTML, XML, Javascript, 오디오, 비디오, 이미지, PDF, Etc
    • 요청 또는 상태 라인 / 해더(생략가능) / 빈줄(해더의 끝) / 바디(생략가능)
    • HTTPS (HTTP Secure)
    • https://devjem.tistory.com/3

- IP (Internet Protocol address, IP address)

IP 주소는 인터넷 프로토콜을 사용하는 네트워크에 연결된 모든 장치에 할당된 번호
  • 컴퓨터 네트워크에서 장치들이 서로를 인식하고 통신을 하기 위해서 사용하는 특수한 번호
  • 만약 서버가 들어가지 않으면 IP가 안전하지 않다고 한다. 네트워크에 연결된 장치가 라우터이든 일반 서버이든, 모든 기계는 이 특수한 번호를 가지고 있어야 한다.
    https://ko.wikipedia.org/wiki/IP_%EC%A3%BC%EC%86%8C
  • domain name : www.google.com 은 도메인 이름으로 어떤 웹 서버가 요구되는 것인 지를 가리키며 대안으로 직접 IP address를 사용도 가능
  • source
    https://developer.mozilla.org/ko/docs/Learn/Common_questions/What_is_a_URL
    https://ko.wikipedia.org/wiki/IP_%EC%A3%BC%EC%86%8C

- PORT

2. HTML living standard

- HTML

  • HTML (Hypertext Markup Language)
    : 웹을 이루는 가장 기초적인 구성 요소로, 웹 콘텐츠의 의미와 구조를 정의할 때 사용
  • Hypertext : 웹 페이지를 다른 페이지로 연결하는 링크
  • Markup : 웹 브라우저에 표시되는 다양한 콘텐츠를 표시하기 위해 사용
  • HTML 요소는 "태그"를 사용해서 문서의 다른 텍스트와 구분하며, 태그는 "<", 태그 이름, ">"로 구성

- HTML 문법

  • HTML 요소는 HTML 태그와 속성으로 구성
  • 보통 여는 태그와 닫는 태그 한 쌍으로 구성
  • 일부 요소는 여는 태그(void elements)로만 구성
  • 속성은 항상 여는 태그에 삽입
  • Semantic한 HTML : 대부분의 요소에는 고유한 의미가 존재하기 때문에 기계가 이해할 수 있는 언어로 HTML을 코딩한다는데 그 목적이 있다. 즉, 브라우저가 우리의 문서를 이해할 수 있게 되는 것으로 이를 통해 SEO, 접근성 등에 도움이 된다.

3. HTML Tags

- The document element

  • <html></html lang="ko"> : HTML은 document element 즉, 문서의 최상위 요소 lang 속성을 통해 문서의 주 언어가 무엇인지 설정 할 수 있으며, 이는 검색엔진과 스크린 리더의 작동에 영향

- Document metadata

  • <head></head> : 문서에 적용되는 메타데이터의 집합

  • <title></title> : 문서의 제목으로 반드시 한번만 사용

  • <link> : 외부의 자원을 문서와 연결하는 역할

  • <style></style> : CSS가 작성되어 문서를 꾸미는 역할

  • <meta> : 해당 문서의 메타데이터를 나타내는 요소

    • charset : 문서의 문자 인코딩 상태를 의미하며, 보통 UTF-8 로 설정하여 전 세계 모든 언어를 지원

    • name="author" : 페이지를 작성한 개발자의 이름

    • name="description" : 페이지에 대한 설명 정보로 검색엔진이 사용자에게 결과 화면을 출력할 때 중요한 고려 요소

    • name="viewport" : 모바일 장치에서 사용자 화면의 사이즈에 대한 값을 설정

    • http-equiv="X-UA-Compatible” : 프라그마 지시문(pragma directive : 컴파일러에게 특정 기능을 지정)으로 브라우저에 어떤 행동을 지시하려는 목적으로 사용

    • X-UA-Compatible : IE 브라우저에서 페이지를 어떠한 형식으로 랜더링할지 지정할 수 있으며 content='IE=edge는 IE8 버전 이상에서 항상 표준모드로 랜더링 되도록 함

- Sections

  • <body></body> : 실제 사용자에게 보여지는 문서의 컨텐츠를 나타내는 요소

  • <article></article> : 독립적으로 구분하거나 재사용할 수 있는 구획

  • <section></section> : 일반적으로 연관성 있는 문서의 구획

  • <nav></nav> : nav(네비게이션, 탐색) 요소는 보통 메뉴에 사용

  • <aside></aside> : 해당 콘텐츠와는 별개 콘텐츠로 보통 사이드바 혹은 광고 영역으로 활용

  • <h1></h1> ~ <h6></h6> : heading은 제목을 지정하기 위해 사용, <h1> 요소는 페이지당 한 번만 사용할 것을 권장

  • <hgroup></hgroup> : <h1></h1> ~ <h6></h6> 구획

  • <header></header> : 특정한 컨텐츠의 시작 부분을 나타내는 요소로 일반적으로 구역의 제목을 포함

  • <footer></footer> : footer 요소가 속한 가장 가까운 구획의 작성자 정보, 저작권, 관련된 링크 등의 내용을 담는 구획 요소

  • <address></address> : 가장 가까운 부모 <article> 이나 <body> 요소의 연락처 정보

- Grouping content

  • <p></p> : 단락을 표시하는 태그

  • <blockquote></blockquote> : 인용 블록, <q>는 인용구

  • <ol></ol> : ordered list의 약자로 순서가 있는 목록

  • <ul></ul> : unordered list의 약자로 순서가 없는 목록

  • <li></li> : list item의 약자로 각 항목들을 나열하는 태그

  • <dl></dl> : 정의 목록(definition list)

  • <dt></dt> : 정의할 용어(definition term)

  • <dd></dd> : 용어를 설명(definition description)

  • <menu></menu> : 사용자가 수행하거나 하는 명령 묶음. 이것은 스크린 위에 나오는 목록 메뉴와 눌려진 버튼 아래에 나오는 것과 같은 맥락 메뉴를 포함

  • <figure></figure>, <figcaption></figcaption>

  • <main></main> : 주요 콘텐츠 표시, 주요 콘텐츠 영역이란 문서의 핵심 주제나 웹어플리케이션의 핵심 기능에 직접적으로 연결되어 있는 부분을 뜻하기 때문에 메인 요소안에 들어가는 내용은 문서의 유일한 내용

  • <div></div> : 레이아웃을 나눌 때 사용하는 태그로 컨텐츠의 형태를 변형시키지는 않지만 하위에 있는 여러 요소를 묶어 스타일을 변경 가능

  • <hr> : 이야기에서의 장면 전환 혹은 문단 안에서 주제가 변경되었을 때 그 구별을 위해 사용

- Text-level semantics

<a></a> <em></em> <strong></strong> <cite></cite> <q></q> <dfn></dfn> <abbr></abbr> <code></code> <var></var> <span></span> <br></br> <wbr></wbr>

- Embedded content

<img> <picture></picture> <source> <iframe></iframe> <video></video> <audio></audio> <track>

- Tabular data

<table></table> <caption></caption> <colgroup></colgroup> <col> <tbody></tbody> <thead></thead> <tfoot></tfoot> <tr></tr> <td></td> <th></th>



4. Github ID : moeyg

profile
박도겸

0개의 댓글