[청년취업사관학교] TIL (24.06.24)

Day 1. 웹 & HTML

1. 시멘틱 태그를 사용하는 이유와 시멘틱 태그로 페이지 분해해보기.
   (참고 : 시맨틱 태그 (Semantic Tag)란? - 태그 요소의 종류와 이점 - TBWA 데이터랩 (tbwakorea.com))
   
   • Semantic : 의미, 의미론적인 -> Semantic Tag 태그에 의미를 부여하는 것
   • 포함된 콘텐츠의 특정 의미를 정의.  (<header>, <nav>, <article>, <section>, <footer>, <main>등)
   • 논리적 섹션으로 구성하고 각 부분의 역할과 기능을 전달
   • 웹사이트의 구조를 파악하기 쉽도록 명시적이고 직관적 설계 가능
   • 종류 : HTML5: HTML elements (w3.org) 참고
2. 포트폴리오 페이지 구성을 위한 기본 뼈대 만들기. - CSS를 배우며 Develop 시킬 예정 ex) 자료 조사 및 시멘틱 태그를 적용하여 그려보기.
   
3. 웹 브라우저와 웹 어플리케이션 구성과 동작 원리
   
   • 웹 브라우저:
     • 사용자 인터페이스: 주소 표시줄, 버튼 등
     • 브라우저 엔진: UI와 렌더링 엔진 사이의 제어
     • 렌더링 엔진: HTML, CSS 해석 및 화면 표시
     • 네트워킹: HTTP 요청 처리
     • JavaScript 엔진: JS 코드 실행
     • UI 백엔드: 기본적인 위젯 그리기
     • 데이터 저장소: 쿠키 등 저장
   • 웹 애플리케이션 동작 원리:
     • 클라이언트가 서버에 요청 전송
       • 서버가 요청 처리 및 응답 생성
       • 클라이언트가 응답 받아 처리 (HTML 렌더링, JS 실행 등)
       • 필요시 AJAX를 통한 비동기 통신