Django:제로부터 시작하는 인스타그램 만들기 - clone instagram #1

---

 

2021.09.15 - [Study/python] - Django:제로부터 시작하는 인스타그램 만들기 - clone instagram 목차

 

유튜브 - 

 

 

** 해당 글은 유튜브 강의를 글로 풀어서 쓴 포스팅입니다.

Django 새 프로젝트 만들기

 

시작은 역시 새 프로젝트 만들기죠~!

저는 Pycharm이라는 IDE를 사용해서 개발을 진행할 예정입니다. 커뮤니티 버전은 무료니까 여러분들도 사용할 수 있습니다. 프로버전이 좋긴 한데 유료입니다. 대학생이시면 학교 Email을 사용해 프로버전을 무료로 사용할 수 있습니다~!

한 달은 공짜니까 이번에만 사용하는 것도 방법이에요~

 

장고프로젝트 생성

 

파이참 프로버전의 좋은 점은 장고 프로젝트를 바로 생성할 수 있다는 점입니다. 커뮤니티 버전은 시작 프로젝트를 장고로 설정할 수 없습니다. ㅠ 일단 프로젝트 만들고 장고를 설치해서 프로젝트를 만들거나, 커맨드 라인에서 장고 프로젝트를 만들고 나서 파이참으로 열기 하는 방법밖에 없어요.

 

커뮤니티 버전에서 장고 프로젝트를 생성하는 방법은 따로 포스팅 해놓았습니다.

-> Pycharm community 버전에서 django 프로젝트 생성 (tistory.com)

Pycharm community 버전에서 django 프로젝트 생성

 

jinstagram 프로젝트 생성 완료!

 

다행히 프로버전이든 커뮤니티 버전이든 가상환경은 만들어줍니다.

프로젝트 폴더를 보면 venv라는 폴더가 있는데 요게 파이썬 가상환경입니다. 가상환경이라는 말이 뭔가 어려운데, 쉽게 설명하면 프로젝트용 파이썬 개발환경이라고 생각하면 됩니다. 이제 이 프로젝트 안에서 파이썬 패키지를 설치하면 이 프로젝트의 가상환경에만 적용되기 때문에 나중에 다른 프로젝트를 할 때 불필요한 패키지가 설치되어있는 경우를 방지할 수 있습니다. 마치 우리가 문서를 폴더로 나누어서 관리하듯이 파이썬은 패키지를 프로젝트별로 나눠서 관리할 수 있게 '가상환경'이라는 기능을 제공해 주는 것이죠.

 

파이참 아래 terminal이라는 메뉴를 열어보시면 우리가 자주 보았던 커맨드 라인 창이 뜹니다. 라일 제일 앞을 보시면 (venv)라서 쓰여있는데, 이게 가상환경이 켜져 있다는 뜻입니다.

 

우리가 만든 venv라는 가상환경 on 상태

 

 

 

 

웹페이지 띄워보기

 

장고는 설치하자마자 바로 웹페이지를 실행할 수 있습니다. 

장고는 python manage.py runserver라는 메뉴를 통해 개발 모드로 웹서버를 지원해줍니다. 아까 실행한 커맨드 라인 창에서 python manage.py runserver라고 입력해봅시다.

 

runserver 실행모습

 

그럼 뭐라 뭐라 말이 뜨면서 'Starting development server at http://127.0.0.1:8000/'이라는 메시지가 떴습니다. 저 http 주소는 클릭이 가능한데, 클릭해보면 장고 기본 웹 페이지를 볼 수 있습니다.

 

장고 기본 웹페이지

 

자 이제 장고 웹페이지가 켜졌습니다.

 

그런데 이게 뭔데 실행이 되는 걸까요? ㅋㅋㅋ

 

먼저 설명했듯이, python manage.py runserver를 하게 되면 장고 서버가 내 컴퓨터에서 실행되게 됩니다. 즉 여러분의 컴퓨터에서 장고 서버가 돌아가게 됩니다. 그럼 내 컴퓨터에서 실행되고 있는 서버에는 어떻게 접속할까요?

 

보통 서버에 접속하기 위해서는 ip주소를 알아야 합니다. 하지만 ip주소는 숫자로 되어있고, 외우기 쉽지 않습니다. 따라서 우리는 '도메인 이름'이라는 것을 사용하는데요. 우리가 아는 google.com, naver.com과 같은 주소 이름이 바로 도메인 이름입니다. 브라우저에 google.com을 입력하게 되면 '도메인 이름 서버(DNS)'라는 곳에서 google.com의 ip주소를 찾아서 화면에 구글 페이지를 보여주는 것이죠. 

 

