달력

52024  이전 다음

  • 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
  • 29
  • 30
  • 31

'프로그래밍/Web'에 해당되는 글 27건

  1. 2018.08.04 [CSS] 배경 100프로 이미지표시
  2. 2018.08.01 [Jquery]dom 선택자
  3. 2018.07.26 [Jquery]선택자 - 속성
  4. 2018.07.25 [Jquery]선택자
  5. 2018.07.17 [Jquery]ready, load
  6. 2018.07.13 [Web]ScrollIndicator
  7. 2018.06.23 [JavaScript]trim

[CSS] 배경 100프로 이미지표시

프로그래밍/Web 2018. 8. 4. 15:20
반응형



저작자표시

'프로그래밍 > Web' 카테고리의 다른 글

[JavaScript] 배열요소를 파라메타로 넘기기  (0) 2018.08.15
[JavaScript] 기본 매개변수  (0) 2018.08.15
[Jquery]dom 선택자  (0) 2018.08.01
[Jquery]선택자 - 속성  (0) 2018.07.26
[Jquery]선택자  (0) 2018.07.25
Posted by 유령회사
|

[Jquery]dom 선택자

프로그래밍/Web 2018. 8. 1. 23:07
반응형

 선택자

설명 

 $(“parent > child”)

 부모(parent) 요소 바로 아래 자식(child)인 요소를 반환

 $(“ancestor descendant”)

 조상(ancestor) 과 일치하는 요소에 포함된 모든 후손(descendant)을 반환

 $(“prev + next”)

 형제(prev)수준의 next요소를 반환

 $(“prev ~ siblings”)

 prev이후에 형제(siblings) 요소 선택


$(“parent > child”)

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<body>
    <ul class="test">
        <li>HTML5</li>
        <li>CSS3</li>
        <li>
            <ul>
                <li>JavaScript</li>
                <li>Jquery</li>
                <li>Node.js</li>
            </ul>
        </li>        
    </ul>
        
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">        
        $("ul.test > li").css("border", "1px solid #ff0000");        
    </script>    
</body>
</html>
cs


실행


$(“ancestor descendant”)

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<body>
    <ul class="test">
        <li>HTML5</li>
        <li>CSS3</li>
        <li>
            <ul>
                <li>JavaScript</li>
                <li>Jquery</li>
                <li>Node.js</li>
            </ul>
        </li>        
    </ul>
        
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">        
        $("ul.test li").css("border", "1px solid #ff0000");        
    </script>    
</body>
</html>
cs


실행



$(“prev + next”)


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<body>
    <ul >
        <li class="test">HTML5</li>
        <li>CSS3</li>
        <li>CSS32</li>
        <li>
            <ul>
                <li>JavaScript</li>
                <li>Jquery</li>
                <li>Node.js</li>
            </ul>
        </li>        
    </ul>
        
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">        
        $(".test + li").css("border", "1px solid #ff0000");        
    </script>    
</body>
</html>
cs


실행




$(“prev ~ siblings”)

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<body>
    <ul >
        <li class="test">HTML5</li>
        <li>CSS3</li>
        <li>
            <ul>
                <li>JavaScript</li>
                <li>Jquery</li>
                <li>Node.js</li>
            </ul>
        </li>        
    </ul>
        
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">        
        $(".test ~ li").css("border", "1px solid #ff0000");        
    </script>    
</body>
</html>
cs


실행


저작자표시

'프로그래밍 > Web' 카테고리의 다른 글

[JavaScript] 기본 매개변수  (0) 2018.08.15
[CSS] 배경 100프로 이미지표시  (0) 2018.08.04
[Jquery]선택자 - 속성  (0) 2018.07.26
[Jquery]선택자  (0) 2018.07.25
[Jquery]ready, load  (0) 2018.07.17
Posted by 유령회사
|

[Jquery]선택자 - 속성

프로그래밍/Web 2018. 7. 26. 20:43
반응형

선택자

 설명

 $(Selector[attr])

 attr 속성(attribute)값을 가지는 Selector 요소와 일치

 $(Selector[attr=”value”])

 attr 속성의 값이 value 와 동일한 값을 Selector 요소와 일치

 $(Selector[attr!=”value”])

 attr 속성의 값이 value 와 같지 않은 값을 Selector 요소와 일치

 $(Selector[attr^=”value”])

 attr 속성의 값이 value 값으로 시작하는 Selector 요소와 일치

 $(Selector[attr$=”value”])

 attr 속성의 값이 value 값으로 끝나는 Selector 요소와 일치

 $(Selector[attr*=”value”])

 attr 속성의 값이 value 값을 포함하는 Selector 요소와 일치

 $(Selector[attr~=”value”])

 attr 속성의 값이 공백과 함께 value 값을 포함하는 Selector 요소와 일치



