posted by Solver Full-stack Developer 2011.11.10 18:02
Step 1 . Download jQuery

-http://jquery.com/
 
 


Step 2. Add script
- 해당페이지에 js파일을 넣는다. 
- 아래와 같이 추가한다.

<html>
<head>
<meta charset="UTF-8"/>
<script src="jquery-1.6.2.min.js"> </script>
</head>
</html> 

Step 3. Use jQuery

 
<html>
<head>
<meta charset="UTF-8"/>
<script src="jquery-1.6.2.min.js"> </script>
<script>

$(function(){

//alert($('li').length);
$('ul#sectionList li');
document.getElementsByTagName('ul')[0].getElementById('sectionList').childNodes;

var cnt = $('ul#sectionList').children().length;
console.log(cnt);
$('ul#sectionList li').css({
width: 100/cnt+'%',
});
console.log($('ul#sectionList li'));
$('ul#sectionList li').click(function(){
//hide selected image
$('ul#sectionList li.selected').removeClass('selected');
//show image for only this li
$(this).addClass('selected');
});
});

</script>

Sample code
-주석없는 예제는 하단에 있습니다.
<html>
<head>
<meta charset="UTF-8"/>
<script src="jquery-1.6.2.min.js"> </script>// jQuery를 추가한다.
<script>//스크립트 사용
//$의 의미는 jQuery이다. 즉, jQuery가 $로 typedef되어있다. jQuery == $
//jQuery를 사용할때는 $()형식으로 사용한다. 
$(function(){//c에서 main함수 같은 것이다. 이렇게하면 body의 script가 로딩된후 해당함수가 실행된다. 
html은 맨위에서 한줄한줄 적용된다. 즉 해당소스를 크게보면 head안에 <meta .../>를 수행하고 script src="..</script>를 수행하고 <script> ... </script>를 수행한다. 그 후 <body>의 script가 수행된다는 점을 기억하자.


        $('#sectionList li');//#->id .->class #sectionList li(공백)->id가 sectionList 하위의 li(parent elemtnt 공백 parent elemnt child)
document.getElementById('sectionList').childNodes;
//위의 $('#sectionList li');와 같은 기능의 소스다. 한눈에봐도 jQuery를 사용하는게 짧은것을 볼수있다.(즉, 같은 기능을 짧은코드로 수행할 수 있어서 매우 효율적이다.)

var cnt = $('ul#sectionList').children().length;//id가 sectionList인 ul의 li개수를 가져온다.
console.log(cnt);//chrome을 사용하고 요소검사를 하면 로그가 보일것이다.
$('ul#sectionList li').css({//id가 sectionList인 ul의 li들의 css를 변경한다.
width: 100/cnt+'%',//JSON처럼 ,로 설정할것을을 나열한다. ;으로 끝나지 않는다.
});
console.log($('ul#sectionList li'));
$('ul#sectionList li').click(function(){//$('ul#sectionList li')는 배열이다 즉 모든 li에 동일 작업roof가 도는것과 같다.
//hide selected image
$('ul#sectionList li.selected').removeClass('selected');//바로전에 클릭된던 li의 class를 제거한다.
//show image for only this li
$(this).addClass('selected');//click한 li에 select라는 class를 add한다. class는 class=" selected fooclass sooclass"와같이 여러클레스를 다중 추가해줄 수 있는데 공백으로 구분한다.
});
});

</script>
<style type="text/css">
ul#sectionList li.selected {
background-color: red;
}
li{
float: left; //리스트가 달릴때 vertical로 안달리고 horizental식으로 달리게하는 설정이다.
}

body{
margin:0px;
}

ul#sectionList{
-webkit-padding-start:0px;
background-color: green;
overflow:hidden;//상위 element가 height가 설정하지않고, 하위 li들이 flot될때 height가 0이되는 현상이 일어나는데 overflow:hidden;을 해준다면 child의 height로 보여주게 됩니다.
}
</style>
</head>
<body>
<div>
<ul id="sectionList">
<li> <a>전체</a> </li>//chrome에서 요소검사를하면 class가 추가 삭제 되는 현상을 볼수있다.
<li> <a>야구</a> </li>
<li> <a>축구</a> </li>
<li> <a>종합</a> </li>
<li> <a>포토</a> </li>
</ul>
</div>
</body>
</html>

----------------------예제----------------------
<html>
<head>
<meta charset="UTF-8"/>
<script src="jquery-1.6.2.min.js"> </script>
<script>

