002 content

main_container 영역을 만들고 main_container 안에 inner를, inner 안에 contents_box를 만들고 안에 contents들을 배치하여 contents 부분을 만들어보도록 하겠습니다.

간단하게 틀을 작성해보면 다음과 같습니다.

파일명 : index.html


...

                <div class="search_box">
                    <input type="text" placeholder="검색" id="search-field">
                    <div class="fake_field">
                        <span class="sprite_small_search_icon"></span>
                        <span>검색</span>
                    </div>
                </div>

                <div class="right_icons">
                    <div class="sprite_camera_icon"></div>
                    <div class="sprite_compass_icon"></div>
                    <div class="sprite_heart_icon_outline"></div>
                    <div class="sprite_user_icon_outline"></div>
                </div>
            </section>
        </header>

        <section id="main_container">
            <div class="inner">
                <div class="contents_box">
                    <article class="contents">
                    </article>
                </div>
            </div>
        </section>	
    </section>
</body>
</html>

margin을 주게 되면 margin 병합 현상이 일어나게 되므로, 컨텐츠를 밀 때에는 기본적으로 위에서 아래로 밀어주고 아래 컨텐츠가 위로 밀 때에는 padding-top을 이용하게 됩니다.

파일명 : css/style.css


...

#main_container{
    padding-top: 130px;
    display: flex; /* 컨텐츠가 가운데에 위치할 수 있도록 함 */
    justify-content: center; /* x축 가운데 정렬 */
}

#main_container .inner{
    width: 935px;
    /* height: 500px; */
    /* background: red; */
}

.contents_box{

}

.contents{
    width: 614px;
    height: 500px;
    border: 1px solid rgba(0,0,0,0.09);
    border-radius: 3px; /* 테두리를 둥글게 만듬 */
    margin-bottom: 60px; /* 다른 contents들이 밀려야 되기 때문에 사이에 여백을 준다 */
    background: white;
}

이제 contents영역을 분할해 보겠습니다.

아래 사진을 보면 작성자 정보가 있는 탑, 이미지를 보여주는 이미지 섹션, 아이콘, like 영역, 댓글 컨테이너 그리고 시간을 보여주는 타이머 영역과, 댓글 필드 부분으로 이루어져 있습니다.

top 영역부터 만들어보도록 하겠습니다.

top 영역을 자세히 살펴보면, 컨텐츠 안에는 프로필과 글자들이 들어있는 박스와 더보기 버튼이 있는 박스를 볼 수 있습니다.

파일명 : index.html


...

        <section id="main_container">
            <div class="inner">
                <div class="contents_box">
                    <article class="contents">
                        <header class="top">
                            <div class="user_container">
                                <div class="profile_img">
                                    <img src="imgs/thumb.jpeg" alt="프로필이미지">
                                </div>
	                              <div class="user_name">
                                    <div class="nick_name">KindTiger</div>
                                    <div class="country">Seoul, South Korea</div>
                                </div>
                            </div>
                            <div class="sprite_more_icon" data-name="more"></div>
                        </header>	
                    </article>
                </div>
            </div>
        </section>	

...

파일명 : css/style.css


...

#main_container{
    padding-top: 130px;
    display: flex; /* 컨텐츠가 가운데에 위치할 수 있도록 함 */
    justify-content: center; /* x축 가운데 정렬 */
}

#main_container .inner{
    width: 935px;
    /* height: 500px; */
    /* background: red; */
}

.contents_box{

}

.contents{
    width: 614px;
    height: 500px;
    border: 1px solid rgba(0,0,0,0.09);
    border-radius: 3px; /* 테두리를 둥글게 만듬 */
    margin-bottom: 60px; /* 다른 contents들이 밀려야 되기 때문에 사이에 여백을 준다 */
    background: white;
}

.contents .top{
    display: flex; /* 가로 배치 */
    justify-content: space-between; /* x축 정렬_공간을 자동으로 분배 */
    align-items: center;
    padding: 10px 20px; /* 위아래 양쪽 */
}

