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

임홍렬·2022년 3월 29일

CS extension git html 멋쟁이 사자처럼 코드라이언

멋쟁이 사자처럼 FE 2기

목록 보기

2/45

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 설치하기

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

임홍렬

뜨내기 FE 개발자

이전 포스트

멋쟁이 사자처럼 FE 2기 OT 후기

다음 포스트

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