본문 바로가기
웹/CSS

[코딩 공부_37] 인스타그램 실습하기

by BEE_0o0 2021. 3. 23.

저번주에 이사를 해서 블로그에 신경을 못썼다 🙄,, 다시 열심히 포스팅해야겠다(화이팅!)

오늘 인스타그램 시험을 쳤었다! 요번 인스타그램 실습 관련하여 코드와 결과화면을 올리고 나의 느낀 점에 대해 이야기해보도록 하겠다!

<home.html>

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css">
<title>instagram</title>
</head>
<body>
    <div id="app">
    <header>
        <ul class="gnb">
            <div class="inner">
                <li><i class="xi-camera-o xi-2x"></i></li>
                <li><img src="./images/insta-logo.png" alt="insta-logo" title="insa-logo"></li>
                <li><i class="xi-send xi-2x"></i></li>
            </div>
        </ul>
    </header>
    <main>
        <section class="story">
            <ul class="story-profile">
                <li>
                    <img src="./images/story-01.jpg" alt="story-01" title="story-01">
                    <h3>내 스토리</h3>
                </li>
                <li class="story-profile02">
                    <img src="./images/story-02.jpg" alt="story-02" title="story-02">
                    <h3>saera</h3>
                </li>
                <li class="story-profile03">
                    <img src="./images/story-03.jpg" alt="story-03" title="story-03">
                    <h3>justine</h3>
                </li>
            </ul>
        </section>
        <section class="feed-profile">
            <ul class="profile">
                <li>
                    <img src="./images/profile-01.jpg" alt="profile-01" title="profile-01">
                </li>
                <li class="hans">
                    <h4>hans.park.dev</h4>
                    <small>중구 국채보상로</small>
                </li>
                <li><i class="xi-ellipsis-h xi-2x"></i>zz</li>
            </ul>
        </section>
        <section class="feed-imggroup">
            <div class="feed-img">
                <img src="./images/feed-main.png" alt="feed-main" title="feed-main">
            </div>
        </section>
        <section class="feed-lower">
            <ul class="feed-icon">
                <li><i class="xi-heart-o xi-2x"></i></li>
                <li><i class="xi-speech-o xi-2x"></i></li>
                <li><i class="xi-send xi-2x"></i></li>
            </ul>
            <div class="feed-txt">
                <p><span>green</span>님 외 <span>100명</span>이 좋아합니다</p>
            </div>
        </section>
    </main>
    <footer>
        <ul class="font-icon">
            <li><i class="xi-home xi-2x"></i></li>
            <li><i class="xi-search xi-2x"></i></li>
            <li><i class="xi-plus-circle-o xi-2x"></i></li>
            <li><i class="xi-heart-o xi-2x"></i></li>
        </ul>
    </footer>
    </div>
</body>
</html>

 

 

<style.css>

@charset "utf-8";
@import "reset.css";

#app {
    width: 500px;
    margin: 5% auto;
    border: 1px solid #999;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.7);
    overflow: hidden;
}
/* header */
/* gnb */
header {
    width: 100%;
}
header .inner {
    width: 500px;
    height: 50px;
    border-bottom: 1px solid #999;
}
ul .gnb {
    font-size: 0;
    line-height: 50px;
    vertical-align: top;

}
header li {
    text-align: center;
}
header li:nth-child(1) {
    display: inline-block;
    font-size: 15px;
    width: 10%;
    margin-top: 10px;

}
header li:nth-child(2) {
    display: inline-block;
    font-size: 10px;
    width: 80%;
}
header li:nth-child(3) {
    display: inline-block;
    font-size: 15px;
}
.gnb .inner img {
    width: 100px;
    height: 29px;
    vertical-align: middle;
    margin-bottom: 16px;
}

