웹 구조, HTTP, HTML, CSS

6장 1절에서는 객체지향을 배웠습니다.

클래스 = 설계도
객체 = 실제 대상
캡슐화 = 묶고 숨김
상속 = 물려받음
다형성 = 같은 명령, 다른 동작

6장 2절부터는 웹프로그래밍입니다.

이번 절의 핵심은 다음과 같습니다.

웹 = 클라이언트와 서버가 HTTP로 통신하는 구조
HTML = 웹페이지의 구조와 내용
CSS = 웹페이지의 디자인과 배치
폼 = 사용자가 서버로 데이터를 보내는 입력 양식

이번 절 내용은 웹프로그래밍 출제범위의 웹 클라이언트, 웹 서버, HTTP 요청/응답 메시지, HTML 기본 태그, 링크, 목록, 표, 이미지·오디오·비디오, 입력 양식 form, GET/POST, 문서 구조화 태그, CSS 기본 문법, 선택자, 스타일 적용 순서, 박스 모델, display, visibility, opacity, position, float, transition, transform, animation, 반응형 웹에 해당합니다.

이번 절의 큰 그림

이번 절에서 배울 순서는 다음과 같습니다.

웹이란 무엇인가
→ 클라이언트와 서버
→ HTTP 요청과 응답
→ URL
→ HTML 역할
→ HTML 기본 구조
→ 텍스트, 링크, 목록, 표
→ 이미지, 오디오, 비디오
→ form, input, select
→ GET과 POST
→ 문서 구조화 태그
→ CSS 역할
→ CSS 기본 문법
→ 선택자
→ 스타일 적용 우선순위
→ 박스 모델
→ display, visibility, opacity
→ position, z-index, float
→ 반응형 웹

이번 절에서는 웹페이지가 어떻게 만들어지고, 브라우저와 서버가 어떻게 대화하는지를 잡습니다.

웹 기본 구조

웹이란?

웹은 World Wide Web의 줄임말입니다.

쉽게 말하면: 인터넷 위에서 문서와 데이터를 주고받는 서비스

우리가 평소에 보는 웹사이트는 전부 웹입니다.

네이버
구글
유튜브
쇼핑몰
학교 홈페이지
블로그
온라인 강의 사이트

웹은 단순히 화면만 있는 것이 아닙니다.

웹은 기본적으로 다음 구조로 움직입니다.

클라이언트 → 요청 → 서버
클라이언트 ← 응답 ← 서버

클라이언트와 서버

웹에서 가장 중요한 두 역할은 클라이언트와 서버입니다.

클라이언트

클라이언트는 요청하는 쪽입니다.

보통 사용자의 웹 브라우저가 클라이언트입니다.

예

Chrome
Edge
Safari
Firefox

클라이언트가 하는 일

사용자가 주소를 입력합니다.
서버에 페이지를 요청합니다.
서버가 준 HTML, CSS, JavaScript를 해석합니다.
화면에 웹페이지를 보여줍니다.

서버

서버는 요청을 받고 응답하는 쪽입니다.

예를 들어 사용자가 어떤 사이트에 접속하면, 그 사이트의 서버가 HTML 문서나 데이터를 보내줍니다.

서버가 하는 일

클라이언트의 요청을 받습니다.
필요한 파일이나 데이터를 찾습니다.
응답 메시지를 보냅니다.

정리하면 다음과 같습니다.

구분	역할
클라이언트	요청하는 쪽, 보통 브라우저
서버	요청을 처리하고 응답하는 쪽

웹프로그래밍 범위에도 웹 구성요소로 웹 클라이언트와 웹 서버가 포함되어 있습니다.

웹 동작 예시

사용자가 브라우저에 어떤 주소를 입력한다고 가정하겠습니다.

www.example.com

그러면 대략 이런 일이 일어납니다.

1. 브라우저가 서버에게 페이지를 요청합니다.
2. 서버가 요청을 확인합니다.
3. 서버가 HTML 문서를 보냅니다.
4. 브라우저가 HTML을 해석합니다.
5. 필요한 CSS, 이미지, JavaScript를 추가로 요청합니다.
6. 브라우저가 화면을 완성합니다.

즉 웹페이지는 서버에서 한 번에 “완성된 화면”이 날아오는 것이 아닙니다.

브라우저가 HTML, CSS, JavaScript, 이미지 등을 받아서 직접 조립해 보여주는 것입니다.

HTTP와 URL

HTTP란?

HTTP는 HyperText Transfer Protocol의 줄임말입니다.

뜻은

웹에서 클라이언트와 서버가 데이터를 주고받는 약속

프로토콜은 약속이라는 뜻입니다.

HTTP는 이런 식으로 동작합니다.

클라이언트가 HTTP 요청을 보냄
서버가 HTTP 응답을 보냄

예

브라우저: index.html 주세요.
서버: 여기 있습니다.

웹프로그래밍 범위에도 웹 프로토콜로 HTTP 요청 메시지와 응답 메시지가 들어 있습니다.

HTTP 요청 메시지

요청 메시지는 클라이언트가 서버에게 보내는 메시지입니다.

예를 들어

GET /index.html HTTP/1.1
Host: example.com

이것은 이런 뜻입니다.

example.com 서버에게
/index.html 문서를 달라고 요청합니다.

요청 메시지에는 보통 이런 정보가 들어갑니다.

구성	의미
요청 방식	GET, POST 등
요청 대상	어떤 파일이나 경로를 원하는지
헤더	추가 정보
본문	서버로 보낼 데이터, 주로 POST에서 사용

HTTP 응답 메시지

