01. 기초 상식과 HTML Elements

41835 단어 멋사TILhtmlhtml

수업 시작하기 전 알아야 할 기초 상식

┌────────────────────────────────────────────────────────────────────────────────────────────────┐
│                                              href                                              │
├──────────┬──┬─────────────────────┬────────────────────────┬───────────────────────────┬───────┤
│ protocol │  │        auth         │          host          │           path            │ hash  │
│          │  │                     ├─────────────────┬──────┼──────────┬────────────────┤       │
│          │  │                     │    hostname     │ port │ pathname │     search     │       │
│          │  │                     │                 │      │          ├─┬──────────────┤       │
│          │  │                     │                 │      │          │ │    query     │       │
"  https:   //    user   :   pass   @ sub.example.com : 8080   /p/a/t/h  ?  query=string   #hash "
│          │  │          │          │    hostname     │ port │          │                │       │
│          │  │          │          ├─────────────────┴──────┤          │                │       │
│ protocol │  │ username │ password │          host          │          │                │       │
├──────────┴──┼──────────┴──────────┼────────────────────────┤          │                │       │
│   origin    │                     │         origin         │ pathname │     search     │ hash  │
├─────────────┴─────────────────────┴────────────────────────┴──────────┴────────────────┴───────┤
│                                              href                                              │
└────────────────────────────────────────────────────────────────────────────────────────────────┘

1. 도메인 / URL : 이름

DNS에 저장되어있는 이름
주소를 대표하는 이름이라고 생각하면 된다.

ex> www.naver.com

2. IP : 주소

이름으로 가는 주소
주소창에 IP주소를 입력해도 해당 페이지로 이동함

ex> 105.209.222.141

3. Port : 문

도메인과 IP가 같지만 들어가는 문에 따라 어디로 갈지 다르다!

ex> 22,23,80,443 ...

http://naver.com:443
https://naver.com (s는 :443를 생략한것)

각종 보안장비 및 네트워크 장비

▶︎NAT

▶︎DDX (= Anti DDos)

▶︎Dos 공격

Denial of Service attack, 서비스 거부 공격
비정상적으로 컴퓨터의 리소스를 고갈시켜 사용자가 인터넷 상에서 평소 잘 이용하던 자원에 대한 서비스를 더 이상 받지 못하게 하는 것

ex. 1초에 만번 알림을 하게끔 해서 서버 이용 못하게끔

정보를 몰래 빼내가거나 그 외의 다른 보안상의 피해를 유발하지는 않지만 표적이 된 개인이나 기업에 시간과 비용 면에서 큰 손실을 안겨준다.

▶︎DDos 공격

Distributed Denial of Service attack, 분산 서비스 거부 공격
(누군가 서비스를 디도스당해서 요금폭탄 맞을 수 있음)
디도스 공격은 완벽한 방어방법은 없다 ,,

▶︎IPS(IDS) - 행위

▶︎FW(FireWall) - IP , PORT

서버장비

▶︎APP Server

Djanggo Server, Express Server ...
동적인 서버 제공
ex. 사용자마다 다른 이름 적용

▶︎WEB Server

Nginx
정적인 서버 제공
ex. 똑같은 서버 페이지 전달

▶︎DB Server

HTML Living Standard

☀️ HTML Living Standard 란 무엇일까?

직역하면 살아있는 표준, 간단하게 말하면 HTML문법 등을 규정한 표준
종종 비공식적으로 HTML5라고 불리기도 함

XHTML 과 HTML living standard

XHTML이란 웹페이지를 제작하기 위해 사용되는 HTML4(지금 사용하는 HTML living standard의 전 전 버전)를 XML에 맞도록 재정의한 언어

HTML5보다 구조화된 형식, 엄격한 문법을 가지고 있음

(이미지 출처 멋쟁이사자처럼)

html living standards => 버전이라고 봐도 되는데 버전이라는 개념은 아님. 그때그때 수시로 유동적으로 업데이트되는 상태

HTML

☀️ Document element & metadata

<!DOCTYPE html>
DTD (document tyle Definition) 이라고 불리며 문서의 타입에 대한 정보를 제공. 제거하면 쿼크모드로 html을 렌더링할 수 있고, *쿼크모드에서는 브라우저마다 구현 방식이 조금씩 다르기 때문에 반드시 문서 최상단에 선언.
*쿼크모드(quitks mode) : 하위 호환성 모드

