인터넷 창 줄였을때 반응형 하는 방법에 대해서. 채택완료

안녕하세요 css 독학한지 2주 차 인데요

열심히 이래 저래 만들어서 혼자서 홈페이지 내

상세페이지를 만들어 봤는데..

pc 버젼에서 아래 보이는 화면 처럼 보이는데

만약 화면 창을 줄였을때

제가 원하는 위치에 div 정렬이 되게 css 수정을 하려 하는데

도통 모르겠습니다.

고수님들의 가르침 부탁드리겠습니다.

http://twozero.co.kr/shop/img/salesengineer/business_1.jpg">img/salesengineer/business_1.jpg" width="333px" height="297px">

설계, 엔지니어링 및 건설

건축사, 건설회사, 엔지니어링 고나련 회사, 플랜트 관련 회사 등 고품질의 대형크기(A3~A0)의 선과 이미지를 포함한 도면과 사실적, 고품질의 이미지(조감도, 프레젠테이션)를 낮은 운영 비용으로 빠르고 편리하게 인쇄할 수 있습니다.

주요 적용 분야

설계스튜디오

공공사업 부서

지형 스튜디오

자산관리/부동산 대행업체

MEP(기계, 전기, 배관, 엔지니어링 팀)

건설-일반계약부서 및 무역 하청업체 및 공급업체

 @import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css">http://fonts.googleapis.com/earlyaccess/nanumgothic.css); @import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css">http://fonts.googleapis.com/earlyaccess/notosanskr.css); @font-face {   font-family: 'Material Icons';   font-style: normal;   font-weight: 400;   src: url(https://example.com/MaterialIcons-Regular.eot">https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */   src: local('Material Icons'),        local('MaterialIcons-Regular'),        url(https://example.com/MaterialIcons-Regular.woff2">https://example.com/MaterialIcons-Regular.woff2) format('woff2'),        url(https://example.com/MaterialIcons-Regular.woff">https://example.com/MaterialIcons-Regular.woff) format('woff'),        url(https://example.com/MaterialIcons-Regular.ttf">https://example.com/MaterialIcons-Regular.ttf) format('truetype'); }

#salesengineer {   width:800px;   /* margin:0 auto; 중앙 정렬을 하려면 사용 해야 하는 코드*/ }

.salesengineer_img {   width:333px;   height:297px;   margin: 11px 30px 0px 11px;               /*  윗쪽 여백을 3픽셀주고 왼쪽 여백 284px */     box-shadow:2px 2px 5px black;   float:left;  /* 왼쪽 정렬을 하려면 사용 해야하는 태그 */

  /* clear:both; 묶음을 풀어 버린다 */ }

.salesengineer_text {   width:410px;   height: auto;   font-size:24px;   font-weight:700;   color:#3186c9;   font-family: "Noto Sans KR", sans-serif;   text-align: left;   padding:10px 0px 10px 0px;            /* div 박스 내 여백 지정 위 오른쪽 아래 왼쪽 */   float:left;  /* 왼쪽 정렬을 하려면 사용 해야하는 태그 */ }

.salesengineer_line_top {   width:410px;   height:1px;   background: #000000;   margin: 0px 0px 10px 0px;               /*  윗쪽 여백을 3픽셀주고 왼쪽 여백 284px */   float:left;  /* 왼쪽 정렬을 하려면 사용 해야하는 태그 */ }

.salesengineer_text2 {   width:410px;   height: auto;   font-size:16px;   font-weight:700;   color:#444444;   font-family: "Noto Sans KR", sans-serif; text-align: left;   float:left;  /* 왼쪽 정렬을 하려면 사용 해야하는 태그 */ }

.salesengineer_line_foot {   width:410px;   height:1px;   background: #000000;   margin: 10px 0px 0px 0px;               /*  윗쪽 여백을 3픽셀주고 왼쪽 여백 284px */   float:left;  /* 왼쪽 정렬을 하려면 사용 해야하는 태그 */ }

.salesengineer_text3 {   width:410px;   height: auto;   font-size:18px;   font-weight:700;   color:#ff7e00;    font-family: "Noto Sans KR", sans-serif;   text-align: left;   padding:20px 0px 10px 0px;            /* div 박스 내 여백 지정 위 오른쪽 아래 왼쪽 */   float:left;  /* 왼쪽 정렬을 하려면 사용 해야하는 태그 */ }

.salesengineer_text4 {   width:410px;   height: auto;   padding:0px 0px 0px 16px;            /* div 박스 내 여백 지정 위 오른쪽 아래 왼쪽 */   font-size:16px;   /* 폰트 크기 */   font-weight:800; /* 폰트 두께 */   line-height:28px; /* 행간 높이 */   list-style-type:disc; /* 폰트 옆 특수 문자 disc 속이 꽉찬 검은색, circle 속이 비이었는 원, square 속이 꽉찬 검은색 사각 */   color:#444444;   font-family: "Noto Sans KR", sans-serif;   text-align: left;   float:left;  /* 왼쪽 정렬을 하려면 사용 해야하는 태그 */ }