hossam 테마 강의 · 발표

시작하기

저장소를 받은 뒤(git clone https://github.com/leekh4232/slidev-themes.git) 프런트매터에 테마 폴더 경로(theme: ./slidev-themes/hossam처럼 md 파일 기준)를 적는다. 첫 슬라이드의 프런트매터(헤드매터)에서 아래 두 옵션으로 덱 전체 모양을 정한다.

컴포넌트는 두 스타일 어디서나 쓴다. 이 페이지의 Callout·Prompt·Output·Steps·Grid도, talk 페이지의 Card·Stat·차트 컴포넌트도 스타일에 맞는 색으로 보인다. title은 · (가운뎃점 양옆 공백)를 기준으로 앞은 과정 이름, 뒤는 단원 이름으로 사이드바에 올라간다. 첫 슬라이드는 layout: cover로 가운데 정렬한다.

---
theme: ./slidev-themes/hossam
style: lecture        # 생략 가능 (기본값)
sidebar: true         # 생략 가능 (lecture 기본값)
title: 파이썬 기초 · 3. 변수와 자료형
layout: cover
---

# 변수와 자료형

값에 이름을 붙여 두고 다시 쓰는 방법

<p class="sub">파이썬 기초 과정 · 3강</p>

사이드바와 조작

헤더의 sidebar가 켜져 있을 때 보인다(lecture 기본, talk는 sidebar: true로 켠다). 목차는 슬라이드마다 첫 제목을 모아 만든다. 표지(1쪽)는 목록에 넣지 않고, 사이드바 맨 위의 과정·단원 이름을 클릭하면 표지로 간다. 제목에서 — 뒤의 부제와 맨 앞 이모지는 목차에서 뗀다. 항목은 한 줄로 보이고, 넘치면 말줄임(…)으로 줄인다. 마우스를 올리면 전체 제목이 보인다. 항목을 클릭하면 그 쪽으로 이동한다.

### 제목으로 시작하는 슬라이드는 바로 위 ## 항목 아래로 묶여 접힌다. 묶음이 있는 항목 오른쪽의 ▸를 누르면 펼쳐지고, 한 번에 한 묶음만 열린다. 슬라이드를 넘기면 그 슬라이드가 든 묶음이 저절로 열리고, 목차는 현재 항목이 가운데 오도록 스크롤된다.

사이드바 폭·접힘·애니메이션·테마·본문 폭·배율은 브라우저에 기억된다. 발표 화면에서는 글자 크기를 고정하고 창 폭에 맞춰 줄바꿈하는 "웹페이지식" 배치라, 내용이 길면 슬라이드 안에서 스크롤한다. 발표자 모드·개요·인쇄 화면은 Slidev 기본 배치다.

글쓰기

• # 큰 제목, ## 밑줄 있는 슬라이드 제목, ### 소제목(목차에서 하위 항목).
• 목록 글머리와 링크는 파랑, 인라인 코드(백틱 하나)는 연한 상자, **굵게**는 본문색 그대로 굵게.
• 코드 블록은 흰 바탕 위의 어두운 상자. 줄 번호가 기본으로 켜져 있고(lineNumbers: true), 주석은 설명이라 밝은 초록으로 보인다. 글꼴은 JetBrains Mono.
• 표는 머리글이 파란 글씨에 연한 바탕. 레이아웃은 Slidev 기본 레이아웃(default, cover, center, section, image-right …)을 그대로 쓴다. 여러 단으로 나눌 때는 Grid를 쓴다.

## 변수란 — 값에 붙이는 이름표

- 변수는 값을 담는 **이름표**다. `=` 로 값을 넣는다
- 이름은 뜻이 드러나게 짓는다: `age`, `user_name`

```python
age = 20          # 정수
name = "하늘"     # 문자열
print(name, age)
```

컴포넌트

Grid — 격자 배치

슬라이드 안의 원하는 곳을 여러 단으로 나눈다. talk 스타일에서도 같은 프롭으로 쓴다(기본 간격만 talk 20px). 제목은 Grid 위에 두면 전체 폭으로 보인다. 칸 안에 마크다운(코드 블록·목록)을 쓰려면 칸마다 <div>로 감싸고, 여는 태그와 닫는 태그를 빈 줄로 띄운다.

## 실습 — 자기소개 출력

<Grid cols="2">
<div>

왼쪽 칸…

</div>
<div>

```python
print(f"{name}님은 {age}살")
```

</div>
</Grid>

Callout — 콜아웃 상자

title로 머리말을 바꿀 수 있다. 안에 마크다운(인라인 코드·굵게)을 쓰려면 여는 태그와 닫는 태그를 빈 줄로 띄운다.

<Callout kind="eli5">
상자에 이름표를 붙여 두면, 나중에 상자를 열지 않아도 이름만으로 찾을 수 있다.
</Callout>

<Callout kind="warn" title="자주 틀리는 것">

`"3" + 4` 는 오류다. 글자와 숫자는 더할 수 없다.

</Callout>

Prompt · Output — 프롬프트와 출력

Prompt는 "오늘의 프롬프트" 상자다. 안에 백틱 네 개의 text 코드 펜스로 프롬프트를 넣으면 줄바꿈이 보존되고, 오른쪽 위 복사 버튼이 그 글을 클립보드에 넣는다. Output은 프로그램 출력 상자로, label(기본 "출력")을 바꿀 수 있다.

<Prompt>

````text
변수 이름을 지을 때 지켜야 할 규칙 3가지를
초등학생도 이해할 수 있게 예시와 함께 설명해 줘.
````

</Prompt>

```python
print(f"{name}님은 {age}살")
```

<Output>
하늘님은 20살
</Output>

<Output label="오류">
TypeError: can only concatenate str (not "int") to str
</Output>

Steps — 번호 동그라미 단계

<li>를 나열하면 번호 동그라미가 붙는다. color는 py(파랑, 기본) · ai(주황) · ok(초록).

<Steps color="py">
<li>이름과 나이를 변수에 넣는다</li>
<li>f-문자열로 한 줄을 만든다</li>
<li><code>print()</code> 로 출력한다</li>
</Steps>

클래스

아래 클래스는 lecture 스타일에서 쓴다. talk 스타일의 상자는 컴포넌트(Card·Kicker 등)로 만든다.

### 더 알아보기 — 형 변환

<span class="kicker lab">정리</span>

<div class="card py">
<h3>int("12") → 12</h3>
<p>문자열을 정수로 바꾼다. 숫자가 아닌 글자가 섞이면 오류가 난다.</p>
</div>

- <span class="muted">다음 시간: 조건문</span>

전체 예제

lecture-example.md — 위 코드가 전부 들어 있는 6장짜리 lecture 덱. talk 스타일 예제는 talk-example.md. 저장소 안에서 우클릭 → Open with Slidev.