/* main */
/* story */
.story {
    width: 500px;
    height: 150px;
    font-size: o;
    border-bottom: 1px solid #999;
}
.story-profile {
    margin: 10px;
    margin-top: 16px;
    display: inline-block;
}
.story-profile li img {
    border-radius: 80%;
    width: 100px;
}
.story-profile02 img, .story-profile03 img {
    border: 3px solid rgba(225, 129, 10, 0.696);
}
.story-profile li {
    margin: 0 10px 10px 0;
    display: inline-block;
}
.story-profile li h3 {
    font-size: 13px;
    color: #6e6e6e;
    text-align: center;
}
/* feed */
.feed-profile {
    width: 500px;
    height: 70px;
}
.profile {
    vertical-align: top;
    margin: 10px;
    margin-top: 20px;
    height: 70px;
    margin-left: 10px;
    width: 500px;
}
.profile li {
    display: inline-block;
    font-size: 0;
}
.profile img {
    border-radius: 80%;
    width: 50px;
    height: 100%;
}
.hans {
    vertical-align: top;
    margin-top: 7px;
    margin-left: 7px;
    width: 70%;
}
.profile h4 {
    font-size: 13px;
    margin-bottom: 5px;
}
.profile small {
    font-size: 11px;
}
.profile i {
    font-size: 40px;
    width: 10%;
    margin-left: 17px;
    vertical-align: bottom;
}
/* feddImggroup */
.feed-imggroup {
    width: 500px;

}
.feed-img {
    width: 100%;
    display: inline-block;
    text-align: center;
}
.feed-img img {
    width: 100%;
}
/* font icon */
.feed-lower {
    height: 80px;
    width: 500px;
    margin-top: 8px;
}
.feed-icon {
    margin-left: 15px;
    margin-top: 5px;
    margin-bottom: 13px;
}
.feed-icon li {
    display: inline-block;
    font-size: 1rem;
}
.feed-txt p {
    font-size: 16px;
    margin-left: 15px;
}
.feed-txt span {
    font-weight: bold;
}
/* footer */
.font-icon {
    width: 500px;
    height: 50px;
    font-size: 0;
    border-top: 1px solid #999;
}
.font-icon li {
    display: inline-block;
    width: 25%;
    font-size: 1rem;
    text-align: center;
    vertical-align: top;
    margin-top: 9px;

}

 

<reset.css>

@charset "utf-8";
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
a {
    color: inherit;
    text-decoration: none;
}
li {
    list-style: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: normal;
}

 

 

<결과화면>

느낀점 : 어제 실습을 하나 더 했었는데 내 뜻대로 안되서 계속 지웠다가 새로하고 지웠다가 새로하다보니 반도 못하고 제출헀었던 기억이 나서 요번 시험은 망했다,,라는 생각을 많이 했었다 😥

요번 시험을 치면서 코딩은 지웠다가 새로하는 방법으론 절대 완성할 수 없다는 걸 깨달았다

버그가 생기면 그 버그를 이해하고 그 부분을 고치려고 이것저것 시도해보고 이렇게 하는 구나 하면서 깨달아야 하는 거 같다

학교 다닐땐 코딩이 전공이 아니다보니 그냥 줄줄 따라가기만 급급했었는데 클론 코딩을 하니 확실히 이해력이 올라가고 실력이 올라가는 느낌이 들어서 뿌듯했다

* 하면서 어려웠던 점 : 클래스의 우선 순위, 그룹을 나누는 방법에 대해 아직 미흡하다고 느꼈다 

이론은 이해가 되는데 막상 실습해보면 이게 맞나? 하며 헷갈리기 일쑤이다 🤣

가로, 세로 중앙정렬은 이해가 됬지만 아직 그룹을 어떻게 만들어야 좋은 코딩인지 잘모르겠다

그리고 내가 생각했을 땐 A그룹에 이러한 스타일을 주면 변하겠지??했었는데 버그가 생긴 부분이 많았다 그 대부분의 버그가 클래스 우선순위 때문에 생겼다고 생각한다 !!

실습과 시험을 치면서 이러한 내용을 익혀야겠다는 다짐을 하게 되었다 ! 

저작자표시 비영리 변경금지

'웹 > CSS' 카테고리의 다른 글

[코딩 공부_39] 가상 요소 셀렉터  (0) 2021.03.26
[코딩 공부_38] li 간격 없애는 방법 3가지  (0) 2021.03.24
[코딩 공부_36] CSS로 카카오 실습 꾸미기  (0) 2021.03.17
[코딩 공부_35] bem class명 규칙  (0) 2021.03.16
[코딩 공부_34] css 복습하기  (0) 2021.03.14

관련글

댓글

티스토리툴바