[SKALA] Web, HTML, CSS, JS 기초

SKALA 로고

SKALA 4기 과정이 본격적으로 막을 올렸다.

첫 주차에는 웹 애플리케이션 개발의 근간이 되는 Web 아키텍처와 네트워크 흐름을 깊이 있게 되짚어보고

프론트엔드의 3대장인 HTML, CSS, JavaScript의 핵심 동작 원리를 한눈에 정리하는 시간을 가졌다.

 

1주차에 배운 방대한 내용 중 핵심적인 키워드를 중심으로 정리해 보겠다.

1. Web & Network 기초

웹 애플리케이션의 동작 메커니즘을 제대로 이해하려면 브라우저 뒤편에서 일어나는 네트워크 흐름과 기본 아키텍처를 정확히 파악해야 한다.

인터넷(Internet) vs 웹(Web)

 

• 인터넷: 전 세계의 컴퓨터들을 연결한 거대한 네트워크망으로, 물리적인 인프라 자체를 의미한다.
• 웹: 인터넷이라는 인프라 위에서 동작하는, 페이지 기반의 서비스다. 문서와 문서가 링크(Link)로 촘촘히 연결된 하이퍼텍스트(Hypertext) 구조가 핵심이다.

Client-Server 모델과 데이터 흐름

웹 브라우저(클라이언트)가 서버와 데이터를 주고받는 과정은 크게 4단계로 나누어진다.

1. 요청 (Request): 사용자가 주소를 입력하거나 링크를 클릭하면 브라우저가 HTTP 프로토콜 규격에 맞춰 서버에 요청 메시지를 보낸다.
2. 처리 (Processing): 요청을 받은 서버는 필요한 데이터를 조회하고 로직을 수행하는 등 작업을 처리한다.
3. 응답 (Response): 처리가 끝나면 서버는 결과 상태 코드와 함께 브라우저가 화면을 그릴 수 있는 코드(HTML, CSS, JS 등)를 묶어 돌려준다.
4. 렌더링 (Rendering): 브라우저는 이 코드를 위에서부터 한 줄씩 읽어 내려가며 사용자가 볼 수 있는 시각적인 화면으로 번역(렌더링)해 보여준다.

• 개발 영역의 분리: 사용자의 눈에 보이는 화면과 상호작용을 처리하는 영역을 프론트엔드(Client-Side), 서버 뒤편에서 데이터를 가공하고 비즈니스 로직을 처리하는 영역을 백엔드(Server-Side)라 부른다.

URL & HTTP 프로토콜

