diff --git a/khm/index.html b/khm/index.html
index 1d5b77c..035614a 100644
--- a/khm/index.html
+++ b/khm/index.html
@@ -8,14 +8,20 @@
+
+ ☺️
+
자기소개
* 클릭
+
+ list를 눌렀을 때 li 태그에 on이라는 클래스를 toggle 하며. 해당 children의 clientHeight의 높이 값을 조절함
+
diff --git a/khm/index.js b/khm/index.js
index c26e515..b8bdb1f 100644
--- a/khm/index.js
+++ b/khm/index.js
@@ -1,16 +1,20 @@
const label = document.querySelectorAll(".label");
-const content = document.querySelectorAll(".content");
+// const content = document.querySelectorAll(".content");
+let triger = true;
-label.forEach((el, i) => {
+label.forEach(async (el, i) => {
const p_h = el.parentNode.clientHeight + "px";
el.parentNode.style.height = el.clientHeight + "px";
+ const target = el.parentNode;
if (i !== 0) {
- const h = el.parentNode.children[1].clientHeight + "px";
- el.parentNode.children[1].style.height = 0;
- el.addEventListener("click", (e) => {
- const target = el.parentNode;
- console.log(target.children[1].clientHeight);
- if (target.classList[0] === "on") {
+ const h = target.children[1].clientHeight + "px";
+ target.children[1].style.height = 0;
+ el.addEventListener("click", async (e) => {
+ if (!triger) {
+ alert("글자가 전부 출력 되기 전엔 클릭이 안되요!");
+ return;
+ }
+ if (target.classList.value.includes("on")) {
target.classList.remove("on");
el.parentNode.children[1].style.height = 0;
el.parentNode.style.height = el.clientHeight + "px";
@@ -18,7 +22,67 @@ label.forEach((el, i) => {
target.classList.add("on");
el.parentNode.style.height = p_h;
el.parentNode.children[1].style.height = h;
+ // stream
+ if (target.classList.value.includes("stream")) {
+ const stremTarget = target.children[1];
+ const streamText = stremTarget.textContent.trim();
+ stremTarget.innerHTML = "";
+ let result = "";
+ const stream = (text) =>
+ new Promise((resolve, reject) => {
+ try {
+ setTimeout(() => {
+ result += text;
+ stremTarget.innerHTML = result;
+ resolve();
+ }, 50);
+ } catch (err) {
+ console.log(err);
+ }
+ });
+ for (let i = 0; i < streamText.length; i++) {
+ triger = false;
+ await stream(streamText[i]);
+ if (i === streamText.length - 1) triger = true;
+ }
+ }
}
});
}
+
+ if (target.classList.value.includes("myName")) {
+ target.addEventListener("click", () => {
+ target.children[0].classList.toggle("skyblue");
+ });
+ }
+});
+
+const inputs = document.querySelectorAll("input");
+
+[...inputs].map((el) => {
+ // console.log(el);
+ el.addEventListener("keyup", (e) => {
+ console.log(e.target.value.length);
+ if (e.target.value.length > 10) el.style.backgroundColor = "skyblue";
+ else el.style.backgroundColor = "#fff";
+ });
+});
+
+const myMind = document.querySelector(".myMind");
+myMind.addEventListener("mouseover", () => {
+ myMind.style.backgroundColor = "red";
+ myMind.innerHTML = "😠";
+});
+myMind.addEventListener("mouseout", () => {
+ myMind.style.backgroundColor = "blue";
+ myMind.innerHTML = "😭";
+});
+
+const el = document.createElement("div");
+el.innerHTML = "New Div";
+window.addEventListener("scroll", (e) => {
+ if (window.scrollY > 30) {
+ el.classList.add("newDiv");
+ document.body.append(el);
+ }
});
diff --git a/khm/style.css b/khm/style.css
index 38591d6..47bfb8f 100644
--- a/khm/style.css
+++ b/khm/style.css
@@ -4,6 +4,12 @@
box-sizing: border-box;
list-style: none;
}
+*::-webkit-scrollbar {
+ display: none;
+}
+:root {
+ --mainGray: #282936;
+}
main {
width: 62rem;
@@ -11,14 +17,13 @@ main {
margin: auto;
}
h1 {
- margin-bottom: 1rem;
+ margin-bottom: 10px;
font-size: 2.5rem;
}
h3 {
font-weight: 500;
color: rgb(255, 73, 73);
- font-size: 1rem;
- margin-bottom: 1rem;
+ font-size: 16px;
}
ul {
border-radius: 5px;
@@ -39,8 +44,9 @@ ul li div {
padding: 1rem;
font-weight: 500;
}
+
.label {
- background: #282936;
+ background: var(--mainGray);
color: #fff;
cursor: pointer;
z-index: 99;
@@ -53,8 +59,6 @@ ul li:first-child .label::before {
color: rgb(255, 73, 73);
}
.content {
- /* border-left: 2px solid #777;
- border-right: 2px solid #777; */
}
.content a {
color: #000;
@@ -69,20 +73,45 @@ ul li:first-child .label::before {
.content.on {
animation: anis 1s forwards;
}
-/* @keyframes anis {
- 0% {
- padding: 0;
- height: 0;
- opacity: 0;
- }
- 50% {
- height: auto;
- display: block;
- }
- 100% {
- opacity: 1;
- padding: 1rem;
- height: auto;
- }
-} */
+.skyblue {
+ color: #000;
+ background: #206eff;
+}
+.description {
+ font-size: 20px;
+ font-weight: 600;
+ margin-bottom: 10px;
+}
+.insert {
+ width: 100%;
+ height: 100%;
+ border: 2px solid var(--mainGray);
+ font-weight: 600;
+ font-size: 20px;
+ outline: none;
+ border-radius: 5px;
+ padding: 5px;
+}
+
+.myMind {
+ font-size: 50px;
+ background: var(--mainGray);
+ width: 5rem;
+ text-align: center;
+ line-height: 150%;
+ border-radius: 10%;
+ position: fixed;
+ top: 10%;
+ right: 3%;
+ transition: 0.5s;
+}
+.newDiv {
+ background: var(--mainGray);
+ width: 100%;
+ padding: 10px;
+ text-align: center;
+ font-size: 30px;
+ color: #fff;
+ bottom: 0;
+}