반응형 웹은 컨테이너의 가로폭에 따라 레이아웃이 가변적이고 그에 따라 각 요소의 가로폭도 왔다리 갔다리 하는것이 반응형입니다.
텍스트는 폭에 따라 줄바뀜이 되어서 폭이 변화 하더라도 별다른 문제가 없습니다.
하지만 이미지의 경우는 화면에 따라 부분만 보이거나 짤리는 경우가 발생합니다.
이미지 크기를 정하지 않았을 경우
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Test Img Css</title>
<style>
div {
width: 300px;
border: 3px solid red;
}
</style>
</head>
<body>
<div>
<img src="img/img1024-768.jpg" alt="">
</div>
</body>
</html>
이렇게 div 부모 컨테이너의 빨간선을 이미지가 벗어난것을 볼 수 있습니다.
이부분을 반응형으로 만들어 주기 위해서는
css 로 img 태그의 폭을 반응형으로 만들어 주는것입니다.
img {
max-width: 100%;
height:auto !important;
}height !important 는 이미지의 원본 비율에 맞게 반응형으로 만들어 주는 부분입니다.
결과.
전체 코드
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
div {
width: 300px;
border: 3px solid red;
}
img {
max-width: 100%;
height: auto !important;
}
</style>
</head>
<body>
<div>
<img src="img/img1024-768.jpg" alt="">
</div>
</body>
</html>
'IT > 프로그램 | 앱' 카테고리의 다른 글
| 프로그래밍으로 친구 컴퓨터에 장난치기 (340) | 2019.09.01 |
|---|---|
| CHAR 타입의 날짜를 DATETIME으로 변경 (342) | 2019.08.28 |
| JAVASCRIPT 로 아이피(IP) 확인하기 (342) | 2019.08.26 |
| HTML , JAVASCRIPT 일정 시간 후 페이지 이동 (326) | 2019.08.26 |
| 크롬 플래시 항상 허용하는 방법 (331) | 2019.08.09 |
댓글