반응형
반응형

텍스트로 요소 찾기

 

jQuery: find element by text

Can anyone tell me if it's possible to find an element based on its content rather than by an id or class? I am attempting to find elements that don't have distinct classes or id's. (Then I then n...

stackoverflow.com

ID 나 클래스가 아닌 내용을 기반으로 요소를 찾을 수 있는지 누구든지 말할 수 있습니까 ?

고유 한 클래스 나 ID가없는 요소를 찾으려고합니다. (그런 다음 해당 요소의 부모를 찾아야합니다.)

 

Therefore it is not enough that you use :contains() selector, you also need to check if the text you search for is the direct content of the element you are targeting for, something like that:

따라서 :contains() selector 를 사용하는 것으로는 충분하지 않습니다. 검색하는 텍스트 가 대상 요소 의 직접 콘텐츠 인지 확인해야 합니다.

 

 

 Element에 포함된 텍스트(Text)로 객체를 찾아라!

function findElementByText(text) {
    var jSpot = $("b:contains(" + text + ")")
                .filter(function() { return $(this).children().length === 0;})
                .parent();  // because you asked the parent of that element

    return jSpot;
}

 * 아래 DIV   p-1 class 중에 텍스트가 3인 것을 찾아라. 

<div class="" id="pagenation" style="white-space: nowrap; overflow-x: hidden; width: 231px;">
<div class="p-1 paging-item border rounded text-center d-inline-block position-relative" style="width:33px;height:33px;">1</div>
<div class="p-1 paging-item border rounded text-center d-inline-block position-relative" style="width:33px;height:33px;">2</div>
<div class="p-1 paging-item border rounded text-center d-inline-block position-relative  style="width:33px;height:33px;">3</div>
<div class="p-1 paging-item border rounded text-center d-inline-block position-relative" style="width:33px;height:33px;">4</div>
<div class="p-1 paging-item border rounded text-center d-inline-block position-relative" style="width:33px;height:33px;">5</div><div class="p-1 paging-item border rounded text-center d-inline-block position-relative" style="width:33px;height:33px;">6</div><div class="p-1 paging-item border rounded text-center d-inline-block position-relative" style="width:33px;height:33px;">7</div>
</div>


$(".p-1:contains('3')")
반응형
저작자표시 비영리 (새창열림)

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

Drag and Drop. HTML5  (0) 2020.11.26
Scrum board with drag and drop  (0) 2020.11.26
Node.js 웹서버로 만들기  (0) 2020.11.18
Node.js 생활코딩  (0) 2020.11.18
[jQuery] jQuery 데이터 속성 값을 기반으로 요소를 찾는 방법은 무엇입니까?  (0) 2020.11.10
반응형

Node.js 웹서버로 만들기   http://localhost:3000

 

var http = require('http');
var fs = require('fs');
var app = http.createServer(function(request,response){
    var url = request.url;
    if(request.url == '/'){
      url = '/index.html';
    }
    if(request.url == '/favicon.ico'){
      //return response.writeHead(404);
      response.writeHead(404);
      response.end();
      return;
    }
    response.writeHead(200);
    console.log(__dirname + url);
    response.end(fs.readFileSync(__dirname + url));

});
app.listen(3000);

 

https://youtu.be/VGZTn1diz_I

 

opentutorials.org/course/3332/21032

 

Node.js - 웹서버 만들기 - 생활코딩

수업소개 Node.js는 웹서버 기능을 가지고 있습니다. 이런 특성을 이용해서 컨텐츠를 프로그래밍적으로 생산할 수 있게 됩니다. 여기서는 Node.js를 웹서버로 구동하는 방법을 살펴보겠습니다.  강

opentutorials.org

소스 : github.com/web-n/web1_html_internet

 

web-n/web1_html_internet

Contribute to web-n/web1_html_internet development by creating an account on GitHub.

github.com

 

반응형
저작자표시 비영리 (새창열림)

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

Scrum board with drag and drop  (0) 2020.11.26
[jQuery] Element에 포함된 텍스트(Text)로 객체를 찾아라!  (0) 2020.11.19
Node.js 생활코딩  (0) 2020.11.18
[jQuery] jQuery 데이터 속성 값을 기반으로 요소를 찾는 방법은 무엇입니까?  (0) 2020.11.10
[jQuery] javascript - How to format $.now() with Jquery  (0) 2020.11.10
반응형

