반응형 웹 코드 질문 있습니다.
본문
예를 들어
안녕하십니까 누구누구입니다. 이런 식으로 자기 소개 같은 긴 글을 썼다고 하면 페이지 사이즈를 점점 줄였을 때 이 자기 소개 글도 점점 좁아져야 되잖아요.....
이 코드를 잘 몰라서.. 반응형 웹도 잘 모르기도 하고...
@media screen and (max-width:1100px)
{
}
<div class="page1">
<h1>회사소개</h1>
<div class="l"></div>
<div class="img_box"></div>
<div class="font-box1">
<h2>안녕하십니까?<p>국가공인 1급 속기사 입니다.</p></h2>
<p>sir을 찾아주셔서 감사합니다. 시대의 흐름에 따라 기록의 가치가 더욱 중요해지고 있습니다.</p>
<p>sir은 5년 이상 다양한 사례의 녹취록과 회의록을 작성한 경험을 토대로 의뢰하신 고객님이 만족할 수 있는 결과물로 보답하겠습니다.</p>
<p>진심을 담아 고객의 입장에서 생각할 것이며 합리적인 가격과 철저한 보안, 최상의 품질을 약속드립니다.</p>
</div>
<div class="font-box2">
<p>대표속기사 / 국가공인 1급 자격번호 제 / 사업자등록번호 : </p>
</div>
</div>
이런 식으로 되어있는데
@media screen and ( max-width:1100px)
{
.sub_top_img .text_box {width:95%;}
}
여기까지는 했는데,,,,, 다음에는 어떻게 써야될지 조언 부탁드립니다.
답변 1
https://developer.mozilla.org/ko/docs/Web/Guide/CSS/Media_queries
미디어쿼리 기본을 살펴보세요.
https://offbyone.tistory.com/121
css 코딩 후 바로 아래에
.aaa{
width:1000px;
}
@media (max-with:1100px){
/* 1100px 이하 css 적용*/
.aaa{
width:95%;
}
}
이런식으로 코딩하면 편합니다.
모바일 우선이면 min-width 사용, PC우선이면 max-width 사용
breakpoints에 따라 박스 크기를 px로 지정하세요.
