'분류 전체보기' 카테고리의 글 목록 (12 Page)

웹을 만들어보자 이제 이블로그를안쓴다는 마음으로!!!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>