diff --git a/img/precontract_hover_after.png b/html-css/ax1/img/precontract_hover_after.png similarity index 100% rename from img/precontract_hover_after.png rename to html-css/ax1/img/precontract_hover_after.png diff --git a/img/precontract_hover_before.png b/html-css/ax1/img/precontract_hover_before.png similarity index 100% rename from img/precontract_hover_before.png rename to html-css/ax1/img/precontract_hover_before.png diff --git a/html-css/ax1/index.html b/html-css/ax1/index.html new file mode 100644 index 00000000..c37fb89d --- /dev/null +++ b/html-css/ax1/index.html @@ -0,0 +1,136 @@ + + + + + + + + CASPER Electric + + + + + + +
+

CASPER
Electric

+ + + + + + +
+ + + + diff --git a/style.css b/html-css/ax1/style.css similarity index 100% rename from style.css rename to html-css/ax1/style.css diff --git a/html-css/mobile/handwriting.jpg b/html-css/mobile/handwriting.jpg new file mode 100644 index 00000000..dac47114 Binary files /dev/null and b/html-css/mobile/handwriting.jpg differ diff --git a/html-css/mobile/hongong.jpg b/html-css/mobile/hongong.jpg new file mode 100644 index 00000000..60fb5e58 Binary files /dev/null and b/html-css/mobile/hongong.jpg differ diff --git a/html-css/mobile/index.html b/html-css/mobile/index.html new file mode 100644 index 00000000..2bddba18 --- /dev/null +++ b/html-css/mobile/index.html @@ -0,0 +1,61 @@ + + + + + + + + Mobile Page + + + +
+

Hanbit

+ +
+ +
+
+

Lorem Ipsum

+

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorem, quidem odio voluptatum excepturi + repudiandae, quae doloribus, corporis accusantium quisquam a molestiae nostrum quis possimus repellendus + numquam reiciendis dolor unde blanditiis.

+
+ +
+

혼자 공부하는 머신러닝 + 딥러닝

+

1:1 과외하듯 배우는 인공지능 자습서

+ 도서 [혼자 공부하는 머신러닝 + 딥러닝] 표지 +

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam cumque aliquam natus porro repudiandae + consequatur eum, voluptas, incidunt, molestias perferendis ad iste non eveniet perspiciatis? Qui + architecto eaque expedita modi!

+
+ +
+

나도 손글씨 반듯하게 잘 쓰면 소원이 없겠네

+

악필 교정부터 유려한 글씨체까지 4주 완성 펜크체 연습법

+ 도서 [나도 손글씨 반듯하게 잘 쓰면 소원이 없겠네] 표지 +

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolore, cumque fugit, velit provident sed + aperiam rerum iste saepe corrupti aspernatur quo possimus in culpa quia officiis id sapiente repellendus + magni!

