[15일차] 웹 개념, HTML, CSS

[15일차] 웹 개념, HTML, CSS

2026. 6. 10. 16:33ㆍKDT/4. 웹

1. 웹 Web

인터넷을 통해 정보를 보고, 읽고, 상호작용할 수 있게 해주는 서비스
HTML로 만들어진 문서(웹 페이지)를 브라우저(크롬, 사파리 등)가 읽어서 화면에 보여주는 방식으로 작동
웹은 인터넷 위에서 돌아가는 서비스 중 하나로, 우리가 주소창에 URL을 입력하면 HTTP 같은 프로토콜을 통해 서버에 요청하고, 그 결과를 받아와서 보여주는 구조

1. 웹의 작동 방식

사용자가 웹 브라우저에 주소(URL) 입력 (https://www.example/com)
DNS 서버가 주소를 IP 주소로 변경
브라우저가 서버에 요청 전송 (HTTP 요청)
1. 이제 브라우저는 해당 IP 주소를 가진 서버에게 "웹 페이지 보여줘!" 라는 메시지를 전송
2. 이 메시지는 HTTP 요청(Request) 이라고 함
3. 요청은 웹서버에 도착
4. HTTP의 Port번호 : 80
서버가 요청을 받고, 웹 페이지 파일을 응답 (HTTP 응답)
- 서버는 요청을 받으면, 내부에 저장된 HTML, CSS, JavaScript 등의 파일을 찾아서 브라우저에게 전송
  (HTML: 구조 / CSS: 디자인 / JS: 동작 이 세 가지를 함께 전송)
- 이걸 HTTP 응답(Response) 이라고 함
브라우저가 파일을 해석해서 화면에 띄움
- 브라우저는 서버로부터 받은 HTML, CSS, JS 파일을 읽고 해석해서 웹페이지처럼 화면에 그려줌
- 사용자는 웹사이트를 눈으로 보고, 클릭하고, 입력할 수 있는 상태가 됨

2. DNS (Domain Name System)

우리가 웹사이트 주소를 입력할 때 사용하는 도메인 이름(예: www.example.com)을
컴퓨터가 이해할 수 있는 IP 주소(예: 93.184.216.34)로 바꿔주는 시스템

3. Client와 Server (C/S)

서버(Server)와 클라이언트(Client)는 인터넷에서 정보를 주고받는 관계를 설명하는 기본 개념
클라이언트 : 정보를 요청하는 쪽 (ex. 우리가 사용하는 웹 브라우저, 스마트폰 앱)
서버 : 요청을 받아 정보나 서비스를 제공하는 쪽 (ex. 웹사이트의 본체나 데이터가 저장된 컴퓨터 (s/w or h/w)

4. 최초의 웹 사이트

1991년, 스위스에 있는 CERN(유럽 입자 물리 연구소)에서
팀 버너스리(Tim Berners-Lee)라는 과학자에 의해 만들어 짐
개설 시기: 1991년 8월 6일 주소(URL): http://info.cern.ch/

2. 웹 서비스

인터넷을 통해 클라이언트(사용자)와 서버 간에 데이터를 주고받으며 기능이나 정보를 제공하는 소프트웨어 시스템
사용자는 웹 브라우저나 애플리케이션을 통해 웹 서버에 요청을 보내고,
서버는 요청에 맞는 데이터를 처리하여 결과를 응답
웹 서비스는 HTML 페이지 제공, 파일 업로드, API 서비스 등 다양한 형태로 제공되며, HTTP 프로토콜을 기반으로 작동

1. 파이썬의 웹 서비스란?

파이썬에서 웹 서비스를 개발한다는 것
= 파이썬 코드로 사용자의 요청(예: 게시글 보기, 로그인 시도 등)을 처리하는 웹 애플리케이션을 만들고, 이를 웹을 통해 사용할 수 있도록 서버를 실행하는 것을 의미
파이썬으로 웹 서비스를 만들 때 가장 많이 사용하는 도구 = 웹 프레임워크
1. Flask (플라스크) – 가볍고 배우기 쉬운 웹 프레임워크
  - 고전, 기능이 거의 없음 -> 실제 서비스에서는 사용하지 않음
  - 추천 : 초보자. 공부용 혹은 소규모 프로젝트 (설치도 간단하고, 코드를 빠르게 작성 가능)
2. Django (장고) – 대형 서비스도 가능한 풀스택 프레임워크
  - 사용자 인증, 데이터베이스 연동, 관리자 페이지 등 다양한 기능이 기본 내장
  - 특히 파이썬으로 웹 사이트를 만드는데 최적화
  - 추천 : 더 구조적이고 큰 프로젝트에 적합
3. FastAPI – 빠르고 현대적인 비동기 웹 프레임워크
  - 비동기 지원 (async/await 사용): 고성능 서버를 쉽게 작성할 수 있어, 많은 요청을 빠르게 처리
  - 자동 API 문서 생성: 개발자가 API 문서를 따로 만들 필요 없이 /docs에 접속하면 Swagger UI로 자동 생성된 문서를 확인 가능
  - 타입 힌트를 통한 유효성 검사: Python의 타입 힌트를 이용해 입력값을 자동으로 검증해주고, 오류 메시지를 깔끔하게 제공

2. html이란

1. html 기본 형태 출력하기

emmet 단축키: !

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>html</title>
</head>
<body>
    <!--
        HTML 주석문
        작성일 : 2026-06-10
        작성자 : 김사과
    -->
    HTML이란?!!!!!
</body>
</html>

열리는 태그와 닫히는태그가 쌍으로 존재
태그 : html, head, body 등
속성 : 태그 뒤에 설정된 내용들
lang = "en" : 시각장애인들이 인터넷을 사용할 때 소리로 인터넷을 사용하는데, 그 때 출력되는 언어의 종류
head : 문서의 정보를 담는 부분
- meta : 메타 정보를 설정하는 태그
  - charset : 컴퓨터가 문자를 이해할 수 있도록 사람의 언어나 기호를 고유한 숫자(바이트)로 매핑해 놓은 규격
    - UTF-8 : 전 세계 거의 모든 언어를 지원하며 웹 표준으로 가장 널리 사용
    - ASCII : 영문과 숫자 위주의 가장 기본적인 7비트 문자셋
    - EUC-KR : 과거 한국어 웹 문서나 시스템에서 주로 사용되던 한글 완성형 문자셋
  - name, content, initial-scale : 모바일 반응형으로 설정
- title : 브라우저 제목표시줄에 들어가는 이름
body : 눈에 보이는 정보를 담는 부분. 실제 화면을 구성하는 부분

2. 가상 서버 사용하기

아직 백엔드를 배우지 않았기 때문에 가상으로 서버 환경에서 실습하기 위해 가상 서버를 사용해보자
vscode Extensions에서 Live Server를 설치
단축키 사용 : Alt 키 + l + o
코드 수정 후 저장하면 바로 반영됨

3. 주석문

emmet 단축키 : ctrl + /
주석문 색 바꾸기 : file - preference - settings - launch 검색 - edit in settings.json 파일에 아래 코드 삽입

"editor.tokenColorCustomizations": {
	"comments": "#FFA7AF"
}

3. 텍스트

vscode Extensions에서 auto rename tag 설치 : 열리는 태그 수정 시 자동으로 닫히는 태그 수정

content : 태그가 들어있는 글자 영역

border : content를 감싸는 영역

padding : content와 border 사이의 영역

margin : border 바깥 영역

1. html 태그 종류

블록 태그	한 줄 전체를 차지하며 줄바꿈이 자동으로 발생 ex. h태그, p태그
인라인 태그	내용만큼만 공간을 차지하며 줄바꿈이 발생하지 않음

2. 제목 태그

<h1>안녕하세요. Heading</h1>
<h2>안녕하세요. Heading</h2>
<h3>안녕하세요. Heading</h3>
<h4>안녕하세요. Heading</h4>
<h5>안녕하세요. Heading</h5>
<h6>안녕하세요. Heading</h6>

3. 문단 태그

<p></p>

- 문단을 만드는 태그
- 블록 태그

4. 서식 태그

strong과 em : html5에서 나온 접근성 태그 (리더기에서 더 쎈 발음을 내주는 용도)

    <p><b>굵게</b>표현하기</p>
    <p><strong>굵게</strong>표현하기</p>
    <p><i>이탤릭체</i> 표현하기</p>
    <p><em>이탤릭체</em> 표현하기</p>
    <p><ins>밑줄</ins> 표현하기</p>
    <p><del>삭제</del> 표현하기</p>
    <p>x<sup>2</sup> + y<sup>3</sup> = z</p>
    <p>H<sub>2</sub>O</p>

4. 리스트

emmet 단축키 : ul>li*3 (ul의 자식태그로 li태그 3개)
dl>dt{내용}+dd*3 (dl의 자식 태그로 dt와 dd 3개. dt의 내용을 {}로 담음. dt와 dd는 형제태그)

<!-- 순서가 없는 태그 emmet : ul>li*3 -->
<ul>
    <li>김사과</li>
    <li>오렌지</li>
    <li>바나나</li>
</ul>
<!-- 순서가 있는 태그 -->
<ol>
    <li>김사과</li>
    <li>오렌지</li>
    <li>반하나</li>
</ol>
<!-- 설명 목록 태그 dl>dt+dd*3  dl>dt{류정원}+dd*3-->
 <dl>
    <dt>류정원 선생님</dt>
    <dd>김사과</dd>
    <dd>오렌지</dd>
    <dd>반하나</dd>
 </dl>

5. 이미지

1. 절대 경로와 상대 경로

실습 중에는 가상 서버를 돌려 이미지를 찾아오기 때문에 실제 C드라이브가 어디있는지 모름
상대 경로를 사용하거나 절대 경로는 웹에 있는 경로 사용

<!-- 절대 경로 -->
<img src="C:\sj\4_HTML_CSS\spring1.png" alt="봄">
<img src="https://tcpschool.com/img/logo.png" alt="tcp스쿨 로고">
<!-- 상대 경로 -->
<img src="spring1.png" alt="봄">
<img src="images/spring2.png" alt="봄">

2. 웹에서 사용하는 사용 가능한 이미지 포멧

png	투명도 표현
jpeg/jpg	압축률이 좋아 파일 크기가 작음
gif	여러 이미지를 합쳐 움직이는 사진을 만들 수 있음. 해상도 낮음
webp	png, jpeg/jpg, gif 기능 모두 가지고 있음 최초 브라우저와 현재 브라우저의 버전 차이 때문에 지원하지 않는 브라우저가 많음
svg	벡터로 저장. 디지털로 되어 있어서 코드로 이미지 사용 가능

6. 하이퍼링크

<!-- 절대 경로 -->
<a href="https://www.naver.com">네이버</a>
<a href="https://tcpschool.com"><img src="https://tcpschool.com/img/logo.png" alt="tcp스쿨 로고"></a>
<!-- 상대 경로 -->
<a href="./4_이미지.html">이미지 페이지</a>
<a href="./pages/subpage.html">서브 페이지</a>

7. CSS (Cascading Style Sheets)

HTML과 함께 사용되며 웹 페이지의 스타일로 레이아웃을 정의하는 스타일시트 언어
스타일 적용 방법
1. 인라인 스타일 : HTML 태그 안에 직접 style 속성으로 css 작성
2. 내부 스타일 : <style>태그를 <head> 안에 작성하여 css 작성
3. 외부 스타일 : css 코드를 별도의 .css 파일에 작성하고, HTML 문서에서 link 태그로 연결
css 원칙 : 더 나중에 있는 것이 우선 순위 (인라인 스타일이 가장 높은 우선순위)
외부 스타일 시트를 대부분 사용

<!-- 내부 스타일, 외부 스타일(link) -->
<head>
    <style>
        body { background-color: deepskyblue; }
        h1 { color: white; text-align: center;  }
    </style>
    <link rel="stylesheet" href="./css/test.css">
</head>

<!-- 인라인 스타일 -->
<p style="color: gold">안녕하세요 CSS입니다</p>

8. 다양한 선택자

1. 태그 선택자

2. 클래스 선택자(.)

3. 아이디 선택자(#) : 같은 이름을 가진 id가 존재하면 안됨 (에러가 발생하지 않지만 안됨)

4. 그룹 선택자

5. 클래스 선택자 여러 개 적용

6. 의사 클래스 선택자

7. 속성 선택자

8. 자식 선택자

9. 자손 선택자

10. 형제 선택자

<!-- head -->
<head>
    <title>다양한 선택자</title>
    <style>
        /* 1. 태그 선택자 */
        h1 { color: deepskyblue; text-align: center; }
        /* 2. 클래스 선택자(.) : 여러 요소에 적용 가능*/
        .intro { font-weight: bold; color: deeppink; }
        /* 3. 아이디 선택자(#) */
        #favorite-list { 
            background-color: ivory;
            padding: 10px;
         }
        /* 4. 그룹 선택자 */
        p, li { font-size: 20px; }  /* pc기본 글꼴 사이즈는 16px */
        /* 5. 클래스 선택자 : 중복으로 적용 가능*/
        .bluecolor { color: blue; }
        .highlight { font-style: italic; }
        /* 6. 의사 클래스 선택자 */
        a:hover { color: yellowgreen; text-decoration: none;}
        /* 7. 속성 선택자 */
        h1[title="제목"] { background-color: ivory; }
        /* 8. 자식 선택자 */
        ul#favorite-list > li { list-style-type: square; }
        /* 9. 자손 선택자(자식 포함) */
        ul#favorite-list p { 
            color: violet;
            font-weight: bold;
         }
         /* 10. 형제 선택자 */
        p.intro + p { background-color: aqua; }
    </style>
</head>

<!-- body -->
<body>
    <h1 title="제목">선택자</h1>

    <p class="intro">이 문단은 첫번째 문단입니다.</p>
    <p>이 문단은 두번째 문단입니다.</p>

    <ul id="favorite-list">
        <li class="bluecolor">김사과</li>
        <li class="bluecolor highlight">반하나</li>
        <li class="bluecolor">오렌지</li>
        <li class="bluecolor"><p>이메론</p></li>
        <p>출석부</p>
    </ul>

    <a href="https://www.naver.com">외부 링크</a>
    <a href="#top">내부 링크</a>
    <a href="./5_하이퍼링크.html" class="intro">하이퍼링크</a>
</body>

* 프레임워크와 언어는 좋고 안좋고가 아니고 프로젝트에 얼마나 적합한지, 퍼포먼스를 얼마나 낼 수 있는지 판단하는 것이 중요

* 브라우저는 에러를 내지 않고 자기 방식대로 출력 (오타가 나도 브라우저가 판단해서 출력)
-> 정확하게 작성하기

* 컴퓨터와 핸드폰의 해상도가 다르기 때문에 최적화되도록 브라우저가 모바일에서 해상도를 확 낮춰서 보여줌

* emmet 사이트 : https://emmet.io/

* https://www.w3schools.com/

* 복붙 단축키 : shift + alt + 화살표위아래키

* html 태그는 트리구조라 emmet 단축키 (ul>li*3, dl>dt+dd*3) 사용 가능

* css에서 선택자를 모르면 크롤링을 할 수가 없음

프로그래머가 되고 싶은 감자