멋쟁이사자처럼 프론트엔드스쿨 2기 TIL (3월 29일)

🔖LikeLion_FrontEndSchool_TIL 3월 29일 (화)

제주코딩베이스캠프 이호준 강사님의 강의

과제

  1. URL, IP, PORT 정리
  2. HTML Living Standard란?
  3. Grouping Content
  4. github 가입
  5. VSC extension 설치

프론트엔드 로드맵(전체 로드맵 중 배울과목, 추천과목만 기입함)

  • 프론트엔드
    • 언어
      • HTML/CSS
      • JavaScript
    • 프레임워크 및 라이브러리
      • Bootstrap
      • jQuery
      • React.js
      • SASS
      • Vue.js
      • next.js
  • 백엔드
    • 언어
      • JavaScript
    • 프레임 워크
      • Express(Node.js)
    • 인프라
      • AWS
      • firebase
    • Database
      • MySQL
      • MongoDB
    • 가상화 구축
      • Docker
  • 형상관리
    • github
  • 정보보안
    • 웹 해킹
    • 네트워크 해킹
      • DoS
      • 개인정보보호법
      • 정보통신망법
  • 그 외 알아야 할 지식
    • 웹 접근성
    • 알고리즘 & 코테
    • SEO
    • HTTP/HTTPS
    • 리눅스
    • TDD
    • 웹팩
    • IDE

강의 내용

1. HTML의 기초

  • HTML의 정의
    • Hyper Text Markup Language의 약자로 링크로 연결된 텍스트와 태그와 같은 기호를 이용해 문서를 작성하도록 도와주는 언어를 의미
  • CSS의 정의
    • Cascading Style Sheets의 약자로 웹의 전반적인 스타일 작성해 저장하는 파일 의미
  • HTML(뼈대) + CSS(살) + JavaScript(근육)

2. URL, IP, PORT(과제 2)

www.naver.com도메인, URL이름
105.209.222.141IP주소
22, 23, 80, 433 ...Port
  • URL
    • 웹상의 문서, 이미지, 동영상 등의 자원들의 위치를 나타내는 주소
      EX) 네이버 URL => https://www.naver.com/
    • 프로토콜 종류, 자원이 있는 IP 주소, 도메인 주소, 포트 주소, 자원 위치로 구성되어 있어
      "프로토콜// IP주소 or 도메인 주소 or 포트 주소 / 자원 위치" 형식을 갖음
  • IP
    • 컴퓨터 네트워크 상에서 각 장치들의 고유 번호를 의미
    • IP 주소는 외우거나 구별하기 어려워 DNS를 통해 구별하기 쉬운 도메인 주소로 변환됨
    • 택시를 타고 기사님에게 제주코딩베이스캠프로 가달라하면 네비에 검색해 정확한 주소를 얻어 해당 주소로 가는 것과 같은 원리로 URL과 함께 동작
  • 포트
    • 포트는 소프트웨어에서 네트워크 서비스나 특정 프로세스를 식별하는 논리 단위
    • 번호로 구별되어 포트 번호라 불리고 IP 주소와 함께 쓰여 해당하는 프로토콜에 의해 사용
      EX) 105.209.222.141:80

3. HTML Living Standard(과제 1)
HTML 문법 등을 규정한 표준.

  • XHTML과 HTML living standard
    HTML을 협력해서 개발하던 두 팀 W3C, WHATWG가 있었다. W3C는 HTML4를 XML 기반의 XHTML을 웹 표준 방향으로 정했지만, 문법이 엄격하고 더 구조화되어 WHATWG가 독자적인 HTML 표준의 작업을 시작해 개발된 것이 HTML living standard이다.

  • HTML 문법

    • HTML 요소는 HTML 태그와 속성으로 구성
    • 보통 여는 태그와 닫는 태그 한쌍으로 구성
    <!-- 여는 태그 Contents 닫는태그 -->
    <p>Hello World!</p>
    • 일부 태그는 한쌍

      EX) br, hr
    • 속성은 항상 여는 태그에 삽입
    • Sementic HTML

      요소에 고유한 의미를 지정해 웹 접근성에 도움을 줄 수 있음
  • HTML Tag

    • document element & metadata

      • <!DOCTYPE html>

        문서 타입에 대한 정보를 제공하는 tag. 만약 제거하면 브라우저는 쿼크 모드로 html을 렌더링하게 되어 브라우저마다 다르게 동작할 가능성이 있어 반드시 문서 최상단에 선언
      • <html>

        HTML 문서의 최상위 요소. lang 속성을 통해 문서의 주 언어가 무엇인지 설정 가능함.
      • <head>

        문서에 적용되는 메타데이터의 집합

        cf. 메타데이터: 데이터에 대한 데이터.
      • <title>

        문서의 제목을 의미. 반드시 한번만 사용되어야 함.
      • <link>

        외부의 자원을 문서와 연결하는 역할함. CSS, JavaScript 파일 같은 자원 연결.
      • <meta>

        해당 문서의 메타데이터를 나타내는 요소
        • charset: 문서의 문자 인코딩 상태 의미, 보통 UTF-8로 설정
        • name="author": 페이지 작성한 개발자의 이름
        • name="description": 페이지에 대한 설명 정보를 나타냄. 검색엔진이 사용자에게 결과 화면 출력할 때 중요한 고려 요소.
        • name="viewport": 모바일 장치에서 사용자 화면의 사이즈에 대한 값 설정.
        • http-equiv="X-UA-Compatible”: 프리그마 지시문. 브라우저에게 어떤 행동을 지시하려는 목적으로 사용.
    • section

      주제별로 그룹화 된 콘텐츠를 나타내는 tag들.

      • <body>

        실제 사용자에게 보여지는 문서 컨텐츠 나타내는 요소.
      • <article>

        독립적으로 구분하거나 재사용할 수 있는 구획을 나타냄.

        요소를 다른 서비스에 가져다 놔도 이상하지 않은 거를 article tag로 지정.
      • <section>

        일반적으로 연관성 있는 문서의 구획을 나누고자 할 때 사용하는 요소.

        요소를 다른 서비스에 가져다 놓으면 이상한 거를 section tag로 지정.
        <article> vs <section>
        문서의 흐름과 상태에 따라 적절하게 배치해야함.
      • <header>

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

        제목을 지정하기 위해 사용. 1~6까지 중요도에 따라 사용되며 단순히 글자의 크기나 굵기를 조절하기 위해 사용되지 않음

        <h1> 요소는 페이지당 한 번만 사용되야함.
      • <nav>

        네비게이션, 탐색 요소. 보통 메뉴, 네비게이션바에 사용됨.
      • <aside>

        해당 콘텐츠와 별개 콘텐츠를 나타낼 때 사용. 보통 사이드바, 광고 영역으로 활용.
      • <footer>

        작성자 정보, 저작권, 관련 링크 등의 내용을 담는 요소.
      • <address>

        가장 가까운 부모 article이나 body 요소의 연락처 정보를 나타냄.
    • Grouping content(과제 3)

      콘텐츠를 묶어서 관리할 수 있도록 사용하는 tag들

      • <ol>, <ul>, <li>

        각각 ordered list, unordered list, list item의 약자로 정렬된 배열, 정렬되지 않은 배열, 배열의 아이템을 뜻함.

        <li><ol>, <ul>요소 안에서만 사용되어야함.

        <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>

        <ol>의 type으로 a, A, i, I를 사용해 다른 방식으로 표현 가능함.

      • <dl>, <dt>, <dd>

        목록을 정의할 때 사용되는 tag로 사전처럼 어떠한 것을 정의할 때 쓰이는 목록.

        definition list, definition term, definition description의 약자로 CSS 속성을 부여해 dt를 보이지 않게 하고, dd에 용어 설명을 넣어 웹 접근성을 준수하는데 사용된다.

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

      • <div>

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

        <section>, <article>, <header>, 등의 tag들은 <div>와 같은 역할을 하지만, 태그에 의미를 부여한 것이기 때문에 의미가 부여된 태그를 먼저 사용하고 대용할 태그가 없을 때 <div>를 사용하는 것이 바람직함.

      • <figure>, <figcaption>

        이미지에 자막을 연결되도록 하는 tag.

        <figure>
          <img src="imgs/facebook.png" alt="페이스북" />
          <figcaption>페이스북 로고</figcaption>
        </figure>

      • <p>

        단락을 표시하는 tag. 하나의 완결된 문단을 의미하기 때문에 p tag 안에 자식으로 p를 사용하거나 줄바꿈의 용도로 사용해서 안됨.

      • <pre>

        HTML에 작성한 내용 그대로 화면에 표현하는 tag. 주로 코드를 표현할 때 사용.

        <pre>
          <code>
              let val = 1;
              function myFunc(value){
                  return value;
              }
              myFunc(val);
           </code>
        </pre>

      • <blockquote>

        인용블록으로 q는 인용구를 나타냄.

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

      • <main>

        HTML 문서의 주요 콘텐츠를 나타내는 tag.

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


        github도 main tag안에 사이트의 메인 컨텐츠를 담아두고 있다.

      • <hr>

        이야기에서 장면 전환 혹은 문단 안에서 주제가 변경되었을 때 그 구별을 위해 사용됨.

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

좋은 웹페이지 즐겨찾기