[ToyPJ/Python] django 로 인스타그램 만들기 - 03 내비 바, 피드화면 만들기 (왼쪽)

ToyPJ/Python-Django

[ToyPJ/Python] django 로 인스타그램 만들기 - 03 내비 바, 피드화면 만들기 (왼쪽)

hellosonic 2023. 3. 28. 18:34

📌 01. 부트스트랩 설치

https://getbootstrap.kr

Bootstrap

강력하고 확장 가능하며 기능이 풍부한 프론트엔드 툴킷. Sass로 빌드 및 커스터마이징하고, 사전 빌드된 그리드 시스템 및 구성 요소를 활용하고, 강력한 JavaScript 플러그인으로 프로젝트에 생기

getbootstrap.kr

부트스트랩이란 쉽게 설명하면 웹페이지 템플릿 모음이다. PPT를 만들 때 템플릿을 찾아서 다운받는 것처럼, 웹페이지를 만들기 위한 템플릿들이 부트스트랩 안에 있다.

부트스트랩의 "스타터 템플릿"을 장고의 html에 복붙하여, 우리가 부트스트랩을 사용할 수 있도록 css와 js파일을 추가시킨다. 스타터 템플릿을 붙여넣게 되면 부트스트랩으로 원하는 기능을 구현할 수 있다.

이제 인스타그램 화면 상단의 "내비게이션 바"를 웹페이지에 추가하도록 하자.

📌 02. 내비 바 만들기

"내비게이션 바"란 위의 사진처럼 상단에 메뉴를 표기하기 위한 바인데, 이것 역시 부트스트랩에서 기본 틀을 제공한다. 부트스트랩에서 "내비 바"를 검색하면 된다.

내비 바를 기본으로 하고 크롬의 개발자 모드(F12)를 이용하면 웹페이지의 html을 볼 수 있는데, 여기서 하나하나 비교하며 html을 수정하면 된다.

먼저, 왼쪽 상단의 인스타그램 로고를 만들도록 하자.

웹페이지에 사진을 넣으려면 이미지 삽입 html 태그를 사용하면 되는데, 태그명 <img>에 src 속성으로 이미지 url을 적으면 된다.

만약 크기를 조정하고 싶다면 img 안에 style 속성을 넣어 수정하면 된다. style로 넣은 속성이 바로 css이다. height를 픽셀 단위로 주고, object-fit을 contain으로 하면 가로, 세로 비율을 맞춰서 자동으로 크기를 조절한다.

인스타그램 로고를 내비 바에 삽입했다면, 이번엔 인스타그램 상단의 검색창을 넣어보도록 하자.

검색창은 부트스트랩의 내비 바 소스 코드를 약간만 수정하면 만들 수 있다. 이 때, css로 width를 200px을 주었는데, 이걸 하지 않으면 내비 전체가 검색창이 된다. width을 필수로 지정 해주어야 하고, 적당한 가로 길이를 정해서 width에 넣어준다.

이제 내비 바 오른쪽의 아이콘들을 만들어보자.

인스타그램 아이콘들을 이미지로 넣어도 되지만, "구글 머티리얼 아이콘"을 이용하여 넣어보도록 하겠다. 아래 링크에서 쉽게 받아서 사용할 수 있다. web에서 사용할 때는 <span> html 소스를 사용하면 되고, 복사해서 html에 붙여넣으면 된다.

https://fonts.google.com/icons

Material Symbols and Icons - Google Fonts

Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design variants.

fonts.google.com

하지만 그 전에, 우리가 부트스트랩을 쓰기 위해 스타터 템플릿을 복사해준 것처럼 머티리얼 아이콘 역시 css와 js를 사용할 수 있도록 url을 적어주어야 한다. <head> 부분에 구글 머티리얼 아이콘 사용을 위한 url을 적어주면 된다.

그 후, 내비 바 안에 복사했던 <span> 태그를 붙여넣으면 된다.

html - 구글 머티리얼 아이콘 사이트에서 복사한 <span>태그를 붙여넣기

📌 03. <div>로 화면을 분할해보자

인스타그램 피드화면을 보면 왼쪽과 오른쪽이 나누어져 있다. 왼쪽엔 피드, 오른쪽에는 친구 추천화면이 뜨게 되는데, <div> 태그를 활용하여 바디 부분을 나눌 수 있다. <div> 태그를 사용하여 화면이 어떻게 나누어지는지 살펴보도록 하자. 다음과 같이 html을 작성하면 화면은 위(skyblue 색상), 아래(yellow 색상)으로 나누어지게 된다.

인스타그램 화면을 만들기 위해서는 화면을 왼쪽, 오른쪽으로 나누어야 하는데 이럴 때는 css "display" 를 활용하면 된다. "display : flex" 옵션을 통해 화면을 가로로 나열시킬 수 있다.

실제 인스타그램 화면처럼 상단의 내비 바와 오른쪽 화면이 항상 고정되기 위해서는 내비 바와 오른쪽 <div> 에 css "position"를 활용하면 된다. "position : fixed"를 통해 스크롤에 영향을 안 받고 항상 고정되도록 만들어 보자.

📌 04. 피드화면 만들기 (왼쪽)