.contents .top .profile_img{
    width: 32px;
    height: 32px;
    border-radius: 50%; /* 테두리를 둥글게 설정 50% -> 원의 형태 */
    overflow: hidden; /* 자식이 크기가 넘치지 않도록 한다 */
    margin-right: 10px;
}

.contents .top .profile_img img{
    width: 100%; /* 100%가 없을 경우 이미지가 들어가지 않음 */
}

.contents .top .user_container{
    display: flex; /* 가로 배치 */
}

위 그림과 아래 그림을 비교해 보면 위치와 아이디의 글씨가 구분이 되어 있는 것을 볼 수 있습니다. 그래서 m_text 클래스와 s_text 클래스를 추가하여 이를 수정하도록 하겠습니다.

파일명 : index.html


...

        <section id="main_container">
            <div class="inner">
                <div class="contents_box">
                    <article class="contents">
                        <header class="top">
                            <div class="user_container">
                                <div class="profile_img">
                                    <img src="imgs/thumb.jpeg" alt="프로필이미지">
                                </div>
	                              <div class="user_name">
                                    <div class="nick_name m_text">KindTiger</div>
                                    <div class="country s_text">Seoul, South Korea</div>
                                </div>
                            </div>
                            <div class="sprite_more_icon" data-name="more"></div>
                        </header>	
                    </article>
                </div>
            </div>
        </section>	

...

파일명 : css/style.css


...

.contents .top{
    display: flex; /* 가로 배치 */
    justify-content: space-between; /* x축 정렬_공간을 자동으로 분배 */
    align-items: center;
    padding: 10px 20px; /* 위아래 양쪽 */
}

.contents .top .profile_img{
    width: 32px;
    height: 32px;
    border-radius: 50%; /* 테두리를 둥글게 설정 50% -> 원의 형태 */
    overflow: hidden; /* 자식이 크기가 넘치지 않도록 한다 */
    margin-right: 10px;
}

.contents .top .profile_img img{
    width: 100%; /* 100%가 없을 경우 이미지가 들어가지 않음 */
}

.contents .top .user_container{
    display: flex; /* 가로 배치 */
}

.m_text{
    font-size: 14px;
    font-weight: bold;
}

.s_text{
    font-size: 12px;
}

이렇게 중복되는 부분들이 많을 경우에는 클래스 하나로 정의를 해 두고 불러와서 쓰는 방식이 조금 더 편할 수 있습니다.

top을 완성했으니 이제 img_section 부분을 해보도록 하겠습니다. 이미지들이 슬라이드 될 수도 있기 때문에 img_section에 trans_inner를 넣고 이미지를 넣도록 하겠습니다.

파일명 : index.html


...

                        <header class="top">
                            <div class="user_container">
                                <div class="profile_img">
                                    <img src="imgs/thumb.jpeg" alt="프로필이미지">
                                </div>
	                              <div class="user_name">
                                    <div class="nick_name m_text">KindTiger</div>
                                    <div class="country s_text">Seoul, South Korea</div>
                                </div>
                            </div>
                            <div class="sprite_more_icon" data-name="more"></div>
                        </header>	

                        <div class="img_section">
                            <div class="trans_inner">
                                <div>
                                    <img src="imgs/img_section/img01.jpg" alt="visual01">
                                </div>
                            </div>
                        </div>

...

파일명 : css/style.css


...

.m_text{
    font-size: 14px;
    font-weight: bold;
}

.s_text{
    font-size: 12px;
}

.contents .img_section{
    overflow: hidden; /* 자식이 부모의 크기를 넘지 않도록 한다 */
}

.contents .img_section img{
    width: 100%; /* 부모의 크기 100%를 받는다 */
}

