반응형 디자인

반응형 디자인(responsive web)

어떤 형태의 화면에서도 적절한 디자인으로 웹페이지가 나타날 수 있도록 구상된 것.
화면의 크기에 따라서 웹페이지의 각 요소들이 반응하며 동작하게 되는 디자인.

CSS에서는 미디어 쿼리(media query)를 이용해 반응형 웹을 만든다.

 

 

미디어 쿼리 기본 문법은 다음과 같다.

@media 미디어-유형 and (미디어 속성:속성값) { 미디어에 적용할 CSS }

미디어 유형도 뭐가 많더라. all, screen, speech, print 등등...

 

 

 

 

 

 

 

 

 

오늘 예제로 배운 코드이다.

미디어 유형은 스크린이다.

스크린 크기의 최솟값이 700px일 때, 즉 스크린크기가 700px보다 클 때

디스플레이가 아예 사라지게 만든 것이다.

 

 

 

쟈잔 안 보여용

 

쟈쟌 보여용

 

 

 

 

 

 

 

 

 

미디어 쿼리를 이용하여 수정한 코드는 다음과 같다.

코드 밑의 사진들은 화면 크기에 따라 바뀐 웹페이지 캡쳐한 것들이다.

 

See the Pen Untitled by j1n00000 (@j1n00000) on CodePen.

 

 

 

싱기해요~

 

싱기방기

 

 

 

 

 

 

 

 

여기까지의 CSS를 이용한 디자인을

스타일태그로 일일이 모든 파일에 복붙하면 용량도 커져, 중복도 많아, 몹시 보기 싫고 비효율적이다.

 

 

따라서 해당 폴더안에 모든 html파일에 적용할 css문법을

따로 css파일을 만들어 저장하고,

html파일에는 링크태그를 통해 css파일을 넣어주면 된다.

 

 

(그러나 CSS 선택자에 의한 태그 수정은 일일이..할 수밖에 없어보인다)