1Q74

【CSS/Cookbook】How are the display values different between block and inline block?

1Q74 — Wed, 24 May 2023 16:56:13 +0900

1. Description

display: block와 display: inline-block간의 차이를 알아본다.

2. Example

[Click Me]버튼을 클릭할 때마다 display의 값이 block, inline-block으로 토글된다.

[1q74.tistory.com] css/fieldset

Div Boxes

inline-block

3. Code

<!-- ---------------------------------------------------------
  --
  -- Author: 1q74.tistory.com
  --
  --------------------------------------------------------- -->

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>[1q74.tistory.com] css/fieldset</title>
<style>
fieldset#_1q74-example-container {
	border: solid 1px;
	border-style: dotted;
	padding: 10px;
}

div[name="_1q74-example-1"] {
	background: green;
	width: 100px;
	height: 100px;
	display: inline-block;
}

div[name="_1q74-example-2"] {
	background: lightgreen;
	width: 100px;
	height: 100px;
	display: inline-block;
}
</style>
</head>
<body>
	<fieldset id="_1q74-example-container">
		<legend>Div Boxes</legend>

		<div name="_1q74-example-1">
			inline-block
		</div>
		<div name="_1q74-example-2">
			inline-block
		</div>
	</fieldset>

	<br/>
	<button id="btn-1q74-example">Click Me</button>

<script>
const btn = document.getElementById("btn-1q74-example");

btn.addEventListener("click", function() {
	const examples = document.querySelectorAll("[name*=_1q74-example-]");

	examples.forEach(example => {
		const display = example.style.display;
		const isBlock = display == "block";

		let block = "";
		if(isBlock) {
			block = "inline-block";
		} else {
			block = "block";
		}

		example.style.display = block;
		example.textContent = block;
	});
});
</script>
</body>
</html>

4. File

[css][div][display]example.html

0.00MB

【CSS/Cookbook】<fieldset>, <legend> (Group으로 묶어서 표시하기)

1Q74 — Wed, 24 May 2023 16:01:11 +0900

1. Description

<fieldset>는 Element들을 Group으로 묶고, <legend>로 그룹명을 넣는다.

2. Example

[1q74.tistory.com] css/fieldset

Div Boxes

box#1

box#2

3. Code

<!-- ---------------------------------------------------------
  --
  -- Author: 1q74.tistory.com
  --
  --------------------------------------------------------- -->

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>[1q74.tistory.com] css/fieldset</title>
<style>
fieldset#_1q74-example-container {
	border: solid 1px;
	border-style: dotted;
	padding: 10px;
}

div[name="_1q74-example-1"] {
	background: green;
	width: 100px;
	height: 100px;
	display: inline-block;
}

div[name="_1q74-example-2"] {
	background: lightgreen;
	width: 100px;
	height: 100px;
	display: inline-block;
}
</style>
</head>
<body>
	<fieldset id="_1q74-example-container">
		<legend>Div Boxes</legend>
		<div name="_1q74-example-1">
			box#1
		</div>
		<div name="_1q74-example-2">
			box#2
		</div>
	</fieldset>
</body>
</html>

4. File

[css][fieldset]example.html

0.00MB

【Go/Cookbook】Send Email in golang(feat. Gmail) Go언어에서 이메일 전송하기

1Q74 — Wed, 24 May 2023 15:12:22 +0900

1. Description

Go언어에서 이메일 전송하는 예제입니다. 본 예제에서는 Gmail의 smtp서버를 이용합니다.

2. Prerequisite

다음과 같은 모듈이 필요합니다.

import (
	"crypto/tls"
	"fmt"

	gomail "github.com/go-mail/mail"
)

3. Example

Gmail의 smtp서버를 통해 메일을 전송합니다.

package mail

import (
	"crypto/tls"
	"fmt"

	gomail "github.com/go-mail/mail"
)

type Mail struct {
}

type SmtpServer struct {
	host string
	port int
}

type Account struct {
	email    string
	password string
}

type Message struct {
	Subject string
	Msg     string
}

var mail = &Mail{}
var smtpServer = &SmtpServer{
	host: "smtp.gmail.com",
	port: 587,
}
var account = &Account{
	email:    "Gmail주소",
	password: "Gmail 앱 비밀번호",
}

var to = []string{
	"받는사람 이메일 주소#1",
	"받는사람 이메일 주소#2",
}

func NewMail() *Mail {
	return mail
}

func (*Mail) Send(message Message) {
	gm := gomail.NewMessage()
	gm.SetHeader("From", account.email)
	gm.SetHeader("To", to...)
	gm.SetHeader("Subject", message.Subject)
	gm.SetBody("text/html", message.Msg)

	dialer := gomail.NewDialer(smtpServer.host, smtpServer.port, account.email, account.password)
	dialer.TLSConfig = &tls.Config{InsecureSkipVerify: true}

	if err := dialer.DialAndSend(gm); err != nil {
		fmt.Println(err)
	}
}

앱 비밀번호로 로그인 - Gmail 고객센터

도움이 되었나요? 어떻게 하면 개선할 수 있을까요? 예아니요

support.google.com

【jQuery/Traversing】addBack([selector])

1Q74 — Thu, 13 Apr 2023 15:36:06 +0900

1. Description

.addBack([selector])

selector에 의해서 필터링 된 Element들 중에서, 현재 선택한 Element의 스택상에 이전 Element를 추가한다.

2. Example

#1버튼을 클릭하면 <ol>Element와 li:eq(2)를 선택하여 border스타일을 변경한다. 버튼을 클릭할 때마다 해당 스타일이 토글된다.

[1q74.tistory.com] javascript/jquery/traversing/addBack([selector])

Google
Amazon
Facebook

Tesla
Twitter
Netflex

Apple

3. Code

<!-- ---------------------------------------------------------
  --
  -- Author: 1q74.tistory.com
  --
  --------------------------------------------------------- -->
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>[1q74.tistory.com] javascript/jquery/traversing/addBack([selector])</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
</head>
<body>

	<div name="_1q74-ex-root">
		<div name="_1q74-ex-1">
			<ol name="bigtech">
				<li>Google</li>
				<li>Amazon</li>
				<li>Facebook</li>
				<ol>
					<li>Tesla</li>
					<li>Twitter</li>
					<li>Netflex</li>
				</ol>
				<li>Apple</li>
			</ol>
		</div>

		<br/>

		<div name="_1q74-ex-bottom">
			<table border="1">
				<tr>
					<td colspan="2">
						<button name="btn-find">
							#1. Click Me
						</button>
					</td>
				</tr>
			</table>
		</div>
	</div>