이쯤되면 contents 박스 안에 있던 높이 값이 필요 없게 됩니다. 높이 값은 contents 박스 자체에서 높이 값을 주어서 고정하기 보다는 자식들에게 높이 값을 주어 안에 있는 요소들로 높이 값이 유동적으로 변하는 것이 더 바람직합니다.

파일명 : css/style.css


...

.contents{
    width: 614px;
    /* height: 500px; */
    border: 1px solid rgba(0,0,0,0.09);
    border-radius: 3px; /* 테두리를 둥글게 만듬 */
    margin-bottom: 60px; /* 다른 contents들이 밀려야 되기 때문에 사이에 여백을 준다 */
    background: white;
}

...

아이콘 박스들을 추가해보겠습니다.

아이콘 박스에서도 top과 같이 왼쪽과 오른쪽으로 나누어져서 배치되어 있습니다. 왼쪽 아이콘에는 하트가 들어올 것인데 여기에는 애니메이션이 적용되야 함으로 한 번 감싸주는 형태를 만들겠습니다. 마찬가지로 가로 배치를 위해서 display: flex; 와 justify-content: space-between;를 사용합니다.

파일명 : index.html


...			

                        <div class="img_section">
                            <div class="trans_inner">
                                <div>
                                    <img src="imgs/img_section/img01.jpg" alt="visual01">
                                </div>
                            </div>
                        </div>

                        <div class="bottom_icons">
                            <div class="left_icons">
                                <div class="heart_btn">
                                    <div class="sprite_heart_icon_outline" name="39" data-name="heartbeat"></div>
                                </div>
                                <div class="sprite_bubble_icon"></div>
                                <div class="sprite_share_icon" data-name="share"></div>
                            </div>

                            <div class="right_icon">
                                <div class="sprite_bookmark_outline" data-name="bookmark"></div>
                            </div>
                        </div>

...

파일명 : css/style.css


...

.contents .img_section{
    overflow: hidden;/* 자식이 부모의 크기를 넘지 않도록 한다 */
}

.contents .img_section img{
    width: 100%; /* 부모의 크기 100%를 받는다 */
}

.contents .bottom_icons{
    display: flex; /* 가로 배치 */
    justify-content: space-between; /* x축 정렬_공간을 자동으로 분배함 */
    align-items: center; /* y축 가운데 정렬 */
    padding: 10px 20px;
}

.contents .bottom_icons .left_icons{
    display: flex; /* 가로 배치 */
}

.contents .bottom_icons .left_icons > div{
    margin-right: 10px;
}

다음으로는 좋아요 부분을 만들어 보도록 하겠습니다.

파일명 : index.html


...

                        <div class="bottom_icons">
                            <div class="left_icons">
                                <div class="heart_btn">
                                    <div class="sprite_heart_icon_outline" name="39" data-name="heartbeat"></div>
                                </div>
                                <div class="sprite_bubble_icon"></div>
                                <div class="sprite_share_icon" data-name="share"></div>
                            </div>

                            <div class="right_icon">
                                <div class="sprite_bookmark_outline" data-name="bookmark"></div>
                            </div>
                        </div>
								
                        <div class="likes m_text">
                            좋아요
                            <span id="count">2,346</span>
                            개
                        </div>

...

파일명 : css/style.css


...

.contents .bottom_icons{
    display: flex; /* 가로 배치 */
    justify-content: space-between; /* x축 정렬_공간을 자동으로 분배함 */
    align-items: center; /* y축 가운데 정렬 */
    padding: 10px 20px;
}

.contents .bottom_icons .left_icons{
    display: flex; /* 가로 배치 */
}

.contents .bottom_icons .left_icons > div{
    margin-right: 10px;
}

.contents .likes{
    padding: 5px 20px;
    color: #262626;
}

다음에는 comment_container와 타이머 부분을 같이 해보도록 하겠습니다.

아마 이제 여러분들도 다들 패턴을 파악해서 display:flex; 와 justify-content: space-between; 으로 가로 배치를 충분히 하실 수 있으실 거라는 생각이 듭니다.

