비개발자 사고법 · 02강

CSS는 옷이다

디자인은 AI가 입혀준다. 나는 '예쁘게'가 아니라 옷의 단어로 콕 집어 주문하는 사장이다.

① 옷 입히기 4단계 토글

민짜 흑백 글덩어리에 색·글꼴·박스·여백을 한 겹씩. 글자는 그대로, 옷만 쌓인다.

김지백의 AI 클래스

코딩 1도 몰라도 괜찮아요. AI에게 제대로 시키는 법만 알면, 누구나 사장이 될 수 있습니다.

지금 입은 옷: 0

옷은 한 번에 입는 게 아니에요. 색 → 글꼴 → 박스 → 여백, 한 겹씩 쌓는 겁니다. 입히고 벗기는 내내 글자·버튼(알맹이)은 1도 안 바뀌어요.

② 어디를 + 어떻게 (선택자 놀이)

딱 두 개만 정하면 끝 — 어디를(대상) 고르고, 어떻게(꾸밈) 고른다.

① 어디를 (대상 하나 고르기)

미리보기 (지금 꾸미는 곳에 점선)

김지백의 AI 클래스

AI에게 제대로 시키는 법.

② 어떻게 (꾸밈 고르기 · 누적 가능)

크기

굵기 · 기울임

📝 주문서 (지금 만든 명령)

'제목을 파란색으로.' 이 평범한 한국어 주문이 그대로 CSS 한 줄이에요. 어디를 고르고, 어떻게 고르면 — 그게 다입니다.

③ 배치 놀이터 (플렉스박스)

위→아래 기본을, 버튼 하나로 가로·가운데·양끝·격자로 바꾼다.

1 · 메일
2 · 카페
3 · 블로그
🖼️
🖼️
🖼️
🖼️
🖼️
🖼️
세로 쌓기 ⬇️
옷 입기 전 기본. 위에서 아래로 주르륵 쌓여요.
배치: 세로 쌓기 (기본)

🏙️ 실생활 어디에 쓰이나

지금 이 배치는…(뼈대 상태)
  • 세로 쌓기 뼈대 상태
  • 가로로 메뉴바
  • 가운데 모으기 로그인 박스
  • 양끝 벌리기 헤더(로고↔메뉴)
  • 격자 사진 갤러리

뼈대만 있으면 무조건 위→아래로 쌓여요. 가로로 세우고, 가운데 모으고, 양끝으로 벌리는 마법 — 그게 플렉스박스예요. 메뉴바도 카드 줄도 다 이걸로 만듭니다.

④ 반응형 뷰포트 (💻 ↔ 📱)

같은 페이지가 폭이 줄면 3칸→1칸으로 스스로 접힌다. PC용·폰용 따로 안 만든다.

920px · 3칸
🔒 www.ai-academy.kr
🦴
① HTML은 뼈대
웹의 뼈대를 세워요
👕
② CSS는 옷
예쁜 옷을 입혀요
③ JS는 생명
생명을 불어넣어요

넓은 화면에선 카드 세 개가 가로로 나란히. 카드는 그대로, 배치만 자동으로.

PC용 하나, 폰용 하나 따로 만드는 거 아니에요. 하나로 둘 다 대응 — 그게 반응형의 힘이에요. 폭을 줄여서 카드가 '탁' 접히는 순간을 보세요.

⑤ 좋은 지시 vs 나쁜 지시 비교판

'예쁘게'는 아무거나. 옷의 단어로 콕 집으면, 머릿속 그 화면이 그대로 나온다.

✗ 나쁜 지시
결과가 여기에 나타납니다
🎤 면접장 비유
👔단정한 셔츠
👕추리닝·슬리퍼
실력은 같다, 옷이 다르다.
손님은 0.5초 만에 판단한다.
실력(알맹이=글·버튼)은 똑같아요. CSS라는 옷 하나로 '전문가가 만들었네' ↔ '사기 사이트 아냐?'가 갈려요. 손님은 0.5초 만에 판단하고 그냥 나가버립니다.
✓ 좋은 지시
결과가 여기에 나타납니다

🥊 받아치기 — 끌려가는 사람에서 시키는 사장으로

AI가 어려운 말로 던져도, 오늘 배운 단어를 알면 되받아칠 수 있어요.

플렉스박스로 가운데 정렬하고, 패딩 좀 줘서 반응형으로 처리했어요.
정렬은 좋고, 카드 사이 간격을 더 넓혀줘. 글씨는 한 단계만 키우고, 모바일에선 한 줄로 쌓아줘.

가운데 면접장 👔↔👕를 눌러보세요. 복사 버튼은 수업 직후 학생이 AI에게 바로 던져보게.

외부강사 김지백 · AI 교육자료
← 강의 목록 🏠 홈