FE/HTML
-
브라우저 이벤트FE/HTML 2025. 8. 26. 13:51
🔍 브라우저 이벤트란?브라우저에는 많은 이벤트가 발생합니다.사용자가 버튼을 클릭화면의 크기 조절화면 스크롤등등이처럼 사용자의 인터렉션(이벤트)가 발생하면 그에 해당하는 일을 등록해 처리할 수 있습니다.이벤트는 함수에 연결되어 이벤트가 발생하지 전에는 함수가 실행되지 않다가 이벤트가 발생되면 실행됩니다.이벤트 핸들러 🤖 이벤트 객체이벤트가 발생했을 때 브라우저가 자동으로 생성하여 이벤트 핸들러 함수에 전달하는 정보를 담은 객체입니다.여러 이벤트들의 공통적인 속성과 이벤트 종류에 따른 특정 속성, 메서드를 포함합니다.이벤트 객체는 이벤트가 발생한 요소, 이벤트 타입, 마우스 좌표, 키보드 입력 등 이벤트와 관련된 정보를 제공합니다.📌 주요 속성속성설명예시event.type이벤트의 종류‘click’, ‘..
-
CSS 알아보기FE/HTML 2025. 8. 25. 23:33
🎨 CSS 란?CSS - Cascading Style Sheets웹 페이지의 디자인과 레이아웃을 담당하는 스타일 시트 언어입니다.HTML이 웹 콘텐츠의 뼈대를 만든다면 CSS는 그 뼈대에 색상, 글꼴, 위치 등 시각적인 요소를 입히는 역할을 합니다. 📌 HTML과 CSSHTML과 CSS는 각자의 문법을 가지는 별개의 언어.HTML은 CSS를 포함할 수 있지만 HTML없이 존재하는 CSS는 의미가 없습니다. 🏃 동작 원리HTML과 브라우저의 동작 과정에서 CSS가 어떻게 적용되는지 간단하게 흐름 설명렌더링 파이프라인의 개념(HTML 파싱 → CSS 파싱 → 적용 → 최종 렌더링) 요약 📖 기본 문법(사용법) CSS는 Selector(선택자) 와 Declaratives(선언부) 로 구성됩니다.선택자 ..
-
브라우저 렌더링 방식 (SSR, CSR)FE/HTML 2025. 8. 20. 16:19
🔍 브라우저 렌더링브라우저가 서버로부터 요청해 받은 내용을 브라우저의 화면에 표시하는 작업 HTML, CSS, JavaScript 문서를 전달받아 브라우저 엔진이 각 문서를 해석해 브라우저 화면을 표시이전에 브라우저 렌더링과정을 학습을 했었는데 이제 브라우저 렌더링의 방식에 대해서 알아보고자 합니다. 브라우저 렌더링 방식은 크게 서버 사이드 렌더링(SSR), 클라이언트 사이드 렌더링(CSR)로 구분됩니다. ↩️ 이전 히스토리 (MPA와 SPA)📌 1990s1990년 중반까지는 모두 static sites 였습니다.서버에는 만들어진 HTML 문서들이 존재했고 사용자가 브라우저에 접속하면 서버에 있는 HTML 문서를 가져와 보여주는 형식 📖 MPA (Multi Page Application)이동할 때마..
-
브라우저 렌더링 과정FE/HTML 2025. 8. 19. 22:46
🌐 브라우저 렌더링 과정렌더링이란 브라우저가 HTML, CSS, Javascript를 해석해 우리가 보는 화면이 실제로 나타나는 과정입니다. 🏃 렌더링 과정브라우저가 HTML, CSS, Javascript를 화면에 나타내는 과정은 다음과 같습니다. 1️⃣ HTML 파싱 및 DOM 트리 생성먼저, 브라우저는 HTML 파일을 읽고 해석하여 DOM (Document Object Model) 트리를 구성합니다.📖 HTML 파싱웹 브라우저가 서버에서 받은 HTML 문서를 문자열로 받아 이를 파싱하여 이해 가능한 구조로 변환하는 과정브라우저는 HTML 문서를 위에서 아래로 읽어 태그와 내용을 파악하고 각 요소의 의미와 관계를 이해🌴 DOM TreeHTML 문서의 계층적 구조를 표현한 객체 모델브라우저가 HT..
-
HTML 기본 정리FE/HTML 2025. 8. 18. 22:11
📌 HTMLHTML (Hypertext Markup Language)- 웹 페이지와 그 내용을 구조화하기 위해 사용하는 코드 HTML은 콘텐츠의 구조를 정의하는 마크업 업어 마크업 언어문서의 구조와 서식을 표현하기 위해 사용되는 언어입니다.태그등을 통해 문서나 데이터의 의미, 구조를 명시하는 언어.HTML, XML, Markdown 📖 HTML 기본 구조 이 문서가 HTML 문서임을 선언모든 HTML 문서에서 가장 먼저 나와야 합니다.전체 HTML 문서의 시작과 끝을 나타내는 루트 요소페이지 전체의 콘텐츠를 감쌉니다.웹 페이지의 제목, 스타일(CSS), 스크립트(JavaScript) 등 페이지에 보이지 않는 메타 정보웹 페이지에 실제로 보이는 모든 콘텐츠 (본문 - 텍스트, 이미지, 링크..