Westagram 메인페이지 구현
> Westagram 메인페이지 시작
westagram 로그인 페이지를 구현한뒤 첫 페이지 시작을 앞두고 여러 문서들을 찾아보며 css의 구조와 html 의 구조를 파악했다
<body>
<div class="container">
<div class="nav-container">
<nav class="nav">
<h1>Westargram</h1>
<div class="nav-search-box">
<input class="nav-search-input" type="text" placeholder="검색">
</div>
<div class="nav-content-box">
<div class="nav-content-list">
<img
src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/bearu/explore.png"
/>
<img
src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/bearu/heart.png"
/>
<img
src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/bearu/profile.png"
/>
</div>
</div>
</div>
</div>인스타그램 상단부분을 nav 태그로 감싸고 dav class 로 하나씩 클래스네임을 부여했다.
<키포인트>클래스네임을 남이봐도 알아 볼 수 있고 쉽게 찾을수 있는 네임으로 지정을 해야한다
>하단부 페이지 만들기
아래는 HTML 코드~
코드를 입력하세요<main>
<div class="feeds">
<article>
<div class="ss">
<div class="profile">
<img src="https://search.pstatic.net/common/?src=http%3A%2F%2Fpost.phinf.naver.net%2FMjAyMTAzMDlfMiAg%2FMDAxNjE1MjY3NjE3NDAx.EJ4minHh6DuVzMcsSog6CWIB-R3j16NVXA3G1FQJZ0Mg.o45QtWy7yEUgIiQtpd-1nZLwRF38HL94XEv4nrGTlzQg.PNG%2FIvqncdOv6zPcEKFsDE3blh1bEPxA.jpg&type=a340"/>
<span class="C9">C9</span>
</div>
<span class="menuIcon"><i class="fas fa-ellipsis-h"></i></span>
</div>
<img src="https://blog.kakaocdn.net/dn/w88bj/btqT3sO3p9L/MiIstaAS8XhnxSqmJ0qjM0/img.png"/>
<div class="">
<div class="imoticon">
<i class="fas fa-heart"></i>
<i class="far fa-paper-plane"></i>
<i class="far fa-comment"></i>
</div>
<div class="">
<span class="like1"></span>
<span class="like2"></span>
<span class="love"><b>Bang민아</b>님 3700명이 좋아합니다</span>
<div class="could"><pre><b>Could_9_ </b> 한 겨울밤의 꿈</pre></div>
<div class="five">댓글 5개 더보기</div>
<div class="six">6시간전</div>
<ul id="commentLists">
<li>
<span class="Rona">Ronaldo</span>
<span>Heart..</span>
</li>
</ul>
</div>
<div class="comment">
<input id="commentInput" type="text" placeholder=" 댓글 달기..." >
<button id="sumit">게시</button>
</div>
</div>
</article>
<div class="main-right">
<div class="main-top">
<img src=""/>
<span class="C8">C9</span><span class="C7">전환</span>
</div>
<p>회원님을 위한추천</p>
<div class="gangchu">
<img src="https://cdn.interfootball.co.kr/news/photo/202008/500472_400475_2412.png"/>
<span class="son">Son7</span><span class="son1">팔로우</span>
</div>
<div class="gangchu">
<img src="">
<span class="son">Kim 흥 Kuk</span><span class="son2">팔로우</span>
</div>
<div class="gangchu">
<img src="https://media.bunjang.co.kr/product/158753670_1_1625837846_w180.jpg"/>
<span class="son">Ralo</span><span class="son3">팔로우</span>
</div>
<div class="gangchu">
<img src="">
<span class="son">GAMST</span><span class="son4">팔로우</span>
</div>
</div>
</div>
</main>
<script type="text/javascript" src="main.js">
</script>
</body>
</html>바디태그 안 메인태그로 감쌋고 그다음 article 태그와 main-right 태그를 나눠 각자의 박스로 나눴습니다
또한 article 안에 profile 박스 이미지 박스 등등 각 개별적인 박스를 만들었습니다.
> <키포인트>
여기서 키포인트 !!! 처음에 제가 아무것도 모를땐 처음 박스의 크기를 height , width 로 고정해 만들어 그안에 이미지를 넣고 채워나갔습니다 . 그러다 보니.. 박스안에 추가가 될때마다 박스를 벗어나는 현상이 일어났습니다.
그렇게 한참을 고민하던중 뒤에있던 성현좌 성현느님이 나타나 처음 박스에 width 값과 height 값을 px로 정하지말고 박스안에 있는 이미지로 박스의 크기를 정하면 된다고 힌트를 주었습니다 .
조언을 듣고 원래 하던 html 과 css를 다 지우고 새로 만들었다(...또르르...)
눈물젖은 초코파이를 먹으며 완성된 최종본
스크롤을 내려야해서 밑에 댓글까지는 안보이지만 로그인페이지에서는 만족못했던 느낌을 westargram 피드를 만들며 느꼈다랄까... 이런 모자란작품도 잘했다고 박수쳐주는 Wecode.. 당신들 뭐야..? 자기 할꺼 바쁜중에서 물어볼때마다 귀찮았을텐데 친절하게 잘 가르쳐준 동기들과 멘토님들께 감사드립니다 (짝짝)
CSS코드
.nav {
display: flex;
align-items: center;
justify-content: space-evenly;
border: 1px solid #dbdbdb;
}
.feeds {
display: flex;
}
.ss {
display: flex;
justify-content: space-between;
}
.nav-search-input {
text-align: center;
}
main article {
border: 0.5px solid #dbdbdb;
margin-left: 350px;
margin-top: 100px;
}
.profile {
border: 1px solid white;
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
padding-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
}
.profile img {
width: 50px;
height: 50px;
object-fit: cover;
border-radius: 50%;
}
.C9 {
font-size: 23px;
padding-top: 10px;
padding-left: 10px;
}
.menuIcon {
display: flex;
}
i {
font-size: 30px;
padding-top: 15px;
}
article img {
width: 600px;
}
.imoticon {
padding-bottom: 20px;
padding-left: 20px;
}
.like1 {
border: 1px solid white;
border-radius: 50%;
padding-left: 15px;
}
.like2 {
border: 1px solid white;
border-radius: 50%;
}
.like1 img {
width: 50px;
height: 50px;
overflow: hidden;
object-fit: cover;
margin: auto;
border-radius: 50%;
}
.like2 img {
width: 50px;
height: 50px;
overflow: hidden;
object-fit: cover;
margin: auto;
border-radius: 50%;
}
.love {
font-size: 13px;
padding-left: 20px;
}
#commentLists {
list-style: none;
padding-left: 20px;
}
.could {
padding-left: 20px;
}
.five {
padding-left: 20px;
}
.six {
padding-left: 20px;
}
.Rona {
font-size: 18px;
font-weight: bold;
}
.comment {
display: flex;
}
.comment input {
width: 550px;
height: 30px;
border: 0.5px solid white;
}
button {
font-size: 15px;
border: 0.5px solid white;
cursor: pointer;
font-weight: bold;
color: cadetblue;
background-color: white;
}
.main-right {
border: 1px solid white;
margin-top: 80px;
margin-left: 60px;
}
.img-box {
border: 1px solid black;
}
.main-right img {
width: 50px;
height: 50px;
border-radius: 50%;
}
.main-top {
display: flex;
padding-left: 33px;
padding-top: 20px;
}
.C8 {
font-size: 20px;
padding: 10px;
}
.C7 {
padding-top: 15px;
padding-left: 130px;
color: rgb(77, 131, 212);
cursor: pointer;
font-size: 13px;
}
p {
padding-top: 30px;
font-size: 15px;
color: gray;
}
.son {
font-size: 13px;
margin-bottom: 10px;
font-weight: 600;
padding-left: 10px;
}
.son1 {
padding-left: 119px;
color: rgb(77, 131, 212);
cursor: pointer;
font-size: 13px;
}
.son2 {
padding-left: 81px;
color: rgb(77, 131, 212);
cursor: pointer;
font-size: 13px;
}
.son3 {
padding-left: 125px;
color: rgb(77, 131, 212);
cursor: pointer;
font-size: 13px;
}
.son4 {
color: rgb(77, 131, 212);
padding-left: 108px;
cursor: pointer;
font-size: 13px;
}
.gangchu {
display: flex;
align-items: center;
padding-left: 40px;
padding-bottom: 30px;
}
제일 자신없는 css 코드 수정해야할 부분이 너무많다 .. .
수정해야할 부분: classname 을 보다 정확이 누가봐도 알아볼 수 있게 정리를 잘해야겠다
<여기서 키포인트>
css를 순차적으로 써야지 수정 및 확인이 쉽다. 두서없이 쓰면 보는사람도 수정하는 본인도 힘들다는 사실!
다음 작품에서는 더 깔끔한 작품으로 돌아오겠습니다 !
뿅Author And Source
이 문제에 관하여(Westagram 메인페이지 구현), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@kimjaehogu/Westargram-메인페이지-구현저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