표준 모드와 호환 모드 : https://developer.mozilla.org/ko/docs/Web/HTML/Quirks_Mode_and_Standards_Mode

[The document element]

  • html : 문서의 최상위 요소 , 스크린리더의 작동에 언어 설정이 영향을 미침

[Document metadata]

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

  • title : 문서의 제목 의미. 반드시 한번만!! 사용되어야 한다

  • link : 외부 자원 연결

  • style

  • meta : 해당 문서의 메타 데이터 나타냄

    	-charset : 문자의 인코딩 상태 UTF-8 로 설정하면 전 세계 언어 지원가능
	-name="author" : 페이지를 작성한 개발자 이름 
	-name="description" : 페이지에 대한 설명 정보를 나타냄. 검색엔진이 사용자에게 결과 화면 출력할 때 중요한 고려 요소
	-name="viewport" : 모바일 장치에서 사용자 화면 사이즈에 대한 값 설정함
	-http-equiv="X-UA-Compatible” : 프라그마 지시문 ( 컴파일러에게 특정 기능 지정)으로 브라우저에 어떤 행동을 지시하려는 목적으로 사용. 
									"X-UA-Compatible" 속성값은 브라우저에서 페이지를 어떠한 형식으로 랜더링할지 지정할 수 있으며 content='IE=edge'는
                              		IE8 버전 이상에서 항상 표준모드로 랜더링 되도록 한다.

☀️ Section

(출처 : WENIV DB)

[sections]

  • body : 실제로 사용자에게 보여지는 문서의 컨텐츠 요소

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

  • section : 일반적으로 연관성 있는 문서의 구획을 나누고자 할때 사용

    💡 section vs article

    • article 요소는 독립적 콘텐츠(다른 서비스에 가져다 놔도 이상하지 않음)
    • section 요소는 사이트 내 연관 콘텐츠(다른 서비스에 가져다 놓으면 이상함)
    • article과 section 요소는 heading 요소와 함께 사용하는 것을 권장(높이 없이 비워두기도 함)

  • nav : 네비게이션, 탐색 보통 메뉴에 많이 사용

    <nav>
    <a href="https://paullab.co.kr">바울랩</a>
    <a href="https://naver.com">네이버</a>
    <a href="https://google.com">구글</a>
</nav>

  • aside : 사이드바 혹은 광고 영역

  • h1, h2, h3, h4, h5, h6
    : heading은 제목을 지정하기 위해 사용되고 h1은 페이지당 한 번만 사용할 것을 권장 ! Reset CSS 가 되더라도 제목은 h를 사용하기 

    <h1>hello world</h1>
  <h2>hello world</h2>
  <h3>hello world</h3>
  <h4>hello world</h4>
  <h5>hello world</h5>
  <h6>hello world</h6>

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

  • footer : 요소가 속한 가장 마지막 구획의 작성자 정보, 저작권, 관련된 링크 등의 내용을 담는 구획 요소

  • address : 가장 가까운 부모 article 이나 body요소의 연락처 정보를 나타냄 . 연락처 정보에는 전화번호, 메일주소 , 우편 주소 등이 있음. 

    <address>
  <a href="https://velog.io/@ewaterbin">
  홈페이지</a>.<br>
    <a href="mailto:[email protected]">
  메일 주소</a>.<br>
  오시는 길:<br>
    지구별
</address>

(출처: 제주코딩베이스캠프)

✨ 보통 이렇게 작성한다.

<body>
    <header></header>
    <nav></nav>
    <section>
      <article></article>
      <article></article>
      <article></article>
    </section>
    <aside></aside>
    <footer></footer>
</body>