파일명 : index.html


...

                        <div class="likes m_text">
                            좋아요
                            <span id="count">2,346</span>
                            개
                        </div>

                        <div class="comment_container">
                            <div class="comment">
                                <div class="nick_name m_text">dongdong2</div>
                                <div>강아지가 너무 귀여워요~!</div>
                            </div>
                            <div class="small_heart">
                                <div class="sprite_small_heart_icon_outline"></div>
                            </div>
                        </div>

                        <div class="timer">1시간 전</div>

...

파일명 : css/style.css


...

.contents .likes{
    padding: 5px 20px;
    color: #262626;
}

.contents .comment_container{
    display: flex; /* 가로 배치 */
    justify-content: space-between;
    align-items: center;
    padding: 5px 20px;
}

.contents .comment_container .comment{
    display: flex; /* 가로 배치 */
    font-size: 14px;
}

.contents .comment_container .comment .nick_name{
    margin-right: 10px; /* 아이디와 댓글 간의 거리 설정 */
}

.contents .timer{
    font-size: 10px;
    letter-spacing: 0.2px; /* 자간 조정 */
    color: #999;
    border-bottom: 1px solid rgba(0,0,0,0.09); /* 아래쪽 실선 추가 */
    padding: 10px 20px;
}

comment_field를 만들어보도록 하겠습니다. 입력을 할 수 있는 부분이기 때문에 input 태그가 들어가고 업로드하는 게시 버튼이 들어갑니다.

파일명 : index.html


...

                        <div class="comment_container">
                            <div class="comment">
                                <div class="nick_name m_text">dongdong2</div>
                                <div>강아지가 너무 귀여워요~!</div>
                            </div>
                            <div class="small_heart">
                                <div class="sprite_small_heart_icon_outline"></div>
                            </div>
                        </div>

                        <div class="timer">1시간 전</div>

                        <div class="comment_field">
                            <input type="text" placeholder="댓글달기...">
                            <div class="upload_btn m_text">게시</div>
                        </div>

...

파일명 : css/style.css


...

.contents .comment_container{
    display: flex; /* 가로 배치 */
    justify-content: space-between;
    align-items: center;
    padding: 5px 20px;
}

.contents .comment_container .comment{
    display: flex; /* 가로 배치 */
    font-size: 14px;
}

.contents .comment_container .comment .nick_name{
    margin-right: 10px; /* 아이디와 댓글 간의 거리 설정 */
}

.contents .timer{
    font-size: 10px;
    letter-spacing: 0.2px; /* 자간 조정 */
    color: #999;
    border-bottom: 1px solid rgba(0,0,0,0.09); /* 아래쪽 실선 추가 */
    padding: 10px 20px;
}

.contents .comment_field{
    min-height: 56px;
    padding: 0 20px;
    position: relative; /* 자식들이 absolute로 자리를 잡기 위함 */ 
}

.contents .comment_field input{
    width: 100%;
    height: 56px;
    border: none;
    outline: none;
    background: transparent; /* 투명하게 설정 */
}

.contents .comment_field input:focus ~ .upload_btn{
    pointer-events: initial; /* 포인터 이벤트 초기화 */ 
    opacity: 1;
}

.contents .comment_field .upload_btn{
    color: #3897f0;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%); /* y축으로 중앙 정렬 */
    cursor: pointer;
    pointer-events: none; /* 처음에는 클릭이 되지 않도록 한다 */
    opacity: 0.6;
}

마지막으로 버튼을 선택할 수 있도록 cursor를 포인터로 주겠습니다.

파일명 : css/style.css


...

.contents .bottom_icons .left_icons > div{
    margin-right: 10px;
    cursor: pointer; /* 누를 수 있도록 하기 위함 */
}

.contents .bottom_icons .right_icon > div{
    cursor: pointer; /* 누를 수 있도록 하기 위함 */
}