nodejs.org/ko/들어가서 다운로드 후 설치.

 

설치 후 CMD 뛰워서 아래와 같이 버전 및 실행 테스트. 

 

C:\Users\HWKim>node -v
v14.15.1

C:\Users\HWKim>node
Welcome to Node.js v14.15.1.
Type ".help" for more information.
> console.log(1+1)
2
undefined
> console.log(1+1);
2
undefined
>
(To exit, press Ctrl+C again or Ctrl+D or type .exit)
>

C:\Users\HWKim>

강의 리스트 : opentutorials.org/course/3332

 

WEB2 - Node.js - 생활코딩

수업소개 이 수업은 JavaScript를 이용해서 Node.js를 제어해 동적으로 HTML 코드를 생성하는 웹애플리케이션을 만드는 방법에 대한 수업입니다.  수업대상 예를들어 1억개의 페이지로 이루어진 웹사

opentutorials.org

유튜브 재생목록 : www.youtube.com/playlist?list=PLuHgQVnccGMA9QQX5wqj6ThK7t2tsGxjm

 

WEB2 - Node.js

 

www.youtube.com

 

반응형
저작자표시 비영리 (새창열림)

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

[jQuery] Element에 포함된 텍스트(Text)로 객체를 찾아라!  (0) 2020.11.19
Node.js 웹서버로 만들기  (0) 2020.11.18
[jQuery] jQuery 데이터 속성 값을 기반으로 요소를 찾는 방법은 무엇입니까?  (0) 2020.11.10
[jQuery] javascript - How to format $.now() with Jquery  (0) 2020.11.10
[javascript] jQuery HTML / CSS Methods  (0) 2020.10.21
반응형

TCP SCHOOL 소개

www.tcpschool.com/

 

코딩교육 티씨피스쿨

4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등

tcpschool.com

 

반응형
저작자표시 비영리 (새창열림)

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

네이버 클라우드 구인 중  (0) 2020.11.23
"컨텐츠(contents)" or "컨텐트(content)"?  (0) 2020.11.23
디지털 뉴딜로 인한 미래전개도(Futures Wheel)  (0) 2020.11.16
구글 마인트맵 - How to set up MindMup 2.0 to open files on double-click  (0) 2020.11.16
코웨이는 넷플릭스의 추격을 따돌릴까  (0) 2020.11.13
반응형

CSS 이미지 스프라이트(Image Sprite)

 

이미지 스프라이트(image sprite)란 여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 이미지를 의미합니다.

 

웹 페이지에 이미지가 사용될 경우 해당 이미지를 다운받기 위해 웹 브라우저는 서버에 이미지를 요청하게 됩니다.

하지만 사용된 이미지가 많을 경우 웹 브라우저는 서버에 해당 이미지의 수만큼 요청해야만 하므로 웹 페이지의 로딩 시간이 오래 걸리게 됩니다.

 

이미지 스프라이트(image sprite)를 사용하면 이미지를 다운받기 위한 서버 요청을 단 몇 번으로 줄일 수 있습니다.

모바일 환경과 같이 한정된 자원을 사용하는 플랫폼(platform)에서는 웹 페이지의 로딩 시간을 단축해주는 효과가 있습니다.

또한, 많은 이미지 파일을 관리하는 대신 몇 개의 스프라이트 이미지(sprite image) 파일만을 관리하면 되므로 매우 간편합니다.

 

다음 예제는 하나의 이미지를 가지고 네 개의 아이콘을 만드는 예제입니다.

네 개의 아이콘을 만들기 위해 네 개의 이미지를 사용하는 것이 아닌 다음 이미지 하나만을 가지고 작업하게 됩니다.

<style>
    .up, .down, .right, .left { background: url("/examples/images/img_image_sprites.png") no-repeat; }
    .up { width: 21px; height: 20px; background-position: 0 0; }
    .down { width: 21px; height: 20px; background-position: -21px 0; }
    .right { width: 22px; height: 20px; background-position: -42px 0; }
    .left { width: 22px; height: 20px; background-position: -65px 0; }
