지식루프

웹에서 가운데 정렬을 할 때, 초보자가 가장 많이 헷갈리는 부분이 바로margin: auto와 text-align: center의 차이입니다.1. margin: auto의 원리 – 블록 요소를 가운데 정렬main { width: 700px; margin: 32px auto;} main 같은 블록 요소는 기본적으로 왼쪽부터 쌓임.그런데 width를 주면 요소가 화면 전체를 차지하지 않고 남는 공간이 생김.margin-left: auto; margin-right: auto;는 남는 공간을 좌우로 균등하게 분배해서, 블록 요소 자체가 화면 가운데로 이동함.👉 즉, 블록 요소 자체를 정렬하는 방법이에요.2. text-align: center의 원리 – 내부 텍스트/인라인 요소 정렬main { text-a..

1. 인라인 요소의 두 종류✅ 대체 인라인 요소 (Replaced Inline Elements)의미: 내부 콘텐츠가 브라우저가 직접 렌더링하지 않고 외부에서 불러와 대체되는 요소예요.예시: : 이미지를 불러옴, : 영상·음성을 불러옴 : 다른 문서를 불러옴 : 브라우저가 렌더링하는 입력창👉 이 요소들은 "내용이 외부에 의해 대체"되기 때문에 width, height 같은 수직·수평 크기 속성 적용 가능해요.예를 들어 는 width: 100px; height: 200px; 적용이 됩니다.✅ 비대체 인라인 요소 (Non-replaced Inline Elements)의미: 요소 안의 텍스트를 브라우저가 직접 렌더링하는 요소.예시:, 등👉 이들은 기본적으로 줄(line) 안에 텍스트처럼 배치돼요.그래서 ..

1. margin collapse란?HTML에서 블록 요소(예: , , 등)는 위아래로 쌓이면서 페이지를 구성합니다.이때, 두 블록 요소가 만나면 위쪽 margin과 아래쪽 margin이 합쳐지지 않고, 더 큰 값 하나만 적용됩니다.이 현상을 **margin collapse (마진 겹침)**이라고 합니다. 예시:첫 번째 두 번째👉 두 요소 사이의 간격은 20px + 30px = 50px이 아니라, 30px만 적용됩니다. 2. 왜 이런 규칙이 생겼을까?CSS는 "문서 레이아웃을 단순화"하기 위해 이런 규칙을 만들었어요.만약 margin을 다 더한다면, 문단(p)마다 기본 margin이 있어서 줄 간격이 불필요하게 과도하게 넓어질 수 있습니다.따라서 겹치는 margin은 가장 큰 값만 남기자는 규칙이 도..

웹사이트는 어떻게 만들어질까? 1. 웹사이트의 기본 구조웹사이트를 만든다는 건 결국 세 가지 언어를 사용하는 거예요.HTML → 웹사이트의 뼈대(구조)CSS → 뼈대에 색깔과 옷을 입히는 옷(디자인)JavaScript → 움직이고 반응하게 만드는 근육(동작)예를 들어, 사람이 있다면:HTML = 뼈대CSS = 옷, 헤어스타일JavaScript = 걸어 다니고, 말하고, 반응하는 기능👉 이 세 가지가 합쳐져야만 "진짜 살아있는 웹사이트"가 됩니다.2. 서버(Server)란 무엇일까?많은 사람들이 “웹사이트 = 서버”라고 생각하는데, 사실 서버는 웹사이트를 저장하고, 다른 사람들에게 배포해주는 컴퓨터일 뿐이에요.개발할 때는?→ 내 컴퓨터에서만 HTML 파일을 열고 확인하면 돼요. (임시 서버)다른 사람도 ..

웹 개발 입문 가이드웹 개발자는 무엇을 하나요?웹 개발자의 주된 역할은 웹사이트를 만드는 것입니다. 하지만 이것이 전부는 아닙니다. 웹 개발자는 다양한 복잡도의 웹사이트를 구축하며, 사용자에게 보이는 부분과 보이지 않는 부분 모두를 다룹니다. 또한 웹 서비스라고 불리는 특별한 형태의 프로그램도 만들 수 있습니다.웹사이트는 어떻게 작동할까요?브라우저에 naver.com을 입력하면 화면에 네이버 웹사이트가 나타납니다. 이 과정에서 무슨 일이 일어나는 걸까요?친구에게 전화 거는 것과 같은 원리웹사이트를 방문하는 것은 친구에게 전화를 거는 것과 비슷합니다.전화 통화의 과정:친구의 전화번호를 누릅니다연결이 되면 인사를 하고 대화를 시작합니다친구가 답변을 해줍니다서로 대화를 주고받습니다웹사이트 방문 과정:브라우저에..

1. DOM이란 무엇인가요?우리가 웹사이트를 볼 때, 화면에 글자나 사진, 버튼들이 보이죠?이 모든 것들은 HTML 코드로 작성되어 있어요.하지만,브라우저는 HTML을 그대로 보여주는 게 아니라,HTML 코드를 읽어서 '나무 구조(트리 구조)'로 변환해요.이 구조를 바로 DOM(Document Object Model) 이라고 부릅니다.쉽게 말하면"HTML을 브라우저가 이해할 수 있게 만든 나무 모양의 구조"라고 생각하면 됩니다.2. DOM은 어떻게 생겼나요?DOM은 트리 모양으로 생겼어요.HTML 안에 있는 모든 태그(html, head, body, div, h1, p 같은 것들)가각각 DOM 안의 하나하나의 '객체(Object)' 가 됩니다.예를 들어, 이런 HTML이 있다면: ..

API 개념과 웹 개발에서의 역할1. API란 무엇인가API는 Application Programming Interface의 약자로,운영 체제, 애플리케이션, 기타 서비스의 기능이나 데이터에 접근할 수 있도록 도와주는 함수와 절차 모음입니다.소프트웨어 구성요소 간 다리 역할을 하며, 이를 게이트웨이 또는 미들웨어라고 부르기도 합니다.2. API는 왜 중요한가웹 개발자의 일상 업무 상당수는 API를 다루는 일과 관련되어 있습니다.다양한 정보(뉴스, 상품 구매, 소셜 미디어 활동 등)는 API를 통해 전송되고 연결됩니다.웹 개발자가 주로 사용하는 API 유형1. 브라우저(Web) API브라우저에 내장되어 있으며, 복잡한 기능을 단순화하고 고급 기능을 쉽게 구축할 수 있도록 도와줍니다.대표 예시DOM API ..

프레임워크와 라이브러리 차이배경소프트웨어 개발에서 시간 절약과 빠른 구축을 위해 프레임워크와 라이브러리를 사용.이는 이미 해결된 문제를 재사용해 개발 속도를 높이고, 오류를 줄이며, 핵심 기능에 집중할 수 있게 함.둘 다 오픈 소스(누구나 수정 가능) 또는 독점(내부 라이선스 기반)일 수 있음.프레임워크 (Framework): 청사진비유: 목수가 의자를 빠르게 만들기 위해 사용하는 의자 설계도(청사진).정의: 프로그램의 전체 구조와 흐름을 제공하는 틀.특징:프레임워크가 흐름을 제어하며, 개발자는 그 틀 안에서 코드를 작성.독단적(Opinionated): 정해진 방식으로 작업해야 함.예: 웹 개발 프레임워크(Django, Spring)는 HTTP 요청/응답 처리 등 공통 기능을 제공.개발자는 프레임워크가 ..

🌐 웹 브라우저의 작동 원리: 어떻게 콘텐츠가 화면에 보일까?1. 웹 브라우저란 무엇인가?웹 브라우저(browser): 인터넷(World Wide Web)을 탐색할 수 있게 해주는 소프트웨어 애플리케이션이다.Chrome, Safari, Edge, Firefox 등이 대표적.사용자는 브라우저를 통해 웹사이트 주소를 입력하고 원하는 정보를 얻는다.2. 웹 브라우저의 핵심 역할요청(Request): 사용자가 입력한 URL을 바탕으로 웹 서버에 요청을 보냄응답(Response): 서버로부터 HTML, CSS, JS 등의 웹 콘텐츠 데이터를 받아옴렌더링(Rendering): 받은 데이터를 사용자의 화면에 보기 좋은 형태로 시각적으로 표시3. URL의 구성웹사이트 주소(URL)는 다음과 같은 구성요소로 되어 있다..

1. 웹 페이지 vs 웹 사이트웹 페이지: 텍스트, 이미지, 비디오 등을 표시하는 하나의 문서.웹 사이트: 여러 웹 페이지가 서로 연결된 페이지 모음.예: 백과사전 사이트의 홈페이지 → 여러 기사로 연결된 링크 → 각 링크는 다른 웹 페이지 → 모두 같은 주소를 공유하면 하나의 웹 사이트로 간주.2. 인터넷과 웹의 규모수천만 개의 웹사이트가 존재.매일 수십만 개의 웹사이트가 새로 생김.인터넷의 웹페이지 수는 어마어마하며, 전부 다운로드하는 데 수백만 년 걸릴 수준.3. 웹 페이지의 구성 요소 (3대 핵심 기술) 예시: 로그인 입력 오류 표시, 비디오 스트리밍 중 실시간 추천 등은 JavaScript 덕분.4. 웹 페이지 작동 방식 (렌더링 흐름)웹 브라우저 요청 → 웹 서버는 HTML, CSS, JS ..