Publishing/HTML

사이트 기본 setting

oodada 2020. 8. 11. 09:35

setting 사이트 보기

flato.kr/study/!setting/

아래 라이브러리 적용

  • scss
  • swiper
  • line-awesome
  • bootstrap
  • google font
  • scrollUp
  • include

오류 : header를 include 하면 focus가 안먹음... ㅜㅜ 추후 해결...

 

setting 파일 다운로드

github.com/eehd80/setting

 

eehd80/setting

Contribute to eehd80/setting development by creating an account on GitHub.

github.com

 

html5 기본 레이아웃

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 반응형 페이지 뷰포트 설정 -->
  <meta name="apple-mobile-web-app-title" content="벽초지수목원" />
  <title>벽초지수목원</title>
  <meta name="title" content="벽초지수목원" />
  <meta name="keywords" content="수목원,식물원,소풍,데이트,효도,관광,여행,정원,조경,가든,파주,나들이,피크닉,모임,산책" />
  <meta name="description" content="동서양의 아름다운 정원을 모두 품은 곳, 벽초지수목원으로 여러분을 초대합니다. 가족, 연인들과 함께 한 폭의 그림과 같은 동양식 그리고 유럽식 정원을 관람하며 자연의 아름다움을 흠뻑 느끼는 곳입니다. 벽초지수목원은 경기도 파주시에 위치하고 있습니다." />
  <!-- 카카오톡 -->
  <meta property="og:title" content="벽초지수목원">
  <meta property="og:url" content="https://www.bcj.co.kr/">
  <meta property="og:image" content="./images/bcj-og.jpg">
  <meta property="og:description" content="동서양의 아름다운 정원을 품은 벽초지수목원으로 여러분을 초대합니다." />
  <meta name="twitter:card" content="summary">
  <meta name="twitter:title" content="벽초지수목원">
  <meta name="twitter:url" content="https://www.bcj.co.kr/">
  <meta name="twitter:image" content="./images/bcj-twitter.jpg">
  <meta name="twitter:description" content="동서양의 아름다운 정원을 품은 벽초지수목원으로 여러분을 초대합니다." />
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">
  <link rel="stylesheet" href="./dist/vendor/swiper/swiper-bundle.css">
  <link rel="stylesheet" href="./dist/css/comm.css">
</head>
<body>
<div id="u-skip">
    <a href="#gnb"><span>주메뉴 바로가기</span></a>
    <a href="#main"><span>본문 바로가기</span></a>
  </div>
  <div class="wrap">
    <!-- header -->
    <header>
      <div class="container">
        <h1>
          <a href="#">회사이름</a>
        </h1>
        <nav id="gnb">
          <ul class="nav-depth1">
            <li>
              <a href="#">하나</a>
              <ul class="nav-depth2">
                <li><a href="#">하나-1</a></li>
                <li><a href="#">하나-2</a></li>
                <li><a href="#">하나-3</a></li>
                <li><a href="#">하나-4</a></li>
              </ul>
            </li>
            <li>
              <a href="#">둘둘둘둘둘</a>
              <ul class="nav-depth2">
                <li><a href="#">둘-1</a></li>
                <li><a href="#">둘-2</a></li>
                <li><a href="#">둘-3</a></li>
                <li><a href="#">둘-4</a></li>
              </ul>
            </li>
            <li>
              <a href="#">셋셋셋</a>
              <ul class="nav-depth2">
                <li><a href="#">셋셋셋-1</a></li>
                <li><a href="#">셋셋셋-2</a></li>
                <li><a href="#">셋셋셋-3</a></li>
                <li><a href="#">셋셋셋-4</a></li>
              </ul>
            </li>
            <li>
              <a href="#">넷넷넷</a>
              <ul class="nav-depth2">
                <li><a href="#">넷넷넷-1</a></li>
                <li><a href="#">넷넷넷-2</a></li>
                <li><a href="#">넷넷넷-3</a></li>
                <li><a href="#">넷넷넷-4</a></li>
                <li><a href="#">넷넷넷-5</a></li>
                <li><a href="#">넷넷넷-6</a></li>
                <li><a href="#">넷넷넷-7</a></li>
              </ul>
            </li>
            <li>
              <a href="#">다섯</a>
              <ul class="nav-depth2">
                <li><a href="#">다섯-1</a></li>
                <li><a href="#">다섯-2</a></li>
              </ul>
            </li>
          </ul>
        </nav>
      </div>
    </header>
    <!-- //header -->
    <!-- container -->
    <main id="main">
     <!-- section1 -->
     <section class="sec-g sec-name">
      <div class="container">
        <h2 class="sec-tit-type1">타이틀</h2>
        <div class="sec-cont">컨텐츠</div>
      </div>
     </section>
     <!-- //section1 -->
    </main>
    <!-- //container -->
    <!-- footer -->
    <footer>
      <h1><a href="#">회사로고</a></h1>
      <div class="col_right">
        <address></address>
        <div class="copyright"></div>
      </div>
    </footer>
    <!-- //footer -->
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="./dist/vendor/swiper/swiper-bundle.min.js"></script>
  <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
  <script src="./dist/vendor/scrollUp/jquery.scrollUp.min.js"></script>
  <script src="./dist/js/form-submission-handler.js"></script>
  <script src="./dist/vendor/include.js"></script>
  <script src="./dist/js/comm.js"></script>
  <!--[if lt IE 9]>
    <script src="./dist/vendor/html5.js"></script>
    <script src="./dist/vendor/respond.min.js"></script>
  <![endif]-->
</body>

</html>

 

공통 스타일시트

크로스브라우징을 위해 각 태그관련 속성을 초기화 시켜주는 CSS로 PC와 Mobile에서의 환경을 고려하여 각각 reset.css를 정의하고 있다. 각 서비스 개편시 해당 reset.css를 활용하여 초기화시켜준다. 그리고 기능적으로 공통적으로 사용되는 속성은 global 클래스네임을 정의하여 선택적으로 사용한다.

1. 아래 주소에서 reset.css를 다운 받아 쓰셔도 되고...

https://www.jsdelivr.com/package/npm/reset-css

 

jsDelivr - A free, fast, and reliable CDN for Open Source

Supports npm, GitHub, WordPress, Deno, and more. Largest network and best performance among all CDNs. Serving more than 80 billion requests per month. Built for production use.

www.jsdelivr.com

 

2. 제가 제공 하는 reset.css 를 사용하셔도 됩니다.

PC - Reset.css

@charset "UTF-8";

/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button,header,main,article,footer,i,section,article {margin:0;padding:0;box-sizing:border-box;}
fieldset,img {border:0 none}
dl,ul,ol,menu,li {list-style:none}
blockquote, q {quotes: none}
blockquote:before, blockquote:after,q:before, q:after {content:'';content:none}
input,select,textarea,button {vertical-align:middle;}
button {border:0 none;background-color:transparent;cursor:pointer}
body {background:#fff}
/* 기본 폰트 설정 */
html,body,th,td,input,select,textarea,button {font-size:14px;line-height:1.5;font-family:'NanumSquare',"Malgun Gothic", "Apple Gothic", sans-serif;font-weight: 400;color:#333;letter-spacing: -.2px;} /* color값은 디자인가이드에 맞게사용 */
a {color:#333;text-decoration:none}
a:active, a:hover, a:focus {text-decoration:none; color: #0072bc;}
address,caption,cite,code,dfn,em,var {font-style:normal;font-weight:normal}
hr {display: none;}
input[type=password] {font-family: 'Malgun Gothic';}

/* skipnavigation */
#u-skip a {position: absolute;left: -3000%;}
#u-skip a:focus {display: block;left: 0;top: 0;z-index: 10000000000;width: 100%;height: 30px;line-height: 30px;background: #0072bc;color: #fff;text-align: center;}

/* 이미지 스프라이트 */
.img_g {display: inline-block;overflow: hidden;background:url(../../images/comm/img-comm.png) no-repeat;vertical-align: top;} /* 이미지 */

/* global */
.ir_pm {display:block;overflow:hidden;font-size:0px;line-height:0;text-indent:-9999px} /* 사용된 이미지내 의미있는 텍스트의 대체텍스트를 제공할때 */
.ir_wa {display:block;overflow:hidden;position:relative;z-index:-10;width:100%;height:100%} /* 중요한 이미지 대체텍스트로 이미지off시에도 대체 텍스트를 보여주고자 할때 */
.blind, caption, legend {overflow:hidden;position:absolute;width:0;height:0;line-height:0;text-indent:-9999px} /* 대체텍스트가 아닌 접근성을 위한 숨김텍스트를 제공할때 */

.f_l {float:left}
.f_r {float:right}
.show {display:block}
.hide {display:none}
.tbl {border-collapse:collapse;border-spacing:0} /* 테이블 초기화 */
.clear_g {display:block;overflow:visible;width:auto;clear:both;*zoom:1}
.clear_g:after {display:block;visibility:hidden;height:0;font-size:0;clear:both;content:''}

 

Mobile - Reset.css

/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button,section,article {margin:0;padding:0;box-sizing:border-box}
fieldset,img {border:0 none}
dl,ul,ol,menu,li {list-style:none}
blockquote, q {quotes:none}
blockquote:before, blockquote:after,q:before, q:after {content:'';content:none}
input,select,textarea,button {font-size:100%;vertical-align:middle}
button {border:0 none;background-color:transparent;cursor:pointer}
table {border-collapse:collapse;border-spacing:0}
body {-webkit-text-size-adjust:none} /* 뷰표트 변환시 폰트크기 자동확대 방지 */
input[type='text'],input[type='password'],input[type='submit'],input[type='search'] {-webkit-appearance:none; border-radius:0}
input:checked[type='checkbox'] {background-color:#666; -webkit-appearance:checkbox}
button,input[type='button'],input[type='submit'],input[type='reset'],input[type='file'] {-webkit-appearance:button; border-radius:0}
input[type='search']::-webkit-search-cancel-button {-webkit-appearance:none}
body {background:#fff}
/* 기본 폰트 설정 */
body,th,td,input,select,textarea,button {font-size:14px;line-height:1.5;font-family:'Malgun Gothic', '맑은 고딕', sans-serif;color:#333} /* color값은 디자인가이드에 맞게사용 */
a {color:#333;text-decoration:none}
a:active, a:hover {text-decoration:none}
address,caption,cite,code,dfn,em,var {font-style:normal;font-weight:normal}
address,caption,cite,code,dfn,em,var {font-style:normal;font-weight:normal}
hr {display: none;}
input[type=password] {font-family: 'Malgun Gothic';}

/* skipnavigation */
#u-skip a {position: absolute;left: -3000%;}
#u-skip a:focus {display: block;left: 0;top: 0;z-index: 10000000000;width: 100%;height: 30px;line-height: 30px;background: #0072bc;color: #fff;text-align: center;}

/* 이미지 스프라이트 */
.img_g {display: inline-block;overflow: hidden;background:url(../../images/comm/img-comm.png) no-repeat;vertical-align: top;} /* 이미지 */

/* global */
.ir_pm {display:block;overflow:hidden;font-size:0px;line-height:0;text-indent:-9999px} /* 사용된 이미지내 의미있는 텍스트의 대체텍스트를 제공할때 */
.ir_wa {display:block;overflow:hidden;position:relative;z-index:-10;width:100%;height:100%} /* 중요한 이미지 대체텍스트로 이미지off시에도 대체 텍스트를 보여주고자 할때 */
.blind, caption, legend {overflow:hidden;position:absolute;width:0;height:0;line-height:0;text-indent:-9999px} /* 대체텍스트가 아닌 접근성을 위한 숨김텍스트를 제공할때 */

.f_l {float:left}
.f_r {float:right}
.show {display:block}
.hide {display:none}
.tbl {border-collapse:collapse;border-spacing:0} /* 테이블 초기화 */
.clear_g {display:block;overflow:visible;width:auto;clear:both;*zoom:1}
.clear_g:after {display:block;visibility:hidden;height:0;font-size:0;clear:both;content:''}

 

 

 

 

 

저작자표시 비영리 동일조건

'Publishing > HTML' 카테고리의 다른 글

html 시작, 기본 구조, head 설정하기 - html 배우기  (0) 2023.11.18
html include/import  (0) 2023.07.24
Event Page 코딩하기  (0) 2020.08.04
회원가입 폼  (0) 2020.07.24
HTML5 Canvas  (0) 2020.02.13

'Publishing/HTML'의 다른글

  • 현재글사이트 기본 setting

관련글

티스토리 친구하기

티스토리툴바