$(Selector[attr])

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<body>
    <a href="http://phantom00.tistory.com/">IT 유령회사</a><br>
    <a href="http://phantom00.tistory.com/" target="_blank">IT 유령회사</a><br>
    <a href="http://phantom00.tistory.com/">IT 유령회사</a><br>    
        
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">        
        $(document).ready(function()
        {
            $("a[target]").css("background", "#FF0000");
        });                    
   </script>    
</body>
</html>
cs

실행


$(Selector[attr=”value”])

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<body>
    <a href="http://phantom00.tistory.com/">IT 유령회사</a><br>
    <a href="http://phantom00.tistory.com/" target="_blank">IT 유령회사</a><br>
    <a href="http://phantom00.tistory.com/" target="_self">IT 유령회사</a><br>    
        
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">        
        $(document).ready(function()
        {
            $("a[target=_self]").css("background", "#FF0000");
        });                    
   </script>    
</body>
</html>
cs


실행


$(Selector[attr^=”value”])


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<body>
    <a href="http://phantom00.tistory.com/" target="_top">IT 유령회사</a><br>
    <a href="http://phantom00.tistory.com/" target="_blank">IT 유령회사</a><br>
    <a href="http://phantom00.tistory.com/" target="_self">IT 유령회사</a><br>    
        
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">        
        $(document).ready(function()
        {
            $("a[target^=_]").css("background", "#FF0000");
        });                    
   </script>    
</body>
</html>
cs


실행


$(Selector[attr$=”value”])

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<body>
    <a href="http://phantom00.tistory.com/" target="_top">IT 유령회사</a><br>
    <a href="http://phantom00.tistory.com/" target="_blank">IT 유령회사</a><br>
    <a href="http://phantom00.tistory.com/" target="_self">IT 유령회사</a><br>    
        
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">        
        $(document).ready(function()
        {
            $("a[target$=p]").css("background", "#FF0000");
        });                    
   </script>    
</body>
</html>
cs


실행


$(Selector[attr*=”value”])

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<body>
    <a href="http://phantom00.tistory.com/" id="link1" target="_top">IT 유령회사</a><br>
    <a href="http://phantom00.tistory.com/" id="link2" target="_blank">IT 유령회사</a><br>
    <a href="http://phantom00.tistory.com/" id="link3" target="_self">IT 유령회사</a><br>    
        
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">        
        $(document).ready(function()
        {
            $('a[id*="link"]').css("background", "#FF0000");
        });                    
   </script>    
</body>
</html>
cs


실행


$(Selector[attr~=”value”])

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<body>
    <a href="http://phantom00.tistory.com/" id="link1" target="_top">IT 유령회사</a><br>
    <a href="http://phantom00.tistory.com/" id="link2" target="_blank">IT 유령회사</a><br>
    <a href="http://phantom00.tistory.com/" id="link3" target="_self">IT 유령회사</a><br>    
        
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">        
        $(document).ready(function()
        {
            $('a[id~="link1"]').css("background", "#FF0000");
        });                    
   </script>    
</body>
</html>
cs

실행


저작자표시

'프로그래밍 > Web' 카테고리의 다른 글

[CSS] 배경 100프로 이미지표시  (0) 2018.08.04
[Jquery]dom 선택자  (0) 2018.08.01
[Jquery]선택자  (0) 2018.07.25
[Jquery]ready, load  (0) 2018.07.17
[Web]ScrollIndicator  (0) 2018.07.13
Posted by 유령회사
|

[Jquery]선택자

프로그래밍/Web 2018. 7. 25. 22:45
반응형


 선택자

선택자 표현 방법

 All Selector

 $("*")

 ID Selector

 $("#id")

 Element Selector

 $("elementName")

 Class Selector

 $(".className")

 Multiple Selector

 $("selector1, selector2, selector3, selectorN")


All Selector

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<body>
    <p>html5</p>
    <p>css3</p>
    <p>javascript</p>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">        
        $(document).ready(function()
        {
            $("*").css("border", "1px solid #ff0000");
        });                    
   </script>
    
</body>
</html>
cs


실행



ID Selector

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<body>
    <p id="item1">html5</p>
    <p id="item2">css3</p>
    <p id="item3">javascript</p>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">        
        $(document).ready(function()
        {
            $("#item1").css("border", "1px solid #ff0000");
        });                    
   </script>
    
</body>
</html>
cs


