웹 프론트엔드 기초: HTML 마크업과 CSS 스타일링

웹 환경의 핵심 개념

클라이언트와 서버의 역할 분리

웹 시스템은 크게 사용자 측 클라이언트와 데이터 처리 서버로 구분됩니다. 클라이언트는 브라우저나 모바일 앱 형태로 사용자의 입력을 받고 시각적 피드백을 제공합니다. 반면 서버는 실제 비즈니스 로직을 실행하고 데이터를 가공하여 클라이언트에 전달합니다.

서버는 하드웨어적 관점에서는 고성능 컴퓨팅 장비이며, 소프트웨어적 관점에서는 특정 기능을 제공하는 애플리케이션을 의미합니다. 예를 들어 데이터베이스 관리 시스템을 운영하는 장비를 DB 서버, 웹 애플리케이션을 호스팅하는 환경을 웹 서버라고 부릅니다.

요청-응답 사이클

클라이언트에서 서버로 전송되는 데이터 흐름을 요청(Request), 서버에서 클라이언트로 반환되는 데이터 흐름을 응답(Response)이라 합니다. 이 양방향 통신 구조가 웹 애플리케이션의 기본 동작 원리입니다.

HTML: 콘텐츠 구조화

마크업 언어의 본질

HTML(HyperText Markup Language)은 하이퍼텍스트를 마크업하는 언어입니다. 하이퍼텍스트란 단순 텍스트를 넘어 이미지, 영상, 다른 문서와의 연결 등 풍부한 미디어를 포함하는 문서를 의미합니다. 마크업은 이러한 콘텐츠에 의미를 부여하는 태그(Tag)를 사용하는 방식을 뜻합니다.

태그의 구성 요소

HTML 태그는 꺾쇠 괄호로 둘러싸인 명칭으로 정의됩니다:

<p>이것은 단락 요소입니다.</p>

<p>는 시작 태그, </p>는 종료 태그입니다. 두 태그 사이의 내용을 콘텐츠라 합니다. 일부 태그는 속성(Attribute)을 통해 추가 정보를 전달합니다:

<a href="https://example.com">링크 텍스트</a>

또는 콘텐츠 없이 단독으로 사용되는 빈 태그도 존재합니다:

<input type="email" name="userEmail" />

문서 구조

표준 HTML 문서는 다음 계층으로 구성됩니다:

문서형 선언: 브라우저에게 HTML 버전을 알림
최상위 요소: <html> 태그로 전체 문서 감싸기
헤드 영역: <head> 내에 메타데이터, 제목, 스타일, 스크립트 링크 배치
바디 영역: <body> 내에 실제 화면에 표시될 콘텐츠 배치

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>문서 제목</title>
</head>
<body>
    <!-- 실제 콘텐츠 -->
</body>
</html>

핵심 태그 활용

제목과 단락

<h1>메인 제목</h1>
<h2>부제목</h2>
<p>단락 내용을 여기에 작성합니다.</p>

목록 구성

<ul>
    <li>비순서 항목 A</li>
    <li>비순서 항목 B</li>
</ul>

<ol>
    <li>순서 항목 1</li>
    <li>순서 항목 2</li>
</ol>

하이퍼링크

<!-- 동일 디렉토리 내 이동 -->
<a href="./profile.html">프로필 페이지</a>

<!-- 상위 디렉토리 이동 -->
<a href="../index.html">홈으로</a>

<!-- 외부 사이트 (새 탭) -->
<a href="https://github.com" target="_blank">GitHub 방문</a>

이미지 삽입

<img src="assets/photo.jpg" alt="설명 스트" width="300" height="200" />

컨테이너 요소

레이아웃 구성을 위한 블록 레벨과 인라인 레벨 컨테이너:

<!-- 블록 레벨: 줄바꿈 발생 -->
<div class="card">콘텐츠 블록</div>

<!-- 인라인 레벨: 줄바꿈 없음 -->
<span class="highlight">강조 텍스트</span>

표 데이터 구성

<table> 요소는 행(tr), 헤더 셀(th), 데이터 셀(td)의 조합으로 구성됩니다:

<table>
    <tr>
        <th>상품명</th>
        <th>가격</th>
        <th>재고</th>
    </tr>
    <tr>
        <td>노트북</td>
        <td>1,200,000원</td>
        <td>15</td>
    </tr>
    <tr>
        <td>마우스</td>
        <td>35,000원</td>
        <td>42</td>
    </tr>
</table>

셀 병합은 colspan(가로 합)과 rowspan(세로 병합) 속성으로 처리합니다:

<tr>
    <td colspan="2">병합된 셀</td>
    <td>일반 셀</td>
</tr>

양식 및 사용자 입력

데이터 수집을 위한 <form> 요소는 action(데이터 전송 대상)과 method(HTTP 메서드) 속성을 필수로 지정합니다:

<form action="/api/register" method="post">
    <!-- 다양한 입력 요소들 -->
</form>

주요 입력 타입

타입	용도	예시
text	일반 텍스트	`<input type="text" name="nickname" />`
password	비밀번호 (마스킹)	`<input type="password" name="pwd" />`
email	이메일 주소	`<input type="email" name="contact" />`
radio	단일 선택	`<input type="radio" name="gender" value="M" />`
checkbox	다중 선택	`<input type="checkbox" name="agree" value="Y" />`
file	파일 업로드	`<input type="file" name="attachment" />`
hidden	숨김 데이터	`<input type="hidden" name="token" value="abc123" />`

선택 요소와 버튼

<!-- 드롭다운 선택 -->
<select name="country">
    <option value="kr">대한민국</option>
    <option value="jp">일본</option>
    <option value="us">미국</option>
</select>

<!-- 다중 행 텍스트 -->
<textarea name="memo" rows="4" cols="50"></textarea>

<!-- 버튼 유형 -->
<button type="submit">전송</button>
<button type="reset">초기화</button>
<button type="button">일반 버튼</button>

CSS: 시각적 표현

스타일 적용 방식

인라인 스타일

특정 요소에 직접 style 속성으로 지정. 유지보수가 어려워 권장하지 않음:

<p style="color: crimson; font-size: 18px;">경고 메시지</p>

내부 스타일시트

문서 <head> 내 <style> 태그에 정의:

<head>
    <style>
        .notification {
            background-color: #fff3cd;
            border: 1px solid #ffc107;
            padding: 12px;
        }
    </style>
</head>

외부 스타일시트

별도 .css 파일로 분리하여 링크. 가장 권장되는 방식:

<!-- HTML 문서 내 -->
<link rel="stylesheet" href="styles/main.css" />

/* main.css 파일 내 */
.notification {
    background-color: #fff3cd;
    border: 1px solid #ffc107;
    padding: 12px;
}

선택자 유형

선택자	표기법	적용 대상
요소 선택자	`태그명`	해당 태그 전체
ID 선택자	`#식별자`	특정 ID를 가진 단일 요소
클래스 선택자	`.클래스명`	해당 클래스를 가진 모든 요소

/* 요소 선택자 */
h2 { color: #333; }

/* ID 선택자 */
#site-header { position: fixed; }

/* 클래스 선택자 */
.btn-primary { background: #007bff; }

CSS 문법 규칙

선언 블록: 중괄호 {} 내에 속성-값 쌍을 세미콜론으로 구분
속성과 값: 콜론 :으로 연결
주석: /* 주석 내용 */ 형태

선택자 {
    속성1: 값1;
    속성2: 값2;
    /* 설명 */
}

태그: HTML CSS 웹개발 프론트엔드 마크업

6월 5일 02:34에 게시됨

괴물 클럽