풀스택 개발자 아카데미 (1) - HTML/CSS

kai@bluenyang.kr (BlueNyang) — Mon, 14 Jul 2025 21:22:00 GMT

## 1. HTML 오늘날, 우리가 보는 다채로운 웹 페이지들은 단순한 텍스트나 이미지의 나열이 아니다. 이들은 모두 HTML, CSS, Javascript의 요소로 이루어져있고, 이 기술들이 유기적으로 결합되어 만들어진 것이다. 이러한 웹 페이지의 기틀, 뼈대가 되는 핵심 요소가 바로 HTML(Hyper Text Markup Language)이다. HTML은 Hyper Text Markup Language의 약자로, **웹 페이지의 뼈대와 구조를 만드는 마크업 언어**다. 즉, 문서 간에 서로 링크가 설정되어 있어, 링크된 부분을 클릭하면 해당 문서로 이동할 수 있는 기능을 제공한다. > Hyper Text: 참조(하이퍼링크)를 통해 한 문서에서 다른 문서로 즉시 이동할 수 있는 텍스트 > Markup Language: 문서의 구조나 서식을 정의하기 위해 사용되는 언어. HTML은 프로그래밍 언어는 아니지만, 브라우저가 텍스트, 이미지, 비디오 등 다양한 컨텐츠를 구조화하고 표시할 수 있도록 표준화된 **마크업** 언어이며, 문서의 각 부분이 어떤 역할을 하는지 알려주기 위해 "**태그**"를 사용한다. ### 1.1. HTML의 역할: 정보의 나열 HTML만으로 구성된 웹 페이지는 정보를 단순히 나열하는 역할을 한다. 마치 책의 목차처럼 어떤 정보가 있는지 보여주지만, 디자인이나 동적인 기능은 없다. 종종 웹 페이지에서 CSS 로드가 되지 않아 다음과 같은 화면을 본적이 있을 것이다. ![](https://cms.croffledev.kr/assets/5cc41fa4-6325-49f6-b3cc-822433bce9a7) 이처럼, HTML은 우리에게 예쁘게 보여주거나, 기능을 제공하는 것이 아니라, 그저 정보를 나열하고, 정보를 나열할 구조를 지정하는 것 뿐이다. ### 1.2. HTML의 구조 모든 HTML 문서는 다음과 같은 골격으로 구성된다. ```html My First Web Page

Hello World

안녕하세요

``` ## 2. 태그 - Tag - 시작 태그(``)와 종료 태그(``)가 있다 - 시작 태그와 종료 태그 사이에 태그가 포함하고자 하는 내용을 넣는다. - `
`, ``, `

