반응형 웹 제작하기 3
반응형 웹을 이어서 만들어보도록 하겠습니다. 저번 포스팅에는 index.html을 채웠습니다. 오늘은 main.css를 작업해 보겠습니다. 반응형 웹 제작하기 2 복습하기main.css 작업하기 다른 작업을 하기 전에 우선 해야할 것은 css를 리셋하는 겁니다. 왜 css를 리셋해야 할까요? 같은 태그를 사용하더라도 그에 따른 기본값은 브라우저마다 다릅니다. 그래서 똑같이 보여주기 위해 css 리셋을 해주는 것이죠. 보통 구글에서 css reset 등의 단어를 치면 소스코드가 나오는데 그걸 복사해서 사용하시면 됩니다. css reset 링크 바로가기 저는 위의 사이트에서 소스코드를 갖고왔습니다. 리셋을 한 후 해야할 건 css도 기본적으로 구조를 잡는 것입니다. 모바일 환경 부터 시작해서 태블릿과 데스크..
반응형 웹 제작하기 2
한 페이지로 구성된 반응형 웹을 같이 만들어 보겠습니다. html과 css시간에 배웠던 것만으로도 충분히 만들 수 있으니 너무 걱정하지 마시고 도전해보세요! 같이 만들 반응형 웹 페이지 보러가기 PC에서 링크를 클릭해서 들어가셨다면 화면의 너비를 줄였다가 늘여보세요. 화면 크기에 따라 조금씩 바뀌는 것이 느껴지나요? 지금부터 하나씩 만들어보도록 하겠습니다. 필요한 부분마다 이전에 포스팅했던 글의 링크들을 같이 적을 예정입니다. 혹시 기억이 나지 않으면 링크를 클릭해서 글을 보고 다시 돌아와서 진행하시면 될 것 같습니다. 기본파일 구성 및 내용 넣기 우선 파일을 구성해보겠습니다. 우선 폴더를 하나 만들고 그 안에 index.html, css폴더와 css폴더 안에는 main.css 그리고 image 폴더와 ..
간단한 반응형 웹 만들어보기
지난 시간에는 반응형 웹에 대해서 미리 알고 있어야 할 것들을 배웠습니다. 반응형 웹이 무엇인지 설명한 후 반응형 웹을 만들기 위해서는 길이를 가변적으로 해야하며, 뷰포트 메타태그와 미디어쿼리가 필요하다고 설명드렸는데 다 기억나시나요? 예제를 같이 만들면서 이미 설명한 부분은 빠르게 넘어가니 기억이 안나시면 꼭 복습해주세요. 반응형 웹 제작하기 1 오늘은 무엇을 만들지 같이 살펴볼까요? 3개를 모아놓고 찍으니 약간 징그럽지만 참아주세요. 넬슨 만델라의 명언을 가지고 간단하게 반응형 웹을 만들어 보았습니다. 브라우저의 크기가 달라져도 컨텐츠는 가운데에 위치하고 데스크톱 사이즈가 되었을 땐 명언의 폰트사이즈가 2배가 되었다는 것을 주목해주시면 됩니다. 같이 만들어 볼까요? 우선 이미지와 파일들을 구성해봅시다..