사이트 제작시 필요한 저의 기본 템플릿

템플릿이란?

어떤 도식이나 서식에서 자주 사용되는 기본 골격. 스프레드시트에서 각종 데이터 처리를 위해 표의 일정한 구조를 만들어 놓고 사용자가 데이터를 입력만 하면 되도록 해 놓은 것이 한 예이다.

소개

웹이나 블로그 제작할 때 매번 같은 작업을 하려고 하니 대단히 귀찮아 져서 이렇게 저도 블로그에 하나 만들어 놓을까 싶어서 이렇게 글 적습니다. 예전에 한번 포스트 한 적 있는데 그것의 연장인 것 같습니다. 밑의 링크 있습니다.

HTML5 기본 템플릿

html파일은 예전것 그대로 사용합니다.

<!doctype html> 
<html lang="ko"> 
<head>   
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">   
    <meta name="viewport" content="width=device-width, initial-scale=1">   
    <title></title>   
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">   
    <link rel="stylesheet" href="css/style.css"> 
    <!-- 사용자 스크립트 DATA 영역 -->

    <!-- // 사용자 스크립트 DATA 영역 -->
</head> 
<body>   
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>   
    <script src="js/scripts.js"></script> 
</body>
</html>

css파일은 밑의 것인데

나눔스퀘어라운드 웹폰트을 기본으로 나머지는 시스탬 글꼴을 사용합니다.

사용 방법은 : https://innks.github.io/2017/12/23/IT/NanumSquareRound-Web-Fonts/

