[Day 2] 웹 기본 상식과 HTML

오늘 수업은 제주코딩베이스의 이호준 강사님께서 진행하셨다:)

크게 웹의 기본 상식과 HTML Living Standard, tag에 대해 배웠다.

 

URL & IP & PORT

---

1) URL

URL은 웹에서 주소라고 할 수 있다.

흔히 우리가 볼 수 있는

https://www.naver.com/ 등이 url이다.

쉽게 말해, 네이버 홈페이지가 어디에 위치해 있는지를 의미한다.

 

URL은 크게 세 가지로 나뉘는데,

프로토콜(http나 https), IP주소 or 도메인주소 or포트 주소, 파일의 위치(+ ?쿼리)로 나뉜다.

 

네이버 홈페이지를 예로 든다면,

https => 프로토콜

www.naver.com  => 도메인 주소

 

2) IP

Internet Protocol 의 줄임말로, 인터넷 상의 컴퓨터의 주소 체계이다.

따라서 인터넷에 연결된 모든 컴퓨터는 IP 주소 체계를 따른다.

000.000.000.000

요런 식으로 0부터 255까지 나타낼 수 있다.

 

흔히 개발 할 때 볼 수 있는 localhost와 127.0.0.2은 현재 사용 중인 로컬 pc를 가리킨다.

 

3) PORT

port 가 외부와 내부를 연결하는 항구의 뜻을 지닌 것처럼,

우리가 웹 브라우저를 이용해서 서버에 접속할 때 웹 브라우저와 서버를 연결해주는 역할을 하는 것이 바로 포트이다.

http의 경우 80, https의 경우 443의 포트번호가 기본으로 적용된다.

따라서 네이버의 주소는 https://www.naver.com:443 이라고 봐도 무방하다.

 

 

 

HTML

---

1) HTML Living Standard란

직역하면 '살아 있는 표준'인데, 비공식적으로는 HTML5라고 불린다.

그렇지만 HTML Living Standard == HTML5 는 아니고,

HTML과 관련 여러 API를 포함하는 것이라고 할 수 있다. 

 

HTML을 적을 때에는 Sementic하게 적을 필요가 있는데,

SEO와 같은 접근성에 도움을 줄 수 있기 때문이다.

따라서 div나 span과 같은 태그를 남발하지 말고 기본 태그들을 잘 활용하는 것이 좋다!

(그동안 section이나 article 아니면 무작정 div 썼던 나 반성해..) 

 

자주 쓰일 수 있는 HTML 태그들

HTML Page Structure (출처: 강의 자료) 특히 section과 article의 용도를 혼동하지 않도록 주의!

 

 

 

오늘의 수업 소감

 

오늘은 강사님과 웹 상식과 같은 이론도 배웠을 뿐만 아니라 VSCode에서 같이 여러 HTML 코드를 직접 타자로 치며 실습하였는데, 지금까지 모르고 있었던 많은 태그들을 배운 것도 인상 깊었지만, 단축키나 태그 단축 명령어가 가장 크게 와닿았다... 단축 명령어가 있다는 걸 알고 있었고 유튜브 알고리즘에도 관련 동영상이 뜬 적도 있었지만, 단지 외우는 게 귀찮다는 생각(외울 것도 별로 없는데...)으로 지금까지 태그를 일일이 직접 열고 닫고 하면서 코딩을 해온 사실이 새삼 부끄럽게 느껴졌기 때문이다..ㅋㅋㅋ ㅠ 오늘 한 번 배우고 나니 신세계가 열렸다 ㅋㅋㅋㅋㅋ 코딩하는 데 있어서 효율성과 생산성 또한 중요함을 몸소 체감할 수 있었다. :)

얼른 다음날, 다다음날, 다다다음날이 돼서 더 많은 것을 배우고 싶다!