• URL 구조: [https://www.example.com:443/products/shoes?size=270#reviews](https://www.example.com:443/products/shoes?size=270#reviews) 처럼 특정 자원의 위치와 접근 방식을 명시한다.
  • Protocol (https://): 데이터를 어떤 규칙으로 주고받을 것인가를 정의한다.
  • Domain (www.example.com): 원래는 숫자로 된 IP 주소이지만, 사람이 읽기 쉽게 문자로 바꾼 서버 이름이다.
  • Port (:443): 서버 컴퓨터 내의 어떤 통로(문)로 들어갈 것인가를 지정한다. (https는 443 포트가 기본이라 생략 가능하다.)
  • Path (/products/shoes): 서버 컴퓨터 내에서 내가 원하는 파일이나 자원의 경로를 나타낸다.
  • Query String (?size=270): 서버에 전달하는 추가적인 조건(파라미터)이다.
  • Fragment (#reviews): 문서 내의 특정 위치(북마크)로 바로 스크롤 이동하게 만드는 꼬리표다.
• HTTP의 무상태성(Stateless): 서버는 클라이언트의 과거 상태를 기억하지 못한다. 따라서 모든 요청은 매번 필요한 정보를 온전히 담고 있는 독립적인 메시지로 처리되어야 한다.
• HTTP Method: 클라이언트가 서버에 요청을 보낼 때 수행할 목적을 명시한다.
  • GET: 데이터 조회 (게시글 읽기, 검색)
  • POST: 새 데이터 생성 및 제출 (글 쓰기, 회원가입)
  • PUT/PATCH: 데이터 전체 혹은 일부 수정 (글 수정)
  • DELETE: 데이터 삭제 (글 삭제)
• HTTP Status Code: 서버가 클라이언트에 처리 결과를 응답할 때 보내는 3자리 숫자 코드다.
  • 2xx (성공): 요청이 정상적으로 처리됨 (예: 200 OK)
  • 3xx (리다이렉션): 요청 완료를 위해 다른 주소로 이동해야 함 (예: 301 Moved Permanently)
  • 4xx (클라이언트 오류): 요청 보낸 사람의 주소나 문법이 잘못됨 (예: 404 Not Found, 401 Unauthorized)
  • 5xx (서버 오류): 요청은 올바르나 서버 컴퓨터 내부에 에러가 발생함 (예: 500 Internal Server Error)

IP & DNS

• IP 주소: 인터넷에 연결된 모든 장치가 서로를 식별하고 찾아가기 위해 사용하는 고유한 식별 번호다.
  • IPv4 vs IPv6: IPv4는 0~255 사이의 숫자 4개가 점(.)으로 구분된 주소 체계인데, 주소 고갈 문제를 해결하기 위해 16진수 숫자가 콜론(:)으로 구분된 무한에 가까운 주소를 제공하는 IPv6가 등장했다.
  • 공인 IP vs 사설 IP: 공인 IP는 인터넷 세상에서 유일무이하게 부여된 진짜 주소이며, 사설 IP는 공유기(라우터)가 내부 네트워크망 안에서 기기 식별을 위해 가짜로 나눠준 가상의 주소다.
• DNS (Domain Name System): 사람이 읽을 수 있는 도메인 네임을 컴퓨터가 이해할 수 있는 숫자 IP 주소로 번역해 주는 거대한 번역 시스템이다.
  • 조회 흐름: 컴퓨터가 Local DNS 서버에 IP를 질의하고, 정보가 없다면 Root 네임서버 -> TLD(.com 등) 네임서버 -> 도메인을 등록한 Authoritative 네임서버 순으로 질의를 거쳐 최종 IP 주소를 획득한 후 브라우저에 전달 및 캐싱(Caching)한다.

 

2. HTML: 웹의 뼈대 세우기

HTML(HyperText Markup Language)은 웹 페이지의 구조와 콘텐츠를 설계하는 가장 기초적인 마크업 언어다.

Element와 Global Attribute

• Element (요소): 시작 태그, 콘텐츠, 종료 태그가 모여 하나의 요소를 구성한다. 콘텐츠가 없는 요소는 빈 요소(Empty Element, 예: <br>, <hr>, <img>)라고 하며 종료 태그가 없다.
• Global Attribute (전역 속성): 모든 HTML 요소에서 공통으로 사용할 수 있는 강력한 속성들이다.
  • id: 페이지 내에서 단 하나만 존재해야 하는 고유 식별자 (CSS/JS 타겟팅용)
  • class: 특정 스타일이나 동작을 일괄 적용하기 위해 요소를 그룹화하는 이름 (중복 적용 가능)
  • style: 태그 내에 인라인 CSS 스타일을 직접 지정
  • title: 마우스를 올렸을 때 툴팁으로 표시될 설명 추가 정보
  • hidden: 요소를 화면에 렌더링하지 않도록 설정
  • draggable: 요소를 드래그할 수 있는지 여부 설정 (true/false)
  • data-*: 개발자가 임의로 데이터를 보관할 수 있는 사용자 정의 속성

Block vs Inline

모든 HTML 요소는 화면에 렌더링될 때 기본적으로 두 가지 유형 중 하나의 표시(display) 값을 가진다.

시맨틱 태그 (Semantic HTML)

단순히 구획을 나누는 무의미한 <div>나 <span> 대신, 의미를 가지는 시맨틱 태그를 적극적으로 사용해야 한다.

• 가독성: 코드가 구조적으로 한눈에 파악되어 협업 및 유지보수에 유리하다.
• 웹 접근성: 스크린 리더 등 보조 기술이 문서의 논리 구조를 더 명확하게 읽어낼 수 있게 돕는다.
• SEO (검색엔진 최적화): 검색 엔진이 콘텐츠의 맥락과 중요도를 효율적으로 분석하여 의미 있는 정보를 선별해 검색 노출에 기여한다.

주요 시맨틱 태그 목록

• <header>: 문서나 섹션의 헤더 영역 (머리글)
• <nav>: 메뉴, 링크 등 내비게이션 링크 영역
• <main>: 문서의 핵심적이고 독창적인 주 콘텐츠 영역 (페이지당 1개 권장)
• <section>: 논리적으로 연관된 주제 단위의 콘텐츠 구획
• <article>: 독립적으로 분리해서 재사용할 수 있는 본문 구획 (뉴스 기사, 포스트 등)
• <aside>: 사이드바, 광고 등 본문 콘텐츠와 간접적인 영역
• <footer>: 회사 정보, 저작권, 약관 등을 정의하는 바닥글 영역

 

3. CSS: 시각적 스타일링과 레이아웃

CSS(Cascading Style Sheets)는 웹 페이지에 옷을 입히고 화면 배치를 담당하는 스타일시트 언어다.

CSS 선택자 (Selectors)와 우선순위

• 선택자의 종류: 요소 선택자(p), ID 선택자(#id), 클래스 선택자(.class)뿐 아니라, 자식 선택자(div > p), 후손 선택자(div p), 인접 형제 선택자(h1 + p), 속성 선택자(input[type="text"]), 가상 클래스(pseudo-class, :hover, :nth-child(n)), 가상 요소(pseudo-element, ::before, ::after) 등을 활용해 정밀하게 요소를 타겟팅할 수 있다.
• 명시도 (CSS Specificity): 동일한 요소에 서로 다른 스타일 규칙이 충돌할 때, 가중치 점수를 계산하여 가장 명시도가 높은 스타일이 우선 적용된다.
  • 1순위: Inline styles (HTML 태그 안에 style="..."로 적용된 스타일)
  • 2순위: ID selectors (#navbar)
  • 3순위: Classes, 속성 선택자, 가상 클래스 (.test, [required], :hover)
  • 4순위: Elements, 가상 요소 (h1, ::before)
  • 5순위: Universal selector (*) - 우선순위 없음
• !important: 어떤 규칙보다 우선하도록 강제하는 예외 규정이다. 단, 남용할 경우 CSS의 캐스케이딩(Cascading) 상속 흐름을 망가뜨리고 스타일 디버깅과 유지보수를 불가능에 가깝게 만들기 때문에 사용을 극도로 지양해야 한다.

박스 모델 (Box Model) & Position

• 박스 모델 구조: 모든 HTML 요소는 사각형 박스로 취급된다. 영역은 안쪽부터 Content -> Padding(안쪽 여백) -> Border(테두리) -> Margin(바깥쪽 여백) 순으로 감싸져 있다.
  • 마진 병합 (Margin Collapse): 여러 개의 세로(수직) 방향 마진이 만날 때, 마진이 더해지는 것이 아니라 둘 중 가장 큰 마진 값 하나로 합쳐지는 현상이다. 수평(좌우) 마진은 병합되지 않는다.
• Position 속성: 요소를 화면상의 어디에 배치할지 결정하는 핵심 속성이다.
  • static: 기본값. 일반적인 문서 흐름에 따라 배치된다. (top, left 등 좌표 지정 불가)
  • relative: 일반적인 흐름에 따르되, 자신이 원래 있어야 할 위치를 기준으로 상대적으로 이동한다. (원래 차지하던 물리 공간은 그대로 유지된다.)
  • fixed: 브라우저 창(뷰포트)을 기준으로 화면에 완전히 고정하여 배치된다. 스크롤을 내려도 위치가 바뀌지 않는다.
  • absolute: 가장 가까운 조상 요소 중 position이 static이 아닌 요소를 기준으로 절대 배치된다. 문서의 일반적인 흐름에서 완전히 이탈하여 물리적 공간을 차지하지 않는다.
  • sticky: 스크롤 위치에 따라 일반 흐름(relative)을 따르다가 지정된 지점에 다다르면 고정(fixed)되는 조건부 전환 배치 기법이다. (메뉴 바 등에 적극 활용된다.)

현대적인 레이아웃 시스템: Flexbox & Grid

과거 레이아웃을 잡기 위해 썼던 float이나 inline-block은 요소를 수평 정렬하기에 까다롭고 버그가 잦았다. 현대 웹 레이아웃은 Flexbox와 Grid를 연동하여 잡는 것이 기본 표준이다.

1. Flexbox (1차원 레이아웃): 가로나 세로 중 단일 축 정렬과 공간 배분에 강력하다.
   • Flex Container 속성: flex-direction(정렬 방향), flex-wrap(줄바꿈 여부), justify-content(메인 축 정렬), align-items(교차 축 정렬)
   • Flex Item 속성: flex-grow(남는 여백을 채울 확대 비율), flex-shrink(부족할 때 줄어들 축소 비율), flex-basis(기본 할당 크기)
2. Grid (2차원 레이아웃): 가로(행)와 세로(열)를 동시에 다루는 바둑판식 격자 구조 레이아웃에 최적화되어 있다.
   • Grid Container 속성: grid-template-columns(열 너비 정의), grid-template-rows(행 높이 정의), gap(셀 간격)
   • Grid Item 속성: grid-column, grid-row (Grid Line 번호를 기준으로 영역 확장 및 제어 가능)

레이아웃 설계 정석

웹 페이지 전체의 메인 아웃라인과 격자 배치는 Grid로 견고하게 구성하고, 컴포넌트 내부 요소나 세부 정렬은 Flexbox를 조합하는 방식이 가장 효율적이다.

고급 CSS 테크닉

• Transforms & Transitions: 2D/3D 공간에서 요소를 회전(rotate), 축소/확대(scale), 이동(translate) 시킬 수 있으며, transition 속성과 연동해 값의 변화를 시간에 따라 부드러운 애니메이션 효과로 구현할 수 있다.
• 미디어 쿼리(Media Query) & 반응형 웹: 기기의 화면 너비(Viewport)에 따라 다른 스타일을 적용하는 핵심 기술이다. 모바일 기기의 점유율이 높은 현대 트렌드에 맞춰 모바일 스타일을 먼저 만들고 큰 화면으로 점진적 확장하는 Mobile-First Design (min-width 기반 설계)이 권장된다.
• CSS 변수 (Custom Properties): :root에 --main-color: #007bff; 형태로 변수를 정의하고 var(--main-color)로 호출하여 사용한다. 다크 모드 같은 실시간 테마 변경과 코드 중앙 집중 관리에 아주 유리하다.
• CSS 전처리기 SCSS/SASS: 변수 사용, 중첩 규칙(Nesting), 스타일 코드 템플릿화(Mixins), 임포트 등을 지원하여 CSS 생산성을 극대화하는 표준 기술이다. (브라우저가 해석할 수 있도록 빌드 과정에서 표준 CSS로 트랜스파일링하는 과정이 수반된다.)

 

4. JavaScript: 동적 상호작용 부여

JavaScript는 브라우저 내부에서 HTML 구조와 스타일을 조작하고 동적 기능 및 네트워크 통신을 제어하는 핵심 프로그래밍 언어다.

변수 선언과 스코프 (let, const, var)

자바스크립트 변수 선언 키워드는 유효 범위와 데이터의 변경 여부에 따라 구분하여 선택해야 한다.

데이터 타입 (Datatypes)의 이중 구조

자바스크립트의 데이터 타입은 메모리 할당 및 값의 전달 방식에 따라 명확히 구분된다.

1. 원시 타입 (Primitive Types): Number, String, BigInt, Boolean, undefined, null, Symbol
   • 변수에 실제 데이터 값이 직접 담긴다.
   • 값을 대입하거나 인자로 보낼 때 값 자체가 새로 복사되어 전달되는 Call by Value 형태로 작동한다.
   • 메모리상에서 불변(Immutable)의 특징을 가지며, 변경 시 새로운 값을 가리키는 주소로 재할당된다.
2. 참조 타입 (Reference Types): Object, Array, Function, Date, Map, Set 등
   • 변수에 값이 아닌, 실제 데이터가 담긴 힙 메모리의 주소(참조값)가 복사되어 담긴다.
   • 값을 대입하거나 넘길 때 주소값이 그대로 복사되어 공유되는 Call by Sharing 형태로 작동한다.
   • 복사된 변수에서 내부 속성을 수정하면 원본 변수가 가리키는 객체도 동시에 변경되는 가변성(Mutable) 특징을 가진다.

undefined vs null

• undefined: 변수는 선언되었으나 아직 명시적으로 아무 값도 할당하지 않아 엔진에 의해 초기화된 상태다.
• null: 개발자가 "이 변수에는 의도적으로 아무런 값(객체)도 할당하지 않았다"는 비어있는 상태를 명시적으로 나타낸 값이다.

동등 연산자 (== vs ===)

• == (동등 연산자): 비교 전에 엔진이 자동으로 형 변환(Type Coercion)을 한 뒤 값을 비교한다. '5' == 5가 true가 되어 예상치 못한 비교 버그가 빈번히 발생한다.
• === (일치 연산자): 형 변환 없이 값과 데이터 타입이 모두 엄격하게 일치해야만 true를 리턴한다. 실무의 모든 비교 연산은 이 엄격한 일치 연산자(===)를 사용하는 것이 표준이다.

함수(Functions)와 인자 전달 방식

함수는 특정 동작을 수행하고 반복 재사용할 수 있는 핵심 코드 블록이다.

• 함수 호출 vs 참조: sayHello()는 함수를 실행하여 결과값을 돌려받는 행위이고, sayHello처럼 괄호가 없으면 함수 객체 자체를 가리키는 참조 방식이다.
• 매개변수 데이터 변경:
  • 원시 타입을 인자로 전달하면 값이 복사되어 들어가기 때문에 함수 내부에서 아무리 지우고 볶아도 원본 데이터에는 변화가 없다.
  • 참조 타입(객체)을 인자로 전달하면 주소값이 공유되기 때문에 함수 내부에서 전달받은 객체의 프로퍼티 속성을 수정하는 순간 원본 객체의 내용도 영구적으로 변한다.

 

마무리

백엔드 인프라나 AI 엔지니어링을 지향하더라도 유저와의 최접점이자 데이터 상호작용이 일어나는 브라우저 환경을 이해하는 것은 필수적이다.

어느 정도 아는 지식이었지만 이제 시작인 만큼 복습 느낌으로 가볍게 보고 넘어가면 될 것 같다.