인스타그램 왼쪽 화면에 여러 개의 피드가 생기게 될텐데, 이것을 세로로 정렬하기 위해서는 <div> 태그 css "flex-direction"을 column으로 설정하면 된다. 다만, 반복적으로 여러 개의 <div>를 만들게 되면 일일이 style을 길게 넣어줘야 하는 번거로움이 생길 수 있는데, 이는 css를 간결하게 표현할 수 있는 방법을 활용하면 된다. 바로 html 소스 위에 <style> 태그를 따로 만들어 관리하는 것이다.아래와 같이 <style>태그 안에 "left_body" 라는 css를 만들어보자.

그 후 사전에 만들어 놓은 <div> 에 left_body라는 class를 추가하면(<div class = "left_box">) 위에 <style> 태그에 작성한 "left_body" css의 5가지 속성이 모두 적용된다.

margin-right : 요소 오른쪽에 바깥 여백을 설정한다.
width : 너비 설정
height : 높이 설정
display: flex : 요소들을 자유롭게 위치시킨다.
flex-direction : column : 세로로 정렬시킨다.

이처럼, css는 상단에 정의해놓고 여러 태그에서 class를 활용하여 추가할 수 있다. 참고로 <div class = "border feed_box"> 에서 border는 테두리를 만드는 css이다. 여러개의 피드박스를 테두리를 통해 구분하기 위해 border를 주었다.

이제 진짜 인스타그램 피드화면처럼 보이기 위해 먼저 왼쪽 화면을 만들어보도록 하자. 아래의 다음과 같이 순서를 정했다.

📌 04-1. 피드 이미지 삽입하기

먼저 인스타그램 피드에는 사진이 있어야 한다. 고른 사진을 "이미지 링크 복사" 하여 html의 "feed_box" <div>의 <img>태그에 붙여 넣으면 된다. 이미지는 <img>태그의 class를 활용하여, 앞서 <style> 태그에서 작성한 속성을 따른다.

📌 04-2. 피드 안에 아이콘 삽입하기

피드 안에 아이콘을 생성하는 것은 앞서 구글 머티리얼 아이콘을 내비 바에 넣은 것을 응용하면 된다.

피드 안의 아이콘 역시 <style> 태그 내에 속성을 입력하여 html을 반복적으로 작성해야하는 번거로움을 줄일 수 있다.

padding : 내용(content)과 테두리(border) 사이의 간격인 패딩 영역의 크기를 설정한다.
padding : 5px 5px 0px 5px 은 첫 번째 속성값부터 마지막 속성값까지 상,우,하,좌(시계방향)의 방향을 가진다.
(ex) 세 번째 속성값은 padding-bottom : 0px 과 같은 의미이다.)
justify-content(웹 페이지의 축을 따라 요소 사이에 공간을 만듬) : space-between(각 요소 사이에 공간이 있음)
padding-right : 각 테두리(여기서는 아이콘)의 간격을 1px씩 띄운다.

여기서 주의할 점은 좋아요,코멘트,보내기 아이콘과 북마크 아이콘을 떨어뜨려야 한다는 점인데 각각 다른 <div> 태그로 분리하여 떨어뜨렸다.

📌 04-3. 피드 안에 내용 및 댓글 작성하기

padding 의 속성 값이 두 개 라면 각각 상하, 좌우 방향의 간격이다.
feed_content : 피드 안에 들어갈 "내용"의 영역을 어떻게 줄지 설정한다.
feed_like : 피드 안에 들어갈 "좋아요"의 영역을 어떻게 줄지 설정한다.
feed_reply : 피드 안에 들어갈 "댓글"의 영역을 어떻게 줄지 설정한다.
feed_txt : 피드 안에 들어갈 폰트의 사이즈를 어떻게 줄지 설정한다.

피드 안에 어떤 것들을 넣을지 작성한다. 좋아요, 내용, 댓글만 채우면 되고, 각각 class를 통해 <style>에서 작성한 속성값들을 불러와 적용시킨다. 참고로 <b>는 굵은 글씨를 만드는 태그, <p>는 문단을 만드는 태그이다.
댓글은 여러 개를 작성하였고, <style>에서 작성한 속성 중 flex-direction : column 을 통해 세로로 나열될 수 있도록 하였다. 만약 row 를 입력한다면, 가로로 나열된다.

📌 04-4. 피드에 프로필 사진 및 아이디 삽입하기

피드 상단에 프로필 사진과 아이디를 해보자. 나는 춘식이를 좋아해서 프로필 사진을 춘식이로 했다.

feed_name : 프로필 이름에 해당하는 속성이다. align-items를 center로 줘서, 프로필 이미지 기준으로 정가운데에 이름이 위치하도록 했다.
feed_name.txt : 프로필 이름에 해당하는 속성이며, font-weight를 bold로 줘서, 두꺼운 글씨로 표시되도록 했다.
profile_box : border-radius 는 테두리를 둥글게 만드는 속성이다.
profile_img : object-fit은 요소의 콘텐츠 크기를 어떤 방식으로 조절해서 요소에 맞출 것인지 지정한다. cover를 줘서 콘텐츠 크기를 종횡비를 유지하며 너비와 높이를 가득 채울때까지 확대한다.

📌 04-5. 피드에 '댓글 달기...' 박스 추가하기

📚 요약해보면

중복되는 html 작성을 방지하기 위해 <style> 내에 속성을 작성하여, 여러 태그에서 class를 활용하여 속성값을 줄 수 있다.

출처 :

https://cholol.tistory.com/548

좋은 강의 컨텐츠를 제공해주신 마이쮸님께 감사의 말씀 드립니다. (_ _)