<script>
//
// _1q74 is a Namespace for preventing confliction of variable.
// It has not mean specially.
//
var _1q74 = {};
_1q74.example = {
	/////////////////////////////////////////////////////////////////
	//
	// Example container
	//
	/////////////////////////////////////////////////////////////////
	container: $("[name='_1q74-ex-1']"),

	/////////////////////////////////////////////////////////////////
	//
	// Execute example
	//
	/////////////////////////////////////////////////////////////////
	execute: function() {
		const _this = this;
		const btnFind = $("[name='btn-find']");
		const bigtech = _this.container.find("[name='bigtech']");
		const elements = bigtech.find("ol").find("li:eq(2)").addBack();

		btnFind.click("click", function() {
			if(!elements.is("[style]")) {
				elements.css("border", "1px dotted lightgreen");
			} else {
				elements.removeAttr("style");
			}
		});
	},
}

_1q74.example.execute();
</script>
<style>
[name="_1q74-ex-root"] {
	min-height: 200px;
}

[name="_1q74-ex-1"] {
	min-height: 170px;
}

[name="_1q74-ex-bottom"] {
	min-height: 150px;
}

[name="_1q74-ex-1"] td {
	min-width: 30px;
	min-height: 30px;
	width: 120px;
}

[name="_1q74-ex-bottom"] tbody {
	max-width: 400px;
}

[name="_1q74-ex-bottom"] td {
	width: 300px;
}

[name|="_1q74-ex"] button {
	background: lightgray;
	border: 5px outset;
	min-height: 40px;
	width: 100%;
}

[name|="_1q74-ex"] button:active {
	border: 5px inset;
	min-height: 40px;
	width: 100%;
}
</style>

</body>
</html>

4. File

[javascript][jquery][traversing]addBack.html

0.00MB

5. Reference

https://api.jquery.com/addBack/

【jQuery/Traversing】.add(selector)

1Q74 — Tue, 21 Mar 2023 10:37:31 +0900

1. Description

1 + 1 + 1 + ... + 1과 같은 개념이다. 매칭되는 Element를 단지 선택만 해 주는 메소드이다.
선택된 Element들의 CSS를 변경하거나 하는 등의 조작을 하지 않는다면 아무 변화도 일어나지 않는다.

.add(selector)

매칭된 Element들에 문자열로 표현된 selector를 추가적으로 선택한다.
→ #10, 11버튼

.add(elements)

매칭된 Element들에 하나 이상의 Element를 추가적으로 선택한다.
→ #20, 21버튼

.add(html)

매칭된 Element들에 html을 추가적으로 선택한다.
→ #30, 31버튼

.add(selection)

매칭된 Element들에 jQuery오브젝트를 추가적으로 선택한다.
→ #40, 41버튼

.add(selector, context)

context의 하위에 있는 문자열로 표현된 selector를 추가적으로 선택한다.
→ #50버튼

2. Example

#10,20,30,40버튼을 클릭하면 <td>중 짝수 인덱스를 선택하고 배경색을 변경한다.
#11,21,31,41버튼을 클릭하면 <td>중 홀수 인덱스를 선택하고 배경색을 변경한다.

#3버튼을 클릭하면 1행의 <td>에서 1~2번, 2행의 <td>에서 3~5번을 인덱스를 복사해서 행을 추가한 다음 배경색을 변경한다.

this.container = $("[name='_1q74-ex-1']");
this.containerElement = this.container[0];