@charset "utf-8";
/* https://github.com/innks/NanumSquareRound - innk : 20171223 */
@import url(https://cdn.rawgit.com/innks/NanumSquareRound/master/nanumsquareround.min.css);

/*  기타 추가 항목 */
@import url("etc.css?v=1");

/* 이 문구는 읽지 않습니다. */
:root {
  --primary: #007bff;  /* 파란색 */
  --secondary: #868e96;  /* 진회색 */
  --success: #28a745;  /* 녹색 */
  --info: #17a2b8;   /* 청녹색 */
  --warning: #ffc107;  /* 황색 */
  --danger: #dc3545;   /* 붉은색 */
  --light: #f8f9fa;  /* 흰회색 */
  --dark: #343a40;  /* 검정회색 */
  --link: #009BFA;   /* 빨강색 ff5b57 : 링크 : 파란색 : 009BFA*/
  --text: #212528;   /* 검정 : 기본 글색 */ 
  --breakpoint-max: 768px;  /* 모바일 기준 */
  /* 대기 시간이없는 최신의 아름다운 글꼴 native font stacks in this Smashing Magazine article. https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide */
  --font-family-NSR: 'NanumSquareRound', sans-serif;
  --font-family-sans-serif: 'NanumSquareRound', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-family-monospace: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* HTML5 display-role reset for older browsers */
*,*::before,*::after {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing: border-box;
  text-rendering: optimizeLegibility;
}

html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
  -webkit-tap-highlight-color: transparent;
}

@-ms-viewport {
  width: device-width;
}

article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {
  display: block;
}

html, body {
  margin: 0;
  padding: 15px 0;
  line-height: 1.4;
  font-family: var(--font-family-sans-serif);
  color: var(--text);
  font-size: 16px;
  -ms-overflow-style:scrollbar;
  /* IE 10+스크롤바 오버레이 클래식으로 변경 */
  font-weight: 400;
}

::selection { background-color:#009BFA;  color:#FFF;}
::-moz-selection { background-color:#009BFA;  color:#FFF;}

a { text-decoration: none; padding-bottom: .5px; border-bottom: 1px dashed rgba(0,0,0,0.3); color: #212528;}
a:hover { color: #009BFA;}
a,a:before,a:after {
  -webkit-transition:background-color 0.2s; -webkit-transition-timing-function:ease;  
        -moz-transition:background-color 0.2s; -moz-transition-timing-function:ease;  
            -o-transition:background-color 0.2s; -o-transition-timing-function:ease;  
                  transition:background-color 0.2s; transition-timing-function:ease;
}
img { max-width:100%; height:auto;}
mark,.mark { padding:.2em; background-color:#fcf8e3;}
address { margin-bottom:20px; font-style:normal; line-height:1.42857143;}
code, kbd, pre, samp { font-family: 'Hack', Consolas, monospace !important; }
code { padding: 0.2rem 0.3rem; font-size: 12px!important; background-color: #eee; font-weight: 600; color: #212529;}
a > code { padding: 0; color: inherit; background-color: inherit;}
kbd { padding:0.2rem 0.4rem; font-size: 12px!important; color:#fff; background-color:#212529; border-radius: .2rem; font-weight: 600; }
kbd kbd { padding:0; font-size: 12px!important; font-weight: 600; -webkit-box-shadow:none; box-shadow:none;}
ul { list-style:none;}
dl { margin-top:10px; margin-bottom:20px;}
dt,dd { line-height:1.6rem;}
dt { font-weight: 700;}
dd { margin-left:0;}
strong { font-weight: 700;}
.strong { font-weight: 700;}
b { font-weight: 700;}
hr {display: block; margin: 2.369rem auto; width: 50%; border: 0; border-top: 1px solid #DFE3E8;}
.br::before { content:" "; display:block; width:70px; height:1px; margin-bottom:10px; background-color:#ccc;}
.br::after { content:" "; display:block; margin-bottom:10px;}
pre { display:block; color:#212529;}
pre code { padding:0; font-size:inherit; color:inherit; background-color:transparent; border-radius:0; font-family: 'Hack', Consolas, monospace !important;}
.pre-scrollable { max-height:340px; overflow-y: scroll;}

/* 설정 */
h1,.h1 { font-size:2.7rem!important;}
h2,.h2 { font-size:2.2rem;}
h3,.h3 { font-size:1.9rem!important;}
h4,.h4 { font-size:1.5rem;}
h5,.h5 { font-size:1.25rem;}
h6,.h6 { font-size:1rem;}
h1,h2,h3,.h1,.h2,.h3 { margin-bottom:0.7rem; font-family:inherit; line-height:1.3; color:inherit;}
h4,h5,h6,.h4,.h5,.h6 { margin-bottom:0.5rem; font-family:inherit; line-height:1.2; color:inherit;}
small,.small { font-weight:normal; line-height:1; color:#868e96!important; font-size:85%;}
h1 small,.h1 small,h2 small,.h2 small,h3 small,.h3 small,h1 .small,.h1 .small,h2 .small,.h2 .small,h3 .small,.h3 .small {font-size:65%;font-weight: 300;}
h4 small,.h4 small,h5 small,.h5 small,h6 small,.h6 small,h4 .small,.h4 .small,h5 .small,.h5 .small,h6 .small,.h6 .small {font-size:75%;font-weight: 300;}

.lead { margin-bottom:20px; font-size:1rem; line-height:1.4;}
@media (min-width:700px) {
  .lead { font-size:1.5rem; }
}

.text-left { text-align:left !important;}
.text-right { text-align:right !important;}
.text-center { text-align:center !important;}

.bg-primary { background-color: #007bff !important;}
a.bg-primary:focus, a.bg-primary:hover { background-color: #0062cc !important;}
.bg-secondary { background-color: #868e96 !important;}
a.bg-secondary:focus, a.bg-secondary:hover { background-color: #6c757d !important;}
.bg-success { background-color: #28a745 !important;}
a.bg-success:focus, a.bg-success:hover { background-color: #1e7e34 !important;}
.bg-info { background-color: #17a2b8 !important;}
a.bg-info:focus, a.bg-info:hover { background-color: #117a8b !important;}
.bg-warning { background-color: #ffc107 !important;}
a.bg-warning:focus, a.bg-warning:hover { background-color: #d39e00 !important;}
.bg-danger { background-color: #dc3545 !important;}
a.bg-danger:focus, a.bg-danger:hover { background-color: #bd2130 !important;}
.bg-light { background-color: #f8f9fa !important;}
a.bg-light:focus, a.bg-light:hover { background-color: #dae0e5 !important;}
.bg-dark { background-color: #343a40 !important;}
a.bg-dark:focus, a.bg-dark:hover { background-color: #1d2124 !important;}
.bg-white { background-color: #fff !important;}
.bg-transparent { background-color: transparent !important;}

.clear {clear: both;}
.fright { float:right;}
.fleft { float:left;}

/* screen < 768px 모바일 우선 영역 */

...

@media (min-width: 768px) { /* screen >= 768px 데스크톰 영역 */

...

}

#007bff
파란색

#868e96
진회색

#28a745
녹색

#17a2b8
청녹색

#ffc107
황색

#dc3545a
붉은색

#f8f9fa
흰회색

#343a40
검정회색

#009BFA
파란색

#212528
검정

위의 :root문의 선언의 color의 색입니다.

아직 IE나 브라우저 구버전에는 작동 하지 않아 선언만 하고 사용은 하지 않습니다.

IE나 구버전 브라우저 신경 안쓴다면 ...

var () : 예제

:root {
--mcolor : #ffff52;
}
a {color: var(--mcolor);}

기타 css부분입니다.

이것은 개인적인 것이라 뒤에 소개한 것입니다.

 /* 햇 폰트 사용 */
@import url(//cdn.jsdelivr.net/font-hack/2.020/css/hack.min.css);
/* 기본 */
.article pre { background-color:#F6F7F8; margin:3px auto; padding:30px 16px 10px; word-wrap: break-word; font-size:14px; 
                   line-height:20px; border:1px solid rgba(0,0,0,.125); border-radius:.25rem; overflow-x: auto; position: relative;}
/* 상위 글짜 : 기본(Source Code) */
.article pre::before { content: "Source Code";  position: absolute; top:  7px; left: 15px; text-transform: uppercase; color:#007bff;}
.article pre.html::before { content: "HTML Code"!important;}
.article pre.css::before { content: "CSS Code"!important;}
.article pre.js::before { content: "JavaScript Code"!important;}
.article pre.bash::before { content: "Bash"!important;}
/* 하단 스크롤바 모양 변경 */
.article pre::-webkit-scrollbar{height:5px}
.article pre::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);-webkit-border-radius:0px;border-radius:0px}
.article pre::-webkit-scrollbar-thumb{-webkit-border-radius:0px;border-radius:0px;background:rgba(136,136,136,0.8);-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.5)}
.article pre::-webkit-scrollbar-thumb:window-inactive{background:rgba(136,136,136,0.4)}

본문이 .article일 경우 <pre>문의 사용 입니다.

기본적으로 <pre>만 사용하면 'Source Code' 가 출력되고 html,css,js를 클래스에 넣으면 해당 코드문이 출력 됩니다. (덮어 쓰기 형식입니다.)

예제

<pre>code</pre>
<pre class='html'>code</pre>

기타 Js부분입니다.문서 하단에 할것

이 부분은 지극히 개인적인 부분입니다. <blockquote>문

// section blockquote CSS 정하기
var w = window.innerWidth; // 화면 사이즈 저장
var divq = document.querySelectorAll("blockquote.tx-quote-tistory, blockquote");  // 전체 문서 검색
if (w >= 700) {  //본문 700px : 사이즈가 같거나 크면
for ( var i = 0; i < divq.length; i++ ) { //몇개를 적던가에 따라 모두 같은 스타일
divq[i].style.width = (w-20+"px");
divq[i].style.left = ((w-720)/2)*-1 + "px";  //패딩 20px 로 700+20
divq[i].style.position ="relative";
divq[i].style.margin = 0;
divq[i].style.padding = "20px";
divq[i].style.backgroundColor= "#F9FAFC";
divq[i].style.color = "#454d57";
}} else {
for ( var i = 0; i < divq.length; i++ ) { // 700px보다 작으면
divq[i].style.position ="relative";
divq[i].style.margin = 0;
divq[i].style.padding = "20px";
divq[i].style.backgroundColor= "#F9FAFC";
divq[i].style.color = "#454d57";
divq[i].style.width = "100%";	
}};

querySelectorAll문을 이용해(문서 전체) blockquote문이면 화면 전체 가로 박스에 배경을 만들고 <p>태그 안에 영역을 본문 크기로 하여 보이게끔 만든 css문의 자바스크립트 부분입니다.

blockquote.tx-quote-tistory부분은 티스토리의 blockquote문 입니다.

예제

<blockquote><p>예제 입니다.</p></blockquote>

예제 입니다.

기타 티스토리 부분입니다.

이 부분은 티스토리 상단 로그인바와 CCL숨기기

/* 티스토리 상단 로그인바와 CCL숨기기 */
#tistorytoolbarid {display:none;}
.entry-ccl {display:none;}

마무리

이상은 저의 개인적인 기본 템플릿입니다. 나중에 사용할려고 만들었지만 기타부분에서 많이 적었네요. 앞으로 더 추가 할것이 있으면 더 적어 놓겠습니다.

저작자표시

템플릿이란?

소개

var () : 예제

기타 css부분입니다.

예제

기타 Js부분입니다.문서 하단에 할것

예제

기타 티스토리 부분입니다.

마무리

..

IN:nK은?

티스토리툴바