응답 메시지는 서버가 클라이언트에게 보내는 메시지입니다.

예

HTTP/1.1 200 OK
Content-Type: text/html

<html>...</html>

이것은 이런 뜻입니다.

요청 성공.
HTML 문서를 보냅니다.

응답 메시지에는 상태 코드가 있습니다.

대표 상태 코드는 다음과 같습니다.

상태 코드	의미
200	성공
301/302	다른 주소로 이동
400	잘못된 요청
403	접근 금지
404	찾을 수 없음
500	서버 내부 오류

우리가 자주 보는 404 Not Found는 서버에 요청한 페이지가 없다는 뜻입니다.

GET과 POST

HTML 입력 양식에서 중요한 방식이 있습니다.

GET
POST

웹프로그래밍 범위에도 HTML 입력 양식의 작동 방식으로 GET 방식과 POST 방식이 포함됩니다.

GET

GET은 보통 데이터를 URL에 붙여서 보냅니다.

예

/search?keyword=computer

특징

주소창에 데이터가 보일 수 있습니다.
간단한 조회에 많이 씁니다.
북마크하기 쉽습니다.
민감한 정보 전송에는 적절하지 않습니다.

예

검색어
페이지 번호
카테고리 조회

POST

POST는 데이터를 요청 본문에 담아서 보냅니다.

특징

주소창에 데이터가 직접 보이지 않습니다.
로그인, 회원가입, 글쓰기처럼 데이터를 서버에 보낼 때 많이 씁니다.
GET보다 많은 데이터를 보내기에 적합합니다.

예

로그인 정보
게시글 작성 내용
회원가입 정보
파일 업로드

정리하면 다음과 같습니다.

구분	GET	POST
데이터 위치	URL 뒤	요청 본문
주소창 노출	보일 수 있음	직접 보이지 않음
주 용도	조회	생성, 수정, 전송
예	검색	로그인, 글쓰기

URL

URL은 웹 자원의 주소입니다.

예

https://www.example.com:443/path/page.html?keyword=web

구성은 대략 다음과 같습니다.

부분	의미
`https`	프로토콜
`www.example.com`	서버 주소, 도메인
`443`	포트 번호
`/path/page.html`	자원 경로
`?keyword=web`	쿼리 문자열

처음에는 이것만 기억하면 충분합니다.

URL = 웹에서 자원의 위치를 나타내는 주소

웹페이지를 이루는 3요소

웹페이지는 보통 세 가지로 구성됩니다.

HTML
CSS
JavaScript

요소	역할
HTML	구조와 내용
CSS	디자인과 배치
JavaScript	동작과 상호작용

비유하면

HTML = 뼈대
CSS = 옷과 꾸밈
JavaScript = 움직임

예를 들어 버튼 하나를 생각하자.

HTML

<button>로그인</button>

CSS

button {
    background-color: blue;
}

JavaScript

alert("로그인 시도");

이번 절에서는 HTML과 CSS가 중심입니다. JavaScript는 6장 3절에서 본격적으로 합니다.

HTML 기본

HTML이란?

HTML은 HyperText Markup Language의 줄임말입니다.

웹페이지의 구조와 내용을 만드는 언어입니다.

HTML은 프로그래밍 언어라기보다는 마크업 언어입니다.

마크업은 문서에 표시를 붙이는 것입니다.

예를 들어

<h1>제목</h1>
<p>문단입니다.</p>

여기서 <h1>, <p> 같은 것을 태그라고 합니다.

HTML의 역할

제목 표시
문단 표시
링크 만들기
이미지 넣기
표 만들기
입력 양식 만들기
문서 구조 나누기

웹프로그래밍 범위에도 HTML 기본 태그, 링크, 목록, 표, 멀티미디어 태그, 입력 양식, 문서 구조화 태그가 포함됩니다.

HTML 기본 구조

가장 기본적인 HTML 문서는 이렇게 생겼습니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>문서 제목</title>
</head>
<body>
    <h1>안녕하세요</h1>
    <p>첫 번째 웹페이지입니다.</p>
</body>
</html>

각 부분의 의미를 살펴보겠습니다.

태그	의미
`<!DOCTYPE html>`	HTML5 문서임을 선언
`<html>`	HTML 문서 전체
`<head>`	문서 정보
`<meta charset="UTF-8">`	문자 인코딩
`<title>`	브라우저 탭 제목
`<body>`	화면에 보이는 내용

핵심

head = 문서 정보
body = 실제 화면 내용

태그와 요소

HTML에서 태그는 보통 시작 태그와 종료 태그로 구성됩니다.

<p>문단입니다.</p>

부분	이름
`<p>`	시작 태그
`문단입니다.`	내용
`</p>`	종료 태그

전체를 요소라고 합니다.

요소 = 시작 태그 + 내용 + 종료 태그

하지만 종료 태그가 없는 태그도 있습니다.

예

<br>
<img src="cat.jpg" alt="고양이">
<input type="text">

HTML 주요 태그

제목과 문단 태그

제목 태그

제목은 h1부터 h6까지 있습니다.

<h1>가장 큰 제목</h1>
<h2>두 번째 제목</h2>
<h3>세 번째 제목</h3>

h1이 가장 중요하고 큽니다. h6으로 갈수록 작고 덜 중요한 제목입니다.

문단 태그

문단은 p를 씁니다.

<p>이것은 문단입니다.</p>

줄바꿈

줄바꿈은 br을 씁니다.

안녕<br>
반가워

텍스트 관련 태그

대표 텍스트 태그는 다음과 같습니다.

