[ToyPJ/Python] django 로 인스타그램 만들기 - 04 화면 만들기 (오른쪽)

📌 01. 우측 상단 프로필 박스 만들기

이제 왼쪽 화면의 틀을 어느정도 잡았으니 오른쪽 화면을 만들어 볼 차례이다. 인스타그램의 오른쪽 화면을 보면 제일 상단에 내 프로필 박스가 있고, 하단에 "회원님을 위한 추천" 박스가 있다. 하지만 나는 약간 응용하여 나의 깃허브 주소와 블로그 주소에 접속 가능하도록 만들어 볼 생각이다.

01. 프로필 박스 만들기

먼저, 만들 프로필 박스는 오른쪽 화면에 들어가야 하기 때문에 <style>의 오른쪽 화면에 해당하는 속성을 주어야한다. 

html - 오른쪽 화면

프로필 박스에 들어갈 프로필 사진을 동그랗게 만들기 위해서, border-radius(둥근 테두리) 속성을 주고, object-fit : cover을 활용하여 만든 둥근 테두리 크기에 맞게 프로필 사진이 비율을 유지하며 확대될 수 있도록 했다.

또한 닉네임 부분은 굵은 검은 글씨로 표시되고, 이름 부분은 밝은 회색의 굵은 글씨로 표시될 수 있도록 작성했다.

html - 프로필 박스 속성

프로필 사진(춘식이)의 이미지를 적절히 조절해가면서 원하는 크기를 찾을 수 있었다. 또한 링크를 클릭할 수 있는 "전환" 텍스트를 만들었다. <style>의 link_txt 속성은 cursor : pointer 을 활용하여 마우스 포인터를 갖다댔을 때 손가락 모양으로 변화되도록 작성하였다.

html - 프로필 박스 만들기

📌 02. 나의 GitHub와 Blog 바로가기 만들기

나의 깃허브와 블로그에 접속 가능하도록 링크를 걸고 싶었다. 프로필 사진과 이름을 만드는 것은 이전과 동일하나 링크를 거는 데엔 한 가지 과정이 더 필요하다.

02. 나의 깃허브, 블로그 바로가기 만들기

<a> 태그는 하이퍼 링크를 걸어주는 태그이다. 태그의 속성으로는 href을 주면 된다. 예를 들면, <a href = "http://www.naver.com">Go NAVER</a> 처럼 말이다. 응용하여 아래와 같이 나의 깃허브와 블로그 주소에 접속 가능하도록 링크를 걸어주었다.

html - 바로가기 링크 만들기

📌 03. 추천 화면 만들기

인스타그램의 오른쪽 화면의 추천 화면을 만드는 것 역시 이전과 동일하다. 이전의 <div>안의 내용들을 복사하여, 밑에 붙여넣고 자유롭게 만들면 된다. 나는 5개를 만들었다. 

03. 회원님을 위한 추천 화면 만들기

html - 회원님을 위한 추천 만들기

 

 

 

https://cholol.tistory.com/548

 

이 게시물의 모든 저작권은 마이쮸(mychew__)님께 있으며, 저는 오직 학습과 기록을 목적으로 포스팅한 것임을 알려드립니다.

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