반응형 웹 페이지 html 텍스트 내용 변경

조회수 1225회

web페이지를 작성하고 있는데
부트스트랩을 사용하여 해상도에 반응하도록 레이아웃을 작성했습니다
얼추 다 잘 설정 되었으나
상단의 네비게이션 바에서 오류가 발생했습니다.
네비게이샨바의 왼쪽에 있는 메뉴와 오른쪽에 있는 컨텐츠들이 서로 겹치게 됩니다
mediea?쿼리나 기타 등등 해상도에 따라 택스트가 변경될 수 있도록 작성하려며 어떻게 해야하나요>

예록
561px 이상 때 English 로 노출되고 560px이하일 때 ES로 표현될 수 있게 어떻게 작성해야되나요?

우선
<div>English</div><div>ES</div>를 둘 다 작성하고
561px 일 경우 <div>English</div> 560이하일 경우 <div>ES</div>
로 작성하고싶습니다

1 답변

  • 좋아요

    0

    싫어요
    채택 취소하기

    Bootstrap을 사용하신다면 원하시는 바로 그것을 위해 준비돼 있는 .d-*-none 클래스를 가져다 쓰시면 됩니다. 참고 링크

    <!-- 원래 안 보이다가, 윈도 너비가 sm 기준너비 이상이 되면 그때부터 보임 -->
    <div class="d-none d-sm-block">English</div>
    
    <!-- 원래 보이다가, 윈도 너비가 sm 기준너비 이상이 되면 그때부터 안 보임 -->
    <div class="d-block d-sm-none">ES</div>
    

    이참에 부트스트랩 공식문서를 시간 내서 전체적으로 쭉 보세요. 나중에 삽질이 확 줄어듭니다.

답변을 하려면 로그인이 필요합니다.

프로그래머스 커뮤니티는 개발자들을 위한 Q&A 서비스입니다. 로그인해야 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)