FE
-
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) 등 페이지에 보이지 않는 메타 정보웹 페이지에 실제로 보이는 모든 콘텐츠 (본문 - 텍스트, 이미지, 링크..