티스토리 뷰
지난 시간에는 반응형 웹에 대해서 미리 알고 있어야 할 것들을 배웠습니다. 반응형 웹이 무엇인지 설명한 후 반응형 웹을 만들기 위해서는 길이를 가변적으로 해야하며, 뷰포트 메타태그와 미디어쿼리가 필요하다고 설명드렸는데 다 기억나시나요? 예제를 같이 만들면서 이미 설명한 부분은 빠르게 넘어가니 기억이 안나시면 꼭 복습해주세요.
오늘은 무엇을 만들지 같이 살펴볼까요?
3개를 모아놓고 찍으니 약간 징그럽지만 참아주세요. 넬슨 만델라의 명언을 가지고 간단하게 반응형 웹을 만들어 보았습니다. 브라우저의 크기가 달라져도 컨텐츠는 가운데에 위치하고 데스크톱 사이즈가 되었을 땐 명언의 폰트사이즈가 2배가 되었다는 것을 주목해주시면 됩니다.
같이 만들어 볼까요?
우선 이미지와 파일들을 구성해봅시다.
픽사베이에서 무료로 이미지를 다운로드 해주세요. 1280x854 크기로 다운 받으시면 됩니다. 그리고 simple-responsive-web-example이라는 폴더를 만들고 그 안에 wise-saying.html과 wise-saying.css라는 파일을 만들어주세요. 다운 받은 이미지도 이 폴더 안에 함께 넣어주세요.
만들 준비가 끝났으면 이제 본격적으로 만들어 보도록 하겠습니다.
우선 html 문서 안에 <html>, <head>, <title>, <body> 태그들을 넣어주세요. 그리고 <link>태그를 통해서 css 파일과 연결시켜 주세요.
<!DOCTYPE html> <html> <head> <title>wise-saying</title> <link rel="stylesheet" type="text/css" href="./wise-saying.css" > </head> <body> </body> </html>
위의 소스코드를 복사해서 붙여 넣으셔도 됩니다.
그리고 html 문서를 먼저 채워보겠습니다. html코드는 간단합니다.
<div id="wrap"> <div>성공하기 전에는 항상 그것이 <br>불가능한 것처럼 보이기 마련이다</div> <div>넬슨 만델라</div> </div>
id가 wrap인 <div>태그 안에 명언과 이름을 <div>태그로 구분해서 넣었습니다.
투박하게 이렇게 텍스트만 노출된다면 아주 잘 따라오고 있는겁니다. 그리고 html 문서는 다 작성했으니 이제 css 문서를 하나씩 채워보도록 하겠습니다.
우선은 <html>태그와 <body>태그에 높이값을 주도록 하겠습니다. <html>과 <body>태그의 너비는 기본적으로 화면의 너비만큼을 가지게 되고, 높이는 안에 들어가는 컨텐츠 만큼 갖게 됩니다.
html, body{ height: 100%; }
그래서 높이를 100%로 지정해두면 브라우저 화면 전체를 사용할 수 있습니다. 그리고 다운로드 했던 이미지를 <body>태그에 배경 이미지로 넣어보겠습니다.
body{ background-image: url('./hot-air-balloon.jpg'); background-position: center; background-size: cover; margin: 0; }
background-image 속성은 배경 이미지를 지정합니다. 다운로드 받았던 이미지의 url을 넣어주세요. 그리고 background-position은 배경이미지의 위치를 지정하는 것입니다. 저는 center 값을 주어서 가운데로 위치시켰습니다. background-size 속성은 배경이미지의 사이즈를 조절합니다. 화면의 크기보다 이미지가 작으면 이미지는 반복되어져서 나타납니다. 그래서 저는 cover 값을 주어서 이미지를 들어가야하는 사이즈에 맞게 변경시켰습니다. cover를 값으로 주면 크기에 맞게 이미지를 늘리거나 또는 가장자리를 조금 잘라서 지정한 크기게 맞게 만들어줍니다. margin 값을 0으로 준 것은 <body>태그가 기본적으로 가지고 있는 margin 값을 없애기 위해서입니다.
#wrap div{ color: white; text-align: center; }
배경이미지 때문에 명언이 사라졌었죠? 위의 소스코드를 붙여넣어서 폰트를 흰색으로 바꾸고, 가운데 정렬해주세요.
사진처럼 진행되었다면 아주 잘 따라오고 있으신겁니다. 이제 저 명언을 가운데로 옮기는 일만 남았군요. 어떻게 옮길 수 있을까요? 눈치가 빠르신 분이라면 이미 알고 계시겠지만 플렉스를 이용하면 간단하게 옮길 수 있습니다.
#wrap{ height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; }
명언을 감싸고 있는 #wrap에 height 값으로 100%를 준 것만 주의하시면 됩니다. 그래야 <body>태그의 크기만큼 다 사용할 수 있기때문입니다. 플렉스에 대한 설명은 생략하겠습니다.
맨 처음의 이미지를 보시면 명언과 이름에 거리가 있고, 둘 사이에 선이 하나 있습니다. 이건 마진, 패딩, 그리고 보더를 이용해서 만들었습니다.
#wrap div:first-child{ margin-bottom: 40px; } #wrap div:nth-child(2){ border-top: 2px solid white; padding-top: 40px; }
명언 부분엔 아래쪽 마진을 40px로 주고 이름 부분엔 위쪽 경계선엔 2px의 하얀색 선을 주며 위쪽 패딩을 40px주었습니다. 이제 마지막으로 미디어쿼리를 넣어볼까요?
@media all and (min-width:980px) { #wrap div:first-child{ font-size: 2rem; } }
너비의 길이가 980px 이상일 때 명언의 폰트사이즈가 2rem이 됩니다. 화면을 줄였다가 늘였다가 해보세요! 제대로 작동한다면 다 완성한 것입니다.
자세히 작성하려다 보니 내용이 엄청 길어졌습니다. 다음 포스팅은 홈페이지 형태를 전체적으로 같이 만들어 볼 예정입니다. 다음 포스팅에서 뵙겠습니다.
공감은 제작자에게 큰 힘이 됩니다.
'Frontend-dev > HTML-CSS-JS' 카테고리의 다른 글
| 반응형 웹 제작하기 3 (3) | 2018.01.28 |
|---|---|
| 반응형 웹 제작하기 2 (2) | 2018.01.27 |
| 반응형 웹 제작하기 1 (3) | 2018.01.18 |
| css의 position 속성을 알아봅시다. (0) | 2018.01.16 |
| 플렉스를 활용한 네비게이션 바 만들기 4 (4) | 2018.01.12 |