태그	의미
`<strong>`	중요한 텍스트, 보통 굵게
`<b>`	굵게
`<em>`	강조, 보통 기울임
`<i>`	기울임
`<span>`	인라인 영역 묶기
`<div>`	블록 영역 묶기

strong과 b는 화면상 비슷하게 보일 수 있지만 의미가 다릅니다.

strong = 의미상 중요
b = 단순히 굵게

HTML은 단순히 모양만이 아니라 문서의 의미도 중요합니다.

링크 태그

링크는 <a> 태그를 사용합니다.

<a href="https://www.example.com">이동하기</a>

여기서 href는 이동할 주소입니다.

부분	의미
`<a>`	링크 태그
`href`	이동할 주소
`이동하기`	화면에 보이는 글자

새 탭에서 열고 싶으면 target="_blank"를 쓸 수 있습니다.

<a href="https://www.example.com" target="_blank">새 탭에서 열기</a>

목록 태그

목록은 두 종류가 있습니다.

순서 없는 목록
순서 있는 목록

순서 없는 목록

ul과 li를 사용합니다.

<ul>
    <li>사과</li>
    <li>바나나</li>
    <li>포도</li>
</ul>

화면에는 점 목록처럼 보입니다.

순서 있는 목록

ol과 li를 사용합니다.

<ol>
    <li>로그인</li>
    <li>상품 선택</li>
    <li>결제</li>
</ol>

화면에는 번호가 붙습니다.

정리하면 다음과 같습니다.

태그	의미
`ul`	순서 없는 목록
`ol`	순서 있는 목록
`li`	목록 항목

표 태그

표는 table을 사용합니다.

<table>
    <tr>
        <th>이름</th>
        <th>점수</th>
    </tr>
    <tr>
        <td>Kim</td>
        <td>90</td>
    </tr>
    <tr>
        <td>Lee</td>
        <td>80</td>
    </tr>
</table>

태그 의미는 다음과 같습니다.

태그	의미
`<table>`	표 전체
`<tr>`	행
`<th>`	제목 셀
`<td>`	일반 셀

시험에서는 tr, th, td를 헷갈릴 수 있습니다.

tr = table row, 행
th = table header, 제목 칸
td = table data, 데이터 칸

이미지 태그

이미지는 <img> 태그를 씁니다.

<img src="cat.jpg" alt="고양이 사진">

img는 종료 태그가 없습니다.

속성은 다음과 같습니다.

속성	의미
`src`	이미지 파일 경로
`alt`	이미지가 안 보일 때 대체 텍스트
`width`	너비
`height`	높이

예

<img src="cat.jpg" alt="고양이" width="300">

alt는 중요합니다.

이미지 로딩 실패 시 표시
스크린 리더 접근성 지원
검색엔진 이해에 도움

오디오와 비디오

HTML5에서는 오디오와 비디오 태그를 사용할 수 있습니다.

오디오

<audio controls>
    <source src="music.mp3" type="audio/mpeg">
</audio>

비디오

<video controls width="400">
    <source src="movie.mp4" type="video/mp4">
</video>

controls를 붙이면 재생, 정지 같은 조작 버튼이 보입니다.

웹프로그래밍 범위에도 HTML 멀티미디어 태그로 이미지, 오디오, 비디오, 객체 포함이 들어 있습니다.

HTML 입력 양식과 문서 구조

입력 양식 form

웹에서 사용자가 데이터를 입력하는 부분을 폼이라고 합니다.

예

로그인 창
회원가입 양식
검색창
게시글 작성
설문조사
주문서

폼은 <form> 태그를 사용합니다.

<form action="/login" method="post">
    <input type="text" name="id">
    <input type="password" name="pw">
    <button type="submit">로그인</button>
</form>

속성은 다음과 같습니다.

속성	의미
`action`	데이터를 보낼 서버 주소
`method`	GET 또는 POST 방식

input 태그

input은 사용자 입력을 받는 태그입니다.

예

<input type="text">

대표 type는 다음과 같습니다.

type	의미
`text`	한 줄 텍스트
`password`	비밀번호
`radio`	여러 개 중 하나 선택
`checkbox`	여러 개 선택 가능
`file`	파일 선택
`submit`	제출 버튼
`reset`	초기화
`email`	이메일 입력
`number`	숫자 입력
`date`	날짜 입력

예

<input type="checkbox" name="agree"> 동의합니다

select와 option

드롭다운 목록을 만들 때는 select와 option을 씁니다.

<select name="food">
    <option>한식</option>
    <option>중식</option>
    <option>일식</option>
</select>

여기서 선택 항목 하나하나는 option 태그입니다.

웹프로그래밍 예시문제에서도 <select> 안의 각 선택 항목 태그를 묻고, 정답은 option입니다.

정리

select = 선택 상자
option = 선택 항목

textarea

여러 줄 입력을 받을 때는 textarea를 씁니다.

<textarea name="content" rows="5" cols="40"></textarea>

예

게시글 내용
문의사항
댓글
자기소개

같은 긴 텍스트 입력에 사용됩니다.

label

label은 입력 요소의 설명을 붙일 때 사용합니다.

<label for="userId">아이디</label>
<input type="text" id="userId">

for와 id를 연결하면, 사용자가 라벨을 클릭해도 해당 입력칸이 선택됩니다.

사용성 향상
접근성 향상

폼에서는 label을 잘 쓰는 것이 좋습니다.

HTML 문서 구조화 태그

HTML5에서는 문서를 의미 있는 영역으로 나누는 태그가 있습니다.