다시 우리 컴퓨터로 넘어와서, 우리는 장고 서버를 우리 컴퓨터에서 실행했지만, 도메인을 만들거나 DNS에 등록하지는 않았습니다. 따라서 그냥 ip주소를 치고 들어가는 방법밖에 없습니다. 그런데 우리는 127.0.0.1:8000이라는 곳으로 들어갔는데 장고 페이지가 보였습니다. 그럼 내 컴퓨터의 ip주소는 127.0.0.1:8000일까요? 

 

ip주소에는 몇 가지 규칙이 있습니다. 127.0.0.1은 localhost라고 불리며 자기 자신을 가리키는 ip주소입니다. 즉 여러분의 컴퓨터 브라우저에서 127.0.0.1을 입력하면 여러분의 컴퓨터로 접속하겠다는 소리입니다. 이게 여러분 모두가 127.0.0.1이라는 같은 ip주소를 입력했는데도, 각자의 컴퓨터에 장고 페이지를 볼 수 있는 이유입니다.

 

그럼 뒤에 :8000은 무엇일까요? 이것은 port라고 하는데, 같은 서버 안에서 통로를 분리하는 역할을 합니다. 예를 들어 내 컴퓨터에 서로 다른 장고 서버 2개를 실행하고 싶으면 하나는 127.0.0.1:8000, 다른 하나는 127.0.0.1:8001로 실행시키면 접속하는 사람이 두 개중에 원하는 장고 서버로 접속할 수 있습니다. 장고는 기본적으로 8000번 포트를 사용하며, 여러분이 마음대로 변경할 수 있습니다.

 

한번 포트 번호를 변경해볼까요?

 

python manage.py runserver 뒤에 특정 ip:port를 적으면 됩니다.

 

이미 실행되어있는 서버를 중지하기 위해서는 ctrl + c를 누르면 됩니다. 중지하고 다음과 같이 입력해봅시다.

python manage.py runserver 127.0.0.1:8005

 

8005로 접속!

 

자 이제 포트도 바꿔보았는데, 아직도 뭔가 내가 만든 웹페이지라는 느낌이 들지 않네요. 뭔가 나만의 페이지로 바꿔보도록 하겠습니다. 

 

일단 장고 프로젝트 구조를 한번 보겠습니다. 

 

현재 프로젝트 구조

 

프로젝트 폴더를 보면 jinstagram이라는 폴더 아래 jinstagram이라는 폴더가 하나 더 있습니다. 그리고 templates라는 폴더가 있고(커뮤니티는 없을 수도), venv라는 폴더가 있습니다. 그리고 db.sqlite3이라는 파일과 manage.py라는 파일이 있습니다.

 

일단 프로젝트 이름과 같은 이름을 가진 jinstagram이라는 폴더는 프로젝트의 설정 폴더 역할을 합니다. 안에 소스를 보면 settings.py가 있습니다. 요 설정 폴더의 이름은 사람마다 이름 짓는 게 다른데, config폴더라고 지어놓는 사람도 있고, 그냥 프로젝트 이름으로 해놓는 곳도 있습니다. 파이참에서 장고 프로젝트를 자동으로 만들면 프로젝트 이름을 따라갑니다. 이 설정 폴더에 urls.py라는 파이썬 코드 파일이 있습니다. 이 urls.py라는 파일이 우리가 만드는 서버에 주소를 결정해주는 중요한 파일입니다. 소스파일을 열어보면 현재는 admin이라는 urlpattens가 등록된 것을 확인할 수 있습니다.

 

urlpatterns에 기본값이 하나 있음

이게 무엇을 의미하는 걸까요?

urlpatterns는 우리의 서버 주소 뒤에 특정 주소를 더해서 어떤 프로그램을 실행시킬지 경정해주는 역할입니다. path('admin/', admin.site.urls)라고 쓰여있는 걸 보면 http://127.0.0.1:8005/admin/으로 접속하면 admin.site.urls를 실행한다는 의미입니다. 한번 접속해볼까요?

 

오잉?

