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

2024. 6. 24. 17:30공부/DGTP TIL

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를 통한 비동기 통신