멋쟁이 사자처럼 FE 2기 - 1

20526 단어 extensionCSgit멋쟁이 사자처럼코드라이언html

1일차 과제(220329)

1. URL, IP, PORT 정리
2. HTML Living Standard란?
3. Grouping Content - 이미지 포함하여 정리
4. github 가입
5. extension 설치

URL, IP, PORT 정리

URL

URL : 웹상에서 문서, 이미지, 동영상 등의 자원들의 위치를 나타내는 주소이다.
	  (웹 페이지를 찾기 위한 주소)

ex)

구글 URL → https://www.google.co.kr/

네이버 URL → https://www.naver.com/

벨로그 URL → https://velog.io/

- URL 구조

URL구조 1 : 프로토콜 종류
URL구조 2 : 도메인 주소(IP주소)
URL구조 3 : 자원의 위치

ex)

URL : https://www.codelion.net/11111
  • 구조 1 : https
  • 구조 2 : www.codelion.net
  • 구조 3 : 11111

IP

IP : 컴퓨터 네트워크 상에서 각 장치들의 고유 번호이다.

ex)

구글 → IP 142.250.66.78

네이버 IP → 223.130.200.104

PORT

PORT : 네트워크 서비스나 특정 프로세스를 식별하는 논리 단위이다.

ex)
ftp://000.000.000.000:21

  • 21이 포트 번호이다.

20 : FTP(data)
21 : FTP(제어)
22 : SSH
23 : 텔넷
53 : DNS
80 : 월드 와이드 웹 HTTP
119 : NNTP
443 : TLS/SSL 방식의 HTTP

HTML Living Standard란 무엇인가 ?

HTML Living Standard

HTML 문법 등을 규정한 표준
웹의 핵심적인 마크업 언어인 HTML과 여러 관련 API들을 모두 포함한다.
(HTML을 HTML5라고 일컫는 것은 틀린 표현!!)

Grouping content 정리

<ol>, <ul>, <li>

ol: 순서가 있는 목록
ul: 순서가 없는 목록
li: 각 항목들을 나열

ex) 

<h2>Front-End</h2>
<ol type="A">
    <li>HTML</li>
    <li>CSS</li>
    <li>Javacript</li>
    <li>Jquery</li>
    <li>Bootsrap</li>
</ol>
<h2>Back-End</h2>
<ul>
    <li>Python</li>
    <li>Django</li>
</ul>

주의할 점은 <li> 요소는 <ol> 혹은 <ul> 요소 안에서만 사용되어야 하며, <ol>, <ul> 의 직계 자식 요소로는 <li> 요소만 사용되어야 합니다.

<dl>, <dt>, <dd>

<dl>: 정의 목록
<dt>: 정의할 용어
<dd>: 용어를 설명

ex)

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

ol, ul, li 처럼 목록을 정의할때 쓰이지만, 사전처럼 어떠한 것을 정의할때 쓰이는 목록이다.

<div> 는 레이아웃을 나울 때 사용하는 태그
(많이 사용하는 것은 좋지 않다고 말씀해주셨다!
최후의 수단...)

<html>
<head>
    <title> Document </title>
</head>
<body>
    <h1>중국집 메뉴 추천</h1>
    <h2>짬뽕</h2>
    <ol type="A">
        <li>해물짬뽕</li>
        <li>차돌짬뽕</li>
        <li>명태짬뽕</li>
        <li>삼선짬뽕</li>
        
    </ol>
    <h2>짜장면</h2>
    <ul>
        <li>간짜장면</li>
        <li>삼선짜장면</li>
        <li>쟁반짜장면</li>
    </ul>
    <dl>
        <dt>HTML</dt>
        <dd>마크업 언어입니다.</dd>
    </dl>
    <hr>
    <!-- 둘 다 꾸며줄 다른 태그가 없을 경우 사용 -->
    <div>hello</div>
    <!-- lorem10 -->
    <p>Lorem <span>ipsum</span> dolor sit amet consectetur adipisicing elit. Fuga, consectetur.</p>
</body>
</html>

<article>, <section>, <header>, <nav>는 기본적으로 <div>와 같은 역할을 한다.
차이점은 태그에 의미를 부여함.
예를 들어 내용이 하나의 독립된 컨텐츠라면
<div>대신 <article>을 사용하기!!

<article>, <section>, <header>, <nav> 모두 <div>로 대신 사용할 수 있으나 보다 적합한 요소를 찾은 후 대용할 태그가 없을 경우 사용하(최후의 수단....)


-참고하면 좋은 그림

<figure>, <figcaption> 은 캡션(자막, 설명)이 있는 이미지를 만들때 이미지와 캡션이 연결되도록 해준다.
ex) 

	<img src="images/baby.jpg" alt="짱이랑 산책">
	<figcaption>
		초롱초롱한 짱이
	</figcaption>
</figure>

<p> : 단락을 표시하는 태그, 완결한 문단을 의미하므로 <p>태그안에 자식으로 <p>를 또 사용하지 않는다.

ex)

<h1>hello world</h1>
<p>hello world</p>

<pre>: HTML에 작성한 내용 그대로 화면에 표현한다.
(주로 컴퓨터 코드를 표현할 때 사용!)
ex)

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

<blockquote>: 인용 블록, 문장 안에서 사용한다.
ex)

<blockquote>
    <p>병진이 형, 형은 나가⋯ 나가, 뒤지기 싫으면.</p>
    <cite>해바라기 김래원</cite>
</blockquote>

<p><q>병진이 형, 형은 나가⋯ 나가, 뒤지기 싫으면.</q>라고 김래원이 겁을 줬습니다.<p>

<main>: 문서의 주요 콘텐츠를 나타낸다.
주요 컨텐츠 영역이란?
문서의 핵심 주제나, 웹어플리케이션의 핵심 기능에 직접적으로 연결되는 부분을 뜻한다.

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

<hr>: 이야기에서의 장면 전환이나 문단 안에서 주제가 변경되었을 때 그 구별을 위해 사용한다.
단락을 구분할 때 사용하므로 <p>태그 내 사용은 웹 표준에 어긋난다!

git hube 가입하기

git ID : hong462804
깃 사용방법을 내일모레 알려주신다고 하셨다!
배우면 1일 1커밋 습관화 하고 싶다!!!

extension 설치하기

추천해주시는 것부터 설치했다 !!!
충돌나지말고 잘 부탁한다 ㅎㅎ
어제보다 조금은 나아 진 것 같기도하고... 아닌 것 같기도 하고 오늘보다 더 나은 내일이 되도록 화이팅 !!!

[PS] 백준 9465 스티커
5. 클래스와 구조체

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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