☀️ Grouping Content

  • p : 단락 표시 , p 안에 p 사용하면 안됨 !

  • blockquote : 인용블록 / q : 인용구

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

  • 목록을 정의할 때 쓰이는 ol li ul
    - ol : ordered list / li : list item

    <p> ol type : a, A, I, i</p>
  <ol type="I">
    <li>one</li>
    <li>two</li>
    <li>three</li>
  </ol>
  <ol type="A">
    <li>one</li>
    <li>two</li>
    <li>three</li>
  </ol>


    - ul : unordered list

    <ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
  </ul>

  • dl dt dd : 사전처럼 어떠한 것을 정의할 때 쓰이는 목록
    스크린리더 쓰는 사람들에게 접근성을 높여줄 수 있다.

        <!-- definition list -->
    <!-- definition term -->
    <!-- definition description -->

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

  • figure figcaption : 캡션(자막, 설명)이 있는 이미지

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

  • pre : HTML 에 작성한 내용 그대로 화면에 표시. 주로 컴퓨터 코드 표현할 떄 사용

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

  • main : 문서의 주요 콘텐츠 . 메인 요소 안에 들어가는 내용은 문서의 유일한 내용이어야 한다. 다른 페이지나 섹션에서 반복적으로 표시될 수 있는 정보, 예를 들어 사이트 로고, 검색 폼, 저작권 정보 들은 들어가지 않는다.

  • hr: 가로줄을 표현하는 태그였으나 단락 혹은 문장을 구별하는 의미를 가짐
    (p 태그 안에 사용은 웹표준에 어긋난다!)

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

💥 div 는 최후의 수단

위 태그들을 최대한 사용하고 대응할 태그가 없을 시 사용한다.

- Fragment

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fragment</title>
</head>
<body>
    <a href="#one">1 </a><a href="#two">2 </a><a href="#three">3</a>
    <p id="one" style="height: 1200px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
       Necessitatibus tenetur aut saepe ad cupiditate,
        corporis ipsum blanditiis at, ipsa reprehenderit voluptatum nemo,
         facere excepturi. Magnam iusto vitae nemo odio facere.</p>

    <p id="two" style="height: 1200px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
       Necessitatibus tenetur aut saepe ad cupiditate,
        corporis ipsum blanditiis at, ipsa reprehenderit voluptatum nemo,
         facere excepturi. Magnam iusto vitae nemo odio facere.</p>

    <p id="three" style="height: 1200px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit
      . Necessitatibus tenetur aut saepe ad cupiditate,
       corporis ipsum blanditiis at, ipsa reprehenderit voluptatum nemo,
        facere excepturi. Magnam iusto vitae nemo odio facere.</p>

</body>
</html>

링크를 눌렀을 때 fragment가 따라온다
맨뒤의 주소가 아이디값을 가진다!

1을 눌렀을 때
http://127.0.0.1:5500/D4-HTML/fragment.html#one
2를 눌렀을 때
http://127.0.0.1:5500/D4-HTML/fragment.html#two
3을 눌렀을 때
http://127.0.0.1:5500/D4-HTML/fragment.html#three

☀️ 참고 사이트

▶︎ 태그마다 사용할 수 있는 브라우저 확인

can i use 로 확인할 수 있다!
https://caniuse.com/

▶︎ CSS Reset

https://meyerweb.com/eric/tools/css/reset/

▶︎ 한글 입숨

https://hangul.thefron.me/

▶︎ emmet cheatsheet

emmet 치트시트 참고하기
https://www.pinterest.co.kr/pin/103512491414656085/

▶︎ 인스타 클론코딩 해보기 (for fun)

https://ridibooks.com/books/2773000045?_rdt_sid=category-bestsellers&_rdt_idx=10

☀️ 참고 자료

모놀리식 아키텍처와 마이크로 서비스 아키텍처의 비교


출처

https://velog.io/@cclare/%EB%AA%A8%EB%86%80%EB%A6%AC%EC%8B%9D-%EB%A7%88%EC%9D%B4%ED%81%AC%EB%A1%9C%EC%84%9C%EB%B9%84%EC%8A%A4

Dom Tree 구조 이해하기

<body>
  <h1>hello</h1>
  <!-- ulclassname$*2>li{list$}*2 -->
  <!-- ul.classname$>li{list$}*2 클래스네임넣는법--> 
  <ul>
    <li>List</li>
    <li>List <span>span</span> </li>
  </ul>
  <!-- .wrap>.box${box$}*3 -->
  <div class="wrap">
    <div class="box">Box1</div>
    <div class="box">Box2</div>
    <div class="box">Box3</div>
  </div>
  <span>Have A Good <em>Coding</em></span>
</body>

Dom은 설계구조이다 !


마크업후에 콘솔창에서 확인해보면 어떤 요소가 몇번째인지 알 수 있다
친숙해지면 좋다! JS할때 유용하기때문에

장바구니 api 구현하기
[Python] 백준 1966번: 프린터 큐

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage