From e67e64738e3d1dbf8a60a2a18371461a19930ad9 Mon Sep 17 00:00:00 2001 From: JJapShe Date: Tue, 21 Mar 2017 20:10:44 +0900 Subject: [PATCH 1/3] =?UTF-8?q?=EC=98=A4=ED=83=80=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- twelfth/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/twelfth/README.md b/twelfth/README.md index 57ea33d..9653e45 100644 --- a/twelfth/README.md +++ b/twelfth/README.md @@ -135,7 +135,7 @@ $ gulp --version 2. sass로 개발을 한 결과물은 압축된 상태(minify)로 보이게 한다. #### 구축 -1. `guflpile.js`를 생성 +1. `guflfile.js`를 생성 2. 사용할 도구(gulp-sass, gulp-css-minify)의 가이드를 참고하여 `gulpfile.js`을 채워넣음 3. `npm init` => *node.js*로 이루어진 어플리케이션임을 정의 ``` From 6817f080b6d46490f2830c6087f80fffa34941ae Mon Sep 17 00:00:00 2001 From: JJapShe Date: Wed, 22 Mar 2017 16:33:54 +0900 Subject: [PATCH 2/3] =?UTF-8?q?gulpfile.js=20=EC=98=A4=ED=83=80=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- twelfth/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/twelfth/README.md b/twelfth/README.md index 9653e45..b6ec95a 100644 --- a/twelfth/README.md +++ b/twelfth/README.md @@ -135,7 +135,7 @@ $ gulp --version 2. sass로 개발을 한 결과물은 압축된 상태(minify)로 보이게 한다. #### 구축 -1. `guflfile.js`를 생성 +1. `gulpfile.js`를 생성 2. 사용할 도구(gulp-sass, gulp-css-minify)의 가이드를 참고하여 `gulpfile.js`을 채워넣음 3. `npm init` => *node.js*로 이루어진 어플리케이션임을 정의 ``` From 427aaa30e0cf004bed07d821f5daf983fe66b200 Mon Sep 17 00:00:00 2001 From: JJapShe Date: Wed, 22 Mar 2017 16:40:06 +0900 Subject: [PATCH 3/3] =?UTF-8?q?6=EB=B2=88=EC=A8=B0=20=EC=88=98=EC=97=85=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- sixth/index.html | 155 +++++++++++++++++++++++++++++++++++++++++++++++ sixth/style.css | 94 ++++++++++++++++++++++++++++ 2 files changed, 249 insertions(+) create mode 100644 sixth/index.html create mode 100644 sixth/style.css diff --git a/sixth/index.html b/sixth/index.html new file mode 100644 index 0000000..5418191 --- /dev/null +++ b/sixth/index.html @@ -0,0 +1,155 @@ + + + +
+

글이 작품이 되는 공간 브런치

+ +

브런치에 담긴 아름다운 작품을 감상해 보세요.
+ 그리고 다시 꺼내 보세요.
+ 서랍 속 간직하고 있는 글과 감성을.

+ + +

에디터의 추천

+

+ 브런치앱에서 나를 위한 맞춤형 추천을 만나보세요 +

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
\ No newline at end of file diff --git a/sixth/style.css b/sixth/style.css new file mode 100644 index 0000000..a0048c6 --- /dev/null +++ b/sixth/style.css @@ -0,0 +1,94 @@ +/* + * reset css + * http://meyerweb.com/eric/tools/css/reset/ + * normalize + * https://necolas.github.io/normalize.css/5.0.0/normalize.css + */ +/* + * CSS 변수 + * IE 빼고 다 지원 + * https://github.com/postcss/postcss + */ +:root { + --heading-font-size:36px; + --subheading-font-size:28px; +} +main {} +main h2 { + font-size:var(--heading-font-size); + margin:0; +} +main .sub-header { + font-size:var(--subheading-font-size); + margin:0; +} +main .notice { + text-align:right; + margin:0; +} +main h3 { + position:absolute; + left:-100%; +} +main .carousel { + display: flex; +} +main .carousel .panel { + min-width:720px; +} +ul, li, dl, dt, dd { + margin:0; + padding:0; + list-style:none; +} +main ul { + +} +main ul li { + float: left; + width: 50%; + height: 260px; + text-align:center; + background:center center no-repeat #000; + background-size:100%; + /* + * CSS3 Transition + * progressive enhancement + * IE때문에 나온 개념 + */ + transition:0.3s all ease; +} +main ul .item-vertical { + height:520px; +} +main ul .item-three { + width:33.33333%; +} +main ul .item-horizon { + width:100%; +} +main ul li:hover { + background-size:120%; +} +main ul li a { + position:relative; + display:block; + width:100%; + height:100%; + color:white; + text-decoration:none; +} +main ul li a dl { + /* position */ + position: absolute; + left:50%; + top:50%; + width:50%; + margin:auto; + transform:translate(-50%, -50%); +} +main ul li a dl dt { + font-size:20px; +} +main ul li a dl dd {} +