[2일차] URL , IP , 포트 / HTML Living Standard / Grouping Content

HTML & CSS

[2일차] URL , IP , 포트 / HTML Living Standard / Grouping Content

잼굴 2022. 3. 30. 17:56

1. URL

웹상에서 문서, 이미지, 동영상등의 위치를 나타내는 주소.

ex) https://www.naver.com , https://www.tistory.com

URL의 구조

1. 프로토콜의 종류

2. 자원이 있는 서버의 IP주소, 포트주소, 도메인주소

3. 자원의 위치

ex)

https://comic.naver.com/webtoon/list?titleId=183559&weekday=mon

https ➡ 프로토콜

comic.naver.com ➡ 도메인 주소

webtoon/list?titleId=183559&weekday=mon ➡ 자원위치

IP

IP 주소는 컴퓨터 네트워크 상에서 각 장치들의 고유 번호.

번호들의 나열

ex) 1231:3120:0000:0000:0000:0000:1111:0000

포트

포트주소는 SW에서 네트워크 서비스나 특정 프로세스를 식별하는 논리 단위.

ex) ftp://000.000.000.000:21 에서 21이 포트번호.

포트번호 예시

20 : FTP(data)
21 : FTP(제어)
22 : SSH
23 : 텔넷
53 : DNS
80 : WWW , HTTP
119 : NNTP
443 : TLS/SSL 방식의 HTTP

2. HTML Living Standard

HTML 문법들을 규정한 표준.

표준이 두가지가있었는데,

W3C는 HTML 및 DOM 표준에 대한 권한을

2019년 5월 28일 WHATWG에게 양도하였다.

https://html.spec.whatwg.org/multipage/

HTML Standard

html.spec.whatwg.org

3. Section / Grouping Content

🛑 Section 🛑

<body>

실제 사용자에게 보여지는 문서의 컨텐츠를 나타내는 요소

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

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

section vs article

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

특정한 컨텐츠의 시작 부분을 나타내는 요소.

일반적으로 구역의 제목을 포함.

<h1> … <h6>

heading은 제목을 지정하기 위해 사용됩니다.

h1~ h6은 중요도에 따라 사용되며 단순히 글자를 크게하거나 굵게 하기 위해 사용하지는 않습니다.

heading 요소를 사용하면 익명 영역(anonymous section)을 생성합니다.

heading 요소들은 아래와 같이 사용자로 하여금 페이지의 계층구조를 쉽게 파악할 수 있도록 합니다.

그렇기 때문에 특별한 이유 없이 heading 레벨을 갑자기 몇 단계 뛰어넘도록 작성하는 것은 지양하자.

🛑 Grouping Content 🛑

<ol>, <ul>, <li>

<ol>은 ordered list의 약자로 순서가 있는 목록을 뜻하며 <ul>이란 unordered list의 약자로 순서가 없는 목록을 뜻함. <li>는 각 항목들을 나열하는 태그로 list item을 뜻함.

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

<h1>분야별 공부 분야 추천</h1>
<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>

<dl>, <dt>, <dd>

<ol>, <ul>, <li>가 목록을 정의할 때 쓰였듯이 <dl>, <dt>, <dd> 도 목록을 정의할 때 쓰임.

차이점이 있다면 <dl>, <dt>, <dd>는 사전처럼 어떠한 것을 정의할 때 쓰이는 목록임. <dl>은 정의 목록(definition list)이며 <dt>는 정의할 용어(definition term)을 뜻함. <dd>는 용 어를 설명(definition description)할 때 쓰임.

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

<div>

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

<article>, <section>, <header>, <nav>는 기본적으로 <div>와 같은 역할을 함. 차이점이 있다면 태그에 의미를 부여한 것임. 예를 들어 내용이 하나의 독립된 컨텐츠라면 <div>대신 <article>을 사용함. 바꿔 말해 <article>, <section>, <header>, <nav> 모두 <div>로 대신 사용할 수 있으나 보다 적합한 요소를 찾은 후 대용할 태그가 없을 경우 사용해야함.

<figure>, <figcaption>

<figure>, <figcaption> 을 이용해서 사진맡에 설명을 달수있음.

이러한 컨텐츠의 경우 이미지와 캡션이 연결되도록 <figure> 요소를 도입할 수 있습니다.

<figure>
	<img src="images/baby.jpg" alt="엄마 코끼리와 아기 코끼리">
	<figcaption>
		관심 받고싶어하는 아기
	</figcaption>
</figure>

<figcaption> 요소는 이미지에 캡션을 추가하기 위해 도입되었으며 <figure>, <figcaption>요소가 나오기 이전에는 <img> 요소와 해당하는 캡션을 연결할 방법이 없었습니다.

<p>

태그는 단락을 표시하는 태그.

하나의 완결된 문단을 의미하기 때문에 <p> 태그 안에 자식으로 <p>를 또 사용하지 않음.

줄바꿈의 용도로 사용하면 안됨

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

<pre>

HTML에 작성한 내용 그대로 화면에 표현합니다. 주로 컴퓨터 코드를 표현할 때 사용합니다.

<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 <main> 요소는 문서의 주요 콘텐츠를 나타냄.

주요 콘텐츠 영역이란 문서의 핵심 주제나 웹어플리케이션의 핵심 기능에 직접적으로 연결되어 있는 부분을 뜻함.

메인 요소안에 들어가는 내용은 문서의 유일한 내용이어야 함.

IE 에서는 지원하지 않는 비교적 최근에 등장한 요소임으로 사용에 주의가 필요함.

<hr>

<hr> 태그는 원래는 가로줄을 표현하기 위해 사용했으나 HTML5에 오면서 의미가 생긴 요소.

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

단락을 구분할 때 사용하므로 <p>태그 내 사용은 웹 표준에 어긋납니다.

짜잘 공부Tip

비전공자 4개월공부하고 취업가능? 있으니까 수업하고있음 ㅇㅇ; 근데 나 스스로 열심히해야함 ㅇㅇ;

사람별로 소화할수있는 역량이 다름. 아무리 좋은 커리큘럼이라도 첨엔 힘들수있음.

컴공과 달리 우린 집중할 부분만 집중 ( 프론트엔드)하기때문에 4개월만에 가능

처음은 연봉차이날수도 있음. but 실력쌓이면 충분히 따라잡을수있음

자바스크립트 미리공부 해보기

Github 관리하기 (포트폴리오 따로 필요없게끔)

Spi? 코딩테스트 연습

1일 1커밋 / 양+질 둘다 챙겨보자

'HTML & CSS' 카테고리의 다른 글

[7일차] Table (0)	2022.04.05
[4일차] Forms (0)	2022.04.03
[3일차] Embedded contents (0)	2022.04.03
[3일차] Text-level semantics (0)	2022.04.03
[내위주] HTML / CSS 정리 1탄 (0)	2022.03.11

현재글[2일차] URL , IP , 포트 / HTML Living Standard / Grouping Content

잼굴 코딩공장