-
질문 & 답변
카테고리
-
세부 분야
웹 개발
-
해결 여부
미해결
그 반응형 질문 있습니다
22.01.13 15:37 작성 조회수 121
1
■ 질문 남기실 때 꼭! 참고해주세요.
- 먼저 유사한 질문이 있었는지 검색해주세요.
- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.
- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.
- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.
- 먼저 유사한 질문이 있었는지 검색해주세요.
- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.
- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.
- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.
수업 마지막 즈음에 브라우저 줄이시면,
섹션칸들이 그에 맞춰서 줄어들면서 p태그 안에있는 글씨들도 같이 칸에 맞춰 줄어드는것으로 보입니다
저는 브라우저를 줄이면 section width값이 유지 되다가 미디어 쿼리 반응 부분에서만 바뀌는데요, 이 문제를 어떻게 해결할 수 있나요?
그래서 일단 section 안에 width를 100%로 줬더니 강의처럼 줄어들긴 하는데요..
원래 이런가요? 아니면 제가 무엇을 잘못 설정했을까요? 강의 파일 받아서 아예 다른부분 따라 쳐보기도 했는데 해결이 안되네요
답변을 작성해보세요.
0
코딩웍스(Coding Works)
지식공유자2022.01.13
모바일에서 태블릿, 태블리에서 PC... 구간 사이에서 생기는 부분은 너비가 픽셀로 고정되어 있는 부분 때문에 그렇습니다. 이런 부분까지 해소하시려면 아래 코드처럼 미디어쿼리를 추가해주시면 어렵지 않게 해결하실 수 있습니다. 예를 들어...
<section class="about">
<div class="inner">
<div class="content">...</div>
</div>
</section>
.inner에 width: 1200px 을 주었다고 가정할게요.
그럼 지금 작업하시는 곳에 아래 미디어쿼리 구문 하나 추가해주시면 됩니다.
@media (max-width: 1200px) {
.inner {
width: 100%;
}
}
위의 미디어쿼리는 .inner가 1200픽셀을 만나는 순간 고정값을 해제하고 100%로 바뀌라는 말입니다.
답변 1