250901 TIL

❗어떤 문제가 있었는지

• 8월 진행했던 웹 개발 기초과정과 다르게 가장 기본부터 진행함에 있어서 사전적 정의와 개념에 대한 이해도가 부족함을 확인했음

---

📝 내가 시도해본 것들

• 웹 동작원리에 대한 기본적인 이해도 확보
  • 실제 자주 접속하는 웹사이트에서 처리되고 있는 정보 요청과 응답 과정들을 확인하는 과정들을 거침 
• HTML & CSS의 개념 및 역할에 대한 이해를 통해 Javascript으로의 연계과정에 있어서 보다 명확한 기능 인지

 

---

👍무엇을 새롭게 알았는지

• HTML / CSS 의 정의 및 개념 
• HTML은 다양한 태그를 이용해 제목, 문단, 링크, 이미지 등 웹페이지의 다양한 요소를 표현

태그/속성	역할 및 설명
<h1>,<h2>	다양한 크기의 제목(Heading) 생성
<p>	문단(본문) 텍스트 작성
<a href="...">	링크 태그, 하이퍼링크(다른 웹페이지나 사이트로 연결) 생성
<img src="...">	이미지 삽입
style속성	태그에 직접 스타일(예: 색상 등) 적용

 

• CSS는 웹페이지의 디자인과 레이아웃을 지정하는 스타일 시트 언어

구분	예시	설명
선택자	p,.class	스타일을 적용할 대상을 지정
속성	color	글자 색상, 배경색, 여백 등
단위	px,%,em	크기나 거리 등 수치를 지정할 때 사용
색상	red, #ff0000, rgb(255,0,0)	다양한 방식으로 색 표현

 

• 웹 화면에 있어서의 동작과정과 흐름들을 확인할 수 있었고, 이에 따른 실제 요청 정보와 내용들을 아래와 같이 확인하고자 했음 

① 도메인 입력 → ② 웹 페이지 요청 → ③ 요청 내용 분석 → ④ 웹 페이지 응답 → ⑤ HTML 해석, 화면 구성

 

• 이러한 화면 구성은 우리가 흔히 접하는 인터넷 화면에서도 확인할 수 있고 아래와 같이 파악했다.
  
  
  • 네이버를 접속한 이후 보여진 화면에서 요청 및 주고받은 정보에 대한 내용을 확인하고자 했음 

크롬 환경에서 네이버를 접속 → 개발자 도구 → Network → Headers 탭 접근 이후 요청된 내용들을 임의로 확인 

General

1. Request URL : 접속한 네이버 화면에 구성되어있는 것 중 하나의 서버 도메인으로 요청을 보낸 주소
2. Request Method : 요청한 내용에 대해 특정 데이터를 가져오기 요청
3. Status Code : 요청한 내용에 대한 정상적인 결과 진행 여부와 상세 값을 나타내는 것으로 보여짐
4. Remote Address : 요청한 도메인이 연결된 IP 주소

Request Headers

• 요청한 정보에 대한 부가적인 상세 정보들로 보여짐
  • 인코딩 방법, 구성 언어, 제공한 OS환경 및 버전 정보