CSS 플렉스 박스와 Javascript를 사용하여 ChessBoard를 디자인하는 방법
18706 단어 programmingjavascriptcsswebdev
이를 위해서는 CSS Flex-box 및 nth-child() 속성에 대한 기본 개념이 필요합니다.
그럼 시작하겠습니다...
모든 짝수 행에 대해 부모 컨테이너로 containerEven 클래스를 추가하고 모든 홀수 행에 대해 containerOdd를 추가합니다.
아래는 동일한 CSS를 보여줍니다.
.containerEven>div:nth-child(odd) {
background-color: white;
}
.containerEven>div:nth-child(even) {
background-color: black;
}
.containerOdd>div:nth-child(odd) {
background-color: black;
}
.containerOdd>div:nth-child(even) {
background-color: white;
}
다음은 html 부분입니다.
<div class="parent-class">
<section class="containerEven" id='container1'></section>
<section class="containerOdd" id='container2'></section>
<section class="containerEven" id='container3'></section>
<section class="containerOdd" id='container4'></section>
<section class="containerEven" id='container5'></section>
<section class="containerOdd" id='container6'></section>
<section class="containerEven" id='container7'></section>
<section class="containerOdd" id='container8'></section>
</div>
이제 남은 것은 javascript를 사용하여 해당 ID의 도움으로 이러한 섹션 태그 내부에 요소를 동적으로 추가하는 것입니다.
var res1 = [], res2 = [], res3 = [], res4 = [], res5 = [], res6 = [], res7 = [], res8 = [];
for (i = 1; i <= 8; i++) {
res1 += `<div class="item"></div>`
res2 += `<div class="item"></div>`
res3 += `<div class="item"></div>`
res4 += `<div class="item"></div>`
res5 += `<div class="item"></div>`
res6 += `<div class="item"></div>`
res7 += `<div class="item"></div>`
res8 += `<div class="item"></div>`
}
document.getElementById(`container1`).innerHTML = res1;
document.getElementById(`container2`).innerHTML = res2;
document.getElementById(`container3`).innerHTML = res3;
document.getElementById(`container4`).innerHTML = res4;
document.getElementById(`container5`).innerHTML = res5;
document.getElementById(`container6`).innerHTML = res6;
document.getElementById(`container7`).innerHTML = res7;
document.getElementById(`container8`).innerHTML = res8;
그래서 여기서 우리가 하는 일은 각 행 데이터를 저장하기 위해 8개의 배열을 취하는 것입니다. 데이터를 받으면 해당 컨테이너 ID에 추가합니다.
출력이 있는 전체 코드는 다음과 같습니다.
<style>
.parent-class {
border: 5px chocolate groove;
}
.containerEven,
.containerOdd {
display: flex;
background-color: dodgerblue;
}
.item {
background-color: #f1f1f1;
padding: 20px;
font-size: 30px;
flex: 1;
height: 50px;
text-align: center;
}
.containerEven>div:nth-child(odd) {
background-color: white;
}
.containerEven>div:nth-child(even) {
background-color: black;
}
.containerOdd>div:nth-child(odd) {
background-color: black;
}
.containerOdd>div:nth-child(even) {
background-color: white;
}
</style>
<div class="parent-class">
<section class="containerEven" id='container1'></section>
<section class="containerOdd" id='container2'></section>
<section class="containerEven" id='container3'></section>
<section class="containerOdd" id='container4'></section>
<section class="containerEven" id='container5'></section>
<section class="containerOdd" id='container6'></section>
<section class="containerEven" id='container7'></section>
<section class="containerOdd" id='container8'></section>
</div>
<script>
var res1 = [], res2 = [], res3 = [], res4 = [], res5 = [], res6 = [], res7 = [], res8 = [];
for (i = 1; i <= 8; i++) {
res1 += `<div class="item"></div>`
res2 += `<div class="item"></div>`
res3 += `<div class="item"></div>`
res4 += `<div class="item"></div>`
res5 += `<div class="item"></div>`
res6 += `<div class="item"></div>`
res7 += `<div class="item"></div>`
res8 += `<div class="item"></div>`
}
document.getElementById(`container1`).innerHTML = res1;
document.getElementById(`container2`).innerHTML = res2;
document.getElementById(`container3`).innerHTML = res3;
document.getElementById(`container4`).innerHTML = res4;
document.getElementById(`container5`).innerHTML = res5;
document.getElementById(`container6`).innerHTML = res6;
document.getElementById(`container7`).innerHTML = res7;
document.getElementById(`container8`).innerHTML = res8;
</script>
이것이 도움이 되길 바랍니다 ..
Reference
이 문제에 관하여(CSS 플렉스 박스와 Javascript를 사용하여 ChessBoard를 디자인하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/ganeshshetty195/how-to-design-a-chessboard-using-css-flex-box-and-javascript-54ac텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)