...

이렇게 해서 contents를 크게 만들었습니다. 많이 복사가 되면 복사가 되는 대로 타임라인처럼 나오게 됩니다. 이제 이것을 back-end에서 데이터로 하나씩 불러오도록 하겠습니다.

완성된 코드는 아래와 같습니다.

파일명 : index.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="js/main.js"></script>
</head>
<body>
    <section id="container">
        <header id="header">
            <section class="inner">
					      <h1 class="logo">
						        <a herf="index.html">
                        <div class="sprite_insta_icon"></div>
                        <div class="sprite_write_logo"></div>
						        </a>
					      </h1>

                <div class="search_box">
                    <input type="text" placeholder="검색" id="search-field">
                    <div class="fake_field">
                        <span class="sprite_small_search_icon"></span>
                        <span>검색</span>
                    </div>
                </div>

                <div class="right_icons">
                    <div class="sprite_camera_icon"></div>
                    <div class="sprite_compass_icon"></div>
                    <div class="sprite_heart_icon_outline"></div>
                    <div class="sprite_user_icon_outline"></div>
                </div>
            </section>
        </header>

        <section id="main_container">
            <div class="inner">
                <div class="contents_box">
                    <article class="contents">
                      <header class="top">
                            <div class="user_container">
                                <div class="profile_img">
                                    <img src="imgs/thumb.jpeg" alt="프로필이미지">
                                </div>
	                              <div class="user_name">
                                    <div class="nick_name m_text">KindTiger</div>
                                    <div class="country s_text">Seoul, South Korea</div>
                                </div>
                            </div>
                            <div class="sprite_more_icon" data-name="more"></div>
                        </header>	

                        <div class="img_section">
                            <div class="trans_inner">
                                <div>
                                    <img src="imgs/img_section/img01.jpg" alt="visual01">
                                </div>
                            </div>
                        </div>

                        <div class="bottom_icons">
                            <div class="left_icons">
                                <div class="heart_btn">
                                    <div class="sprite_heart_icon_outline" name="39" data-name="heartbeat"></div>
                                </div>
                                <div class="sprite_bubble_icon"></div>
                                <div class="sprite_share_icon" data-name="share"></div>
                            </div>
                            <div class="right_icon">
                                <div class="sprite_bookmark_outline" data-name="bookmark"></div>
                            </div>
                        </div>

                        <div class="likes m_text">
                            좋아요
                            <span id="count">2,346</span>
                            개
                        </div>

                        <div class="comment_container">
                            <div class="comment">
                                <div class="nick_name m_text">dongdong2</div>
                                <div>강아지가 너무 귀여워요~!</div>
                            </div>
                            <div class="small_heart">
                                <div class="sprite_small_heart_icon_outline"></div>
                            </div>
                        </div>

                        <div class="timer">1시간 전</div>

                        <div class="comment_field">
                            <input type="text" placeholder="댓글달기...">
                            <div class="upload_btn m_text">게시</div>
                        </div>
                    </article>
                </div>
            </div>
        </section>	
    </section>
</body>
</html>

파일명 : css/style.css


.sprite_insta_icon{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -53px -235px;
    width: 22px;
    height: 22px;
}

.sprite_write_logo{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -94px -72px;
    width: 103px;
    height: 29px;
}

.sprite_compass_icon{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -130px -286px;
    width: 23px;
    height: 23px;
}

.sprite_user_icon_outline{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -272px -182px;
    width: 22px;
    height: 24px;
}

.sprite_heart_icon_outline{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -52px -261px;
    width: 24px;
    height: 22px;
}

.sprite_small_search_icon{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -337px -246px;
    width: 10px;
    height: 10px;
}

.sprite_more_icon{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -301px -218px;
    width: 15px;
    height: 3px;
}

.sprite_bubble_icon{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -239px -202px;
    width: 24px;
    height: 24px;
}