웹프로그래밍 범위에도 문서 구조화 태그로 header, nav, section 등이 포함됩니다.

대표 태그는 다음과 같습니다.

태그	의미
`<header>`	머리말, 상단 영역
`<nav>`	메뉴, 내비게이션
`<section>`	문서의 구역
`<article>`	독립적인 글, 기사
`<aside>`	사이드 영역
`<footer>`	바닥글
`<main>`	주요 내용

예

<header>
    <h1>사이트 제목</h1>
</header>

<nav>
    <a href="/">홈</a>
    <a href="/board">게시판</a>
</nav>

<main>
    <section>
        <h2>공지사항</h2>
        <p>내용입니다.</p>
    </section>
</main>

<footer>
    <p>Copyright</p>
</footer>

이런 태그들은 화면 모양보다 문서 의미를 나타내는 데 중요합니다.

div와 span

div와 span은 영역을 묶을 때 많이 씁니다.

div

블록 단위 영역을 묶습니다.

<div class="box">
    <h2>제목</h2>
    <p>내용</p>
</div>

span

문장 안의 일부를 묶습니다.

<p>중요한 단어는 <span class="red">빨간색</span>으로 표시합니다.</p>

차이는 다음과 같습니다.

태그	특징
`div`	블록 요소, 큰 영역 묶기
`span`	인라인 요소, 문장 일부 묶기

HTML 핵심 정리

HTML은 웹페이지의 구조와 내용을 만듭니다.

꼭 알아야 할 태그는 다음과 같습니다.

분야	태그
기본 구조	`html`, `head`, `body`, `title`
제목/문단	`h1`~`h6`, `p`, `br`
링크	`a`
목록	`ul`, `ol`, `li`
표	`table`, `tr`, `th`, `td`
이미지	`img`
멀티미디어	`audio`, `video`
입력 양식	`form`, `input`, `select`, `option`, `textarea`, `button`
구조화	`header`, `nav`, `section`, `article`, `footer`
영역	`div`, `span`

CSS 기본

CSS란?

CSS는 Cascading Style Sheets의 줄임말입니다.

HTML이 구조와 내용을 만든다면, CSS는 디자인을 담당합니다.

CSS로 할 수 있는 것

글자 색 바꾸기
배경색 지정하기
크기 조절하기
여백 설정하기
테두리 만들기
배치 정하기
애니메이션 넣기
반응형 디자인 만들기

예

h1 {
    color: red;
    font-size: 32px;
}

뜻

h1 태그의 글자색을 빨간색으로 하고,
글자 크기를 32px로 합니다.

웹프로그래밍 범위에도 CSS 기본 문법, 선택자, 스타일 적용 순서, 크기·색상 단위, display, visibility, opacity, 박스 속성, 테두리, 배경, 폰트, position, z-index, overflow, float, transition, transform, animation, 반응형 웹이 포함됩니다.

CSS 기본 문법

CSS는 보통 이렇게 씁니다.

선택자 {
    속성: 값;
    속성: 값;
}

예

p {
    color: blue;
    font-size: 16px;
}

여기서는 다음과 같습니다.

부분	의미
`p`	선택자
`color`	속성
`blue`	값
`font-size`	속성
`16px`	값

즉

선택자 = 누구에게 적용할지
속성 = 무엇을 바꿀지
값 = 어떻게 바꿀지

CSS 적용 방법 3가지

CSS를 HTML에 적용하는 방법은 세 가지입니다.

인라인 스타일
내부 스타일
외부 스타일

인라인 스타일

태그 안에 직접 씁니다.

<p style="color: red;">문장</p>

장점

간단히 바로 적용 가능

단점

HTML과 CSS가 섞여서 관리가 어려움

내부 스타일

HTML 문서의 <style> 태그 안에 씁니다.

<head>
    <style>
        p {
            color: red;
        }
    </style>
</head>

외부 스타일

CSS 파일을 따로 만들고 연결합니다.

<link rel="stylesheet" href="style.css">

style.css:

p {
    color: red;
}

실제 웹 개발에서는 외부 스타일을 많이 사용합니다.

HTML = 구조
CSS = 별도 파일에서 디자인

CSS 선택자

선택자란?

선택자는 어떤 HTML 요소에 스타일을 적용할지 정합니다.

대표 선택자는 다음과 같습니다.

선택자	예	의미
전체 선택자	`*`	모든 요소
태그 선택자	`p`	모든 p 태그
아이디 선택자	`#header`	id가 header인 요소
클래스 선택자	`.box`	class가 box인 요소
자식 선택자	`div > p`	div의 바로 아래 p
후손 선택자	`div p`	div 안의 모든 p
가상 클래스	`a:hover`	특정 상태

태그 선택자

태그 이름으로 선택합니다.

p {
    color: blue;
}

모든 <p> 태그에 적용됩니다.

<p>문단 1</p>
<p>문단 2</p>

둘 다 파란색이 됩니다.

아이디 선택자

아이디 선택자는 #을 사용합니다.

HTML

<div id="header">상단 영역</div>

CSS

#header {
    width: 600px;
    margin: 0 auto;
}

id="header"인 요소에 적용됩니다.

웹프로그래밍 예시문제에서도 #header { width: 600px; margin: 0 auto; }에 사용된 선택자 종류를 묻고, 정답은 아이디 선택자입니다.

아이디는 보통 한 문서 안에서 하나의 요소를 식별할 때 사용합니다.

#header = id가 header인 요소

클래스 선택자

클래스 선택자는 .을 사용합니다.

HTML

<p class="notice">공지사항입니다.</p>
<p class="notice">중요합니다.</p>

