티스토리 뷰

Frontend-dev/HTML-CSS-JS

반응형 웹 제작하기 2

RunningWater 2018. 1. 27. 21:48

한 페이지로 구성된 반응형 웹을 같이 만들어 보겠습니다. html과 css시간에 배웠던 것만으로도 충분히 만들 수 있으니 너무 걱정하지 마시고 도전해보세요!


같이 만들 반응형 웹 페이지 보러가기


반응형 웹 미리보기위에 링크를 클릭하면 사진과 같은 화면을 볼 수 있습니다.


PC에서 링크를 클릭해서 들어가셨다면 화면의 너비를 줄였다가 늘여보세요. 화면 크기에 따라 조금씩 바뀌는 것이 느껴지나요? 지금부터 하나씩 만들어보도록 하겠습니다. 필요한 부분마다 이전에 포스팅했던 글의 링크들을 같이 적을 예정입니다. 혹시 기억이 나지 않으면 링크를 클릭해서 글을 보고 다시 돌아와서 진행하시면 될 것 같습니다. 

기본파일 구성 및 내용 넣기 


우선 파일을 구성해보겠습니다. 우선 폴더를 하나 만들고 그 안에 index.html, css폴더와 css폴더 안에는 main.css 그리고 image 폴더와 배경으로 사용할 이미지를 넣어주세요.


파일 구성저는 에디터로 아톰을 사용하였습니다.


이미지의 경우 저는 픽사베이에서 갖고왔고, 혹시 이미지가 마음에 들지 않으면 다른 이미지를 사용해도 괜찮습니다.


같은 이미지 다운로드 받으러 가기


파일 구성이 끝났다면 index.html파일에 우선 기본적인 내용들을 넣어봅시다. 


<!DOCTYPE html>
<html>
  <head>
    <title>Responsive Single Page Template With Flexbox</title>
 </head>
 <body>
   
 </body>
</html>


<head>태그 안을 먼저 채워보겠습니다. <title>태그의 위에는 <meta>태그들이 들어가고, <title>태그 아래에는 <link>태그들이 들어갑니다. 


<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">


다른 <meta>태그들은 미리 설명을 드렸지만 가운데에 있는 <meta>태그는 처음보시죠? 익스플로러를 사용할 때 사용가능한 가장 높은 모드로 컨텐츠를 표시하라는 태그입니다. 그리고 마지막에 있는 <meta>태그가 반응형 웹과 관련이 있는 <meta>태그 였죠? 혹시 기억이 나지 않으시면 복습하고 오셔야 합니다.


반응형 웹 제작하기 1


이제는 <link>태그들을 채워봅시다. 


<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<link rel="stylesheet" href="./css/main.css">


구글 폰트에서 로보토라는 폰트를 가져왔습니다. 따로 폰트를 변경하지 않으실 분들은 상관 없지만 마음에 드는 폰트로 변경하실 분들은 구글폰트를 이용해서 변경하면 됩니다.


구글 폰트 이용하기


<head>태그를 다 채웠으니 이제는 <body>태그를 채워야 합니다. <body>태그는 크게 두 부분으로 구성되어 있습니다. <header>부분과 <section>부분입니다. 아래의 소스코드를 통해 더 자세히 알아보겠습니다.


<div id="wrap">
  <header>
    <h2><a href="#">Logo</a></h2>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contacts</a></li>
      </ul>
    </nav>
  </header>

  <section class="home">
    <div class="background">
      <h1>Responsive Flexbox Template</h1>
      <h3>Just make By Yourself</h3>
      <a href="http://justmakeyourself.tistory.com/" class="btn" target="_blank">lemon candy's blog</a>
    </div>
  </section>
</div>


<body>태그 안에는 전체를 감싸고 있는 id가 wrap인 <div>태그가 있고, 그 안에 <header>태그와 <section>태그가 들어 있습니다. 두 태그가 의미론적 태그라는 것은 앞에서 배웠죠? 그저 어디 부분을 맡고 있다는 것만 뜻합니다. 보통 wrap이라는 id나 class를 가진 <div>태그로 <body>안에 있는 태그들을 감싸는 이유는 전체의 너비를 한번에 조정하기 편하기 때문입니다. 그리고 크게 두부분으로 나눠져있지만 css를 통해서 <header>태그 부분을 <section>태그 위에 올리기만 하면 됩니다.



css 부분은 다음 포스팅에서 채워보도록 하겠습니다.



공감은 제작자에게 큰 힘이 됩니다.



저작자표시 비영리 동일조건

'Frontend-dev > HTML-CSS-JS' 카테고리의 다른 글

html과 css, javascript의 주석  (0) 2018.01.29
반응형 웹 제작하기 3  (3) 2018.01.28
간단한 반응형 웹 만들어보기  (0) 2018.01.19
반응형 웹 제작하기 1  (3) 2018.01.18
css의 position 속성을 알아봅시다.  (0) 2018.01.16
공유하기 링크
댓글