본문 바로가기
Study/HTML5,CSS,JQuery

[HTML5/CSS3/JQUERY] 작업환경 설정, HTML5에 JQUERY 적용하기

힝쏘 2019. 5. 21. 10:42

* HTML5

웹 기술만으로 네이티브 어플리케이션 수준의 웹 어플리케이션 개발

 

* 기본 웹 브라우저

chrome, firefox, opera 에서 확인하기

 

* 서버 설정

http://www.apache.org/

Tomcat :  32-bit window zip file download

Eclipse : New - Other - Server - Server - Apache - 'Tomcat v7.0 Server' click - directory setting

 

* 프로젝트 설정

Eclipse : New - Project - Web - Dynamic web project - 

add project <Day0904>  - WebContent - add file <test1.html> : New HTML File (5) 

 

* jQuery

http://jquery.com/download/

jquery-1.8.1.min.js download

Day0904 Project - WebContent - add folder 'js' - Copy and Paste 'jquery-1.8.1.min.js'

또는

http://jquery.com/download/

Advanced/Experimental Options - Version에 따른 Docs 클릭 -  http://code.jquery.com/jquery-1.7.2.min.js Copy and paste

 

* 실행 

Eclipse : Window - Web Browser - default system web browser 설정 후, (생략해도 됨)

Run as - Run On Server

 

* 참고할 GOOGLE API 

예제 사이트 : https://developers.google.com/

 

 

 

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Insert title here</title> 
<!-- jQuery 파일을 적용하는 코드 --> 
<!-- ctrl+shift+/ 주석 적용 --> 
<!-- <script type="text/javascript" src="js/jquery-1.8.1.min.js"></script> --> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
        <!-- 모든 태그에 1px, solid, 색상을 빨강으로 주라는 표시 --> 
        $("*").css("border", "1px solid #ff0000"); 
    }); 
</script> 
</head> 
<body> 
    <!-- id : 해당 tag의 고유값 설정 --> 
    <h1>jQuery</h1> 
    <h2>jQuery</h2> 
    <h3>jQuery</h3>     
    <p class="my">jQuery</p> 
    <div> 
        <div id="content">id content div tag</div> 
    </div> 
    <b>b Tag</b> 
    <span>span tag</span> 
</body> 
</html>

 

 

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Insert title here</title> 
<!-- 다이렉트로 스타일 적용시키기 --> 
<style type="text/css"> 
.st3{ font-size:15pt; color:blue; border:2px solid green; background-color:#ccffff; } 
</style> 
<!-- <script type="text/javascript" src="js/jquery-1.8.1.min.js"></script> --> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
<script type="text/javascript"> 
    /* 윈도우가 로드될 때 자동으로 호출하는 함수  */ 
    window.onload = function() { 
        /* class = '.' */ 
        $(".st1").css("background", "yellow"); 
        $(".st2").css("border", "3px dotted magenta"); 
    } 
</script> 
</head> 
<body> 
    <p class="st1">Hanbit Test Center</p> 
    <p class="st2">HTML5 & jQuery Study</p> 
    <p class="st3">오늘은 비오는 화요일입니다.</p> 
</body> 
</html>

 

 

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Insert title here</title> 
<!-- <script type="text/javascript" src="js/jquery-1.8.1.min.js"></script> --> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
<style type="text/css"> 
    body{ width:960px; margin:20px auto; font-family:arial, sans-serif; } 
    aside{ width:25%; height:60px; background-color:#aabbcc; } 
    header{ width:75%; float:right; background-color:#ffff00; } 
    section{ width:75%; float:right; background-color:#0000ff; } 
    /* 해당 태그의 id 접근할 때는 tag#id{} 라고 하면 된다.  */ 
    footer#page_footer{ width:75%; float:right; text-align:center; } 
</style> 
</head> 
<body> 
    <header>Header</header> 
    <section>Section</section> 
    <footer id="page_footer">Footer</footer> 
    <aside>Aside</aside> 
</body> 
</html>

 

 

 

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Insert title here</title> 
<!-- <script type="text/javascript" src="js/jquery-1.8.1.min.js"></script> --> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
<style type="text/css"> 
    body{ width:100%; margin:20px auto; font-family:Arial; } 
     header{ background-color:#ffff00; }                                  /* 배경색:노란색 */ 
    header#page_header{ font-family:궁서체; } 
    #kwamok ul{ list-style:none; margin:10; }                            /* list-style:none; 왼쪽에 표시되었던 점 사라지게 만듬  */ 
    #kwamok li{ display:inline; }                                        /* 수평 정렬 */ 
    #kwamok li>a{ text-decoration:none; font-family:Comic Sans Ms; }     
    section{ background-color:#ffccff; }                                 
    .ar{ background-color:#ffffcc; } 
    section>article>footer{ background-color:#ccffff; } 
    .foo{ font-size:8px; } 
    footer#page_footer{ text-align:center; }                            /* 텍스트 정렬*/ 
</style> 
</head> 
<body> 
    <header id="page_header"> 
        <hgroup> 
            <h1>학습과목</h1> 
            <h3>컴퓨터 프로그래밍</h3> 
        </hgroup> 
        <nav id="kwamok"> 
            <ul> 
                <!-- 연습용이라 링크는 안  걸어둠 --> 
                <li><a href="#">자바</a></li> 
                <li><a href="#">서블릿</a></li> 
                <li><a href="#">HTML5</a></li> 
            </ul> 
        </nav> 
    </header> 
     
    <section> 
        <article class="ar"> 
            <header> 
                <h2>Section->Header</h2> 
                <p>작성 : 홍길동</p> 
            </header> 
            <p>섹션 내의 아티클</p> 
            <p>아티클은 다시 섹션을 가질 수 있다.</p> 
            <footer class="foo"> 
                <span>article 안의 footer</span> 
            </footer> 
        </article> 
    </section> 
     
    <footer id="page_footer"> 
        <p>&copy; Hanbit 정보교육(주)</p> 
    </footer> 
</body> 
</html>
저작자표시

'Study > HTML5,CSS,JQuery' 카테고리의 다른 글

[HTML5/CSS3/JQUERY] audio와 video 예제  (0) 2019.05.21
[HTML5/CSS3/JQUERY] canvas  (0) 2019.05.21
[HTML5/CSS3/JQUERY] HTML5에서 새로 지원하는 폼태그 경험하기  (0) 2019.05.21
[HTML5/CSS3/JQUERY] 인터넷 브라우저 별 input type range 알아보기  (0) 2019.05.21
[HTML5/CSS3/JQUERY] header,section,article,aside,footer  (0) 2019.05.21

'Study/HTML5,CSS,JQuery' Related Articles

티스토리툴바