CSS

.notice {
    color: red;
}

class가 notice인 요소들에 적용됩니다.

아이디와 클래스 차이는 다음과 같습니다.

구분	id	class
기호	`#`	`.`
용도	하나의 고유 요소	여러 요소에 공통 적용
예	`#header`	`.notice`

짧게

id = 하나를 콕 집음
class = 여러 개에 붙이는 이름표

전체 선택자

전체 선택자는 *입니다.

* {
    margin: 0;
    padding: 0;
}

모든 요소에 적용됩니다.

초기 여백을 없앨 때 자주 쓰입니다.

후손 선택자와 자식 선택자

후손 선택자

공백을 사용합니다.

div p {
    color: blue;
}

뜻

div 안에 있는 모든 p

중간에 다른 태그가 있어도 적용됩니다.

자식 선택자

>를 사용합니다.

div > p {
    color: red;
}

뜻

div의 바로 아래 자식 p

중간에 다른 태그를 거치면 적용되지 않습니다.

정리하면 다음과 같습니다.

선택자	의미
`div p`	div 안의 모든 p
`div > p`	div의 바로 아래 p

가상 클래스 선택자

가상 클래스는 특정 상태일 때 적용합니다.

대표 예

a:hover {
    color: red;
}

hover는 마우스 커서가 올라간 상태입니다.

웹프로그래밍 예시문제에서도 h1 태그 위로 마우스 커서가 올라갈 때 color: red를 적용하는 빈칸으로 hover가 정답입니다.

예

h1:hover {
    color: red;
}

뜻

h1 위에 마우스를 올리면 글자색이 빨간색이 됩니다.

다른 가상 클래스는 다음과 같습니다.

선택자	의미
`:hover`	마우스를 올렸을 때
`:active`	클릭 중일 때
`:focus`	입력칸에 포커스가 있을 때
`:enabled`	사용 가능한 입력 요소
`:disabled`	비활성화된 입력 요소

CSS 우선순위

여러 CSS가 같은 요소에 적용될 때 어떤 것이 이길까?

우선순위가 필요합니다.

대략적인 우선순위는 다음과 같습니다.

인라인 스타일 > 아이디 선택자 > 클래스 선택자 > 태그 선택자 > 전체 선택자

예

<p id="title" class="red" style="color: green;">문장</p>

CSS

p {
    color: blue;
}

.red {
    color: red;
}

#title {
    color: purple;
}

여기서 최종 색은?

green

왜냐하면 인라인 스타일이 가장 강하기 때문입니다.

정리하면 다음과 같습니다.

선택자	예	우선순위
인라인	`style=""`	가장 강함
아이디	`#title`	강함
클래스	`.red`	중간
태그	`p`	약함
전체	`*`	가장 약함

캐스케이딩

CSS의 C는 Cascading입니다.

여러 스타일 규칙이 겹칠 때 다음 기준으로 최종 스타일이 결정됩니다.

중요도
우선순위
작성 순서
상속

같은 우선순위라면 나중에 작성한 스타일이 이깁니다.

예

p {
    color: blue;
}

p {
    color: red;
}

최종 색

red

나중에 나온 규칙이 적용됩니다.

CSS 단위

CSS에서 크기를 지정할 때 여러 단위를 씁니다.

단위	의미
`px`	픽셀, 고정 크기
`%`	부모 요소 기준 비율
`em`	현재 요소 글자 크기 기준
`rem`	루트 요소 글자 크기 기준
`vw`	화면 너비 기준
`vh`	화면 높이 기준

예

.box {
    width: 50%;
    font-size: 16px;
}

처음에는 px와 %부터 확실히 알면 됩니다.

px = 고정 크기
% = 비율

색상 표현

CSS에서 색상은 여러 방식으로 표현할 수 있습니다.

color: red;
color: #ff0000;
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.5);

방식	예
색 이름	`red`
16진수	`#ff0000`
RGB	`rgb(255, 0, 0)`
RGBA	`rgba(255, 0, 0, 0.5)`

rgba의 마지막 값은 투명도입니다.

0 = 완전 투명
1 = 완전 불투명

CSS 레이아웃

박스 모델

CSS에서 모든 HTML 요소는 박스처럼 취급됩니다.

박스 모델은 네 영역으로 구성됩니다.

content
padding
border
margin

안쪽부터 보면

content → padding → border → margin

영역	의미
content	실제 내용
padding	내용과 테두리 사이 여백
border	테두리
margin	요소 바깥 여백

웹프로그래밍 범위에도 CSS 박스 속성으로 width, height, margin, padding 등이 포함됩니다.

박스 모델 예시

.box {
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 5px solid black;
    margin: 10px;
}

뜻

내용 영역 너비 = 200px
내용 영역 높이 = 100px
안쪽 여백 = 20px
테두리 = 5px
바깥 여백 = 10px

처음에 헷갈리는 부분은 padding과 margin입니다.

padding = 안쪽 여백
margin = 바깥 여백

box-sizing

기본적으로 CSS의 width는 content 영역의 너비입니다.

하지만 실제 박스 크기에는 padding과 border가 더해질 수 있습니다.

그래서 많이 쓰는 속성이 있습니다.

box-sizing: border-box;

이렇게 하면 width 안에 content, padding, border를 포함해서 계산합니다.

예

* {
    box-sizing: border-box;
}

실제 웹 레이아웃에서는 이 설정을 자주 사용합니다.

display 속성

display는 요소가 화면에서 어떻게 배치될지 정합니다.

대표 값은 다음과 같습니다.

