본문 바로가기
Publishing/HTML

사이트 기본 setting

by 오다다 코드 odada 2020. 8. 11.

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="stylesheet" href="./dist/vendor/line-awesome/css/line-awesome.css"/> <!-- 이미지 아이콘 -->
  <link rel="stylesheet" href="./dist/vendor/bootstrap/bootstrap.min.css"> <!-- 부트스트랩 -->
  <link rel="stylesheet" href="./dist/vendor/slick/slick.css" />  <!-- 이미지 슬라이드 -->
  <link rel="stylesheet" href="./dist/vendor/slick/slick-theme.css" />  <!-- 이미지 슬라이드 테마 -->
  <link rel="stylesheet" type="text/css" href="./dist/css/comm.css">   <!-- my css -->
</head>
<body>
<div id="skipnavigation">
    <a href="#gnb"><span>주메뉴 바로가기</span></a>
    <a href="#main"><span>본문 바로가기</span></a>
    <a href="#login"><span>로그인 바로가기</span></a>
  </div>
  <div class="wrap">
    <!-- header -->
    <header>
      <div class="inner_header">
        <h1>
          <a href="#">회사이름</a>
        </h1>
        <nav>
          <ul>
            <li>
              <a href="#">하나</a>
              <ul>
                <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>
                <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>
                <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>
                <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>
                <li><a href="#">다섯-1</a></li>
                <li><a href="#">다섯-2</a></li>
              </ul>
            </li>
          </ul>
        </nav>
      </div>
    </header>
    <!-- //header -->
    <!-- container -->
    <div class="container">
      <div class="contents">
        <div class="sec_g sec_">
          <h2>타이틀</h2>
          <div class="cont_g">

          </div>
        </div>
      </div>
      <aside></aside>
    </div>
    <!-- //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> <!-- 필수 jQuery -->
  <script src="./dist/vendor/bootstrap/bootstrap.min.js"></script> <!-- 부트스트랩 -->
  <script src="./dist/vendor/slick/slick.min.js"></script> <!-- 이미지 슬라이드 -->
  <script src="./dist/vendor/jquery.scrollUp.min.js"></script> <!-- scroll top -->
  <script src="./dist/js/comm.js"></script> <!-- my js -->
  <!-- ie9 이하 버전에서 잘 보이도록 추가 -->
  <!--[if lt IE 9]>
  	<script src="./dist/js/module/html5.js"></script>
  	<script src="./dist/js/module/respond.min.js"></script>
  <![endif]-->
</body>

</html>

!setting.zip
7.64MB

 

공통 스타일시트

크로스브라우징을 위해 각 태그관련 속성을 초기화 시켜주는 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 {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 */
#skipnavigation a {position: absolute;left: -3000%;}
#skipnavigation 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 {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 */
#skipnavigation a {position: absolute;left: -3000%;}
#skipnavigation 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' 카테고리의 다른 글

사이트 기본 setting  (0) 2020.08.11
Event Page 코딩하기  (0) 2020.08.04
회원가입 폼  (0) 2020.07.24
HTML5 Canvas  (0) 2020.02.13
HTML5 Video (fullpage Video)  (0) 2020.02.13
HTML5 audio  (0) 2020.02.13

댓글0