$(function(){

$('#sectionList li');
document.getElementById('sectionList').childNodes;


var cnt = $('ul#sectionList').children().length;
console.log(cnt);
$('ul#sectionList li').css({
width: 100/cnt+'%',
});
console.log($('ul#sectionList li'));
$('ul#sectionList li').click(function(){
//hide selected image
$('ul#sectionList li.selected').removeClass('selected');
//show image for only this li
$(this).addClass('selected');
});
});

</script>
<style type="text/css">
ul#sectionList li.selected {
background-color: red;
}
li{
float: left;
}

body{
margin:0px;
}

ul#sectionList{
-webkit-padding-start:0px;
background-color: green;
overflow:hidden;
}
</style>
</head>
<body>
<div>
<ul id="sectionList">
<li> <a>전체</a> </li>
<li> <a>야구</a> </li>
<li> <a>축구</a> </li>
<li> <a>종합</a> </li>
<li> <a>포토</a> </li>
</ul>
</div>
</body>
</html> 
 
신고

'Programming > Web Programming' 카테고리의 다른 글

JavaScript 개요  (0) 2014.06.24
webapp deploy in tomcat 7.0  (0) 2014.04.16
javascript - oop  (0) 2014.03.14
javascipt Date객체 formatting yyyy-MM-dd hh:mm:ss  (0) 2014.01.13
jQuery - jQuery 시작하기  (0) 2011.11.10
HTML - HTML 시작하기  (0) 2011.11.08
TAG
posted by Solver Full-stack Developer 2011.11.08 17:28
시작하기전에
-apache서버를 설치를 해야하는데 구글링해서 무료라서 설치하기 쉬울것이다.
apavhe서버를 (단, windows OS일 경우)설치하면 
C:\Program Files\Apache Software Foundation\Apache2.2\htdocs 에 수정한 html파일을 넣어두면 127.0.0.1로 접근하면 파일리스트가 보일것이다. 
그래서 파일을 실행하여 결과화면을 보면서 개발하면된다.

-크롬 요소검사사용을 추천한다. 위에 자신이 개발한 html코드를 작성하고 우클릭->요소검사를 하면 
html css 등 여러 데이터를 분석하는데 큰 도움이 된다.



1.Web programming
-keyword는 소문자로
-html은 이미지, 텍스트같은 데이터만
-css는 테마, 스타일을 설정
-javascript는 동작, 반응 리엑션을 다룬다.
-php는 DBconnection과같이 DB데이터를 다룬다. 페이지를 만들수도 있다.
-기타 프로그래밍과같이 모듈화를 잘해야 한다.
2.기본구조
<html>
<head>
            </head>
            <body>
            </body>
</html> 

3.keyword
<a> - 링크 
<ul> - 리스트 그룹 (ul안에 li를 넣는다)
<li> - 리스트 아이템 
<img> - 이미지 (img는 img안에 넣을 것이 없어서 <img src="dir/images.jpg"/> 와같은식으로 효기된다.)

4.한글깨짐 문제
-meta데이터 html데이터를 설명하기위한 데이터 charset을 설정해주어야 한글이 안깨진다.
<head>
<meta charset="UTF-8"/>
</head>

5.style 설정
style은 <head> 안에 넣는다 </head>
<head>
<style type="
text/css">
...
</style> 
...
</head>
 
6.예제를 통한 설명
-style에 데이터를 지우면서 차이를 비교하세요. 
-하단에 주석이 없는 깨끗한 예제가 있습니다. 

 
<html>
<head>
<meta charset="UTF-8"/>//한글깨짐 해결해주는 부분

<style type="text/css">//스타일 시작부분
body {//style를 적용할때  적용대상(body) { 식으로 시작한다.
margin: 0;
}

li {//리스트 아이템에 style 적용하는 부분 - 아래와같이 적용을 안할경우 기본브라우저가 자동생성해주는 부분이 있어서 자신의 style에 맞게 설정해주어야 한다.
background-color: none;
list-style-type: none;
padding-bottom: 5px;
border-bottom: 1px solid #e3e3e3;//boder-bottom-width, boder-bottom-style, boder-bottom-color을 한번에 설정해줄수있다. 1px solid #e3e3e3  와같이 설정 데이터 사이에 ,은 안넣어준다.
}
ul{//리스트 그룹에 style 적용
-webkit-padding-start: 0px;
}
div#rt_news{//div중 rt_news에 style을 설정한다는 의미다. 아래 보면 id 지정해준 부분이있다.
만약 div #re_new로 div와 #사이를 띄어줄경우 모든 div안에있는 id가 rt_news인 element의 스타일을 설정한다는 의미다. 
width:218px;
}
</style>

