저번주에 이사를 해서 블로그에 신경을 못썼다 🙄,, 다시 열심히 포스팅해야겠다(화이팅!)
오늘 인스타그램 시험을 쳤었다! 요번 인스타그램 실습 관련하여 코드와 결과화면을 올리고 나의 느낀 점에 대해 이야기해보도록 하겠다!
<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 |
댓글