프론트엔드 개발일지 #21 -속성 조작 실습

조아라·2024년 10월 18일

속성 조작 실습

DOM 요소 속성으로 작업하는 연습을 해보겠습니다. 아주 기본적인 마크업 몇 가지를 제공해 드렸습니다. 이미지 요소를 선택하고

해당 소스를 다음 url로 변경하세요. https://devsprouthosting.com/images/chicken.jpg

대체 텍스트를"chicken"으로 변경하세요.

const eggImg = document.querySelector('img')

eggImg.src='https://devsprouthosting.com/images/chicken.jpg';
eggImg.alt="chicken";

마법의 숲 서클 실습

index.html에 몇 가지 기본 마크업을 제공해 드렸습니다. 마크업을 직접 변경하지 마세요. 대신 JavaScript를 사용하여 다음과 같이 변경하세요.

id가 container인 div를 선택하세요. JavaScript를 사용하여 텍스트 정렬을 'center'로 설정하세요.

이미지를 선택하고 JavaScript를 사용하여 너비를 150px으로, 테두리 반경을 50%로 지정하세요.

<!DOCTYPE html>

<head>
    <title>Forest</title>
    <!--LEAVE THESE LINES ALONE, PLEASE! THEY MAKE THE LIVE PREVIEW WORK!-->
    <script src="node_modules/babel-polyfill/dist/polyfill.js" type="text/javascript"> </script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

</head>

<body>
   <div id="container">
        <h1>I &hearts; Trees</h1>
        <img src="https://images.unsplash.com/photo-1596328546171-77e37b5e8b3d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1400&q=80" alt="">
    </div>
</body>

</html>

const h1Title = document.querySelector('#container')
h1Title.style.textAlign='center'; 

const h1Img = document.querySelector('img')
h1Img.style.width='150px';
h1Img.style.borderRadius='50%';

여기서 포인트는 스타일을 줄 때 카멜케이스 표기법을 사용한다는 ❗

무지개 텍스트 연습

개별적인 7개의 span 태그(각각 하나의 문자를 담고 있음)를 포함하는 'h1' 요소를 제공해 드렸습니다.

JavaScript를 작성하여 span 태그들을 무지개 색상으로 만들어 주세요.

app.js를 보면 colors라는 색상 이름 배열이 있습니다. 이 배열은 다음과 같은 모습을 하고 있습니다. [red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']

여러분이 할 일은 모든 span 태그를 선택하고 이를 순회하여 태그를 색상 배열에 있는 각각의 색상에 할당하는 것입니다. 첫 번째 span은 빨간색, 두 번째 span은 주황색이어야 하며, 이런 식으로 계속되어야 합니다. 결과는 다음과 같아야 합니다.

  <!DOCTYPE html>

<head>
    <title>Rainbow</title>
    <!--LEAVE THESE LINES ALONE, PLEASE! THEY MAKE THE LIVE PREVIEW WORK!-->
    <script src="node_modules/babel-polyfill/dist/polyfill.js" type="text/javascript"> </script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/nodelist-foreach-polyfill@1.2.0/index.min.js"></script>
</head>

<body>
    <!--DON'T TOUCH THIS FILE PLEASE!-->
    <h1>
        <span>R</span>
        <span>A</span>
        <span>I</span>
        <span>N</span>
        <span>B</span>
        <span>O</span>
        <span>W</span>
    </h1>
</body>

</html>

const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']; //PLEASE DON'T CHANGE THIS LINE!

//YOU CODE GOES HERE:

const spans = document.querySelectorAll('span');

for(let i = 0; i < spans.length; i++) {
    spans[i].style.color = colors[i];
}

for문으로 반복을 돌게 하고 돌때 인덱스마다 컬러스의 인덱스를 차례대로 부여하는 방식으로 풀었다.

ClassList 실습

index.html을 보면 6개의 'li' 요소가 있으며, 이 중 2개에는 'highlight'클래스가 적용되어 있습니다.

JavaScript와 classList 속성을 사용하여 highlight클래스를 가진 요소를 반전하세요.

기본적으로 모든 'li' 요소를 순회하면서 각 요소의 'highlight' 클래스를 토글하세요. 최종 결과는 다음과 같아야 합니다.

<!DOCTYPE html>

<head>
    <title>ClasList</title>
    <!--LEAVE THESE LINES ALONE, PLEASE! THEY MAKE THE LIVE PREVIEW WORK!-->
    <script src="node_modules/babel-polyfill/dist/polyfill.js" type="text/javascript"> </script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/nodelist-foreach-polyfill@1.2.0/index.min.js"></script>

</head>

<body>
    <!--LEAVE THIS FILE ALONE!-->
    <ul>
        <li>Hello</li>
        <li class="highlight">Hello</li>
        <li>Hello</li>
        <li>Hello</li>
        <li class="highlight">Hello</li>
        <li>Hello</li>
    </ul>
</body>

</html>

const list = document.querySelectorAll('li');

for (let li of list) {
    li.classList.toggle("highlight");
}

👀이건 살짝 어려운 개념이었는데 classList.toggle()을 사용하면
toggle은 클래스의 유무를 체크해서 없으면 add, 있으면 remove를 자동으로 시켜준다.
(toggle외에도 나도 classList를 사용해서 개인과제에서 add로 영화들을 추가해줬다.)

classList의 개념이 이 블로그에 잘 정리되어있다.
https://hyunjungchoi.tistory.com/70

버튼 100개 만들기 실습

index.html을 건드리지 않고 JavaScript를 사용하여 정확히 100개의 새 버튼 요소를 생성하세요! index.html에 제공해 드린 컨테이너 요소 안에 각각의 새 버튼을 추가하세요. 안타깝게도 유데미의 연습 도구에서는 append 메서드를 지원하지 않으므로 appendChild를 사용해야 할 것입니다. 다음 단계를 따르세요.

정확히 100개의 새 버튼 요소를 생성합니다.

각 버튼의 내부에는 텍스트가 있어야 합니다(내용은 상관 없음).

각 버튼은 container div 안에 추가되어야 합니다.

<!DOCTYPE html>

<head>
    <title>100 Buttons!</title>
</head>

<body>
    <!--DO NOT TOUCH THIS FILE PLEASE!-->
    <h1>Look At All My Buttons!</h1>
    <div id="container">
    
    </div>
</body>

</html>

const container = document.querySelector('#container');

for(let i = 0; i < 100; i++) {
    const btn = document.createElement('button');
    btn.innerText='Click';
    container.appendChild(btn);
}

🤔 내가 헷갈려 했던 부분

appendChild() / append() 차이가 헷갈렸다

그래서 열심히 찾아보고 공부 한 결과 append는 노드의 자식이 아니더라도 추가 할 수 있다 (텍스트도 추가가가 가능하다)라는 차이를 알게 되었다 ❗❗❗❗

조아라

끄적 끄적 배운 걸 적습니다 / FRONT-END STUDY VELOG

이전 포스트

프론트엔드 개발일지 #20 - git/github 협업은 그래서 어떻게 하는데?

다음 포스트