[CSS] 부트스트랩을 사용하지 않고 반응형 웹 페이지 제작하는 방법

---

뭐... 개발자끼리 더 말이 필요한가?

 

우리는 코드로 대화한다. 

 

 

---

@media

 

반응형 웹을 만드는데 기본은 

 

@media를 사용하는것이다.

 

어떻게 사용할까? 바로

 

@media (max-width: 원하는 픽셀 사이즈) { }

 

 

Example

		@media (max-width: 1550px){ // 1550px 보다 작으면 시작
			body{  // 바디의 속성
				overflow-x: hidden; // x축 (아래 스크롤바를) 없애겠음
			}
			.main_div .productcontent {
				border-left-width: 10px; // 왼쪽 테두리의 속성은 10px로 바꾸겠음
		 	}
		 	.main_property .propertycontent {
				padding-left: 10px; // 왼쪽으로 padding 10px 주겠음
	 		}
		}

 

 

다음과 같이 사용하는것이다.

 

단, 알아둬야 할 점은 기존에 이미 우리가 선언해 둔 속성을 reset은 안된다. 그래서 갱신시켜야한다.

 

예로  디폴트로 padding-left : 30 px 인데  padding-left : 10px; 로 갱신하는 것처럼 요소의 속성을 변경 시키는건 

 

가능하다.

 

 

@media (max-width: 820px){ // 820 px 일때
	 		
    .bodycontent{ // class="bodycontent" 가 들어가있는 애들에게
        margin-left: 35px; // 오른쪽에서 35px 띄워주고
        width: 820px; // default : 1920 px이지만 -> 820px로 변경
    }

    .main_div .contentpixel{ // class="contentpixel" 인 애들한테
        margin-top: 20px; // 위에서 20 px 띄워준다.
    }

    .main_property {
        float: left; //  모든 요소들을 왼쪽으로 붙쳐준다.

    }
}

 

다음은 820 px 일때 

 

나타나는 효과이다.

 

 

 

현재 이사진은 1550 이상인 사진이다.

 

 

 

1550 px 안으로 들어오자 우리가 만든어둔 속성에 맞게 변경하기 시작하는것을 볼 수 있다.

 

 

@media (max-width: 820px) { } 효과 때문에

 

다음과 같이 반응형이 잘 적용되는 것이다.

 

 

끝

 

---

 

 

To be continue..