</style>

 

코딩 연습 : www.tcpschool.com/examples/tryit/tryhtml.php?filename=css_basic_imageSprites_01

 

©TCP-tryWWW

CSS Image Sprites .up, .down, .right, .left { background: url("/examples/images/img_image_sprites.png") no-repeat; } .up { width: 21px; height: 20px; background-position: 0 0; } .down { width: 21px; height: 20px; background-position: -21px 0; } .right { wi

www.tcpschool.com

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>CSS Image Sprites</title>
	<style>
		.up, .down, .right, .left {
			background: url("/examples/images/img_image_sprites.png") no-repeat;
		}
		.up {
			width: 21px;
			height: 20px;
			background-position: 0 0;
		}
		.down {
			width: 21px;
			height: 20px;
			background-position: -21px 0;
		}
		.right {
			width: 22px;
			height: 20px;
			background-position: -42px 0;
		}
		.left {
			width: 22px;
			height: 20px;
			background-position: -65px 0;
		}
	</style>
</head>

<body>

	<h2>이미지 스프라이트를 이용한 이미지 로딩</h2>
	<p>- 원본 이미지 -</p>
	<img src="/examples/images/img_image_sprites.png"><br><br>
	<p>- 추출한 이미지 -</p>
	<div class="up"></div><br>
	<div class="down"></div><br>
	<div class="right"></div><br>
	<div class="left"></div><br>

</body>

</html>
반응형
저작자표시 비영리 (새창열림)

'프로그래밍 > Style & Design' 카테고리의 다른 글

A guide of UI design trends for 2021  (0) 2020.12.09
[Style] Bootstrap - admin LTE  (0) 2020.11.24
[iCon] iCon download  (0) 2020.10.19
Free themes for Bootstrap  (0) 2020.10.14
[FONT] 웹 한글 폰트 - 눈누 https://noonnu.cc/  (0) 2020.09.17
반응형

2020년 기업의 디지털트랜스포메이션 전략은 어떻게 변화되고 있는가?

 

보스턴 컨설팅 그룹은 코로나-19 영향으로 기업의 디지털트랜스포메이션 전략이 어떻게 변화 되었는지를 분석하기 위하여 2020년 3개월간(3월~6월) 825명의 글로벌 리더들을 대상으로 설문조사를 진행하였다. 

 

www.bcg.com/publications/2020/the-evolving-state-of-digital-transformation

 

The Evolving State of Digital Transformation

A recent survey reveals that businesses are accelerating their investment in digital technologies, despite the economic downturn, targeting digitally enabled goals to support their recovery.

www.bcg.com

digitaltransformation.co.kr/%ea%b8%b0%ec%97%85%ec%9d%98-%eb%94%94%ec%a7%80%ed%84%b8%ed%8a%b8%eb%9e%9c%ec%8a%a4%ed%8f%ac%eb%a9%94%ec%9d%b4%ec%85%98-%ec%a0%84%eb%9e%b5%ec%9d%80-%ec%96%b4%eb%96%bb%ea%b2%8c-%eb%b3%80%ed%99%94/

 

2020년 기업의 디지털트랜스포메이션 전략은 어떻게 변화되고 있는가?

보스턴 컨설팅 그룹은 코로나-19 영향으로 기업의 디지털트랜스포메이션 전략이 어떻게 변화 되었는지를 분석하기 위하여 2020년 3개월간(3월~6월) 825명의 글로벌 리더들을 대상으로 설문조사를

digitaltransformation.co.kr

 

반응형
저작자표시 비영리 (새창열림)

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

[순서도] draw.io 웹에서 순서도 그리기, 구글드라이브 연동  (0) 2020.11.30
행(hang)과 데드락(deadlock)의 차이  (0) 2020.11.23
마인드맵소프트웨어: Mind Maps | MindMeister  (0) 2020.11.16
영상 컨텐츠의 적절한 길이는 어느정도 일까?  (0) 2020.11.12
변화의 방향이 아니고 속도다!  (0) 2020.11.01

+ Recent posts

티스토리툴바