답변 4개
5년 전
플렉스는 정렬에 특화되있고요. 미디어쿼리가 더 좋아요
아래 태그 써놓고 연습(?) 해보세요. 창크기(폭) 줄였다 키웠다 해보세요.
이미지는 위키이미지입니다. 안보이면 다른걸로 바꾸세요.
부가이미지에 퍼센트가 9자로 끝나는 것은 공백때문에 밀림 방지용입니다.
다른방법도 있으니 연구해보세요. css box_sizing 이란 속성 검색해보세요.
</p>
<p><style>
#__미디어_쿼리_정의__ { content:"이 줄은 주석대신 설명으로 사용함" }
#__모니터_사이즈_일람__ { content:"주석: 모니터 사이즈 : 1024 800 768 720 640 600 480 360 320 "; }</p>
<p> .대표이미지 { border:2px dashed red; }
.부가이미지 { border:2px dashed blue; }</p>
<p>
@media all and (max-width: 479px) {
.대표이미지 {
width:100%;
Float:None;
}
.부가이미지 {
width:100%;
Float:None
}
}
@media all and (min-width: 480px) and (max-width: 719px) {
.대표이미지 {
width:100%;
Float:None;
}
.부가이미지 {
width:49%;
Float:Left
}
}
@media all and (min-width:720px) {
.대표이미지 {
width:70%;
Float:Left;
}
.부가이미지 {
width:29%;
Float:Left
}
}
</style>
<img src="<a href="https://upload.wikimedia.org/wikipedia/commons/3/3e/Isola_di_capri.jpg"" target="_blank" rel="noopener noreferrer">https://upload.wikimedia.org/wikipedia/commons/3/3e/Isola_di_capri.jpg"</a> class="대표이미지" title="대표이미지" >
<img src="<a href="https://upload.wikimedia.org/wikipedia/commons/3/3e/Isola_di_capri.jpg"" target="_blank" rel="noopener noreferrer">https://upload.wikimedia.org/wikipedia/commons/3/3e/Isola_di_capri.jpg"</a> class="부가이미지" title="부가이미지" >
<img src="<a href="https://upload.wikimedia.org/wikipedia/commons/3/3e/Isola_di_capri.jpg"" target="_blank" rel="noopener noreferrer">https://upload.wikimedia.org/wikipedia/commons/3/3e/Isola_di_capri.jpg"</a> class="부가이미지" title="부가이미지" ></p>
<p>
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
5년 전
https://www.youtube.com/watch?v=eprXmC_j9A4&t=20s">https://www.youtube.com/watch?v=eprXmC_j9A4&t=20s
이 동영상 보면서 따라해보시면 좋을 것 같습니다. 저도 예전에 이영상 참고 많이했어요
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인