</head>
<body>

<div id="rt_news">//div는 박스 개념으로 보면된다. 대세는 div라고한다. 예전에는 table을 많이 사용했다고함.
<img src="images/sokbo.png" />
<ul>//리스트 그룹
<li id="myLi">//리스트아이템(li)을 ul안에 넣는다.
<a>기사입니다! 첫번째</a>
</li>
<li class="myClass">
<a href="http://codedb.tistory.com">기사 두번째!</a>//a는 링크로 기사 두번째! 와같이 표기되게 바꾸어 클릭하면 href로 설정한 url로 이동한다.
</li>
<li>
<a>기사 세번째이여요옹~</a>
</li>
<li>
<a>기사 세번째이여요옹~</a>
</li>
<li>
<a>기사 세번째이여요옹~</a>
</li>
<li>
<a>기사 세번째이여요옹~</a>
</li>
<li>
<a>기사 세번째이여요옹~</a>
</li>
<li>
<a>기사 세번째이여요옹~</a>
</li>
<li>
<a>기사 세번째이여요옹~</a>
</li>
<li>
<a>기사 세번째이여요옹~</a>
</li>
<li>
<a>기사 세번째이여요옹~</a>
</li>
<li>
<a>기사 세번째이여요옹~</a>
</li>
<li>
<a>기사 세번째이여요옹~</a>
</li>
</ul>
</div>

</body>
</html>
---------------------예제------------------------
 <html>
<head>
<meta charset="UTF-8"/>

<style type="text/css">
body {
margin: 0;
}

li {
background-color: none;
list-style-type: none;
padding-bottom: 5px;
border-bottom: 1px solid #e3e3e3;
}
ul{
-webkit-padding-start: 0px;
}
div#rt_news{
width:218px;
}
</style>

</head>
<body>

<div id="rt_news">
<img src="images/sokbo.png" />
<ul>
<li id="myLi">
<a>기사입니다! 첫번째</a>
</li>
<li class="myClass">
<a href="http://codedb.tistory.com">기사 두번째!</a>
</li>
<li>
<a>기사 세번째이여요옹~</a>
</li>
<li>
<a>기사 세번째이여요옹~</a>
</li>
<li>
<a>기사 세번째이여요옹~</a>
</li>
<li>
<a>기사 세번째이여요옹~</a>
</li>
<li>
<a>기사 세번째이여요옹~</a>
</li>
<li>
<a>기사 세번째이여요옹~</a>
</li>
<li>
<a>기사 세번째이여요옹~</a>
</li>
<li>
<a>기사 세번째이여요옹~</a>
</li>
<li>
<a>기사 세번째이여요옹~</a>
</li>
<li>
<a>기사 세번째이여요옹~</a>
</li>
<li>
<a>기사 세번째이여요옹~</a>
</li>
</ul>
</div>

</body>
</html>
신고

'Programming > Web Programming' 카테고리의 다른 글

JavaScript 개요  (0) 2014.06.24
webapp deploy in tomcat 7.0  (0) 2014.04.16
javascript - oop  (0) 2014.03.14
javascipt Date객체 formatting yyyy-MM-dd hh:mm:ss  (0) 2014.01.13
jQuery - jQuery 시작하기  (0) 2011.11.10
HTML - HTML 시작하기  (0) 2011.11.08
posted by Solver Full-stack Developer 2011.05.16 14:44
Webview content = new Webview(this);

String data="<html>"+
   "<head>"+ 
   "<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\">"+
   "</head>"+
   "<body>"+
    "<div style=\"text-align:left\">"
    +"글로벌 금융위기 전후 4년간 한국인의20% 실질 재산이 6분의 1이나 감소한 것으 "   
+"</div>"+
   "</body>"+
   "</html>";



   content.loadData(data,"text/html;charset=UTF-8","UTF-8");

위와같이 할시 페이지를 찾을 수 없습니다가 나올 것이다...

이유는... %때문에..  이것을 html 특수문자표에서 해당 특수기호와 동일한 특수문자를 replace 시켜야한다.

String tuning = data;
   tuning = tuning.replaceAll("%", "&#37;");
   tuning = tuning.replaceAll("\n", "<br>");

위와같이 replaceAll을 이용해서 바꾸어주면 정상적으로 나올것이다...


신고

티스토리 툴바