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

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

이서현님의 프로필 이미지

작성한 질문수

[코드캠프] 시작은 프리캠프

싸이월드 만들기 1탄

left_body_header의 자식border-top인데

해결된 질문

작성

·

42

0

 

.left_body_header_line{
    border-top: 1px dotted black;
    background-color: aqua;

}
image.png

  left_body_header의 자식(left_body_header_line)border-top이잖아요

그러면 제가 밑줄 친 곳에 점선이 들어가야 하는거 아닌가요??

border의 top이면 상단부분이잖아요

답변 2

0

노원두님의 프로필 이미지
노원두
지식공유자

안녕하세요! 서현님!

class="left_body_header_line"이 어떤 태그에 적용된 것인지에 따라 다를 것 같아요!

 

물론, 자세한 내용은 코드를 봐야 알겠지만, 질문으로만 추측해 보았을 때,
회색 네모박스 아래에 <div /> 하나가 존재하고 이 태그에 class="left_body_header_line"이 적용된 것이 아닌가 확인이 필요할 것 같아요!

 

만약 그렇다면, 회색 네모상자 아래의 <div />가 존재하고, 이것의 border-top 부분이 점선으로 보이는 경우를 의심해 보아야 할 것 같네요!^^

0

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

안녕하세요, 인프런 AI 인턴입니다. 이서현님께서 질문하신 CSS border-top 속성에 관한 내용을 설명드리겠습니다.

border-top 속성은 선택한 요소의 상단 부분에 테두리를 추가합니다. 이 경우, .left_body_header_line 클래스가 지정된 요소에 대해 상단에 점선(dotted) 테두리가 추가되어야 합니다. 만약 해당 라인이 의도한 곳에 나타나지 않거나 예상과 다르게 보인다면, 다음 사항을 점검해 보세요:

  1. 선택자 확인: .left_body_header_line이 실제로 의도한 HTML 요소에 적용되고 있는지 확인합니다. 개발자 도구(브라우저의 검사 기능)를 통해 요소에 CSS가 올바르게 적용되었는지 체크해 보세요.

  2. 다른 스타일 중첩: 다른 CSS 규칙에 의해 해당 요소의 스타일이 덮어씌워져 있을 수 있습니다. 스타일의 우선순위와 충돌이 없는지 확인합니다.

  3. 레이아웃 확인: 부모 요소(left_body_header)나 주변 요소들이 레이아웃에 영향을 주어 border-top이 잘 보이지 않을 수 있습니다. 예를 들어, overflow, padding, margin 설정을 다시 점검하여 레이아웃 문제를 해결해야 할 수도 있습니다.

  4. 브라우저 캐시: 변경 사항이 반영되지 않았을 수 있으므로, 브라우저 캐시를 지우거나 새로고침(F5, Ctrl + F5 등)을 시도해 보세요.

유사한 주제를 다룬 게시물을 참고하시기 바랍니다:
- 피그마에서 css 코드가 안보여요.. - CSS 코드 확인 및 수정 관련
- 03-02 회원가입 질문 - CSS 테두리 설정 관련

위 링크들은 CSS 속성 다루기에 대한 다양한 사례를 제공할 수 있습니다. 도움이 되시길 바랍니다.

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