김버그의 HTML&CSS는 재밌다
01
시작하기에 앞서
HTML이 왜 중요한가요?
체험하기
HTML을 시맨틱하게 작성해야 하는 이유
강의 100% 활용하기
강의 환경 세팅
02
HTML 기초
태그 해부학
체험하기
제목과 문단 Headings & Paragraph
강조 Emphasis
링크 Anchor
이미지 Image
리스트 Lists
정의 리스트 Description List
인용 Quotations
흑마법 Div & Span
Form (1) - 기본구조
Form (2) - Input
Form (3) - Label
Form (4) - Radio & Checkbox
Form (5) - Select & Option
Form (6) - Textarea
Form (7) - Buttons
표 Table (1) - 기본 구조
표 Table (2) - 심화
미디어 파일 Media
기타 Etc
Doctype & Document Structure
Title, Link, Style & Script
Meta
마무리 + 쉬어가기
03
HTML 훈련
Ad Banner
Google Search Result Item
Feature Box
Logo in Header
Breadcrumb & Pagination
Product Card
Instagram User Profile
Receipt
Github Dropdown Menu
Input Group
Feed
Gmail Inbox
Music Player
Video Player
04
트위터 마크업 챌린지
챕터 소개: 구조적인 웹 문서 설계
체험하기
올바른 Sectioning Elements 사용 방법
페이지 구조 설계
Header
Global Navigation
Main
Tweet Form
Timeline
Tweet
Aside
Footer
마무리
05
Hello CSS
강의 소개
CSS 소개 & 기본 형태
CSS 사용 방법
실습 강의를 위한 준비
06
Box
Box Model
Box Sizing
체험하기
Box
Block
Inline
Inline Block
07
Float
Float 1
Float 2
[실습] Float 훈련 1
[실습] Float 훈련 2
08
Position
Position 1
Position 2
[실습] Position 훈련 1
[실습] Position 훈련 2
[실습] Position 훈련 3
09
Flexbox
Flexbox 1
Flexbox 2
[실습] Flexbox 훈련 1 & 2
[실습] Flexbox 훈련 3
10
Media Query
Media Query
[실습] Media Query 훈련
11
Typography
Typography 1
Typography 2
Webfont
체험하기
[실습] Typography Library 제작
12
Background
Background
[실습] Background 훈련 part 1
[실습] Background 훈련 part 2
13
Transition & Animation
Transition
Animation
[실습] Transition 훈련
[실습] Animation 훈련
14
Etc.
Box Shadow
Opacity
Overflow
Transform
Visibility
15
Selectors
요소, 클래스, ID 선택자 (Type, Class & ID Selector)
자식, 자손, 형제 선택자 (Child, Descendant & Sibling Combinators)
구조적 가상 클래스 선택자 (Structural Pseudo-classes)
동적 가상 클래스 선택자 (User Action Pseudo-classes)
CSS 선택자 올림픽
16
Page Layout
Grid System
Bootstrap
Final Project 안내
[실습] 작업 환경 세팅
[실습] Landing Section
[실습] Service Section
[실습] Program Section 1
[실습] Program Section 2
[실습] Curriculum Section
[실습] Subscription Section
[실습] Footer
Webfont
11 Typography
Loading...
100%
Webfont
<div class="box"> <h1> ⭐️<br /> 별 헤는 밤 </h1> <p> 벌써 이름과, 어머님, 했던 시인의 멀듯이, 보고, 까닭입니다. 쉬이 이국 책상을 슬퍼하는 파란 것은 이름자를 내 계십니다. 내 잔디가 위에 내린 이름과, 무성할 별 내 없이 까닭입니다. 이런 마디씩 속의 아이들의 보고, 동경과 가슴속에 봅니다. 하나에 하나 남은 시와 옥 있습니다. 하나에 밤이 이국 위에도 거외다. 토끼, 보고, 말 사람들의 이런 이름과, 하나에 봅니다. 밤을 계절이 하나에 별 헤일 나는 잠, 이름을 이런 봅니다. 당신은 언덕 시인의 멀리 남은 어머님, 계십니다. 소녀들의 이런 별 이름과, 지나가는 벌써 청춘이 하나에 계십니다. 소학교 나의 별 것은 있습니다. </p> <p> 강아지, 하나 못 있습니다. 피어나듯이 노새, 아무 써 계절이 것은 하나에 거외다. 이제 멀듯이, 하나의 그리고 차 있습니다. 가난한 헤일 딴은 버리었습니다. 많은 된 써 위에 있습니다. 시와 멀듯이, 무덤 하나에 이런 다하지 위에 있습니다. 별이 묻힌 부끄러운 가득 헤일 위에도 하늘에는 있습니다. 이름자 이런 계절이 사랑과 봄이 어머니 이름과, 하나에 북간도에 듯합니다. 새겨지는 오면 아름다운 위에 다 봅니다. 잠, 멀리 않은 밤이 불러 차 슬퍼하는 가슴속에 거외다. 잠, 하나의 청춘이 봅니다. </p> <p> 이름과, 아무 멀듯이, 벌써 같이 말 무덤 가득 듯합니다. 소녀들의 멀리 말 듯합니다. 아이들의 써 하나에 계십니다. 멀리 하나에 노루, 사람들의 봄이 보고, 별 별이 있습니다. 다 까닭이요, 당신은 라이너 거외다. 어머니, 사랑과 봄이 했던 새워 잔디가 아직 이 않은 있습니다. 불러 이름을 가슴속에 있습니다. 새겨지는 이름과, 위에 이런 피어나듯이 별 봅니다. 아스라히 별빛이 시와 그리워 오면 있습니다. 다 가을 아직 같이 라이너 나의 슬퍼하는 릴케 거외다. </p> </div>
실행 언어:
html
body { line-height: 1.65; color: #212529; } .box { width: 100%; max-width: 540px; padding: 120px 0; margin: 0 auto; } .box h1 { margin-bottom: 1.25em; color: #1f2d3d; line-height: 1.4; } .box p { color: #3c4858; }
실행 언어:
css
https://github.com/innks/NanumSquareRound
질문하기
추가 자료
추가 자료가 없습니다
여기서 새로운 학습 자료를 확인하세요!
선생님이 추가한 자료들을 바로 확인할 수 있어요.