`과 같이 종료 태그 없이 사용가능한 단독 태그도 있다. - ``의 형태로 속성과 속성 값을 기입할 수 있다. - 태그는 대소문자를 구분하지 않지만, 웹 표준에서는 소문자로 작성하는 것을 권장한다. ### 2.1. `` 기본 태그 head 태그에는 문서의 정보를 작성한다. 웹 브라우저 화면에는 보이지 않지만, 웹 브라우저가 알아두어야 할 문서 정보를 포함한다. 이는 문서의 제목, Charset(문자셋)을 지정하거나, 외부 파일을 연결할 수 있다. - `` 태그를 사용해 문서의 제목을 설정할 수 있다. - `<link rel="" href="">` 태그를 통해 외부 파일을 링크할 수 있다. ### 2.2. 핵심 기본 태그 #### 2.2.1. 텍스트 관련 태그 - `<h1> </h1>`~`<h6> </h6>` - 제목 태그: `h1`이 가장 크고, `h6`이 가장 작다. 줄 바꿈하여 출력된다. - `<p> </p>` - 문단 태그: 문단을 나눌 때 사용한다. - 브라우저의 기본 스타일에 따라 문단 위아래로 여백이 생긴다. - 여러 번 사용해도 행 간격이 더 벌어지지 않는다. - `<br />` - 줄바꿈 태그: 강제로 줄을 바꿀 때 사용하며, 여러 번 사용하여 여러 줄을 바꿀 수 있다. - `<hr />` - 수평선 태그: 수평선을 삽입한다. #### 2.2.2. 텍스트 강조 및 장식 태그 - `<b>`/`<strong>`: **굵은 글씨(Bold)**. `<strong>`은 의미적으로 더 중요할 때 사용한다. - `<i>`/`<em>`: _이탤릭체_. `<em>`은 의미적으로 강조할 때 사용 - `<sub>`: <sub>아래 첨자</sub> - `<sup>`: <sup>윗 첨자</sup> - `<ins>`: <ins>밑줄</ins> - `<del>`: <del>취소선</del> #### 2.2.3. 특수 문자 엔티티 (Special Character Entities) HTML에서 꺾쇠(<, >) 같은 문자들은 태그를 정의하는 데 사용된다. 즉, 이러한 문자들을 웹 페이지에 일반 텍스트로 표시하는 경우, HTML의 정의로 받아들일 수 있기 때문에, 특수한 방법으로 삽입해야 하는데, 이를 **HTML 엔티티** 또는 **특수 문자 엔티티**라고 부른다. 특수 문자 엔티티는 `&문자;` 또는 `&#숫자;`의 형태로 작성하며, 이는 브라우저에서 해당 특수 문자로 변환되어 보여진다. ##### 2.2.3.1. 자주 사용되는 엔티티 | 문자 | 숫자 코드 | 엔티티 이름 | 설명 | | :----: | :-------: | :---------: | :------------------------------------: | | | ` ` | ` ` | non-breaking space. 줄바꿈이 없는 공백 | | < | `<` | `<` | less-than 부등호 (<) | | > | `>` | `>` | greater-than 부등호 (>) | | " | `"` | `"` | 쌍따옴표(") | | ' | `'` | `'` | 따옴표(') | | & | `&` | `&` | 앰퍼샌드(&) 기호 | | © | `©` | `©` | © Copyright. 저작권 표시 기호 | #### 2.2.4. 하이퍼링크 태그: `<a>` `<a>`는 웹 페이지의 핵심 기능 중 하나로, 문서나 사이트를 연결해 준다. - `href`속성: 이동하고자 하는 곳의 위치(경로)를 지정한다. - 예시: `<a href="https://google.com/">구글로 이동</a>` - 결과: <a href="https://google.com/">구글로 이동</a> - `target`속성: 연결된 문서를 보여줄 위치를 지정한다. - `_self`: 현재 화면에서 이동한다(기본 값). - `_blank`: 새 탭 또는 새 창에서 보여준다. #### 2.2.5. 목록 태그 `start` 속성: 시작 숫자를 지정 `reversed` 속성: 역순으로 표시 - `<ul>` (Unordered List) - **순서가 없는** 목록 - 각 항목은 `<li>` (List Item) 태그로 표현 - `type` 속성을 사용하여 목록의 마커를 변경할 수 있다. - `disc` (검은 원) - `circle` (흰 원) - `square` (사각형) - `<ol>` (Ordered List) - **순서가 있는** 목록. - 각 항목은 `<li>` 태그로 표현 - `type` 속성을 사용하여 숫자의 종류를 변경할 수 있다. - `1` (숫자) - `a` (소문자 영어) - `A` (대문자 영어) - `i` (소문자 로마 숫자) - `I` (대문자 로마 숫자) ![](https://cms.croffledev.kr/assets/498453fe-6ffb-4490-9570-4c86b94a3763) - `<dl>` (Definition List): 정의목록 태그 - `<dt>` (Definition Term) : 정의할 용어 - `<dd>` (Definition Description): 용어 설명 - 이 태그들 또한 Semantic. 의미적인 강조를 위해 사용한다. #### 2.2.6. 테이블 태그 - `<table>`: 테이블을 선언하는 태그 - `<table>`에는 `border`, `width`, `height와` 같은 속성을 정의하는 경우도 있다. 하지만, 이 속성들은 모두 `HTML4`**에서 사용하던 것**으로, 현재는 **Deprecated(사용하지 않음)**을 권장한다. - 만약 `border`, `width`, `height` 등의 속성을 정의하고 싶다면, **CSS의 사용을 강력히 권장**한다. - `<caption>`: 테이블의 제목을 표시 - `<tr>`: 테이블 내에 한 행을 정의하는 태그 - `<td>`: 테이블 내의 한 열, 즉 셀을 만들 때 사용되는 태그 - `rowspan`: 여러 행을 합칠 때 사용 - `colspan`: 여러 열을 합칠 때 사용 - `<thead>`, `<tbody>`, `<tfoot>` - 표의 제목, 본문, 바닥글 부분을 구분 - 시각 장애인을 위한 접근성을 높일 수 있음 - CSS를 사용하여 각 부분에 다른 스타일을 적용할 수 있도록 함 다음 사진은 rowspan과 colspan에 대해 보여준다. ![](https://cms.croffledev.kr/assets/d8484a5d-0e10-4e12-a7e3-7231e24d40d9) 다음 사진과 HTML을 통해 rowspan과 colspan을 다시 한 번 확인해 보자. ![](https://cms.croffledev.kr/assets/53cacc85-8989-42a8-8bff-16ee4105eb10) ```html <table> <tr> <td>1</td> <td>2</td> <td rowspan="2">3</td> <td>4</td> </tr> <tr> <td colspan="2">5</td> <td rowspan="2">6</td> </tr> <tr> <td>7</td> <td colspan="2">8</td> </tr> </table> ``` #### 2.2.7. 이미지 태그 `` - 웹 페이지에 이미지 삽입 시 사용 - `src`: 이미지 파일의 결로를 지정하는 필수 속성 - 상대경로, 절대경로, URI 모두 사용할 수 있음 - `alt`: 이미지가 출력되지 않을 때 대신 표시되는 텍스트 - `title`: 마우스를 이미지에 올리면 나타나는 설명 - `width`, `height`: 이미지의 가로, 세로 길이 지정 - `usemap`: 이미지 맵을 지정할 수 있으며, 하나의 이미지에 여려개의 링크 영역을 만들고, 각 영역마다 다른 링크를 지정할 수 있다. - `usemap`은 이미지 맵을 지정할 때 사용하며, 하나의 이미지에 여러 개의 링크 영역을 만들고, 각 영역마다 다른 링크를 지정할 수 있다. #### 2.2.8. 문서 삽입 태그 `` - 현재 HTML 문서 내에 다른 문사를 포함하고자 할 때 사용한다. ![](https://cms.croffledev.kr/assets/eceef9d6-3310-41fe-a15a-fe1c46d9ecd4) #### 2.2.9. 입력 양식 태그 사용자로부터 데이터를 입력받을 때 사용한다. - `<form>`: 입력 양식을 구성하는 기본 골격이며, 입력된 데이터를 서버로 전송 - `action`: 폼의 내용을 전달할 문서의 URL을 지정 - `method`: 데이터를 전송하는 방식을 지정 - `get은` 주소 뒤에 붙어서 전송되고, `post는` 눈에 보이지 않게 전송 - `<label>`: 폼 요소에 캡션을 붙여 클릭 범위를 넓혀 사용자 편의성을 높임 - `for` 속성을 통해 `<input>` 태그와 연결 - `<input>`: 다양한 유형의 데이터를 입력받기 위한 태그 - `type`: 입력 유형을 지정 - `text`, `password`, `checkbox`, `radio`, `button`, `file`, `submit`, `reset` 등 - `name`: 입력 상자의 이름을 지정 - `value`: 초기값이나 태그가 지닌 값을 지정 - `placeholder`: 입력할 내용의 힌트를 표시 - `maxlength`: 최대 입력 길이를 지정 - `readonly`: 읽기 전용 필드로 만듦 - `required`: 필수 입력 필드로 지정 - `autofocus`: 페이지 로드 시 입력 커서를 표시 - `hidden`: 사용자에게는 보이지 않지만 서버로 넘겨지는 값을 갖는 필드 - `<select>`: 드롭다운 목록을 표시할 때 사용 - `<option>` 태그로 각 항목을 정의 - `<textarea>`: 여러 줄의 텍스트를 입력받을 때 사용 - `rows`와 `cols` 속성으로 세로 및 가로 길이를 지정 ``` <div class="form-row vertical-align"> <label for="password-check">Password Check:</label> <input type="password" id="password-check" name="password-check" placeholder="비밀번호 확인" required /> </div> <div class="form-row"> <label>Gender: </label> <input type="radio" id="gender-male" value="male" name="gender" /> <label for="gender-male">Male</label> <input type="radio" id="gender-female" value="female" name="gender" /> <label for="gender-female">Female</label> <input type="radio" id="gender-none" value="none" name="gender" checked /> <label for="gender-none">None</label> </div> <div class="form-row"> <label>Favorite:</label> <input type="checkbox" id="fav-html" value="html" name="favorite" checked /> <label for="fav-html">HTML</label> <input type="checkbox" id="fav-java" value="java" name="favorite" /> <label for="fav-java">Java</label> <input type="checkbox" id="fav-php" value="php" name="favorite" /> <label for="fav-php">PHP</label> </div> ``` ![](https://cms.croffledev.kr/assets/bb69959f-d293-4900-94cc-0f0edde7f9d3) ### 2.3. HTML5 시멘틱 구조 태그 HTML5에서는 웹 문서의 구조를 더욱 명확하게 정의하기 위해 **시멘틱(Semantic)** 태그를 도입했다. 시멘틱은 '**의미의**', '**의미론적인**'이라는 뜻으로, 각 요소가 역할과 기능에 맞는 의미를 갖도록 영역을 구분한다. HTML5 시멘틱 구조는 다음과 같은 이유로 사용한다. - **소스만으로도 문서 내용 쉽게 이해:** 태그만 보고도 어느 부분이 제목이고, 메뉴이고, 실제 내용인지 쉽게 구분 - **편리한 검색:** 검색 엔진이 웹 페이지의 내용을 더 정확하게 파악하여 사용자에게 필요한 정보를 효율적으로 제공 - 예를 들어, `<header>`나 `<nav>` 부분은 검색하지 않고 `<section>`이나 `<article>` 태그 부분만 찾아서 검색이 가능해진다. - **뛰어난 웹 접근성:** 시각 장애인들이 사용하는 화면 판독기에서 시멘틱 태그를 통해 제목과 내용을 구별하여 사용자에게 정확한 내용을 전달할 수 있음 - **다양한 장치에 통일된 결과 제공:** 태그에 역할이 정해졌기 때문에 어떤 장치(데스크톱, 모바일 등)에서든 동일하게 문서를 해독/표기가 가능 #### 2.3.1. 주요 HTML5 시멘틱 태그 `<header>`: 웹 페이지의 헤더(제목, 로고 등) 부분 `<nav>`: 내비게이션(메뉴) 부분 `<aside>`: 사이드 바와 같이 본문 외의 부가적인 내용 `<section>`: 문서의 독립적인 섹션. 콘텐츠의 주된 내용을 포함 `<article>`: 독립적으로 배포되거나 재사용될 수 있는 콘텐츠 `<footer>`: 웹 페이지의 푸터(주소, 연락처, 저작권 등) 부분 ::prose-img-grid{columns="2"} ![시멘틱구조1](https://cms.croffledev.kr/assets/5cb06dbd-1c28-4afa-b7e6-e9a884b65ef0) ![시멘틱 구조2](https://cms.croffledev.kr/assets/32d68da0-67d0-48ba-ba95-68f283e04403) :: ## 3. CSS(Cascading Style Sheets; 계단식 스타일 시트) ::prose-img-grid{columns="2"} ![css 적용 전](https://cms.croffledev.kr/assets/6e34ec76-c27e-4a0a-a2fe-f2e5eb717b70) ![css 적용 후](https://cms.croffledev.kr/assets/6747e442-78a0-40ca-8c61-9b41bf02c99b) :: CSS 또한 웹 페이지의 기본 구성 요소 중 하나이다. `1.`에서 언급했던 것처럼, HTML은 정보를 나열하기만 하기 때문에, 이를 보기 쉽고, 가독성을 높이기 위해 CSS를 사용한다. ### 3.1. CSS, 모든 스타일의 시작 CSS는 이름처럼, 스타일이 위에서 아래로, 외부에서 내부로 적용되는 원리를 가진다. 이 때문에, CSS를 사용하면 체계적으로 웹 문서 전체의 디자인 통일성을 유지하고, 편리하게 관리할 수 있다. CSS를 적용하는 방법은 3가지가 있다. #### 3.1.1. 외부 스타일 시트(`.css` 파일) - 선택자(Selector): 스타일을 적용할 대상을 지정 (예: h1, .menu, #header) - 속성(Property) & 값(Value): 어떤 스타일을 어떻게 적용할지 정의 (예: color: red;) 가장 구체적으로 대상을 명시한 스타일(인라인 스타일)이 가장 높은 우선순위를 가지며, 그 뒤로 ID, 클래스, 태그 선택자 순으로 적용된다. ```css div#box.container > p { display: flex; flex-direction: column; /* ... */ } ``` ### 3.2. 박스 모델: 웹의 모든 요소는 '박스' CSS의 박스 모델을 이해하는 것은 레이아웃의 첫걸음이라고 한다. 웹 페이지의 모든 요소는 사각형의 '박스'로 이루어져 있기 때문이다. 상하좌우로 여백이나 테두리를 설정하고, 이를 기준으로 위치를 잡는다. > 마치 다양한 물건들을 박스에 담고, 차곡차곡 쌓아 정리하는 것과 같다. - Content: 콘텐츠가 표시되는 실제 영역 - Padding: 콘텐츠와 테두리(border) 사이의 내부 여백 - Border: 박스의 테두리 - Margin: 박스와 다른 요소 사이의 외부 여백 ![](https://cms.croffledev.kr/assets/87dc4914-3d93-4488-b667-7daf4ddcde0b) - display 속성은 이 박스가 화면에 어떻게 배치될지를 결정하는 중요한 속성이다. - 한 줄을 모두 차지하는 block, 콘텐츠 크기만큼만 차지하며 옆으로 배치되는 inline, 그리고 이 둘의 특징을 합친 inline-block의 차이를 이해하는 것이 중요합니다. ### 3.3. 현대적 레이아웃의 핵심: Flexbox 과거 float 등을 이용한 복잡한 레이아웃 방식의 시대를 끝내고, Flexbox(플렉서블 박스)를 통해 간결하고 강력한 1차원 레이아웃 시스템을 사용할 수 있게 되었다. Flexbox는 아이템들을 담는 **플렉스 컨테이너(부모 요소)**와 그 안의 **플렉스 아이템(자식 요소)**으로 구성된다. ![](https://cms.croffledev.kr/assets/2dd5215f-e119-47d4-b0e8-88f5558e4013) Flexbox를 사용하려면 먼저 부모 요소에 display: flex;를 선언해야 한다. 그 후, 아래와 같은 핵심 속성들로 아이템을 자유자재로 정렬할 수 있습니다. > flex-direction: 아이템이 쌓일 주축의 방향을 결정합니다. (row, column 등) > justify-content: 주축(main-axis) 방향으로 아이템을 정렬합니다. (예: flex-start, center, space-between) > align-items: 교차축(cross-axis) 방향으로 아이템을 정렬합니다. (예: stretch, center, flex-start) ### 3.4. 반응형 웹 PC, 태블릿, 모바일까지, 다양한 크기의 디바이스에서 웹사이트가 최적화된 모습으로 보여야 하는 것은 이제 선택이 아닌 필수이다. 다양한 웹 프레임워크와 CSS 프레임워크에서도 반응형 웹을 위한 기능을 제공하고 있고, 이는 세 가지 핵심 기술로 구현된다. #### 3.4.1. 뷰포트 (Viewport) - 모바일 기기에서 웹 페이지의 보이는 영역을 제어하는 기술 - HTML `<head>` 태그 안에 아래의 메타 태그를 추가하여, 기기의 화면 너비를 기준으로 페이지 너비를 설정하도록 브라우저에 알려주는 것이 반응형 웹의 시작 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" />  <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document ... ``` #### 3.4.2. 유동형 그리드 (Fluid Grid) - px 같은 고정 단위 대신 % 같은 상대 단위를 사용하여 레이아웃을 만드는 기술 - 이를 통해 브라우저 창 크기에 따라 요소의 너비가 유연하게 변함 - vw(뷰포트 너비), vh(뷰포트 높이) 같은 뷰포트 기준 단위 사용 시 글자 크기나 여백 등도 화면 크기에 비례하여 조절됨. #### 3.4.3. 미디어 쿼리 (Media Query) - 화면의 크기나 환경을 감지하여 특정 조건에서만 다른 CSS 스타일을 적용하게 하는 기술 - 예를 들어 '화면의 최소 너비가 768px일 때'와 같이 조건을 지정하여 태블릿이나 데스크톱 환경에 맞는 레이아웃을 별도로 정의할 수 있다.

BlueNyang's Devlog

풀스택 개발자 아카데미 (1) - HTML/CSS