Westagramホームページの実装
38385 ワード
>Westagramホームページへようこそ
westagramログインページを実装した後、1ページ目の開始前に複数のドキュメントを閲覧し、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>
Instagramの上端にnavタグで包み、dav classでクラス名を1つずつ付与しています。
<キーポイント>クラス名は、他の人が見ても分かるわかりやすいクラス名に指定します
>下部ページの作成
次は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タグをそれぞれのボックスに分けます。
この文書では、Profile Boxイメージボックスなどの個々のボックスを作成しました。
><キー>
ここのポイント!!最初は何も知らなかったとき、箱の大きさをheight,widthに固定し、画像を中に入れて埋めました。だから...箱に追加するたびに、箱から離れる現象が発生します。
こうしてしばらく悩んだ後、後ろの成賢左成賢が現れ、初めて箱の上でwidth値とheight値をpxにしないで、箱の中の画像で箱の大きさを決めることをヒントにした.
アドバイスを聞いて、元のhtmlもcssも削除して、再作成しました(...ドール...)
涙を含んだチョコレートパイを食べて完成した最終バージョン
下にスクロールするので、下記のコメントは見られませんでしたが、ログインページでは満足感がなく、westeargramの種を作った時に感じました…こんな足りない作品もよく拍手した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を順番に使うには、修正や確認が容易です。見当がつかないと見る人も修正する人も疲れる事実!
次の作品はもっと簡潔な作品で復帰します!
뿅
Reference
この問題について(Westagramホームページの実装), 我々は、より多くの情報をここで見つけました
https://velog.io/@kimjaehogu/Westargram-메인페이지-구현
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
<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>次は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タグをそれぞれのボックスに分けます。
この文書では、Profile Boxイメージボックスなどの個々のボックスを作成しました。
><キー>
ここのポイント!!最初は何も知らなかったとき、箱の大きさをheight,widthに固定し、画像を中に入れて埋めました。だから...箱に追加するたびに、箱から離れる現象が発生します。
こうしてしばらく悩んだ後、後ろの成賢左成賢が現れ、初めて箱の上でwidth値とheight値をpxにしないで、箱の中の画像で箱の大きさを決めることをヒントにした.
アドバイスを聞いて、元のhtmlもcssも削除して、再作成しました(...ドール...)
涙を含んだチョコレートパイを食べて完成した最終バージョン
下にスクロールするので、下記のコメントは見られませんでしたが、ログインページでは満足感がなく、westeargramの種を作った時に感じました…こんな足りない作品もよく拍手した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を順番に使うには、修正や確認が容易です。見当がつかないと見る人も修正する人も疲れる事実!
次の作品はもっと簡潔な作品で復帰します!
뿅
Reference
この問題について(Westagramホームページの実装), 我々は、より多くの情報をここで見つけました
https://velog.io/@kimjaehogu/Westargram-메인페이지-구현
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
.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;
}
뿅Reference
この問題について(Westagramホームページの実装), 我々は、より多くの情報をここで見つけました https://velog.io/@kimjaehogu/Westargram-메인페이지-구현テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol