웹을 만들어보자 이제 이블로그를안쓴다는 마음으로!!!3

카테고리 없음 2021. 2. 4. 16:50

이제 리셋 만들자!!

@charset "UTF-8";
/* 여백 초기화 */
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,button{margin:0;padding:0}

/* 테두리 초기화 */
fieldset,img{border:0 none}

/* 리스트 초기화 */
dl,ul,ol,menu,li{list-style:none}

/* 폰트 초기화 */
body,th,td,input,select,textarea,button{font-size:12px;font-family:'나눔 고딕', 'Nanum Gothic', dotum,'돋움',sans-serif;color:#222;}
a{color:#222;text-decoration:none}
a:hover{color:#118eff;text-decoration:underline}
a:active{background-color:transparent}

/* 폰트 스타일 초기화 */
address,caption,cite,code,dfn,em,var{font-style:normal;font-weight:normal}

 

그리고 스타일 만들자!!

developer.mozilla.org/ko/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders

 

배경 및 테두리 - Web 개발 학습하기 | MDN

이번 수업에서는 CSS 배경과 테두리로 할 수 있는 창의적인 작업을 살펴보겠습니다. 그라데이션 (gradients), 배경 이미지, 둥근 테두리를 추가하는 것에서 배경과 테두리는 CSS 의 많은 스타일 질문

developer.mozilla.org

배경설정방법

 

헤더 이미지 다운

title_html1.png
0.13MB

@charset "UTF-8";

/* layout */
#header {height: 860px; background: url(../img/header/title_html1.png) no-repeat center top /contain ;}

드뎌 먼가 되가는군

 

블로그 이미지

Or71nH

,

웹을 만들어보자 이제 이블로그를안쓴다는 마음으로!!!2

카테고리 없음 2021. 2. 4. 16:00

이제 세팅이다

세팅하다가 문제가 생겻다 

 

바로 html5shiv.js가없다 아 그럼 찾아야지

github.com/aFarkas/html5shiv

 

aFarkas/html5shiv

This script is the defacto way to enable use of HTML5 sectioning elements in legacy Internet Explorer. - aFarkas/html5shiv

github.com

 

오 만든사람 그리고 다운해서 dist 파일안에 암거나 쓰면되는데 난 코드 잘보이는 위에꺼 

밑에께 좋다고 한다 모르겟음 그런거 

파일 받기힘들면 여기 받아라

html5shiv.js
0.01MB

이거다

이건 인터넷 익스플로러 버전체크

github.com/Unk/IE-Checker

 

unk/IE-Checker

Internet Explorer version check via Javascript. Contribute to unk/IE-Checker development by creating an account on GitHub.

github.com

 

ie-checker.js
0.00MB

jquery 는 싸이트 연동 해도 되지만 난 오프라인이니!! 다운

code.jquery.com/

 

jQuery CDN

The integrity and crossorigin attributes are used for Subresource Integrity (SRI) checking. This allows browsers to ensure that resources hosted on third-party servers have not been tampered with. Use of SRI is recommended as a best-practice, whenever libr

code.jquery.com

jquery-1.9.1.js
0.26MB

 

됫다 이제 세팅은 끝낫다

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="반응형 웹 페이지 제작 샘플입니다.">
    <meta name="keyword" content="반응형 사이트, 교육사이트">
    <meta name="robots" content="all">
    
    <title>Document</title>
    
    <!-- favicon & icon -->
    <link rel="shortcut icon" href="img/icon/044-buffer.ico">  
    <link rel="buffer-icon" href="img/icon/044-buffer.ico">
    
    <!-- style css -->
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
    
    
    
    <!-- webfont -->
    <link href="http://fonts.googleleapis.com/earlyaccess/nanumgothic.css" rel="stylesheet" type="text/css">
    
    <!-- html5 Support & ie Version Checker -->
    <script src="setting/html5shiv.js"></script>
    <script src="setting/ie-checker.js"></script>
    
    <!-- jQuery -->
    <script src="setting/jquery-1.9.1.js"></script>
</head>
<body>
   <header id="header"></header>
    
</body>
</html>

 

블로그 이미지

Or71nH

,

웹을 만들어보자 이제 이블로그를안쓴다는 마음으로!!!

카테고리 없음 2021. 2. 4. 14:56

일단 필요한것은 brackets 를 받는다

저 확장기능부터 설정할 것이다

저기 EMMET 를 받는다

html 를 편하게 쓸수 있게 해준다

난 테마도 바꿀래 

이쁘게 나와서  눈에 보기 편하다 !!

 

이쁜걸로 바꿔준다

됫어! 이제

html:5 입력하고 <tap>

플러그인이 잘 들어갓다

이제 tap 을이용한 빠른 입력이다!!

header <tap> <ctrl + Enter>

빠르다 작업이

 

그리고 여러개 만들기

section>section*3>article*3 <tap>

개빠르다 이거다!!

이제 타이핑 이쁘게 해준다

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Outliner</title>
</head>
<body>
    <header>
        <h1>반응형 사이트 타이틀</h1>
    </header>
    <nav>
        <h2>반응형 사이트 전체메뉴</h2>
    </nav>
    <article>
        <h2>반응형 사이트 서브 타이틀</h2>
    </article>
    <main>
       <section>
           <h2> 반응형 사이트 컨텐츠</h2>
           <section>
               <h3>반응형 사이트 왼쪽 컨텐트</h3>
               <article><h4>반응형사이트 왼쪽 컨텐츠1</h4></article>
               <article><h4>반응형사이트 왼쪽 컨텐츠2</h4></article>
               <article><h4>반응형사이트 왼쪽 컨텐츠3</h4></article>
           </section>
           <section>
               <h3>반응형 사이트 가운데 켄텐츠</h3>
               <article><h4>반응형사이트 가운데 컨텐츠1</h4></article>
               <article><h4>반응형사이트 가운데 컨텐츠2</h4></article>
               <article><h4>반응형사이트 가운데 컨텐츠3</h4></article>
           </section>
           <section>
               <h3>반응형 사이트 오른쪽 컨텐츠</h3>
               <article><h4>반응형사이트 오른쪽 컨텐츠1</h4></article>
               <article><h4>반응형사이트 오른쪽 컨텐츠2</h4></article>
               <article><h4>반응형사이트 오른쪽 컨텐츠3</h4></article>
           </section>
       </section>
    </main>
    <footer>
        <h2>반응형 사이트 푸터</h2>
    </footer>
    
</body>
</html>

 

잘됫다

 

 

이제 반응형 세팅을 해보자

 

블로그 이미지

Or71nH

,

공지사항

카테고리

글 보관함

달력

«   2021/02   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28

티스토리툴바