만들지도 안았는데 admin 페이지 같은 게 생겼습니다. 장고 프레임워크는 기본적으로 admin도 제공하기 때문입니다. 그런데 딱히 쓰지는 않을 거라.. 그냥 이런 게 있구나 하고 넘어가면 됩니다. :)

 

그럼 다시 urls.py로 넘어와서 여기에 우리가 만든 기본 페이지를 넣으려면 어떻게 할까요?

일단 '페이지'를 만들어봅시다. 페이지는. html 파일로 만들 수 있는데, 아까 프로젝트 폴더에 template이라는 폴더가 있었죠? 거기에 html 파일들을 관리합니다. 

 

template폴더 안에 여러분의 설정 폴더 이름과 똑같은 이름으로 폴더를 만들어줍니다. 저는 jinstagram이니까 요걸로 만들겠습니다. 그리고 그 안에 main.html이라는 html 파일을 만듭니다.

 

html 생성

 

파이참에서 html 파일을 만들면 기본적으로 위와같은 코드가 써집니다. 여기서 Title을 여러분 마음대로 바꾸고 <body></body> 사이에 아무거나 써봅시다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>여기에 진스타그램 만들꺼임</title>
</head>
<body>

여기는 Body인데 아무거나 써도 됩니다.

</body>
</html>

 

이제 urls.py에서 이 html파일을 실행할 수 있게 연결해야 합니다. urls.py가 바로 html을 연결할 수는 없고 중간에 소스가 하나 필요합니다. 여러분의 설정 폴더에 views.py라는 파이썬 소스파일을 추가합니다.

 

views.py 추가

 

파이썬 코드는 새로 추가해도 아무것도 안 적혀있습니다. 여기에 우리가 코딩을 해야 합니다. 일단 아래와 같이 써볼까요?

 

from django.shortcuts import render
from rest_framework.views import APIView


class Main(APIView):
    def get(self, request):
        return render(request, 'jinstagram/main.html')

 

아마 APIView가 빨간 줄이 쳐 저 있을 텐데요, APIView는 djangorestframework라는 패키지를 설치해야 사용할 수 있는 기능이기 때문입니다. 파이썬은 많은 사람들이 만들어놓은 코드를 패키지 형태로 다운로드하여서 사용할 수 있습니다. 사용 방법은 pip install {사용할 패키지 이름}을 입력하면 됩니다. APIView를 사용하기 위해 terminal창에서 pip install djangorestframework를 쳐봅시다.

 

짠

쉽게 설치되었죠? 파이썬은 이렇게 쉽게 여러 패키지를 설치할 수 있습니다. 여러분이 어떤 패키지가 있는지 알 필요는 없습니다. 특정 기능을 구현하기 위해서 구글링 하다 보면 어떤 패키지를 설치하면 된다라는 답이 항상 있기 때문이죠. 파이썬은 커뮤니티가 잘 형성되어 있기 때문에 원하는 기능을 쉽게 구현할 수 있습니다. (단, 영어로... ㅎ)

 

자 이제 코드로 돌아가 보면, Class Main(APIView):라는 건 Main이라는 클래스를 만들었는데 APIView의 기능을 사용한다 라는 의미입니다. 아주 어려운 말처럼 들리죠? 일단 우리는 Main이라는 새로운 클래스를 만들었다는데 중점을 둡니다. 여기서 클래스라는 것은 하나의 기능이라고 생각하시면 편합니다. 우리는 Main이라는 새로운 기능을 만들었는데, 그 기능은 APIView의 기능을 한다~라고 알아두면 됩니다. 그럼 APIView의 기능은 뭘까요?

 

APIView는 클라이언트와 서버가 데이터를 주고받을 수 있도록 도와주는 역할을 합니다. 서버와 클라이언트가 데이터를 주고받는 방법은 여러 가지가 있는데, 여기서는 HTTP 통신이라는 방법을 사용합니다. 우리가 특정 홈페이지에 들어갈때 주소 맨앞에 적는 HTTP가 바로 이 HTTP 통신입니다. HTTP 통신 안에도 또 여러가지 종류가 있습니다. 그중 대표적으로 get과 post가 있는데요, 일반적으로 홈페이지를 조회하는 데는 get방식을 사용하고, 특정 작업(?)을 요청할 때는 post를 사용합니다. 지금은 페이지만 조회하기 때문에 get을 사용하도록 하겠습니다. post는 추후에 사용할 때 설명하도록 하겠습니다. 

 

