div .outer를 만들어 영역을 만들자.
<body>
<div class="outer"></div>
</body>
jquery연결후
color에 색상값을 담은 배열을 만들어
.outer 영역에 div코드를 append하고 동시에 css를 추가한다.
<script src="https://code.jquery.com/jquery-3.6.3.js"></script>
<script>
// append() String.fromCharCode each(function(index, element)) css('','')
$(function () {
// 'rgb('+color[2]+')'
let color = [
"255, 0, 0",
"255, 50, 0",
"255, 255, 0",
"0, 255, 0",
"0, 0, 255",
"100, 0, 255"];
for (var i = 1; i <= 6; i++) {
$('.outer').append("<div class='header_outer'><h" + i + " class='header'>Header" + String.fromCharCode(64 + i) + "</h" + i + "></div>");
$('.header_outer:nth-child(' + i + ')').css('background', 'rgb(' + color[(i-1)] + ')');
}
$('.header').each(function (index, element) {
$(this).css('color', 'white');
if (index == 2) {
$(this).append(" ---" + (index + 1) + "번째는 가독성의 이유로 예외");
$(this).css('color','#a17909');
}
});
});
</script>
'JavaScript > jQuery' 카테고리의 다른 글
| jquery 위치 탐색 선택자 gt() n번째 요소 이후의 모든 요소 선택 (0) | 2023.04.24 |
|---|---|
| jquery 퀴즈 구현하기, 정답 출력 html() text() (0) | 2023.04.23 |
| jQuery 선택자, closest (0) | 2023.04.17 |
| jQuery 선택자, 형제 (0) | 2023.04.17 |
| jQuery 선택자, 이전/다음 (0) | 2023.04.17 |
