inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

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

마지막에 news 관련 질문

83

innocent

작성한 질문수 3

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

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

HTML/CSS javascript

답변 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 스타일을 검토하여 색이 만족스럽지 않다면 조정해주시면 됩니다.

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

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

unregistered 이라 뜨며 작동하지 않습니다.

0

51

1

공부한 내용을 블로그에 정리해서 올려도되나요?

0

95

1

sublime text 설치 불가

0

177

1

사진과 본문 내용에 패딩이 40px 들어가 있는데 이유를 모르겠습니다

0

99

1

처음 질문과 옵션 관련 질문입니다.

0

90

1

태그 닫는 단축키가 뭔가요?

0

170

1

강의에 사용하는 예제 코드 자료 있나요?

0

385

1

회원가입 폼 검증하기 실행이 안됩니다.

0

274

1

이미지랑 아이콘 파일을 어떻게 찾아요?

0

352

1

VS 코드는 절대 경로랑 상대 경로로 상위 문서 접근이 차단되어 있네요

0

476

0

프로젝트 고민 해결이 안되어 다시 올립니다.

0

394

1

프로젝트 고민 다시올립니다.

0

448

1

친구와의 프로젝트 고민

0

421

1

화면 오른쪽 스크롤이 넘어가질 않아요!

0

516

1

학과 설정

0

331

2

회원가입폼 검증 -2 에서 문제가생겼습니다

0

331

1

card.html 버튼 위치

0

603

1

인스타그램 코드 작성 후 동작을 해보았는데 버튼을 눌러도 넘어가질않네요

0

357

2

carousel의 footer부분에

0

295

1

margin 값에 관한 질문입니다.

0

407

1

function clearMessages() 함수의 원리를 알고싶습니다

0

320

1

removeEventListener

0

237

1

버튼을 눌렀을때 케러셀의 이동

0

810

2

html 파일 올립니다!

0

376

1