반응형 웹 페이지 html 텍스트 내용 변경
조회수 1225회
web페이지를 작성하고 있는데
부트스트랩을 사용하여 해상도에 반응하도록 레이아웃을 작성했습니다
얼추 다 잘 설정 되었으나
상단의 네비게이션 바에서 오류가 발생했습니다.
네비게이샨바의 왼쪽에 있는 메뉴와 오른쪽에 있는 컨텐츠들이 서로 겹치게 됩니다
mediea?쿼리나 기타 등등 해상도에 따라 택스트가 변경될 수 있도록 작성하려며 어떻게 해야하나요>
예록
561px 이상 때 English 로 노출되고 560px이하일 때 ES로 표현될 수 있게 어떻게 작성해야되나요?
우선
<div>English</div>
와 <div>ES</div>
를 둘 다 작성하고
561px
일 경우 <div>English</div>
560이하일 경우 <div>ES</div>
로 작성하고싶습니다
1 답변
-
Bootstrap을 사용하신다면 원하시는 바로 그것을 위해 준비돼 있는
.d-*-none
클래스를 가져다 쓰시면 됩니다. 참고 링크<!-- 원래 안 보이다가, 윈도 너비가 sm 기준너비 이상이 되면 그때부터 보임 --> <div class="d-none d-sm-block">English</div> <!-- 원래 보이다가, 윈도 너비가 sm 기준너비 이상이 되면 그때부터 안 보임 --> <div class="d-block d-sm-none">ES</div>
이참에 부트스트랩 공식문서를 시간 내서 전체적으로 쭉 보세요. 나중에 삽질이 확 줄어듭니다.
댓글 입력