[ 멋쟁이사자처럼 ] 프론트엔드스쿨2기 2일차

1. URL, IP, PORT✨

0) URL (Uniform Resource Locater)

• 구조 (프로토콜 / 도메인(host) / 포트 / 파일(path) / 쿼리스트링)
  -프로토콜 : 사용자가 서버에 접속할 때 어떤 방식으로 통신할 것인지를 나타낸것. (http: 웹브라우저-웹서버가 통신하기 위해 만든 통신 규칙)
  -호스트(도메인) : 인터넷에 접속되어있는 각각의 컴퓨터를 가르킴
  -port : 한대의 컴퓨터 안에 여러대의 서버가 있는 경우, 클라이언트가 접속했을때 어떤 서버와 접속해야 할지 알려주는 문
  -path : 서버 내 어떤 파일에 접속해야 하는지
  -query string : 입력 데이터를 전달하는 방법
  

1) IP (Internet Protocol)

• 네트워크 상에서의 각 장치들을 식별할 수 있는 고유 번호 (IP는 동일할 수 없다!)
• 0~255사이 값들로 이루어져 있다. ex) 115.68.24.88
• 각각의 장치들은 IP를 이용하여 데이터를 전송하고 전달받는다.

2) Domain

• IP주소는 사용자가 기억하기 어렵기 때문에, 사용자 편의를 위해 각 ip에 이름을 부여한 것
  사용자가 도메인을 입력하면 DNS서버가 IP주소로 변환해준다. (DNS 서버)
  (Domain)naver.com -> (IP)220.95.233.172

3) Port

• IP내에서 애플리케이션 구분을 위해 사용하는 번호
• 사용가능 포트번호 0~ 65,535
• IP주소를 통해 네트워크 상의 컴퓨터 또는 시스템을 식별하고, 포트 번호를 통해 통신할 응용 프로그램을 식별한다.

2. HTML Living Standard

: HTML 표준

• W3W에 의해 XHTML에서 HTML로 2014년에 표준화되었으며 2019년에 WHATWG와 W3W의 합의에 의해 HTML에서 HTML Living Standard로 단일화되었다.
  (HTML5가 아니었다니..?!)

1) html 이란?

• Hyper Text Markup Language의 약자로,
  다른 페이지로 이동할 수 있도록 만들어진 요소(hyper text) + 태그(</>)를 이용해 문서 작성하도록 도와주는 언어(markup language)를 의미한다.
• HTML은 문서가 화면에 표시되는 형식을 나타내거나, 데이터의 논리적인 구조를 명시하기 위한 규칙들을 정해놓은 Markup Language 이기 때문에, 일반적으로 말하는 프로그래밍 언어가 아니다.
  어디 가서 창피당하지 말자
  - cf) Markdown : markup 언어의 일종으로, 복잡한 태그구조 없이, 간단한 텍스트와 몇가지 문법으로 이루어진 언어(주로 블로그 등에 사용).
  

2) 주요 문법

• HTML요소는 HTML태그와 속성으로 구성된다.
• 여는 태그와 닫는 태그가 필요.
• br,hr과 같은 태그는 닫아줄 필요가 없다.
• 속성은 여는 태그에 써준다.

3. Grouping Content

• div : 레이아웃 나눌때 사용하는 태그
  • section,article,header, nav 을 우선적으로 사용할것!! (div와 span으로 도배를 했던 나란놈...😂)
    
• p : 단락을 표시하는 태그(하나의 완결된 문단을 의미)

    <h1>facebook</h1>
    <article>
        <img src="" alt="">
        <p>이호준</p>
        <p>3월 24일 오후 12:33</p>
        <p>contents</p>
        <img src="a.jpg" alt="">
    </article>	

//위의 코드를 보며 반성... div로 모든걸 해결했던 지난날..

• ol, ul, li : 순서가 있는 목록 / 순서가 없는 목록 / 항목 나열 태그

	<ol type="A">
              <li>HTML</li>
              <li>CSS</li>
              <li>Javacript</li>
	</ol>

• hr : 가로줄 표현 태그 (p태그 내에서 사용X-이야기에서의 장면전환, 문단내 주제 변경시 사용)
  hr 말고 css에서 border-bottom을 사용해도 됨.

      <hr width="300px" align="center" size="3" color="red" noshade>

• figure, figcaption : 이미지와 캡션(자막,설명)이 연결되도록 해주는 태그 (마치 이미지 설명하듯)
  

<figure>
    <img src="/media/cc0-images/elephant-660-480.jpg"
         alt="Elephant at sunset">
    <figcaption>An elephant at sunset</figcaption>
</figure>

• dl, dt, dd : 사전처럼 어떤 것을 정의 할때 사용하는 태그. dl(정의 목록), dt(정의할 용어), dd(용어 설명)
  

<p>Cryptids of Cornwall:</p>
<dl>
    <dt>Beast of Bodmin</dt>
    <dd>A large feline inhabiting Bodmin Moor.</dd>

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

• pre : html에 작성한 내용 그대로 화면에 표시할 경우 (주로 컴퓨터 코드)

• blockquote : 인용 블록 요소

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

<p><q>제발 그만해.. 이러다 다~~ 죽어!</q>라고 오일남이 소리쳤습니다.<p>

• main : body의 주요 콘텐츠를 나타내는 영역 표시 (문서에 하나보다 많은 main요소가 존재해선 안됨)
  
  

4. section

5. 더 알아봐야 할 내용

• http / https 프로토콜 (추천책 HTTP 완벽 가이드)
• IP 체계
• 서버 / 클라이언트 (비전공자를 위한 이해할 수 있는 IT지식)
• 자바스크립트 책 (javascript deep dive)

6. 하루 회고 ✨

• div와 span을 이제 그만 쓰도록 하자...^^ (가장 충격적) 그래도 이번에 멋사 과정중에서 html 태그 사용법을 명확히 하는 것이 내 목표였는데 이틀만에 하나 달성했다는 기분에 뿌듯하다.
• 앞으로는 위의 표를 참고하여 section을 확실하게 구분짓는 연습을 하자!
• 오랜만에 엉덩이 붙이고 있으니 너무 힘들다. 그리고 초반이라 다 아는내용이라고 정신 딴데 팔려있는 시간이 많았던 것 같은데, 얻을 부분은 확실하게 얻고! 집중해서 공부하자.
• 학교에서는 멱살잡혀서(?) 질질 끌려가는 느낌이었다. 아니 교수님이 혼자 신나서 강의하시는데 나머지 학생들은 헤롱헤롱 하고 있는 느낌.. 제주코딩캠프 강사님은 맨 마지막에 뒤떨어지고 있는 학생도 토닥이면서 데리고 가는 느낌이라 생소했지만 참 따수웠다😘

참고자료
-생활코딩 https://www.youtube.com/watch?v=Zhbvui_T9VY&t=295s&ab_channel=%EC%83%9D%ED%99%9C%EC%BD%94%EB%94%A9
-mozila
https://developer.mozilla.org/ko/docs/Web/HTML/Element/figure
-제주코딩베이스캠프

사진출처
-https://velog.io/@rain98/TIL-%EC%8B%9C%EB%A7%A8%ED%8B%B1%ED%83%9C%EA%B7%B8
-https://hwang-chive.tistory.com/71