값	의미
`block`	한 줄 전체를 차지
`inline`	내용 크기만 차지, 줄 안에 배치
`inline-block`	inline처럼 배치되지만 크기 지정 가능
`none`	화면에서 사라지고 공간도 차지하지 않음
`flex`	플렉스 레이아웃
`grid`	그리드 레이아웃

예

.box {
    display: block;
}

block과 inline

block 요소

block 요소는 보통 한 줄 전체를 차지합니다.

예

<div>
<p>
<h1>
<section>

특징

새 줄에서 시작
width, height 적용 쉬움

inline 요소

inline 요소는 문장 흐름 안에 들어갑니다.

예

<span>
<a>
<strong>
<em>

특징

줄 안에서 이어짐
기본적으로 width, height 적용이 제한적

정리하면 다음과 같습니다.

구분	block	inline
줄 차지	한 줄 전체	내용만큼
새 줄 시작	보통 yes	no
예	`div`, `p`	`span`, `a`

웹프로그래밍 범위에도 CSS 박스모델과 레이아웃에서 블록 요소와 인라인 요소가 포함됩니다.

visibility와 opacity

화면에서 보이것이 하거나 숨기는 속성이 있습니다.

display: none

.box {
    display: none;
}

요소가 화면에서 사라지고 공간도 차지하지 않습니다.

visibility: hidden

.box {
    visibility: hidden;
}

요소가 보이지 않지만 공간은 남아 있습니다.

opacity

.box {
    opacity: 0.5;
}

투명도를 조절합니다.

opacity: 1 = 완전 보임
opacity: 0 = 완전 투명

정리하면 다음과 같습니다.

속성	보임?	공간 차지?
`display: none`	안 보임	안 차지
`visibility: hidden`	안 보임	차지
`opacity: 0`	투명	차지

웹프로그래밍 범위에도 CSS 가시 속성으로 display, visibility, opacity가 포함됩니다.

position 속성

position은 요소의 위치 배치 방식을 정합니다.

대표 값은 다음과 같습니다.

값	의미
`static`	기본 위치
`relative`	원래 위치를 기준으로 이동
`absolute`	기준이 되는 조상 요소를 기준으로 배치
`fixed`	브라우저 화면을 기준으로 고정
`sticky`	스크롤 위치에 따라 고정처럼 동작

예

.box {
    position: relative;
    left: 20px;
    top: 10px;
}

뜻

원래 위치에서 오른쪽으로 20px, 아래로 10px 이동

absolute와 fixed

absolute

.box {
    position: absolute;
    top: 0;
    left: 0;
}

가장 가까운 위치 기준 조상 요소를 기준으로 배치됩니다.

fixed

.menu {
    position: fixed;
    top: 0;
}

브라우저 화면 기준으로 고정됩니다.

예

스크롤해도 상단 메뉴가 고정됨

z-index

z-index는 요소가 겹칠 때 앞뒤 순서를 정합니다.

.box1 {
    position: absolute;
    z-index: 1;
}

.box2 {
    position: absolute;
    z-index: 10;
}

보통 z-index 값이 클수록 앞에 보입니다.

주의

z-index는 position이 static이 아닌 요소에서 제대로 작동하는 경우가 많습니다.

웹프로그래밍 범위에도 위치 속성으로 position, z-index, overflow 등이 포함됩니다.

overflow

overflow는 내용이 박스 크기를 넘을 때 어떻게 처리할지 정합니다.

.box {
    width: 200px;
    height: 100px;
    overflow: hidden;
}

대표 값은 다음과 같습니다.

값	의미
`visible`	넘친 내용이 보임
`hidden`	넘친 내용 숨김
`scroll`	스크롤 표시
`auto`	필요할 때만 스크롤

float

float는 요소를 왼쪽이나 오른쪽으로 띄워 배치하는 속성입니다.

.img {
    float: left;
}

예전에는 레이아웃에 많이 사용했지만, 요즘은 flex나 grid를 더 많이 씁니다.

그래도 시험 범위에는 float가 들어 있으므로 개념은 알아야 합니다.

float = 요소를 왼쪽 또는 오른쪽으로 띄워 주변 내용이 감싸게 함

flex 레이아웃 맛보기

반응형 웹과 레이아웃에서 많이 쓰는 것이 flex다.

.container {
    display: flex;
}

자식 요소들이 가로 또는 세로로 정렬됩니다.

예

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

의미

가로 중앙 정렬
세로 중앙 정렬

처음에는 이렇게 기억하면 충분합니다.

flex = 요소들을 한 줄 또는 한 방향으로 쉽게 정렬하는 레이아웃 방식

CSS 전환 transition

전환은 속성이 바뀔 때 부드럽게 변화하게 합니다.

button {
    background-color: blue;
    transition: background-color 0.5s;
}

button:hover {
    background-color: red;
}

마우스를 올리면 배경색이 바로 바뀌지 않고 0.5초 동안 부드럽게 변합니다.

웹프로그래밍 범위에도 CSS 애니메이션과 기타 효과로 transition, transform, animation이 포함됩니다.

transform

transform은 요소를 변형합니다.

예

.box {
    transform: rotate(45deg);
}

대표 기능은 다음과 같습니다.

함수	의미
`translate()`	이동
`scale()`	크기 변경
`rotate()`	회전
`skew()`	기울이기

예

.box:hover {
    transform: scale(1.2);
}

마우스를 올리면 박스가 커집니다.

animation

애니메이션은 여러 단계의 변화를 지정합니다.

@keyframes move {
    from {
        left: 0;
    }
    to {
        left: 100px;
    }
}