Main이라는 Class 안에 def get(self, request):라고 쓴 것은 이 "Main 클래스를 get으로 실행했을 때"를 의미합니다. 만약 def post라고 적으면 post로 실행했을 때를 의미하죠. 그리고 return render(request, 'jinstagram/main.html')은 get으로 실행하면 render라는 기능을 사용한다는 의미입니다. render를 사용하면 우리가 만든 html을 브라우저를 통해 보여줄 수 있습니다. 즉, Main이라는 클래스를 get으로 실행하면 main.html을 실행할 수 있습니다.

 

이제 이 Main을 urls.py에 추가하면 됩니다. urls.py에 아래와 같이 소스를 추가합니다.

 

from django.urls import path
from .views import Main

urlpatterns = [
    path('', Main.as_view())
]

 

사용하지 않는 admin 관련 소스는 지웁니다. ctrl + S로 소스를 저장합니다. runserver로 실행한 장고는 소스가 변경되면 자동으로 재시작되기 때문에 저장과 동시에 서버가 다시 실행되는 것을 볼 수 있습니다. 이제 브라우저에서 새로고침을 해봅시다.

 

우리가 만든 페이지가 나왔습니다!!

 

자 이 엉성한 페이지를 보니 진짜 내가 만든 웹페이지가 올라갔구나~라고 생각이 듭니다. 이제 이 페이지를 한번 꾸며보도록 할까요?

 

 

 

페이지 꾸미기

 

페이지를 꾸미기 전에, 어떤 모습으로 꾸밀지 정해봅시다. 일단 우리가 인스타그램을 클론 하기로 했으니 인스타그램 모양이면 되겠죠? 인스타그램이 어떻게 생겼는지 한번 들어가 봅시다.

 

PC 인스타그램

 

음 PC는 저도 잘 안 들어가는데 화면이 이렇게 생겼네요. ㅋㅋㅋㅋ

일단 제일 상단에 메뉴가 있고 메인화면은 왼쪽 오른쪽으로 나뉘어 있고, 왼쪽은 피드가 오른쪽은 제 정보와 추천이 있네요. 자 그럼 화면을 만들어볼까요?

 

가장 먼저 할 건 부트스트랩 설치입니다. 

Bootstrap · 세계에서 가장 인기있는 HTML, CSS, JS 라이브러리. (getbootstrap.kr)

Bootstrap

부트스트랩이란 쉽게 설명하면 웹페이지 템플릿 모음입니다. 우리가 PPT를 이쁘게 만들기 위해 인터넷에서 이쁜 템플릿을 찾아서 다운받듯이, 웹페이지를 만들기 위한 이쁜 디자인들이 부트스트랩 안에 녹아있습니다. 우리는 부트스트랩을 다운받아서 사용하기만 하면 됩니다.

 

부트스트랩 홈페이지에서 문서 -> 시작하기를 보면 '스타터 템플릿'이 있습니다. 이 템플릿을 복사해서 장고의 html에 복붙합니다.

 

친절하게 스타터 템플릿까지 제공

역시 코딩은 복붙

 

글씨만 커짐

아직은 부트스트랩으로 꾸민 게 없어서 바뀐 게 없습니다. body에 글자만 <h1></h1>을 사용해서 커졌네요. <h1>은 텍스트의 크기를 '제목 1'로 설정한다는 의미입니다. 

 

페이지에는 변한 게 없어 보이지만 소스에는 우리가 부트스트랩을 사용할 수 있도록 css와 js파일이 추가된 상태입니다. 이제 부트스트랩으로 원하는 기능을 구현할 수 있습니다. 먼저 부트스트랩 홈페이지에서 '내비게이션 바'를 사용하는 법을 찾아봅시다.

 

공식 홈피 짱

 

부트스트랩 공식 홈페이지에 문서 페이지를 보면 다양한 부트스트랩의 기능들을 소개하고 사용하는 방법이 자세하게 나와있습니다. 내비게이션 바는 상단에 메뉴를 표기하기 위한 바입니다. 인스타그램에서 제일 상단에 메뉴가 있었죠? 그걸 내비게이션 바를 이용해서 만들 예정입니다. 페이지를 조금 내리면 내비게이션 바를 만들 수 있는 코드가 적혀있습니다.

 

설명이 참 자세하다

위에서 빨간 동그라미가 바로 내비게이션 바입니다. 바로 아래 소스가 있는데 한번 복사해서 html에 붙여 넣기 해보겠습니다.

 