this.selectors = {
    ex10: this.container
            .find("td[r1]:eq(0)")
            .add("td[r1]:eq(2)")
            .add("td[r1]:eq(4)"),
    ex11: this.container
            .find("td[r1]:eq(1)")
            .add("td[r1]:eq(3)")
            .add("td[r1]:eq(5)"),
    ex20: this.container
            .find(this.containerElement.querySelectorAll("td[r2]")[0])
            .add(this.containerElement.querySelectorAll("td[r2]")[2])
            .add(this.containerElement.querySelectorAll("td[r2]")[4]),
    ex21: this.container
            .find(this.containerElement.querySelectorAll("td[r2]")[1])
            .add(this.containerElement.querySelectorAll("td[r2]")[3])
            .add(this.containerElement.querySelectorAll("td[r2]")[5]),
    ex30: $("<td r3>3-1</td>")
            .add("<td r3>3-2</td>")
            .add("<td r3>3-3</td>")
            .add("<td r3>3-4</td>")
            .add("<td r3>3-5</td>")
            .add("<td r3>3-6</td>"),
    ex31: $("<td r4>4-1</td>")
            .add("<td r4>4-2</td>")
            .add("<td r4>4-3</td>")
            .add("<td r4>4-4</td>")
            .add("<td r4>4-5</td>")
            .add("<td r4>4-6</td>"),
    ex40: $("<td>").attr("r5", "").text("5-1")
            .add($("<td>").attr("r5", "").text("5-2"))
            .add($("<td>").attr("r5", "").text("5-3"))
            .add($("<td>").attr("r5", "").text("5-4"))
            .add($("<td>").attr("r5", "").text("5-5"))
            .add($("<td>").attr("r5", "").text("5-6")),
    ex41: $("<td>").attr("r6", "").text("6-1")
            .add($("<td>").attr("r6", "").text("6-2"))
            .add($("<td>").attr("r6", "").text("6-3"))
            .add($("<td>").attr("r6", "").text("6-4"))
            .add($("<td>").attr("r6", "").text("6-5"))
            .add($("<td>").attr("r6", "").text("6-6")),
    ex50: $("td:eq(0)", "[name='_1q74-ex-1'] [name='_1q74-tbl-ex-1'] tr:eq(0)")
            .add("td:eq(1)", "[name='_1q74-ex-1'] [name='_1q74-tbl-ex-1'] tr:eq(0)")
            .add("td:eq(2)", "[name='_1q74-ex-1'] [name='_1q74-tbl-ex-1'] tr:eq(0)")
            .add("td:eq(0)", "[name='_1q74-ex-1'] [name='_1q74-tbl-ex-1'] tr:eq(1)")
            .add("td:eq(1)", "[name='_1q74-ex-1'] [name='_1q74-tbl-ex-1'] tr:eq(1)")
            .add("td:eq(2)", "[name='_1q74-ex-1'] [name='_1q74-tbl-ex-1'] tr:eq(1)")

[1q74.tistory.com] javascript/jquery/traversing/add(selector)

1-1	1-2	1-3	1-4	1-5	1-6
2-1	2-2	2-3	2-4	2-5	2-6






View Source

3. Code

<!-- ---------------------------------------------------------
  --
  -- Author: 1q74.tistory.com
  --
  --------------------------------------------------------- -->
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>[1q74.tistory.com] javascript/jquery/traversing/add(selector)</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
</head>
<body>

	<div name="_1q74-ex-root">
		<div name="_1q74-ex-1">
			<table name="_1q74-tbl-ex-1" border="1">
				<tbody>
					<tr>
						<td r1>1-1</td>
						<td r1>1-2</td>
						<td r1>1-3</td>
						<td r1>1-4</td>
						<td r1>1-5</td>
						<td r1>1-6</td>
					</tr>
					<tr>
						<td r2>2-1</td>
						<td r2>2-2</td>
						<td r2>2-3</td>
						<td r2>2-4</td>
						<td r2>2-5</td>
						<td r2>2-6</td>
					</tr>
				</tbody>
			</table>

			<br/>

			<div name="_1q74-ex-bottom">
				<table border="1">
					<tr>
						<td colspan="2">
							<button name="btn-ex" selector="ex10">
								#10. $("td[r1]:eq(0)").add("td[r1]:eq(2)").add("td[r1]:eq(4)")
							</button>
							<button name="btn-ex" selector="ex11">
								#11. $("td[r1]:eq(1)").add("td[r1]:eq(3)").add("td[r1]:eq(5)")
							</button>
						</td>
					</tr>
					<tr>
						<td colspan="2">
							<button name="btn-ex" selector="ex20">
								#20. $("td[r2][0]").add("td[r2][2]").add("td[r2][4]")
							</button>
							<button name="btn-ex" selector="ex21">
								#21. $("td[r2][1]").add("td[r2][3]").add("td[r2][5]")
							</button>
						</td>
					</tr>
					<tr>
						<td colspan="2">
							<button name="btn-ex" selector="ex30">
								#30. $("&lt;td r3&gt;3-0&lt;/td&gt;").add(...).add("&lt;td r3&gt;3-4&lt;/td&gt;")
							</button>
							<button name="btn-ex" selector="ex31">
								#31. $("&lt;td r4&gt;4-1&lt;/td&gt;").add(...).add("&lt;td r4&gt;4-5&lt;/td&gt;")
							</button>
						</td>
					</tr>
					<tr>
						<td colspan="2">
							<button name="btn-ex" selector="ex40">
								#40.$("&lt;td&gt;").attr("r5", "").text("5-0").add(...).add($("&lt;td&gt;").attr("r5", "").text("5-4"))
							</button>
							<button name="btn-ex" selector="ex41">
								#41.$("&lt;td&gt;").attr("r6", "").text("6-1").add(...).add($("&lt;td&gt;").attr("r6", "").text("6-5"))
							</button>
						</td>
					</tr>
					<tr>
						<td colspan="2">
							<button name="btn-ex" selector="ex50">
								#50.$("td:eq(0)", $("tr:eq(0)").add(...).add("td:eq(5)", $("tr:eq(1)")
							</button>
						</td>
					</tr>
					<tr>
						<td>
							<input type="checkbox" name="chk-view-src" id="chk-view-src-1"/>
							<label for="chk-view-src-1">View Source</label>
						</td>
						<td>
							<button name="btn-init">Initialize</button>
						</td>
					</tr>
				</table>
			</div>
		</div>
	</div>

<script>
//
// _1q74 is a Namespace for preventing confliction of variable.
// It has not mean specially.
//
var _1q74 = {};
_1q74.example1 = {
	/////////////////////////////////////////////////////////////////
	//
	// Initialize container, selector, and the others
	//
	/////////////////////////////////////////////////////////////////
	initialize: function() {
		this.container = $("[name='_1q74-ex-1']");
		this.containerElement = this.container[0];

		this.selectors = {
			ex10: this.container
					.find("td[r1]:eq(0)")
					.add("td[r1]:eq(2)")
					.add("td[r1]:eq(4)"),
			ex11: this.container
					.find("td[r1]:eq(1)")
					.add("td[r1]:eq(3)")
					.add("td[r1]:eq(5)"),
			ex20: this.container
					.find(this.containerElement.querySelectorAll("td[r2]")[0])
					.add(this.containerElement.querySelectorAll("td[r2]")[2])
					.add(this.containerElement.querySelectorAll("td[r2]")[4]),
			ex21: this.container
					.find(this.containerElement.querySelectorAll("td[r2]")[1])
					.add(this.containerElement.querySelectorAll("td[r2]")[3])
					.add(this.containerElement.querySelectorAll("td[r2]")[5]),
			ex30: $("<td r3>3-1</td>")
					.add("<td r3>3-2</td>")
					.add("<td r3>3-3</td>")
					.add("<td r3>3-4</td>")
					.add("<td r3>3-5</td>")
					.add("<td r3>3-6</td>"),
			ex31: $("<td r4>4-1</td>")
					.add("<td r4>4-2</td>")
					.add("<td r4>4-3</td>")
					.add("<td r4>4-4</td>")
					.add("<td r4>4-5</td>")
					.add("<td r4>4-6</td>"),
			ex40: $("<td>").attr("r5", "").text("5-1")
					.add($("<td>").attr("r5", "").text("5-2"))
					.add($("<td>").attr("r5", "").text("5-3"))
					.add($("<td>").attr("r5", "").text("5-4"))
					.add($("<td>").attr("r5", "").text("5-5"))
					.add($("<td>").attr("r5", "").text("5-6")),
			ex41: $("<td>").attr("r6", "").text("6-1")
					.add($("<td>").attr("r6", "").text("6-2"))
					.add($("<td>").attr("r6", "").text("6-3"))
					.add($("<td>").attr("r6", "").text("6-4"))
					.add($("<td>").attr("r6", "").text("6-5"))
					.add($("<td>").attr("r6", "").text("6-6")),
			ex50: $("td:eq(0)", "[name='_1q74-ex-1'] [name='_1q74-tbl-ex-1'] tr:eq(0)")
					.add("td:eq(1)", "[name='_1q74-ex-1'] [name='_1q74-tbl-ex-1'] tr:eq(0)")
					.add("td:eq(2)", "[name='_1q74-ex-1'] [name='_1q74-tbl-ex-1'] tr:eq(0)")
					.add("td:eq(0)", "[name='_1q74-ex-1'] [name='_1q74-tbl-ex-1'] tr:eq(1)")
					.add("td:eq(1)", "[name='_1q74-ex-1'] [name='_1q74-tbl-ex-1'] tr:eq(1)")
					.add("td:eq(2)", "[name='_1q74-ex-1'] [name='_1q74-tbl-ex-1'] tr:eq(1)")
		};
		this.chkViewSource = this.container.find("[name='chk-view-src']");

		this.saveOriginalHtmlSource();
	},

	saveOriginalHtmlSource: function() {
		const _this = this;

		this.originalElements = {
			r10: this.selectors.ex10,
			r11: this.selectors.ex11,
			r20: this.selectors.ex20,
			r21: this.selectors.ex21,
			r30: this.selectors.ex30,
			r31: this.selectors.ex31,
			r40: this.selectors.ex40,
			r41: this.selectors.ex41,
		};

		this.clonedElements = {};
		$.each(this.originalElements, function(key, el) {
			_this.clonedElements[key] = el.clone();
		});
	},

	getTargetRowForBeingAddedRow: function(rowAttr) {
		const _this = this;

		let defaultRow = this.container.find("[name='_1q74-tbl-ex-1'] tr:eq(1)");
		const rowNumber = rowAttr.replaceAll(/[a-z]/g, "");

		let start = rowNumber - 1;
		let row;

		for(let i = start; i >= 2; i--) {
			row = _this.container.find("[name='_1q74-tbl-ex-1'] td[r" + i + "]");
			if(row.length > 0) break;
		}

		return row.parent();
	},
	
	/////////////////////////////////////////////////////////////////
	//
	// Execute example
	//
	/////////////////////////////////////////////////////////////////
	execute: function() {
		const _this = this;
		const btnExecute = this.container.find("[name='btn-ex']");

		function appendRow(elements, filter, style, rowAttr) {
			let targetRow;
			let isExists = false;
			let isStyled = false;

			const existElements = _this.container.find("[name='_1q74-tbl-ex-1'] td[" + rowAttr + "]");
			isExists = existElements.length > 0;
			isStyled = existElements.is("[style]");

			if(isExists && isStyled) return false;

			if(isExists && !isStyled) {
				elements.filter(filter).css(style);
				return true;
			} else {
				elements.filter(filter).css(style);
				targetRow = _this.getTargetRowForBeingAddedRow(rowAttr);
				targetRow.after($("<tr>").append(elements));
			}

			return true;
		}

		function change(selector, elements) {
			let targetRow;
			let isExists = false;

			switch(selector) {
				case "ex10":
					elements.css({ background: "#1FEC99" });
					break;

				case "ex11":
					elements.css({ background: "#81C0E8" });
					break;

				case "ex20":
					elements.css({ background: "#8434A4" });
					break;

				case "ex21":
					elements.css({ background: "#34A485" });
					break;

				case "ex30":
					if(!appendRow(elements, ":even", { background: "#8B71F3" }, "r3")) {
						return false;
					}
					break;

				case "ex31":
					if(!appendRow(elements, ":odd", { background: "#FF5733" }, "r4")) {
						return false;
					}
					break;

				case "ex40":
					if(!appendRow(elements, ":even", { background: "#DEA85F" }, "r5")) {
						return false;
					}
					break;

				case "ex41":
					if(!appendRow(elements, ":odd", { background: "#6C7908" }, "r6")) {
						return false;
					}
					break;

				case "ex50":
					const existElements = _this.container.find("[name='_1q74-tbl-ex-1'] td[r7]");
					isExists = existElements.length > 0;
					isStyled = existElements.is("[style]");

					if(isExists && isStyled) return;

					if(isExists && !isStyled) {
						existElements.filter(":lt(3)").css({ background: "#89979A" });
						existElements.filter(":gt(2)").css({ background: "#D43E68" });
						return;
					} else {
						const clonedElements = elements.clone();
						clonedElements.removeAttr("r1").removeAttr("r2").attr("r7", "");
				
						if(typeof _this.originalElements["r50"] == 'undefined') {
							_this.originalElements["r50"] = clonedElements;
							_this.clonedElements["r50"] = _this.originalElements["r50"].clone();
						}

						clonedElements.filter(":lt(3)").css({ background: "#89979A" });
						clonedElements.filter(":gt(2)").css({ background: "#D43E68" });
						targetRow = _this.getTargetRowForBeingAddedRow("r7");
						targetRow.after($("<tr>").append(clonedElements));
					}

					break;
			}

			_this.refreshSourceView();
		}

		btnExecute.click(function() {
			const selector = $(this).attr("selector");
			const elements = _this.selectors[selector];
			change(selector, elements);
		});
	},

	/////////////////////////////////////////////////////////////////
	//
	// Control example
	//
	/////////////////////////////////////////////////////////////////
	refreshSourceView: function() {
		const _this = this;
		let isChecked = _this.chkViewSource.is(":checked");

		if(isChecked) {
			for(let i = 1; i <= 2; i++) {
				_this.chkViewSource.prop("checked", (isChecked = !isChecked));
				_this.toggleHtmlToSource();
			}
		}
	},

	toggleHtmlToSource: function() {
		const _this = this;
		const isChecked = this.chkViewSource.is(":checked");

		if(isChecked) {
			$.each(this.originalElements, function(key, entries) {
				entries.each(function(i, el) {
					const element = $(el);
					const html = $("<div>").append(element.clone()).html();
					const specialCharHtml = $("<div>").text(html).html();
					element.html(specialCharHtml);
				});
			});
		} else {
			$.each(this.originalElements, function(key, entries) {
				entries.each(function(i, el) {
					const element = $(el);
					const html = $(_this.clonedElements[key][i]).html();
					element.html(html);
				});
			});
		}
	},

	control: function() {
		const _this = this;

		this.chkViewSource.click(function() {
			_this.toggleHtmlToSource();
		});

		const btnInitialize = $("[name='_1q74-ex-bottom'] [name='btn-init']");
		btnInitialize.click(function() {
			$.each(_this.originalElements, function(key, entries) {
				entries.each(function(i, el) {
					const element = $(el);
					element.removeAttr("style");
				});
			});
			_this.refreshSourceView();
		});
	}
}

_1q74.example1.initialize();
_1q74.example1.execute();
_1q74.example1.control();
</script>
<style>
[name="_1q74-ex-root"] {
	min-height: 200px;
}

[name="_1q74-ex-1"] {
	min-height: 170px;
}

[name="_1q74-ex-bottom"] {
	min-height: 150px;
}

[name="_1q74-ex-1"] td {
	min-width: 30px;
	min-height: 30px;
	width: 120px;
}

[name="_1q74-ex-bottom"] tbody {
	max-width: 400px;
}

[name="_1q74-ex-bottom"] td {
	width: 300px;
}

[name|="_1q74-ex"] button {
	background: lightgray;
	border: 5px outset;
	min-height: 40px;
	width: 100%;
}

[name|="_1q74-ex"] button:active {
	border: 5px inset;
	min-height: 40px;
	width: 100%;
}
</style>

</body>
</html>

3. File

[javascript][jquery][traversing]add.html

0.01MB

4. Reference

https://api.jquery.com/add/

【Native/Selector #5】Attribute Contains Word Selector [name~=”value”]

1Q74 — Sat, 18 Mar 2023 17:48:18 +0900

1. Description

querySelectorAll("[name~='value']")

속성값의 문자열과 부분 매칭되면서 공백으로 구분되는 문자열을 갖고 있는 Element를 찾는다.

※ 【jQuery/Selector #5】Attribute Contains Word Selector [name~=”value”]의 Native버전입니다.

2. Example

「영문이름에 'of'가 들어가 있고 공백으로 단어 구분이 되는 나라」버튼을 클릭했을 경우, 나라 이름에 'of'가 들어가 있는 요소들을 찾아 border스타일을 dotted로 바꾸고, 버튼을 클릭할 때마다 스타일을 토글시킨다.

「영문이름에 공백이 들어가 있지 않은 나라」버튼을 클릭했을 경우, 나라 이름에 'in'이 들어가 있는 요소들을 찾아 배경색을 orange로 바꾸고, 해당되는 요소들을 찾지 못했을 경우 "해당 나라를 찾을 수 없습니다"라는 메시지를 표시한다.

※ Spain과 China를 찾고자 하는 의도이지만 공백으로 구분되는 문자열이 없기 때문에 해당 요소를 선택할 수 없다.

[1q74.tistory.com] javascript/native/selector/attribute-contains-word

Countries

한국

영국

미국

스페일

중국

영문이름에 'of'가 들어가 있고 공백으로 단어 구분이 되는 나라

영문이름에 'in'이 들어가 있고 공백으로 단어 구분이 되는 나라

[HTML Code]

[//HTML Code]

3. Code

<!-- ---------------------------------------------------------
  --
  -- Author: 1q74.tistory.com
  --
  --------------------------------------------------------- -->
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>[1q74.tistory.com] javascript/native/selector/attribute-contains-word</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
</head>
<body>

	<div name="_1q74-example-root">
		<div name="_1q74-example-1" style="min-height:240px;">
			<h4>Countries</h4>
			<li name="Republic of korea">한국</li>
			<li name="United Kingdom of Great Britain and Northern Ireland">영국</li>
			<li name="United States of America">미국</li>
			<li name="Spain">스페일</li>
			<li name="China">중국</li>
			<br/>
			<div id="error-message" style="color:red;"></div>
		</div>

		<div name="_1q74-example-bottom">
			<br/>
			영문이름에 'of'가 들어가 있고 공백으로 단어 구분이 되는 나라<br/>
			<button name="_1q74-btn-of-with-space">#1. container.querySelectorAll("[name~='of']")</button>
			<br/>
			</br/>
			영문이름에 'in'이 들어가 있고 공백으로 단어 구분이 되는 나라<br/>
			<button name="_1q74-btn-without-space">#2. container.querySelectorAll("[name~='in']")</button>
		</div>
	</div>

	<hr/>
	<h5>[HTML Code]</h5>
	<div name="_1q74-source">
	</div>
	<h5>[//HTML Code]</h5>
	
<script>
const btnOfWithSpace = document.querySelector("[name='_1q74-btn-of-with-space']");
const btnWithoutSpace = document.querySelector("[name='_1q74-btn-without-space']");

const container = document.querySelector("[name='_1q74-example-1']");

btnOfWithSpace.addEventListener("click", function() {
	const _of = container.querySelectorAll("[name~='of']");
	const borderStyles ={
		"border-style": "dotted",
		"border-color": "green"
	};	

	_of.forEach((el, i) => {
		const isStyled = (el.style.borderStyle === "dotted");

		// 스타일을 토글한다.
		for(const [key, value] of Object.entries(borderStyles)) {
			if(!isStyled) {
				el.style[key] = value;
			} else {
				el.style[key] = "";
			}
		}
	});
});

var withoutSpaceClickCount = 0;
btnWithoutSpace.addEventListener("click", function() {
	const _in = container.querySelectorAll("[name~='in']");

	if(_in.length == 0) {
		let msg = "해당 나라를 찾을 수 없습니다.";
		if(withoutSpaceClickCount > 0) {
			msg += "(" + withoutSpaceClickCount + ")";
		}
		document.getElementById("error-message").textContent = msg;

		++withoutSpaceClickCount;
	} else {
    	_in.style.backgroundColor = "orange";
    }
});

// ------------------------------------------------------
// 소스출력
// ------------------------------------------------------
var textSource = $("[name='_1q74-source']");
var exampleHtml = $("[name='_1q74-example-root']").html();
var specialCharLines = textSource.text(exampleHtml).html().split("\n");
textSource.html(specialCharLines.join("<br/>").replaceAll("\t", "&nbsp;&nbsp;"));
// ------------------------------------------------------
</script>

<style>
[name='_1q74-example-bottom'] button {
	background: lightgray;
	border: 5px outset;
	min-height: 30px;
}

[name='_1q74-example-bottom'] button:active {
	border: 2px inset;
	min-height: 30px;
}
</style>
</body>
</html>

4. File

[javascript][native][selector]attribute-contains-word.html

0.00MB

5. See also

https://1q74.tistory.com/9

【jQuery/Selector #5】Attribute Contains Word Selector [name~=”value”]

1. Description 속성값의 문자열과 부분 매칭되면서 공백으로 구분되는 문자열을 갖고 있는 Element를 찾는다. 2. Example 「영문이름에 'of'가 들어가 있고 공백으로 단어 구분이 되는 나라」버튼을 클릭

1q74.tistory.com

6. Reference

https://developer.mozilla.org/ko/docs/Web/CSS/Attribute_selectors

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

【Java/Cookbook】Java File Explorer

1Q74 — Fri, 17 Mar 2023 10:58:00 +0900

1. Description

요즘은 Java GUI로 어떤 라이브러리를 사용하는지 검색을 해 보지 않아서 잘 모르겠습니다.

Swing이 예전에는 컴퓨터 사양때문인지 속도가 그닥 빠르다고 기억되지 않았는데,

하드웨어 성능이 좋아져서인지 몰라도 지금 다시 돌려보니 대충 잘 돌아가네요.

몇 년 전에 특별한 이벤트를 기념하기 위해 남는 시간에 만든 것인데

그냥 이 쪽에 링크 하나 걸어둡니다.

2. Screenshot

3. File

https://github.com/1Q74/wife

GitHub - 1Q74/wife: Java File Explorer for just study

Java File Explorer for just study. Contribute to 1Q74/wife development by creating an account on GitHub.

github.com

【CSS/table】Creating table with div(div로 테이블 만들기) #1

1Q74 — Thu, 16 Mar 2023 12:47:42 +0900

1. Description

display: table, display: table-row, display: table-cell을 이용하여 테이블을 만든다.

2. Example (1) : 기본 테이블

다음은 가장 기본적인 2 x 2형태의 테이블이다(테이블의 border조차 보이지 않는다).

._1q74-ex-1 {
}
._1q74-ex-1 .table {
	display: table;
	background: #022F04;
	width: 200px;
	height: 200px;
}
._1q74-ex-1 .row {
	display: table-row;
}
._1q74-ex-1 .cell {
	display: table-cell;
	background: #196F1D;
}

[1q74.tistory.com] css/div/table

1-1

1-2

2-1

2-2

3. File (1)

[css][div][table]normal(2x2).html

0.00MB

4. Example (2) : 테이블 border효과 내기

display: table속성에 border-collapse, border-spacing을 추가하여 테이블의 border처럼 보이게 할 수 있다.

._1q74-ex-2 {
}
._1q74-ex-2 .table {
	display: table;
	border-collapse: separate;
	border-spacing: 5px;
	background: #02A80A;
	width: 200px;
	height: 200px;
}
._1q74-ex-2 .row {
	display: table-row;
}
._1q74-ex-2 .cell {
	display: table-cell;
	background: #41EA49;
}

[1q74.tistory.com] css/div/table-border

1-1

1-2

2-1

2-2

5. File (2)

[css][div][table]normal(2x2)-border.html

0.00MB

6. Example (3) : 컬럼 그룹으로 나누기

table-column-group, table-column 속성값으로 컬럼 그룹을 나눌 수 있다.

예제에서는 컬럼의 넓이를 4:6 비율로 나누었다.

._1q74-ex-3 {
}
._1q74-ex-3 .table {
	display: table;
	border-collapse: separate;
	border-spacing: 5px;
	background: #02A80A;
	width: 200px;
	height: 200px;
}
._1q74-ex-3 .table-column-group {
	display: table-column-group;
}
._1q74-ex-3 .table-column {
	display: table-column;
}
._1q74-ex-3 .table-column:nth-child(1) {
	width: 40%;
}
._1q74-ex-3 .table-column:nth-child(2) {
	width: 60%;
}
._1q74-ex-3 .row {
	display: table-row;
}
._1q74-ex-3 .cell {
	display: table-cell;
	background: #41EA49;
}

[1q74.tistory.com] css/div/table-column-group

Column-1

Column-2

1-1

1-2

2-1

2-2

7. File (3)

[css][div][table]normal(2x2)-column-group.html

0.00MB

8. Example (4) : 컬럼 헤더 추가하기

table-header-group 속성값으로 컬럼 헤더를 넣을 수 있다.

._1q74-ex-4 {
}
._1q74-ex-4 .table {
	display: table;
	border-collapse: separate;
	border-spacing: 5px;
	background: #02A80A;
	width: 200px;
	height: 200px;
}
._1q74-ex-4 .column-group {
	display: table-column-group;
}
._1q74-ex-4 .column {
	display: table-column;
}
._1q74-ex-4 .column:nth-child(1) {
	width: 40%;
}
._1q74-ex-4 .column:nth-child(2) {
	width: 60%;
}
._1q74-ex-4 .header-group {
	display: table-header-group;
}
._1q74-ex-4 .header-group .cell {
	background: #D9FF07;
}
._1q74-ex-4 .row {
	display: table-row;
}
._1q74-ex-4 .cell {
	display: table-cell;
	background: #41EA49;
}

[1q74.tistory.com] css/div/table-column-header

Column-1

Column-2

H-1

H-2

1-1

1-2

2-1

2-2

9. File (4)

[css][div][table]normal(2x2)-column-header.html

0.00MB

10. Example (5) : 컬럼 바디 추가하기

table-row-group 속성값으로 컬럼 바디를 추가할 수 있다.

._1q74-ex-5 {
}
._1q74-ex-5 .table {
	display: table;
	border-collapse: separate;
	border-spacing: 5px;
	background: #02A80A;
	width: 200px;
	height: 200px;
}
._1q74-ex-5 .column-group {
	display: table-column-group;
}
._1q74-ex-5 .column {
	display: table-column;
}
._1q74-ex-5 .column:nth-child(1) {
	width: 40%;
}
._1q74-ex-5 .column:nth-child(2) {
	width: 60%;
}
._1q74-ex-5 .header-group {
	display: table-header-group;
}
._1q74-ex-5 .header-group .cell {
	background: #D9FF07;
}
._1q74-ex-5 .row-group {
	display: table-row-group;
}
._1q74-ex-5 .row-group .cell {
	display: table-cell;
	border: 2px solid;
}
._1q74-ex-5 .row {
	display: table-row;
}
._1q74-ex-5 .cell {
	display: table-cell;
	background: #41EA49;
}

[1q74.tistory.com] css/div/table-row-group

Column-1

Column-2

H-1

H-2

1-1

1-2

2-1

2-2

11. File (5)

[css][div][table]normal(2x2)-column-body.html

0.00MB

12. Example (6) : 컬럼 푸터 넣기

table-footer-group 속성값으로 컬럼 푸터를 넣을 수 있다.

._1q74-ex-6 {
}
._1q74-ex-6 .table {
	display: table;
	border-collapse: separate;
	border-spacing: 5px;
	background: #02A80A;
	width: 200px;
	height: 200px;
}
._1q74-ex-6 .column-group {
	display: table-column-group;
}
._1q74-ex-6 .column {
	display: table-column;
}
._1q74-ex-6 .column:nth-child(1) {
	width: 40%;
}
._1q74-ex-6 .column:nth-child(2) {
	width: 60%;
}
._1q74-ex-6 .header-group {
	display: table-header-group;
}
._1q74-ex-6 .header-group .cell {
	background: #D9FF07;
}
._1q74-ex-6 .row-group {
	display: table-row-group;
}
._1q74-ex-6 .row-group .cell {
	display: table-cell;
	border: 2px solid;
}
._1q74-ex-6 .row {
	display: table-row;
}
._1q74-ex-6 .cell {
	display: table-cell;
	background: #41EA49;
}
._1q74-ex-6 .footer-group {
	display: table-footer-group;
}
._1q74-ex-6 .footer-group .cell {
	display: table-cell;
	background: #38EAF9;
}

[1q74.tistory.com] css/div/table-footer-group

Column-1

Column-2

H-1

H-2

1-1

1-2

2-1

2-2

13. File (6)

[css][div][table]normal(2x2)-column-footer.html

0.00MB

14. Example (7) : 테이블 타이틀 넣기

table-caption 속성값으로 타이틀을 넣을 수 있다.

._1q74-ex-7 {
}
._1q74-ex-7 .table {
	display: table;
	border-collapse: separate;
	border-spacing: 5px;
	background: #02A80A;
	width: 200px;
	height: 200px;
}
._1q74-ex-7 .caption {
	display: table-caption;
	font-weight: bold;
}
._1q74-ex-7 .column-group {
	display: table-column-group;
}
._1q74-ex-7 column {
	display: table-column;
}
._1q74-ex-7 .column:nth-child(1) {
	width: 40%;
}
._1q74-ex-7 .column:nth-child(2) {
	width: 60%;
}
._1q74-ex-7 .header-group {
	display: table-header-group;
}
._1q74-ex-7 .header-group .cell {
	background: #D9FF07;
}
._1q74-ex-7 .row-group {
	display: table-row-group;
}
._1q74-ex-7 .row-group .cell {
	display: table-cell;
	border: 2px solid;
}
._1q74-ex-7 .row {
	display: table-row;
}
._1q74-ex-7 .cell {
	display: table-cell;
	background: #41EA49;
}
._1q74-ex-7 .footer-group {
	display: table-footer-group;
}
._1q74-ex-7 .footer-group .cell {
	display: table-cell;
	background: #38EAF9;
}

[1q74.tistory.com] css/div/table-caption

Table with div

Column-1

Column-2

H-1

H-2

1-1

1-2

2-1

2-2

15. File (7)

[css][div][table]normal(2x2)-caption.html

0.00MB

16. Example (8) : 텍스트를 박스의 한가운데로 정렬하기

cell 클래스에 text-align: center, vertical-align: middle 속성을 추가한다.

._1q74-ex-8 {
}
._1q74-ex-8 .table {
	display: table;
	border-collapse: separate;
	border-spacing: 5px;
	background: #02A80A;
	width: 200px;
	height: 200px;
}
._1q74-ex-8 .table .cell {
	text-align: center;
	vertical-align: middle;
}
._1q74-ex-8 .caption {
	display: table-caption;
	font-weight: bold;
}
._1q74-ex-8 .column-group {
	display: table-column-group;
}
._1q74-ex-8 .column {
	display: table-column;
}
._1q74-ex-8 .column:nth-child(1) {
	width: 40%;
}
._1q74-ex-8 .column:nth-child(2) {
	width: 60%;
}
._1q74-ex-8 .header-group {
	display: table-header-group;
}
._1q74-ex-8 .header-group .cell {
	background: #D9FF07;
}
._1q74-ex-8 .row-group {
	display: table-row-group;
}
._1q74-ex-8 .row-group .cell {
	display: table-cell;
	border: 2px solid;
}
._1q74-ex-8 .row {
	display: table-row;
}
._1q74-ex-8 .cell {
	display: table-cell;
	background: #41EA49;
}
._1q74-ex-8 .footer-group {
	display: table-footer-group;
}
._1q74-ex-8 .footer-group .cell {
	display: table-cell;
	background: #38EAF9;
}

[1q74.tistory.com] css/div/table-text-align

Table with div

Column-1

Column-2

H-1

H-2

1-1

1-2

2-1

2-2

17. File (8)

[css][div][table]normal(2x2)-text-align.html

0.00MB

18. Summary

<TABLE>태그	CSS 속성
<table>	{ display: table }
<caption>	{ display: table-caption }
<colgroup>	{ display: table-column-group }
<col>	{ display: table-column }
<thead>	{ display: table-header-group }
<th>	{ display: table-cell }
<tbody>	{ display: table-row-group }
<tr>	{ display: table-row }
<td>	{ display: table-cell }
<tfoot>	{ display: table-footer-group }

【CSS/Cookbook】Making HTML Random Color Code(HTML 랜덤 색상 만들기)

1Q74 — Thu, 16 Mar 2023 12:26:40 +0900

1. Description

JavaScript의 Math함수를 이용하여 난수를 발생시키고, 제한값을 0xFFFFFF로 설정한다.

2. Example

[Click Me]버튼을 클릭할 때마다 Box의 배경색이 랜덤색상으로 변경된다.

[1q74.tistory.com] css/div/table

[HTML Code]

[//HTML Code]

3. Code

<!-- ---------------------------------------------------------
  --
  -- Author: 1q74.tistory.com
  --
  --------------------------------------------------------- -->
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>[1q74.tistory.com] css/div/table</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
</head>
<body>

	<div name="_1q74-example-root">
		<div name="_1q74-example-1">
		</div>

		<div name="_1q74-example-bottom">
			<br/>
			<button name="btn-execute">Click Me</button>
		</div>

		<script>
		var btnExecute = $("[name='_1q74-example-bottom'] [name='btn-execute']");
		var box = $("[name='_1q74-example-1']");

		btnExecute.click(function() {
			const numberLimit = parseInt(0xFFFFFF, 10);
			const randomNumber = Math.random() * numberLimit;
			const randomColorCode = "#" + Math.ceil(randomNumber).toString(16);
			box.css("background", randomColorCode).text(randomColorCode);	
		});
		</script>
	</div>

	<!--------------- [HTML Code] --------------->
	<hr/>
	<h5>[HTML Code]</h5>
	<div name="_1q74-source">
	</div>
	<h5>[//HTML Code]</h5>
	<!--------------- [//HTML Code] --------------->

<script>
// ------------------------------------------------------
// 소스출력
// ------------------------------------------------------
var textSource = $("[name='_1q74-source']");
var exampleHtml = $("[name='_1q74-example-root']").html();
var specialCharLines = textSource.text(exampleHtml).html().split("\n");
textSource.html(specialCharLines.join("<br/>").replaceAll("\t", "&nbsp;&nbsp;"));
</script>

<style>
[name="_1q74-example-1"] {
	display: block;
	width: 200px;
	height: 200px;
	border: 2px solid black;
}

[name|="_1q74-example"] button
,[name="_1q74-source"] button {
	background: lightgray;
	border: 5px outset;
	min-height: 40px;
}

[name|="_1q74-example"] button:active
,[name="_1q74-source"] button:active {
	border: 2px inset;
	min-height: 40px;
}
</style>
</body>
</html>

4. File

[css][div][table]random-color.html

0.00MB

【jQuery/Selector #62】:visible Selector

1Q74 — Wed, 15 Mar 2023 15:02:57 +0900

1. Description

jQuery(":visible")

visible한(보여지고 있는) Element들을 찾는다.

document안에서 공간을 차지하고 있는 Element는 visible로 인식되기 때문에, visibility: hidden이나 opacity: 0도 visible Element로 인식된다.

document 안에 존재하지 않는 Element들은 hidden Element로 인식된다. 해당 Element가 style이 적용되어서 visible하게 될 지 그렇지 않을지 jQuery로서는 알 수 있는 방법이 없기 때문이다.

visible selector는 hidden selector의 정반대 selector이다.

<option>은 selected여부와 관계없이 hidden Element로 간주된다.

jQuery 3부터는 <br/>또는 inline Element와 같이 어떤 내용도 갖지 않는 Element들도 visible selector로 선택될 수 있다.

2. Example

#1버튼을 클릭하면 배경색이 초기화된다.

#2버튼을 클릭하면 visible Element를 가지고 있는 <td>의 배경색을 변경한다.

#3버튼을 클릭하면 hidden Element를 가지고 있는 <td>의 배경색을 변경한다.

버튼을 클릭할 때마다 다른 색깔로 배경색이 변경된다.

[1q74.tistory.com] javascript/jquery/selector/visible

Input Collections!!

[type="radio"]

[type="checkbox"]

[type="hidden"] is here...

<br> is here...

[HTML Code]

[//HTML Code]

3. Code

<!-- ---------------------------------------------------------
  --
  -- Author: 1q74.tistory.com
  --
  --------------------------------------------------------- -->
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>[1q74.tistory.com] javascript/jquery/selector/visible</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
</head>
<body>

	<div name="_1q74-example-root">
		<div name="_1q74-example-1">
			<h4>Input Collections!!</h4>
			<table name="bigtech" border="1">
				<tr>
					<td>
						<input type="text" name="text" value="[type='text']"/>
					</td>
				</tr>
				<tr>
					<td>
						<input type="button" name="button" value="[type='button']"/>
					</td>
				</tr>
				<tr>
					<td>
						<input type="image" name="image" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png"/>
					</td>
				</tr>
					<td>
						<input type="submit" name="submit" value="[type='submit']"/>
					</td>
				</tr>
				<tr>
					<td>
						<input type="file" name="file" value="[type='file']"/>
					</td>
				</tr>
				<tr>
					<td>
						<input type="password" name="password" value="[type='password']"/>
					</td>
				</tr>
				<tr>
					<td>
						<input type="reset" name="reset" value="[type='reset']"/>
					</td>
				</tr>
				<tr>
					<td>
						<input type="radio" name="radio" value="[type='radio']"/>[type="radio"]
					</td>
				</tr>
				<tr>
					<td>
						<input type="checkbox" name="checkbox" value="[type='checkbox']"/>[type="checkbox"]
					</td>
				</tr>
				<tr>
					<td>
						<select name="select">
							<option>option-1</option>
							<option>option-2</option>
							<option>option-3</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>
						<textarea>textarea</textarea>
					</td>
				</tr>
				<tr>
					<td>
						[type="hidden"] is here...
						<input type="hidden" name="hidden" value="hidden"/>
					</td>
				</tr>
				<tr>
					<td>
						&lt;br&gt; is here...
						<br/>
					</td>
				</tr>
			</table>
		</div>

		<div name="_1q74-example-bottom">
			<br/>
			<button name="btn-initialize">#1. 초기화</button><br/>
			<br/>
			<button name="btn-find-visible">#2. $("[name='_1q74-example-1'] :visible")</button><br/>
			<button name="btn-find-hidden">#3. $("[name='_1q74-example-1'] :hidden")</button>
		</div>
	</div>

	<hr/>
	<h5>[HTML Code]</h5>
	<div name="_1q74-source">
	</div>
	<h5>[//HTML Code]</h5>

<script>
var visibleElements = $("[name='_1q74-example-1'] td :visible");
var hiddenElements = $("[name='_1q74-example-1'] td :hidden");
var btnInitialize = $("[name='_1q74-example-bottom'] [name='btn-initialize']");
var btnFindVisible = $("[name='_1q74-example-bottom'] [name='btn-find-visible']");
var btnFindHidden = $("[name='_1q74-example-bottom'] [name='btn-find-hidden']");

var rainbowColors = [
	"red",
	"orange",
	"yellow",
	"green",
	"blue",
	"navy",
	"purple"
];
var visibleClickCount = 0;
var hiddenClickCount = 0;


function changeBackground(elements, clickCount) {
	elements.each(function(i, el) {
		const element = $(el);
		let colorIndex = i + clickCount;

		if(colorIndex >= rainbowColors.length) {
			colorIndex %= rainbowColors.length;
		}

		if(!element.is("[style]")) {
			element.parent().css("background", rainbowColors[colorIndex]);
		}
	});
}

btnInitialize.click(function() {
	$.each([visibleElements, hiddenElements], function(i, el) {
		const element = $(el);
		element.parent().removeAttr("style");
	});
});

btnFindVisible.click(function() {
	changeBackground(visibleElements, visibleClickCount);
	++visibleClickCount;
});

btnFindHidden.click(function() {
	changeBackground(hiddenElements, hiddenClickCount);
	++hiddenClickCount;
});

// ------------------------------------------------------
// 소스출력
// ------------------------------------------------------
var textSource = $("[name='_1q74-source']");
var exampleHtml = $("[name='_1q74-example-root']").html();
var specialCharLines = textSource.text(exampleHtml).html().split("\n");

textSource.html(specialCharLines.join("<br/>").replaceAll("\t", "&nbsp;&nbsp;"));
</script>
<style>
[name="_1q74-example-root"] {
	min-height: 200px;
}

[name="_1q74-example-1"] {
	min-height: 170px;
}

[name="_1q74-example-bottom"] {
	min-height: 150px;
}

[name="_1q74-example-root"] [type="image"]{
	width: 100px;
}

[name="_1q74-example-1"] td {
	min-width: 100px;
	min-height: 30px;
}

[name|="_1q74-example"] button
,[name="_1q74-source"] button {
	background: lightgray;
	border: 5px outset;
	min-height: 40px;
}

[name|="_1q74-example"] button:active
,[name="_1q74-source"] button:active {
	border: 2px inset;
	min-height: 40px;
}
</style>

</body>
</html>

4. File

[javascript][jquery][selector]visible.html

0.00MB

:hidden selector

【jQuery/Selector #32】:hidden Selector

1. Description jQuery( ":hidden" ) : 숨겨진 모든 Element들을 찾는다. 다음의 경우 숨겨진 Element로 취급될 수 있다. display:none으로 설정된 경우 input type="hidden"으로 설정된 경우 width와 height가 0으로 설정된

1q74.tistory.com

6. Reference

https://api.jquery.com/visible-selector/

1Q74

【CSS/Cookbook】How are the display values ​​different between block and inline block?

1. Description

2. Example

3. Code

4. File

【CSS/Cookbook】<fieldset>, <legend> (Group으로 묶어서 표시하기)

1. Description

2. Example

3. Code

4. File

5. See also

【Go/Cookbook】Send Email in golang(feat. Gmail) Go언어에서 이메일 전송하기

1. Description

2. Prerequisite

3. Example

4. See also

【jQuery/Traversing】addBack([selector])

1. Description

2. Example

3. Code

4. File

5. Reference

【jQuery/Traversing】.add(selector)

1. Description

2. Example

3. Code

3. File

4. Reference

【Native/Selector #5】Attribute Contains Word Selector [name~=”value”]

1. Description

2. Example

Countries

[HTML Code]

[//HTML Code]

3. Code

4. File

5. See also

6. Reference

【Java/Cookbook】Java File Explorer

1. Description

2. Screenshot

3. File

【CSS/table】Creating table with div(div로 테이블 만들기) #1

1. Description

2. Example (1) : 기본 테이블

3. File (1)

4. Example (2) : 테이블 border효과 내기

5. File (2)

6. Example (3) : 컬럼 그룹으로 나누기

7. File (3)

8. Example (4) : 컬럼 헤더 추가하기

9. File (4)

10. Example (5) : 컬럼 바디 추가하기

11. File (5)

12. Example (6) : 컬럼 푸터 넣기

13. File (6)

14. Example (7) : 테이블 타이틀 넣기

15. File (7)

16. Example (8) : 텍스트를 박스의 한가운데로 정렬하기

17. File (8)

18. Summary

【CSS/Cookbook】Making HTML Random Color Code(HTML 랜덤 색상 만들기)

1. Description

2. Example

[HTML Code]

[//HTML Code]

3. Code

4. File

【jQuery/Selector #62】:visible Selector

1. Description

2. Example

Input Collections!!

[HTML Code]

[//HTML Code]

3. Code

4. File

5. See also

6. Reference

【CSS/Cookbook】How are the display values different between block and inline block?