인스타 클론 코딩 작업중

인스타 클론 코딩 중 css

 @charset "UTF-8";
 /*기본적인 레이아웃 설정*/
        #wrapper {
            
            max-width: 469px;
            height: 900px;
            margin: 0 auto;
            -ms-overflow-style: none;
            border: 1px solid gray;

        }

        #header_contanier {
            width: 100%;
            height: 5%;            
            border-bottom: 1px solid #e5e5e5;
        }

        #footer_contanier {
            width: 100%;
            height: 5%;
            
            overflow: hidden;
            display: flex;
            align-items: flex-end;
            position: sticky;
            top: 100px;
        }

        #section_contanier {
            width: 100%;
            height: 90%;
            
            overflow: scroll;
            
            border-bottom: 1px solid #e5e5e5;

        }

        #section_contanier::-webkit-scrollbar {
            display: none;
        }

        /*header bar 스타일*/
        #header_contanier {
            display: flex;
            justify-content: space-between
        }

        #header_contanier div {
            margin: 2%;
        }

        #header_box1 {}

        #header_box2 {}

        #header_box3 {}

        /*header article 스타일*/
        #header_article {
            display: flex;           
            width: 100%;
            height: 15%;
            overflow: scroll;
            border-bottom: 1px solid #e5e5e5;
        }

        #header_article::-webkit-scrollbar {
            display: none;
        }

        .mystory_box {
            margin: 1% 2% 2% 2%;
            text-align: center;
            width: 150px;
            height: 150px; 
            border-radius: 70%;
   
        }
        .mystory_box > .img{
            
        }
        .mystory_box > P{
            margin: 5%;
        }

        /*section_article 설정 */
        .header_menu_article {
            
            display: flex;
            justify-content: space-between
        }

        .header_menu_article>i {
            margin: 1% 3%;
            flex: 1 1 1;
        }

        .header_menu_article>p {
            margin: auto;
            flex: 1 1 0;
            font-weight: bold;
        }

        /*article */
        .article_img {
            
            background-size: cover;
            background-repeat: no-repeat;
            background-position: 50% 50%;
            height: 480px;

        }

        .article_menu {
           
            display: flex;
            justify-content: flex-start;
            flex: 1 1 0;
        }

        .menu_box1 {
            padding: 3%;

            flex: 0
        }

        .menu_box2 {
            padding: 3%;
            flex: 0
        }

        .menu_box3 {

            padding: 3%;
            flex: 1
        }

        .menu_box4 {
            padding: 3%;
            flex: 0 0 0;
        }
        /*article-footer-header 부분 설정*/
        .article_footer_header{
            margin: 0 2%;
            display: flex;
        }
        .article_footer_header p{
            margin: auto 2%;
        }
        .article_footer_header > p > span{
            font-weight: bold;
        }
        /*article-footer-section 부분 설정*/
        .reple{           
        }        
               
        .reple > span{
            margin: 10px;
            font-weight: bold;
        }
        .time{
            margin: 30px 10px;
        }
        /*section-footer 부분 설정*/
        #footer_contanier{
            padding: 0px;
        }
        #footer_contanier ul {
            width: 100%;
            display: flex;
            justify-content: space-between;
            list-style: none;
            margin: 0;
            padding: 0;
        }
        #footer_contanier ul li{
            margin: 2%;
        }

인스타 클론 코딩 html부분

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

    <link rel="stylesheet" href="/homework2.css">
</head>