<!doctype html>
<html lang="en">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">

  <title>여기에 진스타그램 만들꺼임 </title>
</head>
<body>
<h1>여기가 body인데 아무내용이나 적으면 됩니다.</h1>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
            data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
            aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
             data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li>
              <hr class="dropdown-divider">
            </li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>


<!-- Optional JavaScript; choose one of the two! -->

<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj"
        crossorigin="anonymous"></script>

<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js" integrity="sha384-eMNCOe7tC1doHpGoWe/6oMVemdAVTMs2xqW4mwXrXsW0L84Iytr2wi5v2QjrP/xp" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.min.js" integrity="sha384-cn7l7gDp0eyniUwwAZgrzD06kc/tftFf19TOAs2zVinnD/C7E91j9yyk5//jjpt/" crossorigin="anonymous"></script>
-->
</body>
</html>

 

이제 브라우저를 새로고침 합니다. 

 

내비게이션이 생겼다!

내비게이션이 생겼네요?! 근데 <h1>인 글자 아래 적었더니 문장 아래 내비 바가 생겼습니다 ㅎㅎ 맨 위에 생겨야 하니 h1을 삭제하겠습니다. ㅎㅎ

 

 

자 이제 상단에 왔네요. 이제 인스타그램 상단바처럼 바꾸기 위해 Navbar를 분석해보겠습니다.

 

html 태그는 괄호 쌍으로 이루어져 있습니다. <A>가 시작이고 역슬래시를 써서 다시 쓰면 </A> 끝입니다. 우리가 복붙한 내비 바의 제일 상단에는 <nav> </nav>로 감싸져있습니다.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
   ...
</nav>

여기서 우리는 셜록에 빙의해서 추측을 하나 할 수 있습니다.

"nav 안에 있는... 을 다 지우면 빈 내비 바만 남을까?"

 

정답

 

안에 내용을 다 지우면.. 위처럼 가느다란 내비바만 남습니다 ㅋㅋㅋ 

 

그럼 또 여기서 우리는 한 가지 실험을 할 수 있는데요, nav안에 있는 요소들 중 몇 개를 지우면 어떤 게 어떤 역할을 하는지 알 수 있겠죠? 일단 이 nav안에 어떤 요소들이 있는지 알아봅시다.

 

+와 -를 활용하자

파이참 코드 에디터 왼쪽에 보면 +와 - 버튼이 있는 것을 볼 수 있습니다. 이것을 누르면 계층별로 코드를 감출 수 있습니다. 즉 시작과 끝을 파이참이 알아서 계산해서 -를 누르면 그 안에 있는 내용을 감춥니다. 이 +와 -를 눌렀다 안 눌렀다 하면서 코드가 전체적으로 어떤 구조를 가지고 있는지 파악할 수 있습니다. 

 

일단 제일 위에는 <nav>가 있고, 그 안에는 하나의 <div>가 있습니다. <div>는 단순히 안에 요소들을 여러 개 그룹화시켜주는 역할을 합니다. 그 div안에는 a태그 하나, button태그 하나 그리고 또 하나의 div가 있습니다. 그럼 여기서 3번째 div를 지우면 어떻게 될까요?

 

 

navbar를 제외한 나머지는 사라졌다.

 

브라우저를 보면 navbar 글씨를 제외한 나머지가 사라졌네요. 여기서 약간의 의문이 듭니다. 분명히 div안에 a태그 하나와 button이 있었습니다. a태그는 Navbar라는 글자를 가지고 있었기 때문에 화면에 나오는 Navbar가 a태그로 만들어진거라는 것을 알 수 있죠. 그럼 button은 어디있을까요? 사실 저 button은 브라우져 크기가 작아져서 내비 바안에 있는 모든 내용을 표시하지 못할경우를 대비한 버튼입니다. 즉 화면이 작을 때, 내비바 안에 메뉴들을 표기하기 위한 반응형 버튼이죠. 부트스트랩은 반응형 웹을 지원하기 때문에 몇 개의 기능들은 반응형으로 만들어져 있습니다. 버튼을 표기하기 위해서는 브라우저의 크기를 줄여보면 됩니다.

 

왼쪽 상단에 나타난 버튼

자 그럼 우리가 지운 <div> 안에 있는 요소들이 나머지 요소들이라는 것을 알 수 있는데, 왜 그렇게 해놨을까요? 우리가 지운 <div>의 id를 보면 추측할 수 있습니다. 

 

