인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

인프런 커뮤니티 질문&답변

innocent님의 프로필 이미지

작성한 질문수

프로그래밍 시작하기 : 웹 입문 (Inflearn Original)

실습: 뉴스 기사 페이지 만들기 (2-15)

마지막에 news 관련 질문

작성

·

20

0

.link-group li > a {
    color: #606060;
    font-weight: 800;
}
.link-group li > a:visited {
    color: #000000;
    font-weight: 800;
}
.link-group li > a:hover {
    color:#ff0000;
    font-weight: 800;
}
        <footer>
            <div class="link-group">
                <h4>
                    관련 뉴스
                </h4>
                <ul>
                    <li><a href="#">뉴스 기사1</a></li>
                    <li><a href="#">뉴스 기사1</a></li>
                    <li><a href="#">뉴스 기사1</a></li>
                    <li><a href="#">뉴스 기사1</a></li>
                    <li><a href="#">뉴스 기사1</a></li>

                </ul>
            </div>
            <div class="link-group">
                <h4>
                    인기 뉴스
                </h4>
                <ul>
                    <li><a href="#">뉴스 기사1</a></li>
                    <li><a href="#">뉴스 기사1</a></li>
                    <li><a href="#">뉴스 기사1</a></li>
                    <li><a href="#">뉴스 기사1</a></li>
                    <li><a href="#">뉴스 기사1</a></li>

                </ul>
            </div>
        </footer>
        </div>
    </body>
</html>
화면 캡처 2025-02-12 170355.png.webp

영상 보면서 따라 코드를 작성하였습니다. 하지만 밑에 관련 뉴스나 인기 뉴스를 보면 이미 방문한 것처럼 표현 되어있습니다 혹시 무엇이 문제인지 확인 해주실 수 있나요?

답변 1

0

인프런 AI 인턴님의 프로필 이미지

안녕하세요, 인프런 AI 인턴입니다. innocent님.

작성하신 CSS 코드와 HTML 구조를 통해 방문한 링크가 이미 방문한 것처럼 나타나는 문제점을 파악해보겠습니다.

우선, .link-group li > a:visited 셀렉터는 이미 방문한 링크의 색상을 검정색으로 지정하고 있습니다. 이것은 정상적인 동작입니다. 하지만 처음 접속 시에도 모든 링크가 방문한 것처럼 보이는 이유는 브라우저가 해당 링크의 방문 여부를 URL 기준으로 판단하기 때문입니다.

위 코드에서는 모든 링크의 href 속성 값이 "#"로 동일합니다. 이는 브라우저가 동일한 페이지의 링크로 인식하게 되어, 방문 여부에 상관없이 방문한 것으로 나타나게 됩니다. 이를 해결하기 위해 각각의 링크에 고유한 URL을 부여하는 것이 좋습니다.

예를 들어:

<li><a href="news1.html">뉴스 기사1</a></li>
<li><a href="news2.html">뉴스 기사2</a></li>
...

그리고 CSS 의 a:visited 스타일을 검토하여 색이 만족스럽지 않다면 조정해주시면 됩니다.

관련하여 더 자세한 정보를 얻으시려면 아래 질문을 참고해 보세요:

저는 질문자님의 이해를 돕고자 인프런 커뮤니티의 유사한 답변 링크를 추천해드렸습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

innocent님의 프로필 이미지

작성한 질문수

질문하기