.sprite_share_icon{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -324px -52px;
    width: 21px;
    height: 24px;
}

.sprite_bookmark_outline{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -237px -286px;
    width: 19px;
    height: 24px;
}

.sprite_bookmark_outline.on{
    background: url('../imgs/background01.png') no-repeat -159px -286px;
    width: 19px;
    height: 24px;
}

.sprite_small_heart_icon_outline{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -323px -274px;
    width: 12px;
    height: 11px;
}

.sprite_camera_icon{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -271px -104px;
    width: 24px;
    height: 22px;
}

.sprite_insta_big_logo{
    display: inline-block;
    background: url('../imgs/background02.png') no-repeat -98px -150px;
    width: 175px;
    height: 51px;
}

.sprite_plus_icon{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -187px -202px;
    width: 23px;
    height: 23px;
}

body{
    background: #fafafa;
}

#header{
    width: 100%; /* 공중에 뜨기 위함 */
    position: absolute; /* 가장 위에 올라가 있어야 하기 위함 */
    z-index: 999; /* absolute의 경우 최소 x축에서 1개 y축에서 1개의 값을 주어야 함 */
    left: 0; top: 0;
    background: white;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

#header .inner{ /* inner 안에 컨텐츠를 넣으면 안에 값이 들어옴 */
    width: 975px;
    height: 77px;
    margin: 0 auto; /* 가운데 정렬 */
    display: flex; /* 가로 배치 */
    justify-content: space-between; /* x축 정렬_공간을 자동으로 분배함 */
    align-items: center; /* y축 정렬 */
}

#header .inner .logo > a{
    color: transparent; /* 배경색을 투명하게 만듬 */
}

#header .inner .logo div{
    vertical-align: middle;
}

#header .inner .logo .sprite_insta_icon{
    position: relative; /* after에게 위치 기준을 전달해주기 위함 */
    margin-right: 30px;
}

#header .inner .logo .sprite_insta_icon:after{
    content: ''; /* 공백을 받아옴 */
    width: 1px;
    height: 28px;
    background: #000;
    position: absolute; /* 부모를 기준으로 위치를 잡음 */
    right: -15px;
    top: -4px;
}

#header .search_box{
    position: relative; /* 기준점을 잡고 가로 배치 */
}

#search-field{
    width: 185px;
    height: 28px;
    background: #fafafa;
    border: 1px solid #dbdbdb;
    border-radius: 3px;
    padding: 3px 30px; /* 위아래 양쪽 */
    color: #999;
    font-weight: 400;
    text-align: left; /* 글자 입력 시 왼쪽부터 보이도록 하기 위함 */
    font-size: 14px;
    outline: none; /* 포커스 했을 때 나타나는 파란선 */
}

#search-field::placeholder{ /* 콜론2개(::) - 속성선택자 */
    font-size: 0; /* 포커스가 되지 않을 때 검색 글자가 보이지 않도록 하기 위함 */
}

#search-field:focus::placeholder{
    font-size: 14px; /* 포커스 되었을 때 검색 글자가 보이도록 한다 */
}

#header .search_box .fake_field{
    position: absolute; /* 검색 창 위에 글자를 보이기 위함 */
  	/* 가운데 배치하는 공식 */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none; /* 검색을 눌렀을 때에는 포인터 인식이 안 됨 */
}

/* 물결(~) - 근처에 있는 fake_field */
#search-field:focus~.fake_field > span:nth-child(1){ 
    transform: translateX(-105px); /* 돋보기를 왼쪽으로 이동 */
}

#search-field:focus~.fake_field > span:nth-child(2){ 
    display: none; /* 포커스 되었을 때 글자 숨기기 */
}

#header .right_icons{
    width: 132px; /* 부모값 좌우값 고정 */
    display: flex;
    justify-content: space-between; /* x축 정렬_공간을 자동으로 분배함 */
}

#header .inner .logo div:nth-child(2){
    transform: translateY(2px);
}