.box {
    position: relative;
    animation: move 2s infinite;
}

뜻

box가 2초 동안 left 0에서 100px까지 이동하고 반복합니다.

transition은 보통 상태 변화에 반응합니다.

animation은 정해진 keyframes에 따라 자동으로 움직일 수 있습니다.

반응형 웹

반응형 웹은 화면 크기에 따라 레이아웃이 바뀌는 웹입니다.

예

PC 화면에서는 3단 레이아웃
태블릿에서는 2단 레이아웃
스마트폰에서는 1단 레이아웃

반응형 웹에서 중요한 것은 미디어 쿼리입니다.

@media (max-width: 600px) {
    .container {
        flex-direction: column;
    }
}

뜻

화면 너비가 600px 이하일 때
container의 방향을 세로로 바꿉니다.

웹프로그래밍 범위에도 반응형 웹 작성하기가 포함되어 있습니다.

예제와 접근성

HTML과 CSS 연결 예제

간단한 카드 UI를 만들어 보겠습니다.

HTML

<div class="card">
    <h2>상품명</h2>
    <p>가격: 10,000원</p>
    <button>구매하기</button>
</div>

CSS

.card {
    width: 300px;
    padding: 20px;
    border: 1px solid #cccccc;
    border-radius: 10px;
    margin: 20px;
}

.card h2 {
    font-size: 24px;
}

.card button {
    padding: 10px;
}

.card button:hover {
    background-color: black;
    color: white;
}

분석은 다음과 같습니다.

코드	의미
`.card`	class가 card인 요소 선택
`padding`	안쪽 여백
`border`	테두리
`border-radius`	둥근 모서리
`.card h2`	card 안의 h2
`button:hover`	버튼 위에 마우스 올렸을 때

HTML form 전체 예제

<form action="/signup" method="post">
    <label for="userId">아이디</label>
    <input type="text" id="userId" name="userId">

    <label for="password">비밀번호</label>
    <input type="password" id="password" name="password">

    <label for="food">좋아하는 음식</label>
    <select id="food" name="food">
        <option>한식</option>
        <option>중식</option>
        <option>일식</option>
    </select>

    <button type="submit">가입</button>
</form>

핵심

form = 입력 양식 전체
input = 입력 칸
select = 선택 상자
option = 선택 항목
button = 버튼
method="post" = 데이터를 요청 본문으로 전송

시험에서 select 안의 항목 태그는 반드시 option이라고 기억해 둡니다.

CSS 선택자 예제 정리

* {
    box-sizing: border-box;
}

p {
    color: blue;
}

.notice {
    color: red;
}

#header {
    width: 600px;
}

h1:hover {
    color: red;
}

선택자	종류
`*`	전체 선택자
`p`	태그 선택자
`.notice`	클래스 선택자
`#header`	아이디 선택자
`h1:hover`	가상 클래스 선택자

시험 예시와 직접 연결되는 것은

#header { width: 600px; margin: 0 auto; }

이것은 아이디 선택자입니다.

h1:hover { color: red; }

여기서 hover는 마우스를 올렸을 때입니다.

웹 접근성 맛보기

웹페이지는 모든 사용자가 이용할 수 있어야 합니다.

접근성을 높이는 예

<img src="cat.jpg" alt="고양이 사진">
<label for="email">이메일</label>
<input id="email" type="email">

중요한 습관

이미지에는 alt 작성
입력칸에는 label 연결
제목 태그 h1~h6를 의미 있게 사용
색만으로 정보 전달하지 않기

시험 중심은 아니지만, 실전 웹에서는 매우 중요합니다.

자주 혼동되는 출제 포인트

혼동 포인트 1. 클라이언트와 서버

클라이언트 = 요청하는 쪽, 보통 브라우저
서버 = 요청을 처리하고 응답하는 쪽

혼동 포인트 2. HTTP는 요청과 응답 구조입니다

클라이언트 → 요청
서버 → 응답

혼동 포인트 3. HTML, CSS, JavaScript 역할

HTML = 구조와 내용
CSS = 디자인과 배치
JavaScript = 동작

혼동 포인트 4. head와 body

head = 문서 정보
body = 실제 화면 내용

혼동 포인트 5. select 안의 선택 항목은 option

<select>
    <option>한식</option>
</select>

웹프로그래밍 예시문제의 정답도 option입니다.

혼동 포인트 6. 아이디 선택자는 `#`

#header {
    width: 600px;
}

이것은 아이디 선택자입니다.

혼동 포인트 7. 클래스 선택자는 `.`

.notice {
    color: red;
}

이것은 클래스 선택자입니다.

혼동 포인트 8. hover는 마우스를 올렸을 때

h1:hover {
    color: red;
}

웹프로그래밍 예시문제에서도 정답은 hover입니다.

혼동 포인트 9. padding과 margin

padding = 안쪽 여백
margin = 바깥 여백

혼동 포인트 10. display none과 visibility hidden

display: none = 안 보이고 공간도 사라짐
visibility: hidden = 안 보이지만 공간은 남음

혼동 포인트 11. GET과 POST

GET = URL에 데이터가 보일 수 있음, 조회 중심
POST = 요청 본문에 데이터 전송, 로그인·글쓰기 중심

혼동 포인트 12. div와 span

div = 블록 영역
span = 인라인 영역

이번 절의 핵심 정리

웹 기본 구조

클라이언트 → 요청 → 서버
클라이언트 ← 응답 ← 서버

HTTP

웹에서 클라이언트와 서버가 데이터를 주고받는 약속

GET과 POST