실행



Element Selector

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<body>
    <p id="item1">html5</p>
    <p id="item2">css3</p>
    <p id="item3">javascript</p>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">        
        $(document).ready(function()
        {
            $("p").css("border", "1px solid #ff0000");
        });                    
   </script>
    
</body>
</html>
cs


실행


Class Selector

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<body>
    <p>html5</p>
    <p class="MyClass">css3</p>
    <p>javascript</p>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">        
        $(document).ready(function()
        {
            $(".MyClass").css("border", "1px solid #ff0000");
        });                    
   </script>
    
</body>
</html>
cs


실행


 Multiple Selector

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<body>
    <p>html5</p>
    <p class="MyClass">css3</p>
    <div>javascript</div>
        
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">        
        $(document).ready(function()
        {
            $("p, .MyClass").css("border", "1px solid #ff0000");
        });                    
   </script>
    
</body>
</html>
cs

실행


저작자표시

'프로그래밍 > Web' 카테고리의 다른 글

[Jquery]dom 선택자  (0) 2018.08.01
[Jquery]선택자 - 속성  (0) 2018.07.26
[Jquery]ready, load  (0) 2018.07.17
[Web]ScrollIndicator  (0) 2018.07.13
[JavaScript]trim  (0) 2018.06.23
Posted by 유령회사
|

[Jquery]ready, load

프로그래밍/Web 2018. 7. 17. 23:04
반응형

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
 
    $(document).ready(function() {
        alert("ready");
    });
    
    // 사용법이 달라졌다고 한다.
    $(window).on("load", function (e) {
        alert("load");
    });
</script>
<title>Insert title here</title>
</head>
<body>
    load는 외부 리소스, 이미지 등이 로드 된 후에 처리<br>
    ready는 DOM객체만 로드 되자마자 처리
</body>
</html>
cs

실행


ready 실행 후 load가 실행된다.


저작자표시

'프로그래밍 > Web' 카테고리의 다른 글

[Jquery]dom 선택자  (0) 2018.08.01
[Jquery]선택자 - 속성  (0) 2018.07.26
[Jquery]선택자  (0) 2018.07.25
[Web]ScrollIndicator  (0) 2018.07.13
[JavaScript]trim  (0) 2018.06.23
Posted by 유령회사
|

[Web]ScrollIndicator

프로그래밍/Web 2018. 7. 13. 00:46
반응형


header{
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	background: #fff;
	border-bottom: 1px solid #ccc;
}

CSS 에서 z-index와 position fixed로 header를 상단에 뛰우고


$(window).scroll(function() 
 	 {
     	var wintop    = $(window).scrollTop();
        var docheight = $(document).height();
     	var winheight = $(window).height();
     	var scrolled  = (wintop/(docheight-winheight))*100;

     	$('.scroll-line').css('width', (scrolled + '%'));
	 });
jquery는 window와 document의 높이을 이용해서 퍼센트를 구해서 bar의 형태로 표시하는 방법이군요...

참조 : https://www.youtube.com/watch?v=f4Hwr7SRf2Y&feature=youtu.be

저작자표시

'프로그래밍 > Web' 카테고리의 다른 글

[Jquery]dom 선택자  (0) 2018.08.01
[Jquery]선택자 - 속성  (0) 2018.07.26
[Jquery]선택자  (0) 2018.07.25
[Jquery]ready, load  (0) 2018.07.17
[JavaScript]trim  (0) 2018.06.23
Posted by 유령회사
|

[JavaScript]trim

프로그래밍/Web 2018. 6. 23. 01:34
반응형

자바스크립트에 trim이 없다는 사실을 첨 알았다 ㅠ


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
29
30
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        function trim(str) 
        {
            return str.replace(/(^\s*)|(\s*$)/gi, '');
        }
 
        String.prototype.trim = function()
        {
            return this.replace(/(^\s*)|(\s*$)/gi, '');
        };
  </script>
</head>
<body>
    <script>    
        document.write("@" + trim("  method  ") +"@");
  </script>
    <br/>
    <br/>
    <script>        
        document.write("@" + "  prototype  ".trim() + "@");
  </script>
</body>
</html>
cs

실행


저작자표시

'프로그래밍 > Web' 카테고리의 다른 글

[Jquery]dom 선택자  (0) 2018.08.01
[Jquery]선택자 - 속성  (0) 2018.07.26
[Jquery]선택자  (0) 2018.07.25
[Jquery]ready, load  (0) 2018.07.17
[Web]ScrollIndicator  (0) 2018.07.13
Posted by 유령회사
|

티스토리툴바