인스타그램 따라하기 6

제대로 나눈 건지는 모르겠지만, 기능별로 하나의 글을 나눠보면 5개 정도의 part로 나눌 수 있을 것 같다. 그래서 아래와 같이 5개 part로 나누었다.

            <div class="main_left">
                <div class="card">
                    <header>
 
                    </header>
                    <div class="card_image">
 
                    </div>
                    <div class="info">
 
                    </div>
                    <div class="comment">
 
                    </div>
                    <div class="comment_form">
                        
                    </div>
                </div>
            </div>

아이콘들과 form 태그, img 태그 등을 넣어서 아래와 같은 뼈대 코드를 만든다.

<div class="card">
                    <header>
                        <img src="" alt="">
                        <div class="user_name">username</div>
                    </header>
                    <div class="card_image">
                        <img src="" alt="">
                    </div>
                    <div class="info">
                        <div class="info_left">
                            <i class="far fa-heart"></i>
                            <i class="far fa-comment"></i>
                            <i class="fas fa-upload"></i>
                        </div>
                        <div class="info_right">
                            <i class="far fa-bookmark"></i>
                        </div>
                    </div>
                    <div class="comment">
                        comment1<br>
                        comment2<br>
                    </div>
                    <div class="comment_form">
                        <form action="">
                            <input type="text" placeholder="댓글 입력..">
                        </form>
                    </div>
                </div>

그 결과

card에 흰 바탕을 주어야 할 것 같다. 그리고 left_main과 right_main이 구분이 가지 않으니 글을 써서 어떻게 나뉘는지 보겠다.

div로만 구분이 되어 있기 때문에 block속성으로 좌우를 꽉 채워버린다. 또한 right_main도 block이기 때문에 밑에 내려가 있다. 따라서 두 div를 감싸고 있는 부모 div에서 display 속성을 flex로 해야 한다.

.main{
            background-color: #efefef;
            display: flex;
            flex-direction: row;
            justify-content:center;
            border-top: 1px solid #4a4a4a;
            height: 100vh;
            width: 100vw;
        }
        
.card{
            border: 1px solid #4a4a4a;
            background-color: white;
        }

그 결과

좌우 구분도 되고, card 크기에 맞춰서 background-color도 적용되었다.

<div class="main_left">
                <section class="card_section">
                    <div class="card">
                        <header>
                            <img src="" alt="">
                            <div class="user_name">username</div>
                        </header>
                        <div class="card_image">
                            <img src="" alt="">
                        </div>
                        <div class="info">
                            <div class="info_left">
                                <i class="far fa-heart"></i>
                                <i class="far fa-comment"></i>
                                <i class="fas fa-upload"></i>
                            </div>
                            <div class="info_right">
                                <i class="far fa-bookmark"></i>
                            </div>
                        </div>
                        <div class="comment">
                            comment1<br>
                            comment2<br>
                        </div>
                        <div class="comment_form">
                            <form action="">
                                <input type="text" placeholder="댓글 입력..">
                            </form>
                        </div>
                    </div>
                </section>
            </div>

그리고 글이 여러 개가 되면 스크롤이 가능해져야 하므로, main_left 아래에 section을 미리 만들어 두도록 하겠다.

------------------------------------------------------------------------------------------------------------------------------

**민석이가 session 때 진행했던 instagram card 만들기를 보고 참고했더니 보기에 훨씬 나아졌다.

background-color는 #fafafa

border는 #efefef로 하였다.

------------------------------------------------------------------------------------------------------------------------------

일단 card처럼 보이기 위해서 사진을 2장 먼저 넣어주겠다.

django에서는 이미지 파일을 static으로 올리기 위해서 settings.py에서 설정을 해주어야 한다.

또한 설치한 app 아래에 static 폴더를 만들고 그 안에 image 파일을 넣어주어야 django가 인식하고 이를 화면에 띄워준다.

static 파일에는 css 파일도 속하기 때문에 css폴더와 img 폴더를 하위 폴더로 만든다. 사진은 img 폴더 아래에 저장한다.

그리고 static 폴더에서 img 파일을 가져오기 위해서 settings.py에 아래와 같이 설정을 한다.

기본적으로 settings.py 제일 아래에 보면 STATIC_URL은 설정이 되어 있다.

<img src="static/img/123.jpg" alt="404">

그 후 이렇게 코드를 통해 img를 불러온다.

 

css파일도 마찬가지로 static 폴더에 만들면 된다. 그러면 지금까지 html 파일의 head에 style 태그로 넣었던 코드를 분리할 수 있다.

static/css 아래에 있는 home.html에 css 코드를 넣어준다.

그리고 home.html의 head 태그에 link 태그를 통해 home.css와 연결을 시켜준다.

<link rel="stylesheet" href="static/css/home.css">

위와 같이 사진 크기 때문에 난리가 났다. 따라서 사이즈를 조절해줘야 한다.

민석이 session 때 했던 내용을 참고해서 만들어 보겠다.

header img{
    border-radius: 50%;
    height: 30px;
    width: 30px;
    border: 1px solid #efefef;
}
 
.card_image img{
    width: 100%;
}

프사는 동그랗게 만들고 크기를 조절해주었다.

card 사진은 width: 100%를 통해 부모의 크기에 맞추었다.

그 결과

다 보이게 하려다 보니 잘 안보인다.

card의 크기를 줄여줘야 할 것 같다.

.card{
    border: 1px solid #efefef;
    background-color: white;
    width: 600px;
    height: 600px;
}

조절하다보니 600px정도가 적당한 것 같다.

그림과 같이 개발자 도구를 이용해서 margin, padding 설정을 보면서 조정을 해주었다.

.info i{
    font-size: 1.5rem;
}

.main_left{
    margin: 1rem;
}

card가 들어가는 공간을 margin을 주어 공간을 벌렸고, card에 있는 아이콘의 크기도 조금 줄였다.

그리고 아이콘의 위치도 조정을 해주었다.

.info{
    display: flex;
    justify-content: space-between;
}

이후 댓글을 다는 form태그의 input 태그와 button 태그에 css를 적용한다.(오타나지 않게 조심한다. 오타나면 css 적용이 안됨)

.comment{
    margin: 0rem 1rem 1rem 1rem;
    border-bottom: 1px solid #efefef;
    padding-bottom: 1rem;
}
 
.comment_form form{
    padding-bottom: 0px;
    display: flex;
    flex-direction: row;
}
 
.comment_form form input{
    width: 550px;
    height: 30px;
    border: none;
    padding-left: 10px;
}
 
.comment_form form #submit{
    border: none;
    background-color: white;
}

그 결과