<div class="collapse navbar-collapse" id="navbarSupportedContent">

 

id값이 navbarSupportedContent라고 되어있는데 바로 위에 반응형 버튼에서 data-bs-target이라는 속성을 보면 똑같이 navbarSupportedContent라고 쓰여있습니다. 

 

<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">

 

즉! 3번째 <div> 안에 있는 요소들이 화면이 작아져서 토글 버튼이 나왔을 때 토글 버튼을 누르면 나오는 메뉴 목록인 것이죠~! 첫번째 있는 <a>태그의 Navbar 텍스트는 화면이 작아져도 유지되고, 나머지 요소들만 토글버튼 안으로 숨는것입니다. 코드를 다시 살리고 토글버튼을 눌러보도록 할게요.

 

토글버튼을 눌렀을 때

보이시죠? 숨어있던 메뉴들이 나왔습니다.

자 이제 <div> 안에 있는 것들도 하나씩 지워보면서 뭐가 사라지는지 보세요. 

하지만 그것보다 더 쉽게 어떤 태그가 무엇을 의미하는지 보는 방법이 있습니다. 크롬에서 F12를 누르면 개발자 모드가 켜지는데 거기서 ctrl + shift + c를 누르면 마우스가 위치하는 곳에 있는 요소가 어떤 소스인지 보입니다.

 

요거를 누르면 됨

요렇게요~

 

보이시죠? Home이라는 글자 위에 마우스를 올리면 위와 같이 어떤 태그에 어떤 소스인지 나옵니다. 실제로 파이참에서 소스를 보면 저 코드를 확인할 수 있습니다.

 

요있네~

 

크롬에 이 개발자 모드(F12)를 사용하면 여러분이 화면을 구현하거나 원하는 기능을 구현할 때 많은 도움이 됩니다.

 

이제 이것저것 많이 알아봤으니 인스타그램처럼 꾸며볼까요? 다시 한번 인스타그램 상단바를 봐봅시다.

 

PC 인스타그램

저 인스타그램 마크가 뭔가 이미지스럽네요. 개발자 모드로 봐볼까요?

 

이미지 주소가 똭~

오호 이미지 주소가 있네요. 요걸 클릭해서 들어가 보면 인스타그램 이미지가 보입니다. 저거를 우리 내비 바에 넣어볼게요.

 

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <img src="https://www.instagram.com/static/images/web/mobile_nav_type_logo-2x.png/1b47f9d0e595.png">
  </div>
</nav>

이미지 넣는 html 태그는 <img>이고 src 속성으로 url을 적으면 됩니다. 다른 요소들은 다 지우고 nav에 div하나만 남겨두고 그 안에 img를 넣어봤습니다.

 

따란~

따란~ 근데 사이즈가 좀 크네요. 이미지 크기는 어떻게 수정할까요?

 

    <img style="height: 30px; object-fit: contain" src="https://www.instagram.com/static/images/web/mobile_nav_type_logo-2x.png/1b47f9d0e595.png">

바로 img안에 style 속성을 넣어 수정합니다. style로 넣은 속성이 바로 css입니다. height를 픽셀 단위로 주고 object-fit을 contain으로 하면 가로 세로 비율을 맞춰서 자동으로 크기를 조절합니다. 30px정도로 height를 주고 새로고침 해봅시다.

 

 

사이즈가 줄었다.

오호 괜찮은데요? 근데 이렇게 사이즈를 줄일 때마다 새로고침 해야 할까요?

이럴 때 사용하는 게 바로 개발자 모드입니다. F12를 누르고 인스타그램 이미지를 클릭해봅시다.

그럼 오른쪽에 우리가 지정한 스타일이 나옵니다. 요기를 더블클릭하면 우리가 원하는 대로 값을 바꿀 수 있습니다.

 

마우스 휠로 조절하면 1 단위로 숫자를 조절할 수도 있습니다. 이렇게 조절해서 사이즈를 정한 다음에 소스를 수정하시면 됩니다. 

 

이제 검색창을 넣어볼까요? 검색창은 아까 지운 코드에 있었기 때문에 그 소스를 다시 되살려 봅시다.

 

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <img style="height: 30px; object-fit: contain" src="https://www.instagram.com/static/images/web/mobile_nav_type_logo-2x.png/1b47f9d0e595.png">
    <input class="form-control" style="width: 200px" type="search" placeholder="Search" aria-label="Search">
  </div>
