24.06.24 html 1일차>시멘틱 태그 와 구성요소

1.시멘틱 태그를 사용하는 이유

• 시멘틱 태그: <header>, <nav>, <main>, <article>, <section>, <aside>, <footer> 등은 웹 페이지의 구조를 명확히 정의하여 사람이 읽고 이해하기 쉽고, 기계도 쉽게 해석할 수 있습니다.
• 비시멘틱 태그: <div>, <span> 등은 구조적 의미를 전달하지 않고, 단지 스타일링을 위해 사용됩니다.

이점

1. 접근성 개선: 스크린 리더와 같은 도구가 페이지를 더 잘 이해하도록 돕습니다.
2. SEO 최적화: 검색 엔진이 페이지의 구조와 내용의 중요성을 더 잘 파악할 수 있습니다.
3. 유지 보수 용이: 코드가 명확해져서 개발자나 유지 보수자가 더 쉽게 이해할 수 있습니다.
4. 시멘틱 태그를 사용하면 HTML 문서의 가독성, 접근성, 그리고 SEO를 크게 향상시킬 수 있습니다. 이를 통해 웹 페이지의 구조를 더욱 명확하고 효율적으로 표현할 수 있습니다.

 

 

2.시멘틱 테그로 페이지 분해해보기. 

ex) 예를들면 Naver, Daum 웹 페이지의 현재 구조와 관계 없이 이런 식으로 구성이 되면 좋겠다

3.포트폴리오 페이지 구성을 위한 기본 뼈대 만들기. -

CSS를 배우며 Develop 시킬 예정 ex) 자료 조사 및 시멘틱 태그를 적용하여 그려보기.

1) 백엔드 포트폴리오 예시_마스킹.pdf - Google Drive

백엔드 포트폴리오 예시_마스킹.pdf

박민영 | Java 백엔드 개발자 (middlepark.github.io)

박민영 | Java 백엔드 개발자

 

신입 서비스 기획 포트폴리오 만드는 방법 | zero-base

2). Final Project (pensive-kowalevski-fdf325.netlify.app)

4. 웹 브라우저와 웹 어플리케이션 구성과 동작 원리

1. 웹 브라우저(Web Browser)

구성 요소

1. 사용자 인터페이스 (UI)
   • 브라우저 창: 주소 표시줄, 뒤로/앞으로 버튼, 북마크 메뉴 등.
   • 탭: 여러 웹 페이지를 동시에 열 수 있는 탭 인터페이스.
   • 상태 표시줄: 로딩 상태나 보안 정보 등을 표시.
2. 브라우저 엔진
   • 통신: 사용자 인터페이스와 렌더링 엔진 간의 통신을 관리.
   • 예시: Blink (Chrome), Gecko (Firefox).
3. 렌더링 엔진
   • HTML 파싱: HTML 문서를 파싱하여 DOM 트리를 생성.
   • CSS 파싱: CSS를 파싱하여 스타일 규칙을 생성.
   • 레이아웃: DOM과 스타일 규칙을 기반으로 페이지 레이아웃 계산.
   • 그리기: 계산된 레이아웃을 화면에 렌더링.
4. 네트워크
   • HTTP 요청/응답: 서버와의 통신을 관리하여 페이지 리소스를 가져옴.
   • 보안: HTTPS를 사용하여 암호화된 통신을 제공.
5. JavaScript 엔진
   • JavaScript 실행: JavaScript 코드를 해석하고 실행.
   • 예시: V8 (Chrome), SpiderMonkey (Firefox).
6. 데이터 저장소
   • 쿠키, 로컬 스토리지, 세션 스토리지: 사용자 데이터를 로컬에 저장.
   • 캐시: 웹 페이지의 자주 사용되는 리소스를 저장하여 빠르게 로드.

동작 원리

1. URL 입력
   • 사용자가 주소 표시줄에 URL을 입력하거나 링크를 클릭.
2. DNS 조회
   • URL의 도메인 이름을 IP 주소로 변환.
3. HTTP 요청
   • 브라우저가 HTTP 요청을 서버로 보냄 (GET 요청으로 HTML 문서 요청).
4. 서버 응답
   • 서버가 요청된 HTML 문서를 반환.
5. HTML 파싱
   • 렌더링 엔진이 HTML을 파싱하여 DOM 트리를 생성.
6. CSS 파싱
   • CSS를 파싱하여 스타일 규칙을 생성하고, DOM 트리에 적용.
