CSS _ 정리 03 : 개발 이슈 (반응형 웹)

1. 반응형 웹

반응형 웹을 구현하기 위해서는 간단하다.

아래처럼 화면 별로 CSS를 설정해주면 된다.

@media screen and (max-width: 1680px){
	h1 {
    	font-size : 1em;
    }
}

@media screen and (max-width: 1280px){
	h1 {
    	font-size : 1.5em;
    }
}

@media screen and (max-width: 980px){
	h1 {
    	font-size : 2em;
    }
}

@media screen and (max-width: 736px){
	h1 {
    	font-size : 2.5em;
    }
}

 

2. !important

타인이 만든 CSS 파일을 가져와서 사용할 때가 있다.

여기에 덧붙여서 내가 CSS를 작성하다보면 기존 것과 충돌되는 경우가 있다.

이 때, !important를 붙여 사용한다면 기존 것은 무시되고 이 부분이 우선적용된다.

div > row {
	padding : 0 0 0 0 !important;
}

 

3. 부트스트랩 CDN과 로컬 CSS 중복 사용

사용이 가능하다. 그러나 특별한 주의가 필요하다.

CDN에 .btn이라는 클래스가 존재하는지 모르고 로컬 CSS에 해당 클래스를 새롭게 정의해서 사용했다.

(CSS를 배워보지 않아서 발생한 사소하지만 큰 실수였다...)

그러다 보니 버튼을 클릭할 때 btn 클래스를 적용한 버튼만 바탕에 회색 그림자가 생겼다.

btn이라는 클래스 이름을 다른 것으로 수정해주니 정상적으로 작동되었다.

이 문제를 해결하는 데 꽤나 오랜 시간이 걸렸다.