pug와 sass 올레올레 템플릿
탄포포는 힘들다.
드물게 새로운 사이트를 만들지 않는 탄포 탑승을위한 올레올레스 니펫입니다.
탄포포는 모처럼 기억한 모던한 구조를 바로 잊는다…
See the Pen VRXPPL by H.NOTSU ( @ H_의 하나 )
on CodePen .
도리마 HTML 기본
index.pug
doctype html
html(class="no-js" lang="ja")
head
meta(charset="utf-8")
meta(http-equiv="x-ua-compatible" content="ie=edge")
title タイトル
meta(name="description" content="説明文")
meta(name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no")
link(rel="manifest" href="site.webmanifest")
link(rel="apple-touch-icon" href="icon.png")
//- favicon.icoはルートディレクトに配置
link(rel="stylesheet" href="css/normalize.css")
link(rel="stylesheet" href="css/main.css")
body
//- ここにサイトやアプリのコンテンツ
header
.container
main
.container
footer
.container
script(src="js/vendor/modernizr-3.5.0.min.js")
script(src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous")
script.
window.jQuery || document.write('<script src="js/vendor/jquery-3.2.1.min.js"><\/script>')
script(src="js/plugins.js")
script(src="js/main.js")
//- Google Analytics: UA-XXXXX-YをあなたのIDに変更
script.
window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;
ga('create','UA-XXXXX-Y','auto');ga('send','pageview')
script(src="https://www.google-analytics.com/analytics.js" async defer)
참고 사이트
index.pug
doctype html
html(class="no-js" lang="ja")
head
meta(charset="utf-8")
meta(http-equiv="x-ua-compatible" content="ie=edge")
title タイトル
meta(name="description" content="説明文")
meta(name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no")
link(rel="manifest" href="site.webmanifest")
link(rel="apple-touch-icon" href="icon.png")
//- favicon.icoはルートディレクトに配置
link(rel="stylesheet" href="css/normalize.css")
link(rel="stylesheet" href="css/main.css")
body
//- ここにサイトやアプリのコンテンツ
header
.container
main
.container
footer
.container
script(src="js/vendor/modernizr-3.5.0.min.js")
script(src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous")
script.
window.jQuery || document.write('<script src="js/vendor/jquery-3.2.1.min.js"><\/script>')
script(src="js/plugins.js")
script(src="js/main.js")
//- Google Analytics: UA-XXXXX-YをあなたのIDに変更
script.
window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;
ga('create','UA-XXXXX-Y','auto');ga('send','pageview')
script(src="https://www.google-analytics.com/analytics.js" async defer)
최신판! 웹 페이지를 만들 때 기본이되는 최소한의 구성으로 작성된 HTML5 템플릿
위 링크의 소스를 pug 용으로 다시 작성하여 추가 수정 
토리마 CSS 기본
main.scss
//normalize.css調整
p
margin: 0
ul
margin: 0
padding: 0
li
list-style: none
// mixin
// 共通パーツ
.container
margin: 0 auto
max-width: 960px
//専用パーツ
body
//要素少ない際のレイアウト用
display: flex
flex-direction: column
min-height: 100vh
header
height: [header-height]
width: 100%
.container
main
.container
//要素少ない際のレイアウト用
min-height: calc( 100vh - ( [header-height] + [footer-height] ) )
width: 100%
// paddingの外への飛び出しを防ぐ
box-sizing: border-box
padding:
footer
//要素少ない際のレイアウト用
margin-top: auto
height: [footer-height]
.container
참고 사이트
CSS에서 콘텐츠가 적어도 바닥 글을 창 하단에 표시하는 방법
상기를 참고로 이하 약
추가 포인트는 main의 min-height: calc( 100vh - ( [header] + [footer] ) )
요소가 적을 때 배경이 가득 퍼져주지 않아 대단히 부사이크가 되었기 때문에…
header와 footer의 높이가 없어도 어떻게든 할 수 있는 방법을 알고 싶지만, 지금까지 지정이 없는 것도 드물기 때문에 지금은 괜찮을까 
Reference
이 문제에 관하여(pug와 sass 올레올레 템플릿), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/H_NOTSU/items/a23bacad4d27daa74fa0텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
