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 {} + diff --git a/twelfth/README.md b/twelfth/README.md index 57ea33d..b6ec95a 100644 --- a/twelfth/README.md +++ b/twelfth/README.md @@ -135,7 +135,7 @@ $ gulp --version 2. sass로 개발을 한 결과물은 압축된 상태(minify)로 보이게 한다. #### 구축 -1. `guflpile.js`를 생성 +1. `gulpfile.js`를 생성 2. 사용할 도구(gulp-sass, gulp-css-minify)의 가이드를 참고하여 `gulpfile.js`을 채워넣음 3. `npm init` => *node.js*로 이루어진 어플리케이션임을 정의 ```