#header .inner .logo .sprite_insta_icon{
    position: relative; /* after에게 위치 기준을 전달해주기 위함 */
    margin-right: 30px;
}

#main_container{
    padding-top: 130px;
    display: flex; /* 컨텐츠가 가운데에 위치할 수 있도록 함 */
    justify-content: center; /* x축 가운데 정렬 */
}

#main_container .inner{
    width: 935px;
    /* height: 500px; */
    /* background: red; */
}

.contents_box{

}

.contents{
    width: 614px;
    /* height: 500px; */
    border: 1px solid rgba(0,0,0,0.09);
    border-radius: 3px; /* 테두리를 둥글게 만듬 */
    margin-bottom: 60px; /* 다른 contents들이 밀려야 되기 때문에 사이에 여백을 준다 */
    background: white;
}

.contents .top{
    display: flex; /* 가로 배치 */
    justify-content: space-between; /* x축 정렬_공간을 자동으로 분배 */
    align-items: center;
    padding: 10px 20px; /* 위아래 양쪽 */
}

.contents .top .profile_img{
    width: 32px;
    height: 32px;
    border-radius: 50%; /* 테두리를 둥글게 설정 50% -> 원의 형태 */
    overflow: hidden; /* 자식이 크기가 넘치지 않도록 한다 */
    margin-right: 10px;
}

.contents .top .profile_img img{
    width: 100%; /* 100%가 없을 경우 이미지가 들어가지 않음 */
}

.contents .top .user_container{
    display: flex; /* 가로 배치 */
}

.m_text{
    font-size: 14px;
    font-weight: bold;
}

.s_text{
    font-size: 12px;
}

.contents .img_section{
    overflow: hidden; /* 자식이 부모의 크기를 넘지 않도록 한다 */
}

.contents .img_section img{
    width: 100%; /* 부모의 크기 100%를 받는다 */
}

.contents .bottom_icons{
    display: flex; /* 가로 배치 */
    justify-content: space-between; /* x축 정렬_공간을 자동으로 분배함 */
    align-items: center; /* y축 가운데 정렬 */
    padding: 10px 20px;
}

.contents .bottom_icons .left_icons{
    display: flex; /* 가로 배치 */
}

.contents .bottom_icons .left_icons > div{
    margin-right: 10px;
}

.contents .likes{
    padding: 5px 20px;
    color: #262626;
}

.contents .comment_container{
    display: flex; /* 가로 배치 */
    justify-content: space-between;
    align-items: center;
    padding: 5px 20px;
}

.contents .comment_container .comment{
    display: flex; /* 가로 배치 */
    font-size: 14px;
}

.contents .comment_container .comment .nick_name{
    margin-right: 10px; /* 아이디와 댓글 간의 거리 설정 */
}

.contents .timer{
    font-size: 10px;
    letter-spacing: 0.2px; /* 자간 조정 */
    color: #999;
    border-bottom: 1px solid rgba(0,0,0,0.09); /* 아래쪽 실선 추가 */
    padding: 10px 20px;
}

.contents .comment_field{
    min-height: 56px;
    padding: 0 20px;
    position: relative; /* 자식들이 absolute로 자리를 잡기 위함 */ 
}

.contents .comment_field input{
    width: 100%;
    height: 56px;
    border: none;
    outline: none;
    background: transparent; /* 투명하게 설정 */
}

.contents .comment_field input:focus ~ .upload_btn{
    pointer-events: initial; /* 포인터 이벤트 초기화 */ 
    opacity: 1;
}

.contents .comment_field .upload_btn{
    color: #3897f0;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%); /* y축으로 중앙 정렬 */
    cursor: pointer;
    pointer-events: none; /* 처음에는 클릭이 되지 않도록 한다 */
    opacity: 0.6;
}

.contents .bottom_icons .right_icon > div{
    cursor: pointer; /* 누를 수 있도록 하기 위함 */
}