</nav>

 

CSS로 width 200px을 주었는데, 이걸 하지 않으면 내비 바 전체가 검색창이 됩니다. ㅎㅎ 적당한 가로길이를 정해서 width에 넣어줍시다.

 

 

음 검색창이 생겼는데 왼쪽에 붙었네요.? 일단은 계속해서 진행해보도록 하겠습니다.

 

인스타그램 오른쪽 위에 아이콘들을 넣어볼 건데요, 아이콘들을 이미지로 넣어도 되지만 최근에 구글에서 머티리얼 아이콘이라는 것을 공개했습니다. 약간 폰트 같은 정형화된 아이콘들을 쉽게 사용할 수 있게 제공하는 건데요, 사용법이 아주 간단합니다.

 

먼저 공식 홈페이지에서 사용하고 싶은 아이콘을 검색합니다. 

Icons - Google Fonts

Google Fonts

 

집 모양을 먼저 넣어보겠습니다.

 

home을 검색하고 filled를 누르면 됨

아이콘이 색칠이 안되어있으면 filled를 체크해주면 됩니다. 오른쪽에 보면 Web에서 사용할 때 span으로 시작하는 소스가 있는데요, 요걸 복사해서 우리 html에 복사해줍니다.

 

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <img style="height: 30px; object-fit: contain"
         src="https://www.instagram.com/static/images/web/mobile_nav_type_logo-2x.png/1b47f9d0e595.png">
    <input class="form-control" style="width: 200px" type="search" placeholder="Search" aria-label="Search">
    <span class="material-icons">home</span>
  </div>
</nav>

 

슨생님 안되는데요..?

 

아하. 사용하기 전에 한 가지 더 적어야 할 게 있습니다. 우리가 부트스트랩을 써주기 위해 스타터 템플릿을 복사해주었는데, 사실 스타터 템플릿에는 우리가 부트스트랩의 css와 js를 사용할 수 있도록 url이 적혀있습니다. 머티리얼 아이콘 역시 우리가 사용할 수 있도록 url을 적어주어야 합니다.

 

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">

  <!-- 요기에 구글 머티리얼 아이콘 -->
  <link
    href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"
    rel="stylesheet">

  <title>여기에 진스타그램 만들꺼임 </title>
</head>

 

<head> 부분에 구글 머티리얼 아이콘을 위한 url을 적어줍시다. 그리고 다시 새로고침!

 

집 아이콘 생성!

캐시 때문에 아이콘이 안 나올 수 있으므로 브라우저를 종료했다가 다시 실행하는 게 좋습니다. 이제 다른 아이콘도 찾아서 넣어볼게요.

 

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <img style="height: 30px; object-fit: contain"
         src="https://www.instagram.com/static/images/web/mobile_nav_type_logo-2x.png/1b47f9d0e595.png">
    <input class="form-control" style="width: 200px" type="search" placeholder="Search" aria-label="Search">
    <span class="material-icons">home</span>
    <span class="material-icons">send</span>
    <span class="material-icons-outlined">add_box</span>
    <span class="material-icons-outlined">explore</span>
    <span class="material-icons-outlined">favorite_border</span>
  </div>
</nav>

아이콘들 추가

자 아이콘을 다 추가했습니다. 그런데 내비 바안에 요소들이 서로 일정한 간격을 가지고 정렬되어 있네요. 이걸 해결하기 위해 저 아이콘들을 따로 div로 감싸 보겠습니다.

 

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <img style="height: 30px; object-fit: contain"
         src="https://www.instagram.com/static/images/web/mobile_nav_type_logo-2x.png/1b47f9d0e595.png">
    <input class="form-control" style="width: 200px" type="search" placeholder="Search" aria-label="Search">
    <div>
      <span class="material-icons">home</span>
      <span class="material-icons">send</span>
      <span class="material-icons-outlined">add_box</span>
      <span class="material-icons-outlined">explore</span>
      <span class="material-icons-outlined">favorite_border</span>
    </div>
  </div>
</nav>

 

짠~

자 이제 어느 정도 비슷한가요? ㅎㅎ 

 

이제 내비 바를 어느 정도 마무리했으니 다음 시간에는 아래 피드 나오는 부분을 구현해보도록 하겠습니다.