7. JavaScript 실행
   • JavaScript 엔진이 JavaScript 코드를 실행하여 DOM을 조작하거나 이벤트를 처리.
8. 렌더링
   • 브라우저가 DOM과 CSSOM을 합쳐 화면에 그리기.
9. 자원 로드
   • 이미지, 스타일 시트, 스크립트와 같은 추가 자원을 병렬로 로드.
10. 사용자 상호작용
    • 사용자가 페이지와 상호작용하며 이벤트가 발생 (클릭, 스크롤 등).

2. 웹 애플리케이션(Web Application)

구성 요소

1. 프런트엔드 (Frontend)
   • HTML: 콘텐츠 구조를 정의.
   • CSS: 콘텐츠 스타일을 정의.
   • JavaScript: 상호작용과 동적 콘텐츠를 처리.
2. 백엔드 (Backend)
   • 서버: HTTP 요청을 처리하고 응답을 반환.
   • 애플리케이션 서버: 비즈니스 로직을 처리하고, 데이터베이스와 상호작용.
   • 데이터베이스: 데이터를 저장하고 검색.
3. API (Application Programming Interface)
   • RESTful API: 클라이언트와 서버 간 데이터 통신.
   • GraphQL: 클라이언트가 필요한 데이터만 요청할 수 있는 쿼리 언어.
4. 데이터베이스
   • RDBMS: 관계형 데이터베이스 (예: MySQL, PostgreSQL).
   • NoSQL: 비관계형 데이터베이스 (예: MongoDB, Cassandra).
5. 클라이언트 사이드 스토리지
   • 쿠키: 작은 데이터 조각을 저장.
   • 로컬 스토리지: 브라우저에 데이터 영구 저장.
   • 세션 스토리지: 브라우저 세션 동안 데이터 저장.
6. 인프라
   • 호스팅: 웹 애플리케이션이 실행되는 서버 환경.
   • CDN: 콘텐츠를 빠르게 전달하는 네트워크.

동작 원리

1. 클라이언트 요청
   • 사용자가 브라우저에서 요청을 보냄 (HTTP 요청).
2. 서버 처리
   • 서버가 요청을 수신하고, 적절한 비즈니스 로직을 수행.
3. 데이터베이스 쿼리
   • 필요할 경우 데이터베이스에서 데이터를 쿼리.
4. 응답 생성
   • 서버가 HTML, JSON, XML 등의 형태로 응답 생성.
5. 클라이언트 응답 수신
   • 브라우저가 응답을 수신하고, 필요한 경우 DOM을 업데이트.
6. 동적 콘텐츠
   • JavaScript로 동적 콘텐츠를 처리하여 사용자와 상호작용.
7. 자원 로드 및 캐싱
   • 웹 애플리케이션이 필요한 추가 자원을 로드하고, 캐싱하여 성능 최적화.
8. 상태 관리
   • 애플리케이션 상태를 관리하고, 필요할 경우 클라이언트와 서버 간 동기화.

웹 브라우저와 웹 애플리케이션의 협업

1. 브라우저가 웹 애플리케이션의 UI를 렌더링: 브라우저는 웹 애플리케이션이 제공하는 HTML, CSS, JavaScript를 파싱하고 렌더링하여 사용자 인터페이스를 생성합니다.
2. 웹 애플리케이션이 데이터를 처리: 웹 애플리케이션은 백엔드에서 데이터를 처리하고, 프런트엔드로 전달하여 동적 콘텐츠를 제공합니다.
3. API 통신: 브라우저와 서버 간의 데이터 통신은 주로 API를 통해 이루어지며, 클라이언트는 AJAX, Fetch API 등을 사용하여 서버와 비동기 통신을 수행합니다.

그림을 통해 이해하기

설명:

• 사용자가 브라우저를 통해 HTTP 요청을 보냅니다.
• 서버는 요청을 받아 필요한 비즈니스 로직을 수행하고, 데이터베이스와 상호작용하여 응답을 생성합니다.
• 브라우저는 응답을 받아 HTML, CSS, JavaScript를 렌더링하여 사용자에게 표시합니다.

이 설명은 웹 브라우저와 웹 애플리케이션의 기본 구성 요소와 동작 원리를 이해하는 데 도움이 됩니다. 각 구성 요소가 어떤 역할을 하는지 이해함으로써 더 나은 웹 개발과 디버깅이 가능해집니다.