3. content

• main_container
  • inner
    • contents_box : 내부 contents 배치

• index.html

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

• style.css

#main_container{
    padding-top: 130px;
    display: flex;
    justify-content: center; /*x축 가운데 정렬*/
}

#main_container .inner{
    width: 935px;
}

.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;
}

컨텐츠 영역 분리

1️⃣ top 영역

• 컨텐츠 내 프로필, 글자, 더보기 포함
• index.html
  • m_text/s_text를 통해 위치와 아이디 구분

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

• style.css

#main_container .inner{
    width: 935px;
}

.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;
    align-items: center;
    padding: 10px 20px;
}



.contents .top .profile_img{
    width: 32px;
    height: 32px;
    border-radius: 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;
}

2️⃣ img_section

• img_section
  • trans_inner : 이미지 슬라이드 가능하게 함
• index.html

<div class="contents_box">
                        <article class="contents">
                            <header class="top">
                                <div class="profile_img">
                                    <img src="imgs/thumb.jpeg" alt="프로필이미지">
                                </div>
                                <div class="user_name">
                                    <div class="nick_name m_text">SuJaang</div>
                                    <div class="country s_text">여의도</div>
                                </div>
                                <div class="sprite_more_icon" data-name="more"></div>
                            </header>

                            <div class="img_section">
                                <div class="trans_inner">
                                    <div>
                                        <img src="imgs/img01.jpeg" alt="img01">
                                    </div>
                                </div>
                            </div>
                        </article>

• style.css

.contents   .img_section{
    overflow: hidden;
}

.contents   .img_section    img{
    width: 100%;
}

• contents
  • top
    • profile_img
    • user_name
    • more
  • img_section
    • trans_inner

3️⃣ 아이콘 박스 추가

• top처럼 왼쪽, 오른쪽으로 나누어져서 배치 필요
  • 하트 : 애니메이션 적용 필요
  • left_icons : heart, 댓글, 공유
  • right_icons : bookmark
  • 가로 배치
    • display:flex
    • justify-content:space-between
• 왼쪽 하단부 좋아요, 개수 표시
  • m_text 재사용
• index.html

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

    </div>
  </div>
   <div class="right-icon">
       <div class="sprite_bookmark_outline" data-name="bookmark"></div>
       </div>
</div>
<div class="likes m_text">
    likes
	<span id="count">1,203</span>
</div>

• 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;
}

4️⃣ comment_container, timer

• comment_container
  • comment
    • nickname : 댓글 작성자
    • comment : 댓글
  • small_heart
    • small heart icon : 댓글 좋아요 기능
• timer : 몇시간 전
• comment_field
  • text : input
  • upload_btn : 게시 버튼

• index.html

<div class="comment_container">
    <div class="comment">
       <div class="nick_name m_text">JANG</div>
       <div>nice</div>
    </div>
  <div class="small_heart">
       <div class="sprite_small_heart_icon_outline"></div>
  </div>
</div>
<div class="timer">1hours </div>
<div class="comment_field">
   <input type="text" placeholder="댓글달기...">
   <div class="upload_btn m_text">게시</div>
</div>

-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;/*ID와 댓글 간의 거리*/
}


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

.contents   .bottom_icons   .right_icons>div{
    cursor:pointer; /*누를수 있게 함*/
}

.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;
 }


 .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%);
     cursor: pointer;
     /*pointer-events: none;*/
     opacity: 0.6;
 }

• 게시 클릭 : 글자가 투명하게 변함
• cursor : 해당 아이콘으로 가면 커서 모양이 포인터 모양으로 변경됨