JavaScript를 사용한 요소 스타일링
다음과 같은 여러 단락이 있다고 가정해 보겠습니다:
<p>텍스트1</p>
<p>텍스트2</p>
<p>텍스트3</p>
반복문을 사용하여 이 단락들을 순회하고 각 단락 끝에 링크를 추가해 보겠습니다.
이 링크를 클릭하면 해당 단락의 텍스트에 특정 스타일이 적용됩니다.
예를 들어, 텍스트에 취소선이 생길 수 있습니다(이는 CSS 속성 text-decoration으로 가능합니다).
이러한 작업에는 두 가지 세부 사항이 있습니다.
첫째, 이전 강의에서 이미 논의한 바와 같이 JavaScript를 통해 직접 단락의 스타일을 변경하는 것은 권장되지 않습니다. CSS 클래스를 적용하는 것이 훨씬 편리합니다.
둘째, 이러한 작업을 구현할 때 약간의 놀라움이 있을 수 있습니다. 그 본질을 이해하기 위해, 링크를 추가한 후 단락의 HTML 코드를 살펴보겠습니다:
<p>텍스트1<a href="">링크</a></p>
<p>텍스트2<a href="">링크</a></p>
<p>텍스트3<a href="">링크</a></p>
이제 링크를 클릭하면 단락의 텍스트에 취소선이 생긴다고 가정해 보겠습니다. 그러나 이 경우 링크도 단락의 일부이므로 마찬가지로 취소선이 생깁니다! 아마도 이러한 효과는 원하지 않을 것입니다. 텍스트에는 취소선이 생기되, 링크에는 생기지 않기를 원할 것입니다.
이 문제를 해결하려면 단순히 단락의 텍스트를 span 태그로 감싸면 됩니다. 다음과 같이 말이죠:
<p><span>텍스트1</span><a href="">링크</a></p>
<p><span>텍스트2</span><a href="">링크</a></p>
<p><span>텍스트3</span><a href="">링크</a></p>
다음은 HTML 코드입니다:
<p>텍스트1</p>
<p>텍스트2</p>
<p>텍스트3</p>
각 단락 끝에 링크를 추가하세요. 이 링크를 클릭하면 단락의 텍스트에 취소선이 생겨야 합니다(링크는 제외).
이전 작업을 수정하여 링크를 클릭한 후 해당 링크가 단락에서 제거되고(단락 텍스트는 취소선이 생김) 만들어지도록 하세요.
일부 HTML 테이블이 주어졌습니다. 이 테이블에 링크가 있는 열을 하나 더 추가하세요. 이 링크를 클릭하면 해당 링크가 있는 행의 배경색이 녹색으로 변해야 합니다.
이전 작업을 수정하여 링크를 처음 클릭하면 행의 배경색이 녹색으로 변하고, 두 번째 클릭하면 이 작업이 취소되도록 하세요.