GET = URL에 데이터 포함 가능, 조회 중심
POST = 본문에 데이터 포함, 전송·생성 중심

HTML

웹페이지의 구조와 내용을 만드는 마크업 언어

HTML 기본 구조

<!DOCTYPE html>
<html>
<head>
    <title>제목</title>
</head>
<body>
    화면 내용
</body>
</html>

핵심 HTML 태그

h1~h6 = 제목
p = 문단
a = 링크
ul, ol, li = 목록
table, tr, th, td = 표
img = 이미지
form = 입력 양식
input = 입력 요소
select = 선택 상자
option = 선택 항목
header, nav, section, article, footer = 구조화 태그

CSS

웹페이지의 디자인과 배치를 담당

CSS 기본 문법

선택자 {
    속성: 값;
}

선택자

* = 전체 선택자
p = 태그 선택자
#header = 아이디 선택자
.notice = 클래스 선택자
h1:hover = 가상 클래스 선택자

박스 모델

content
padding
border
margin

display

block
inline
inline-block
none
flex
grid

position

static
relative
absolute
fixed
sticky

반응형 웹

화면 크기에 따라 레이아웃이 바뀌는 웹
미디어 쿼리 사용

핵심 한 문장

이번 절의 핵심을 한 문장으로 정리하면 다음과 같습니다.

웹은 클라이언트와 서버가 HTTP 요청과 응답으로 통신하는 구조이며, HTML은 웹페이지의 내용과 구조를 만들고, CSS는 선택자와 박스 모델, 레이아웃 속성을 이용해 그 구조를 보기 좋게 꾸미고 배치합니다.

더 짧게

웹 = 요청과 응답
HTML = 구조
CSS = 디자인
form = 입력
GET/POST = 전송 방식

확인 문제

문제 1

웹에서 요청을 보내는 쪽으로, 보통 브라우저에 해당하는 것은?

① 서버 ② 클라이언트 ③ 라우터 ④ 데이터베이스

문제 2

웹에서 클라이언트와 서버가 데이터를 주고받는 약속은?

① HTML ② CSS ③ HTTP ④ JVM

문제 3

HTML의 역할로 가장 알맞은 것은?

① 웹페이지의 구조와 내용을 만듭니다 ② CPU 스케줄링을 수행합니다 ③ 데이터베이스를 백업합니다 ④ 메모리 페이지를 교체합니다

문제 4

CSS의 역할로 가장 알맞은 것은?

① 웹페이지의 디자인과 배치를 담당합니다 ② 프로세스를 생성합니다 ③ 2진수를 10진수로 변환합니다 ④ 하드디스크를 포맷합니다

문제 5

HTML 문서에서 실제 화면에 보이는 내용이 들어가는 영역은?

① <head> ② <body> ③ <title> ④ <meta>

문제 6

링크를 만들 때 사용하는 태그는?

① <a> ② <p> ③ <br> ④ <table>

문제 7

순서 없는 목록을 만들 때 사용하는 태그 조합은?

① <ol>과 <li> ② <ul>과 <li> ③ <table>과 <td> ④ <form>과 <option>

문제 8

표의 행을 나타내는 태그는?

① <td> ② <th> ③ <tr> ④ <table-row>

문제 9

이미지를 넣을 때 사용하는 태그는?

① <image> ② <img> ③ <picture-only> ④ <src>

문제 10

HTML 입력 양식 전체를 감싸는 태그는?

① <form> ② <input> ③ <select> ④ <option>

문제 11

다음 빈칸에 들어갈 태그로 알맞은 것은?

<select>
    <(   )>한식</(   )>
    <(   )>중식</(   )>
</select>

① li ② td ③ item ④ option

문제 12

GET 방식의 특징으로 알맞은 것은?

① 데이터가 URL에 보일 수 있습니다 ② 반드시 파일 업로드에만 사용합니다 ③ 요청 본문만 사용합니다 ④ CSS 선택자입니다

문제 13

CSS 기본 문법으로 알맞은 것은?

① 선택자 { 속성: 값; } ② 속성 = 선택자 = 값 ③ 선택자 < 속성 > 값 ④ 값 { 선택자: 속성; }

문제 14

다음 CSS에서 사용된 선택자는?

#header {
    width: 600px;
}

① 태그 선택자 ② 아이디 선택자 ③ 클래스 선택자 ④ 전체 선택자

문제 15

클래스 선택자에 사용하는 기호는?

① # ② . ③ * ④ @

문제 16

마우스를 올렸을 때 스타일을 적용하는 가상 클래스는?

① active ② hover ③ focus ④ enabled

문제 17

박스 모델에서 내용과 테두리 사이의 안쪽 여백은?

① margin ② padding ③ border ④ position

문제 18

박스 모델에서 요소 바깥쪽 여백은?

① margin ② padding ③ content ④ opacity

문제 19

요소를 보이지 않게 하고 공간도 차지하지 않게 하는 CSS는?

① visibility: hidden ② display: none ③ opacity: 1 ④ position: static

문제 20

화면 크기에 따라 레이아웃이 바뀌는 웹을 무엇이라고 하는가?

① 정적 메모리 ② 반응형 웹 ③ 교착상태 ④ 후위표기식

정답과 해설은 절별 확인문제 정답해설에서 확인합니다.

다음 6장 3절은 JavaScript, DOM, BOM, 이벤트입니다. 6장 2절이 “웹페이지의 구조와 디자인”이었다면, 6장 3절은 “웹페이지가 사용자의 클릭과 입력에 반응하게 만드는 동작”을 배웁니다.

목차