Just Make IT

한 페이지로 구성된 반응형 웹을 같이 만들어 보겠습니다. html과 css시간에 배웠던 것만으로도 충분히 만들 수 있으니 너무 걱정하지 마시고 도전해보세요! 같이 만들 반응형 웹 페이지 보러가기 PC에서 링크를 클릭해서 들어가셨다면 화면의 너비를 줄였다가 늘여보세요. 화면 크기에 따라 조금씩 바뀌는 것이 느껴지나요? 지금부터 하나씩 만들어보도록 하겠습니다. 필요한 부분마다 이전에 포스팅했던 글의 링크들을 같이 적을 예정입니다. 혹시 기억이 나지 않으면 링크를 클릭해서 글을 보고 다시 돌아와서 진행하시면 될 것 같습니다. 기본파일 구성 및 내용 넣기 우선 파일을 구성해보겠습니다. 우선 폴더를 하나 만들고 그 안에 index.html, css폴더와 css폴더 안에는 main.css 그리고 image 폴더와 ..

지난 시간에는 반응형 웹에 대해서 미리 알고 있어야 할 것들을 배웠습니다. 반응형 웹이 무엇인지 설명한 후 반응형 웹을 만들기 위해서는 길이를 가변적으로 해야하며, 뷰포트 메타태그와 미디어쿼리가 필요하다고 설명드렸는데 다 기억나시나요? 예제를 같이 만들면서 이미 설명한 부분은 빠르게 넘어가니 기억이 안나시면 꼭 복습해주세요. 반응형 웹 제작하기 1 오늘은 무엇을 만들지 같이 살펴볼까요? 3개를 모아놓고 찍으니 약간 징그럽지만 참아주세요. 넬슨 만델라의 명언을 가지고 간단하게 반응형 웹을 만들어 보았습니다. 브라우저의 크기가 달라져도 컨텐츠는 가운데에 위치하고 데스크톱 사이즈가 되었을 땐 명언의 폰트사이즈가 2배가 되었다는 것을 주목해주시면 됩니다. 같이 만들어 볼까요? 우선 이미지와 파일들을 구성해봅시다..

반응형 웹이란 무엇일까요? 화면에 맞게 웹페이지를 보여주는 것을 "반응형 웹"이라고 합니다. 미래의 일을 예상하기엔 힘들지만 확실한건 아주 다양한 화면을 가진 기기들이 나올 것이고, 지금보다도 더 많은 사물에서 인터넷으로 접속하는 것이 가능해질 겁니다. 그때마다 그 기계에 맞는 페이지를 따로 구성해야할까요? 그러기엔 돈도 시간도 너무 많이 들어가겠죠. 하나의 코드로 여러 기기마다 최적화되서 보여줄 수 있다는 건 정말 매력적인 일입니다. 모바일이 조금 더 많습니다. 휴대폰 없이 사는 건 정말 상상하기도 싫은 세상. 반응형 웹의 중요성은 말 안해도 아시겠죠? 이제부터 같이 만들어 봅시다.가장 먼저 배워야 할 것들은 무엇일까요? 예제를 보면서 따라 만들어보기 전에 우선 알아두어야 할 개념이 3개 있습니다. 이..