<body>
    <header>

    </header>
    <section id="wrapper">
        <div id="header_contanier">
            <div id="header_box1">
                <i class="fab fa-instagram fa-lg"></i>
            </div>
            <div id="header_box2">instagram</div>
            <div id="header_box3">
                <i class="far fa-paper-plane fa-lg"></i>
            </div>
        </div>
        <div id="section_contanier">
            <div id="header_article">
                <div class="mystory_box"><i class="fas fa-user-circle fa-5x"></i>
                    <p>내스토리</p>
                </div>
                <div class="mystory_box"><i class="fas fa-user-circle fa-5x"></i>
                    <p>내스토리</p>
                </div>
                <div class="mystory_box"><i class="fas fa-user-circle fa-5x"></i>
                    <p>내스토리</p>
                </div>
                <div class="mystory_box"><i class="fas fa-user-circle fa-5x"></i>
                    <p>내스토리</p>
                </div>
                <div class="mystory_box"><i class="fas fa-user-circle fa-5x"></i>
                    <p>내스토리</p>
                </div>
                <div class="mystory_box"><i class="fas fa-user-circle fa-5x"></i>
                    <p>내스토리</p>
                </div>
                <div class="mystory_box"><i class="fas fa-user-circle fa-5x"></i>
                    <p>내스토리</p>
                </div>
            </div>
            <div class="section_article">
                <div class="header_menu_article">
                    <i class="fas fa-user-circle fa-2x"></i>
                    <p>이용자</p>
                    <i class="fas fa-ellipsis-h fa-2x"></i>
                </div>
                <div class="article_img" style="background-image: url('https://cdn.mkhealth.co.kr/news/photo/202004/img_MKH200427004_0.jpg')">
                </div>
                <div class="article_menu">
                    <div class="menu_box1"><i class="far fa-heart fa-2x"></i></div>
                    <div class="menu_box2"><i class="far fa-comment fa-flip-horizontal fa-2x"></i></div>
                    <div class="menu_box3"><i class="far fa-paper-plane fa-2x"></i></div>
                    <div class="menu_box4"><i class="fas fa-share-alt fa-2x"></i></div>
                </div>
                <div class="article_footer">
                    <div class="article_footer_header">
                        <i class="fas fa-user-circle fa-2x"></i>
                        <p><span>이용자</span>님 외 <span>6,6712명</span>이 좋아합니다.</p>
                    </div>
                    <div class="reple"><span>이용자</span> 안녕하세요</div>
                    <div class="time">8시간 전</div>
                </div>
            </div>
            <div class="section_article">
                <div class="header_menu_article">
                    <i class="fas fa-user-circle fa-2x"></i>
                    <p>이용자</p>
                    <i class="fas fa-ellipsis-h fa-2x"></i>
                </div>
                <div class="article_img" style="background-image: url('https://cdn.mkhealth.co.kr/news/photo/202004/img_MKH200427004_0.jpg')">
                </div>
                <div class="article_menu">
                    <div class="menu_box1"><i class="far fa-heart fa-2x"></i></div>
                    <div class="menu_box2"><i class="far fa-comment fa-flip-horizontal fa-2x"></i></div>
                    <div class="menu_box3"><i class="far fa-paper-plane fa-2x"></i></div>
                    <div class="menu_box4"><i class="fas fa-share-alt fa-2x"></i></div>
                </div>
                <div class="article_footer">
                    <div class="article_footer_header">
                        <i class="fas fa-user-circle fa-2x"></i>
                        <p><span>이용자</span>님 외 <span>6,6712명</span>이 좋아합니다.</p>
                    </div>
                    <div class="reple"><span>이용자</span> 안녕하세요</div>
                    <div class="time">8시간 전</div>
                </div>
            </div>
            <div class="section_article">
                <div class="header_menu_article">
                    <i class="fas fa-user-circle fa-2x"></i>
                    <p>이용자</p>
                    <i class="fas fa-ellipsis-h fa-2x"></i>
                </div>
                <div class="article_img" style="background-image: url('https://cdn.mkhealth.co.kr/news/photo/202004/img_MKH200427004_0.jpg')">
                </div>
                <div class="article_menu">
                    <div class="menu_box1"><i class="far fa-heart fa-2x"></i></div>
                    <div class="menu_box2"><i class="far fa-comment fa-flip-horizontal fa-2x"></i></div>
                    <div class="menu_box3"><i class="far fa-paper-plane fa-2x"></i></div>
                    <div class="menu_box4"><i class="fas fa-share-alt fa-2x"></i></div>
                </div>
                <div class="article_footer">
                    <div class="article_footer_header">
                        <i class="fas fa-user-circle fa-2x"></i>
                        <p><span>이용자</span>님 외 <span>6,6712명</span>이 좋아합니다.</p>
                    </div>
                    <div class="reple"><span>이용자</span> 안녕하세요</div>
                    <div class="time">8시간 전</div>
                </div>
            </div>
        </div>
        <div id="footer_contanier">
           <ul>
               <li><i class="fas fa-home fa-2x"></i></li>
               <li><i class="fas fa-search fa-2x"></i></li>
               <li><i class="far fa-plus-square fa-2x"></i></li>
               <li><i class="far fa-heart fa-2x"></i></li>
               <li><i class="fas fa-user-circle fa-2x"></i></li>
           </ul>
                
        </div>
    </section>
    <footer>

    </footer>
</body></html>

블록을 자유자제로 다루는게 쉽지 않다

float 요소를 좀더 연습해야함

'웹 개발 공부중' 카테고리의 다른 글

[web] LocalStorage, SessionStorage, Cookie의 차이점 (0)	2022.07.12
클라이언트/서버/API (0)	2022.01.19
pymongo CRUD (0)	2021.12.15
mongoDB시작하기 (0)	2021.12.15
파이썬 크롤링 기초 (0)	2021.12.15

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

하고싶은거 다해

인스타 클론 코딩 작업중

'웹 개발 공부중' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

인스타 클론 코딩 작업중

'웹 개발 공부중' 카테고리의 다른 글

관련글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역