Skip to content

gulpfile.js 오타수정 #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
JJapShe wants to merge 5 commits into
base: master
Choose a base branch
from
Open

gulpfile.js 오타수정 #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e67e647
오타 수정
JJapShe Mar 21, 2017
6817f08
gulpfile.js 오타수정
JJapShe Mar 22, 2017
fcd293a
Merge branch 'master' of https://github.com/techhtml/dev_html_camp_2nd
JJapShe Mar 22, 2017
427aaa3
6번쨰 수업 추가
JJapShe Mar 22, 2017
ff4eecb
Merge branch 'master' of https://github.com/techhtml/dev_html_camp_2nd
JJapShe Mar 25, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
155 changes: 155 additions & 0 deletions sixth/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,155 @@
<!-- http://codepen.io/ChoEun/pen/XMJpxV -->
<!--
- Brunch 나머지
-->

<main>
<h2>글이 작품이 되는 공간 브런치</h2>
<!--
- h1 - h6
- Section 요소, Article 요소에는
- h1부터 h6를 순차적으로 안써줘도 된다
- h1만 써도 된다 (outline)
- h1부터 h6까지 순차적으로 내려가는
-->
<p class='sub-header'>브런치에 담긴 아름다운 작품을 감상해 보세요.<br>
그리고 다시 꺼내 보세요.<br>
서랍 속 간직하고 있는 글과 감성을.</p>
<!--
- br, break
- 줄바꿈
- \n (javascript)
- \n, <br>
-->
<!--
- 에디터의 추천
-->
<h3>에디터의 추천</h3>
<p class='notice'>
<a href='#'>브런치앱에서 나를 위한 맞춤형 추천을 만나보세요</a>
</p>
<div class='carousel'>
<div class='panel'>
<ul>
<li style='background-image:url(https://scontent-icn1-1.xx.fbcdn.net/v/t1.0-9/16864673_1281462198609457_938028825519519944_n.jpg?oh=70368ef297eb5884ab8ec6e93644e9e2&oe=5931ACFC)'>
<a href='#'>
<dl>
<dt>다른 나라에서 이방인으로 사는 삶</dt>
<dd>영글음</dd>
</dl>
<!--
- dl (definition list, 정의 목록)
- 정의 (definition)
- dt (definition title, definition target)
- 정의 제목
- dd (definition description)
- 정의 설명
- dt : dd
- name : value
-->
</a>
</li>
<li style='background-image:url(https://scontent-icn1-1.xx.fbcdn.net/v/t31.0-8/16700368_1769379116420799_7142971584889581820_o.jpg?oh=401d61126da0834a6e10daefd0513b8d&oe=594541D5)'>
<a href='#'>
<dl>
<dt>다른 나라에서 이방인으로 사는 삶</dt>
<dd>영글음</dd>
</dl>
</a>
</li>
<li style='background-image:url(https://scontent-icn1-1.xx.fbcdn.net/v/t31.0-8/16804422_1255881077794074_504070578804975535_o.jpg?oh=1b1f196f3aae43647d3da586d7106c8b&oe=593F2D2E)'>
<a href='#'>
<dl>
<dt>다른 나라에서 이방인으로 사는 삶</dt>
<dd>영글음</dd>
</dl>
</a>
</li>
<li style='background-image:url(https://scontent-icn1-1.xx.fbcdn.net/v/t1.0-9/16939667_1281462418609435_3327527711902528782_n.jpg?oh=66e4a8fd9693d4a29e2cc670be99fb09&oe=59446D9E)'>
<a href='#'>
<dl>
<dt>다른 나라에서 이방인으로 사는 삶</dt>
<dd>영글음</dd>
</dl>
</a>
</li>
</ul>
</div>
<div class='panel'>
<ul>
<li class='item-vertical'>
<a href='#'>
<dl>
<dt>다른 나라에서 이방인으로 사는 삶</dt>
<dd>영글음</dd>
</dl>
</a>
</li>
<li class='item-vertical'>
<a href='#'>
<dl>
<dt>다른 나라에서 이방인으로 사는 삶</dt>
<dd>영글음</dd>
</dl>
</a>
</li>
</ul>
</div>
<div class='panel'>
<ul>
<li class='item-vertical'>
<a href='#'>
<dl>
<dt>다른 나라에서 이방인으로 사는 삶</dt>
<dd>영글음</dd>
</dl>
</a>
</li>
<li>
<a href='#'>
<dl>
<dt>다른 나라에서 이방인으로 사는 삶</dt>
<dd>영글음</dd>
</dl>
</a>
</li>
<li>
<a href='#'>
<dl>
<dt>다른 나라에서 이방인으로 사는 삶</dt>
<dd>영글음</dd>
</dl>
</a>
</li>
</ul>
</div>
<div class='panel'>
<ul>
<li class='item-three item-vertical'>
<a href='#'>
<dl>
<dt>다른 나라에서 이방인으로 사는 삶</dt>
<dd>영글음</dd>
</dl>
</a>
</li>
<li class='item-three item-vertical'>
<a href='#'>
<dl>
<dt>다른 나라에서 이방인으로 사는 삶</dt>
<dd>영글음</dd>
</dl>
</a>
</li>
<li class='item-three item-vertical'>
<a href='#'>
<dl>
<dt>다른 나라에서 이방인으로 사는 삶</dt>
<dd>영글음</dd>
</dl>
</a>
</li>
</ul>
</div>
</div>
</main>
94 changes: 94 additions & 0 deletions sixth/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {}

2 changes: 1 addition & 1 deletion twelfth/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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*로 이루어진 어플리케이션임을 정의
```
Expand Down