소프트웨어/Do it! 반응형 웹디자인

4. 미디어 쿼리를 써보자.

4. 미디어 쿼리를 써보자. 3. 뷰포트란 무엇인가?! ( 바로가기 )에 이어서 미디어 쿼리를 사용해서 웹사이트의 디바이스가 달라질때, 웹사이트가 어떻게 변하는지 확인해봅시다. 위 코드에 보면 viewport와 함께 적용이 되어 있습니다. 실제로 코드를 작성한 후에 실습을 해봤는데 매우 흥미롭군요ㅎㅎ웹의 크기를 변경하면 배경색이 바뀌네요~! 자~! 미디어 쿼리를 사용해봤습니다ㅎㅎ실제로 터미널을 열어서 코딩을 하면서 확인을 해보면 더욱 잘 익혀집니다~! 4. 미디어 쿼리를 써보자. 끝.

3. 뷰포트란 무엇인가?!

3. 뷰포트란 무엇인가?! 36p~ 뷰포트란~웹사이트에 접속하는 사용자의 기기의 화면의 크기에 따라 이미지와 같은 보이는 것들의 크기를 조절해주는 기능입니다.(말이 약간 깔끔하지 못하네요..) (이 작업은 컴퓨터의 화면과 스마트폰/테블릿의 화면을 비교해야하기 때문에 웹서버가 필요합니다.) meta 부분이 없으면 화면의 크기에 따라서 사진이 작아집니다.따라서 반응형에서 반드시 필요한 것입니다~! ( 이 부분은 핸드폰에서 확인을 해보면 확실합니다.)

2. 반응형 웹의 맛보기!

2. 반응형 웹의 맛보기! 33p~ 34p 가변 그리드에 대해서 간단히 알아보자. 간단히 html에 div tag를 이용해서 네모를 출력할 때,id로 style을 지정해줄때, 가변 그리드를 사용하려면 하나만 바꾸면 됩니다. 위의 소스는 보통의 html의 style입니다.하지만 width에 px를 %로 바꾸면?! width:90%; 이렇게 바꾸면 갑지가 반응형이 되어버립니다.자~! 반응형 이제 끝?! 일까요?? 아닙니다. 현재 웹이 반응형이긴 하지만 접속하는 기기의 해상도나 화면이 어느 크긴지 모르기때문에 아무런 소용이 없습니다. 이것을 해결해 주는 것이 있는데 이것들은 바로 미디어 쿼리와 뷰포트 입니다. 일단 맛보기는 여기까지로 하겠습니다. 감사합니다. 2. 반응형 웹의 맛보기! 끝.

1. 실습 예제 준비하기.

1. 실습 예제 준비하기. 책을 처음 봤을때, 엄청 얇다. 그 이유가 첨부 소스를 독자가 보고 있다고 가정하고 기술이 되어 있기 때문이다.(git처럼 델타를 사용하는것과 비슷한 느낌이랄까?) 그래서 소스를 먼저 다운받고 책을 읽을 준비를 해야했다. 우선 이지스 퍼블리싱 홈페이지(http://easyspub.com/)에 가서 가입을 한 후 다운로드를 받는다. 다운로드를 받을 때, 다운로드를 받는게 편하겠다. 자. 압축을 풀어놓고 시작할 준비가 되었다.