+
+
+ + + + + \ No newline at end of file diff --git a/html-css/mobile/style.css b/html-css/mobile/style.css new file mode 100644 index 00000000..042540d7 --- /dev/null +++ b/html-css/mobile/style.css @@ -0,0 +1,132 @@ +:root { + --primary-color: #00afa0; + --text-color: #2a2a2a; + --background-color: #fff; + --footer-background: rgba(0, 0, 0, 0.8); + --footer-text-color: #fff; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + list-style: none; + text-decoration: none; + border: none; + word-break: keep-all; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +html { + font-size: 16px; +} + +body { + min-height: 100vh; + display: grid; + grid-template-rows: auto 1fr auto; + font-family: Arial, sans-serif; + color: var(--text-color); + background-color: var(--background-color); +} + +h1 { + font-size: 2rem; + height: 2rem; + margin-left: 10px; +} + +.navButton label { + text-align: center; + width: 1.6rem; + height: 1.6rem; + position: absolute; + right: 10px; + top: 0; + border: 2px solid var(--text-color); + border-radius: 25%; + margin: 0.2rem; +} + +nav ul { + display: none; +} + +nav li a { + display: block; + padding: 1rem; + color: var(--text-color); +} + +#navToggle:checked~ul { + display: block; +} + +section { + background-color: var(--primary-color); + padding: 20px 30px; + text-align: center; + color: var(--background-color); +} + +section h2 { + margin-bottom: 20px; + font-weight: 500; +} + +article { + padding-top: 30px; + padding-bottom: 30px; + text-align: center; +} + +article p { + font-size: 1.0625rem; + color: var(--text-color); + padding: 20px 30px; +} + +article img { + max-width: 100%; + width: 200px; + display: block; + margin: 10px auto; +} + +footer { + padding: 10px; + text-align: center; + color: var(--footer-text-color); + background-color: var(--footer-background); +} + +@media (min-width: 768px) { + .navButton { + display: none; + } + + nav ul { + display: flex; + justify-content: space-around; + } + + nav li { + display: inline-block; + } + + article { + max-width: 800px; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/index.html b/index.html index 01f749ad..98213ee4 100644 --- a/index.html +++ b/index.html @@ -1,136 +1,16 @@ - - - - - - CASPER Electric - - - - - - -
-

CASPER
Electric

- - - - - - -
- - - - + + + + Builter GitHub Pages + + +

Dev Course

+ + + \ No newline at end of file diff --git a/js-basic/loop-star/index.html b/js-basic/loop-star/index.html new file mode 100644 index 00000000..0a54a04c --- /dev/null +++ b/js-basic/loop-star/index.html @@ -0,0 +1,54 @@ + + + + + + + Loop Star + + + + + +
+

JS Loop Star

+

JavaScript 반복문을 이용한 별 찍기

+
+ + + +
+ +
+
+ +
+ + +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
+ + + + + \ No newline at end of file diff --git a/js-basic/loop-star/script.js b/js-basic/loop-star/script.js new file mode 100644 index 00000000..1e71c93d --- /dev/null +++ b/js-basic/loop-star/script.js @@ -0,0 +1,157 @@ +function generateStars() { + let size = document.getElementById('sizeInput').value || 5; + size = parseInt(size); + + // 1번 + let starContainer1 = document.getElementById('starContainer1'); + starContainer1.innerHTML = ''; + for (let i = 0; i < size; i++) { + starContainer1.innerHTML += '★'; + } + + // 2번 + let starContainer2 = document.getElementById('starContainer2'); + starContainer2.innerHTML = ''; + for (let i = 0; i < size; i++) { + starContainer2.innerHTML += '★
'; + } + + // 3번 + let starContainer3 = document.getElementById('starContainer3'); + starContainer3.innerHTML = ''; + for (let i = 0; i < size; i++) { + for (let j = 0; j < size; j++) { + starContainer3.innerHTML += '★'; + } + starContainer3.innerHTML += '
'; + } + + // 4번 + let starContainer4 = document.getElementById('starContainer4'); + starContainer4.innerHTML = ''; + for (let i = 0; i < size; i++) { + for (let j = 0; j <= i; j++) { + starContainer4.innerHTML += '★'; + } + starContainer4.innerHTML += '
'; + } + + // 5번 + let starContainer5 = document.getElementById('starContainer5'); + starContainer5.innerHTML = ''; + for (let i = 0; i < size; i++) { + for (let j = 0; j < size - i; j++) { + starContainer5.innerHTML += '★'; + } + starContainer5.innerHTML += '
'; + } + + // 6번 + let starContainer6 = document.getElementById('starContainer6'); + starContainer6.innerHTML = ''; + for (let i = 0; i < size; i++) { + for (let j = 0; j < size - i - 1; j++) { + starContainer6.innerHTML += '☆'; + } + for (let j = 0; j < i + 1; j++) { + starContainer6.innerHTML += '★'; + } + starContainer6.innerHTML += '
'; + } + + // 7번 + let starContainer7 = document.getElementById('starContainer7'); + starContainer7.innerHTML = ''; + for (let i = 0; i < size; i++) { + for (let j = 0; j < i; j++) { + starContainer7.innerHTML += '☆'; + } + for (let k = 0; k < size - i; k++) { + starContainer7.innerHTML += '★'; + } + starContainer7.innerHTML += '
'; + } + + // 8번 + let starContainer8 = document.getElementById('starContainer8'); + starContainer8.innerHTML = ''; + for (let i = 0; i < size; i++) { + for (let j = 0; j < size - i - 1; j++) { + starContainer8.innerHTML += '☆'; + } + for (let k = 0; k < 2 * i + 1; k++) { + starContainer8.innerHTML += '★'; + } + starContainer8.innerHTML += '
'; + } + + // 9번 + let starContainer9 = document.getElementById('starContainer9'); + starContainer9.innerHTML = ''; + for (let i = 0; i < size; i++) { + for (let j = 0; j < i; j++) { + starContainer9.innerHTML += '☆'; + } + for (let k = 0; k < 2 * (size - i) - 1; k++) { + starContainer9.innerHTML += '★'; + } + starContainer9.innerHTML += '
'; + } + + // 10번 + let starContainer10 = document.getElementById('starContainer10'); + starContainer10.innerHTML = ''; + for (let i = 0; i < size - 1; i++) { + for (let j = 0; j < size - i - 1; j++) { + starContainer10.innerHTML += '☆'; + } + for (let k = 0; k < 2 * i + 1; k++) { + starContainer10.innerHTML += '★'; + } + starContainer10.innerHTML += '
'; + } + for (let i = 0; i < size; i++) { + for (let j = 0; j < i; j++) { + starContainer10.innerHTML += '☆'; + } + for (let k = 0; k < 2 * (size - i) - 1; k++) { + starContainer10.innerHTML += '★'; + } + starContainer10.innerHTML += '
'; + } + + // 11번 + let starContainer11 = document.getElementById('starContainer11'); + starContainer11.innerHTML = ''; + for (let i = 0; i < size; i++) { + for (let j = 0; j < size + (size - i - 1); j++) { + starContainer11.innerHTML += '☆'; + } + for (let k = 0; k < 2 * i + 1; k++) { + starContainer11.innerHTML += '★'; + } + starContainer11.innerHTML += '
'; + } + for (let i = 0; i < size; i++) { + for (let j = 0; j < size - i - 1; j++) { + starContainer11.innerHTML += '☆'; + } + for (let k = 0; k < 2 * i + 1; k++) { + starContainer11.innerHTML += '★'; + } + for (let l = 0; l < 2 * (size - i) - 1; l++) { + starContainer11.innerHTML += '☆'; + } + for (let m = 0; m < 2 * i + 1; m++) { + starContainer11.innerHTML += '★'; + } + starContainer11.innerHTML += '
'; + } +} + +function updateStars() { + generateStars(); +} + +// Initial call to generate stars on page load +window.onload = generateStars; diff --git a/js-basic/loop-star/styles.css b/js-basic/loop-star/styles.css new file mode 100644 index 00000000..29e4e9dd --- /dev/null +++ b/js-basic/loop-star/styles.css @@ -0,0 +1,98 @@ +/* 기존 스타일은 유지하고 아래 내용을 추가합니다 */ + +body { + margin: 0; + padding: 20px; + box-sizing: border-box; +} + + + +main { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); + gap: 20px; + max-width: 100vw; + height: 100vh; + overflow: auto; +} + +.starContainer { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + white-space: pre; + line-height: 1; + padding: 20px; + max-height: 300px; + overflow-y: auto; +} + + +#starContainer11 { + grid-column: span 2; /* 2개의 열을 차지하도록 설정 */ + background-color: #2980b9; /* 기존 배경색 유지 */ +} + +/* 필요에 따라 미디어 쿼리를 추가하여 반응형으로 만들 수 있습니다 */ +@media (max-width: 768px) { + main { + grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); + } +} +/* 접근성을 고려한 깔끔한 배경색 */ +#starContainer1 { + background-color: #f0f4f8; /* 연한 회색 */ + color: #102a43; /* 진한 남색 */ +} + +#starContainer2 { + background-color: #d9e2ec; /* 연한 청회색 */ + color: #243b53; /* 진한 청색 */ +} + +#starContainer3 { + background-color: #e6f0e9; /* 연한 민트 */ + color: #1f4d3b; /* 진한 녹색 */ +} + +#starContainer4 { + background-color: #e6f3ff; /* 연한 하늘색 */ + color: #003e6b; /* 진한 파랑 */ +} + +#starContainer5 { + background-color: #fff0db; /* 연한 베이지 */ + color: #8d5b14; /* 갈색 */ +} + +#starContainer6 { + background-color: #ffebe6; /* 연한 살구색 */ + color: #ab3211; /* 진한 주황 */ +} + +#starContainer7 { + background-color: #f0e6ff; /* 연한 라벤더 */ + color: #4c2889; /* 진한 보라 */ +} + +#starContainer8 { + background-color: #e6fffa; /* 연한 청록 */ + color: #014d40; /* 진한 청록 */ +} + +#starContainer9 { + background-color: #fffbea; /* 연한 레몬 */ + color: #8d6708; /* 진한 황토 */ +} + +#starContainer10 { + background-color: #ffeef0; /* 연한 분홍 */ + color: #9e1f3d; /* 진한 자주 */ +} + +#starContainer11 { + background-color: #e6f2ff; /* 연한 파랑 */ + color: #003e6b; /* 진한 네이비 */ +} \ No newline at end of file