SEB/TIL
005 | Practical | Twittler Mockup Implement
kexon
2022. 6. 29. 20:38
π μ€μ΅
- νΈμνλ¬ λͺ©μ
ꡬν
- νΈμνλ¬: κ°μ§ νΈμν°
- μ€μ΅ λ΄μ©: μ£Όμ΄μ§ μ΄λ―Έμ§μ ν¨κ» μ΅μνμ html, css κ·Έλ¦¬κ³ μ΄λ―Έ λ§λ€μ΄μ§ jsλ‘ μ°½μλ ₯ ν μ€νΌμ λν΄ νΈμνλ¬ λͺ©μ μ λ§λλ κ²
HTML
λ보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>twittler</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
<div id="greeting">twittler</div>
<div id="box1">
<div>Username</div>
<input type="text" id="usernameInput" />
<div>Message</div>
<input type="text" id="messageInput" />
<br />
<button id="tweetButton" type="button">Tweet!</button>
</div>
<!-- Tweet lists -->
<div id="cButton">
<button id="randomButton" type="button">
<div class="icons8-refresh"></div>
Check New Tweets
</button>
</div>
<section id="tweetlist" class="white">
<div id="imgfile">
<img src="http://cdn.ggilbo.com/news/photo/201911/718556_555324_3851.jpg" />
<img src="data:image/jpeg;base64,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" />
<img src="https://cdn.imweb.me/upload/S201807025b39d1981b0b0/16b98d3e3d30e.jpg" />
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQt18wCyQPO-BWMnThSlQ0_D4MJyDp32fJZrQ&usqp=CAU" />
<img src="https://pbs.twimg.com/media/ESbTA4rUcAArJfB.jpg" />
</div>
<div id="listfile">
<script src="script.js"></script>
</div>
</section>
</body>
</html>
CSS
λ보기
#greeting {
font-size: 24px;
font-family: sans-serif;
font-weight: bold;
border-radius: 1em;
color: #2aa9e0;
background-color: white;
text-align: center;
margin: 0.5em;
padding: 0.5em;
}
#box1 {
background-color: #e8f5fd;
padding: 24px;
border-radius: 10px;
}
#usernameInput,
#messageInput {
border-radius: 10px;
border: 2px solid #ccc;
}
#tweetButton,
#randomButton {
cursor: pointer;
background-color: #8fd1f7;
border: 1px solid #ccc;
border-radius: 4px;
padding: 8px;
margin-top: 5px;
color: white;
}
#cButton {
padding: 24px;
display: flex;
justify-content: left;
}
#tweetlist {
background-color: #e8f5fd;
padding: 24px;
display: flex;
border-radius: 10px;
}
#imgfile {
display: flex;
flex-direction: column;
}
img {
margin: 10px 0 24px 0;
width: 50px;
height: 50px;
border-radius: 50%;
overflow: hidden;
}
ul {
list-style-type: none;
}
.tweet.white {
margin-bottom: 20px;
border-bottom: 1.5px solid grey;
padding-right: 32px;
}
.tweet__username {
font-size: 18px;
font-weight: bolder;
}
κ²°κ³Όλ¬Ό
π νμ΄ νλ‘κ·Έλλ°
- #첫 #νμ΄νλ‘κ·Έλλ° #μ±κ³΅μ π₯°
- μ 체μ μΌλ‘ νΈμν λΆμκΈ°μμ μμ μ μΌλ‘ μ§νλλ€. λλ΅ μ΄λ€μμΌλ‘ λͺ©μ μ νκ³ μΆμμ§ μ νκ³ μμ΄μ΄νλ μμ κ·Έλ Έλ€.
- μ°λ¦¬λ μ μλ μ΄λ―Έμ§μ λΉμ·νκ² κ°μ§λ§ id μμ μ΄λ―Έμ§λ₯Ό λ£κ³ μΆμλ€. κ°μ΄ νλ κ²λ μ’μ§λ§ κ°μ 30λΆμ λ μκ°μ κ°κ³ ν΄λ³΄κΈ°λ‘ νλ€. μ΄ κ³Όμ μμ λλ js νμΌμμ {} imgλ₯Ό λ°λ‘ μΆκ°νλ €κ³ νμ§λ§ λ₯λ ₯λΆμ‘±(...)μΌλ‘ νμ§ λͺ»νλλ° νμ΄λΆμ΄ μ΄μ λ°°μ΄ flexboxλ₯Ό νμ©ν΄μ κ°λ¨νμ§λ§ μ±κ³΅μ μΌλ‘ ꡬνμ νμ ¨λ€!!ππ» μλκ±Έ μμ©νκ³ νμ©νκΈ°κ° μ΄λ κ² μ΄λ ΅κ΅¬λ! μμ λ§μ΄ ν΄λ³΄λ©΄μ μμκ°λ κ²μ΄ μ€μνλ€λ κ²μ λκΌλ€.
- νμ΄ μ§ν λ΄λ΄ μμ¬μν΅λ λ무 μλκ³ κ΅¬ννκ³ μΆμ κ²λ ν΄λκ³ , 무μλ³΄λ€ μλ‘ λ§μ‘±μ€λ¬μ΄ κ²°κ³Όλ¬Όμ΄ λμμ μ’μλ€ππ» νΌμ νλ©΄ μ€νΈλ μ€ λ°μΌλ©΄μ νμ κ² κ°μλ° νμ΄λΆμ΄λ κ°μ΄ ν΄κ²°ν΄λκ°λ κ³Όμ μ΄ μ¬λ°μ΄μ μκ°κ°λ μ€ λͺ°λλ€.
- λ§μ§λ§μ μλ‘μ μ μ(?)μ μ‘°κΈ λλλ κΈ°νκ° μμλλ° μ 곡μλΆμ΄μ ¨λ€. κ·Έλμ μμΌλ‘ λ°°μΈ κ²μ λν΄ μ‘°μΈμ ꡬνλλ° μ΄μ¬ν λλ΅ν΄μ£Όμ μ λ무 κ°μ¬νλ€ π
- νμ΄λ¦¬λ·°μμ κ°μ¬νκ²λ μ’μ νΌλλ°± λ¨κ²¨μ£Όμ μ κΈ°λΆμ΄ μ’μκ³ , λλΆμ λλ₯Ό λμλ³΄κ² λλ€.
π λκΈ°λΆμ¬ μΈμ
- ν λ§λλ‘ μ 리νμλ©΄, λμκ² μΈλ¦Όμ΄ μλ κ°μμλ€.
- λλ μ¨κ° κ±±μ μ μ¬μ νκ³ , κ·Έ κ±±μ μ΄ κΌ¬λ¦¬μ 꼬리λ₯Ό λ¬Έλ€. κ·Έλ°λ° κ°μμλΆμ΄ μ€λΉνμ κΈλ°°μ°μ κΈμ μ½μΌμλλ° κ°μκΈ° λ΄ λ§μμ΄ λ¨Ήλ¨Ήν΄μ§λλ κ°μλ₯Ό λ£λ€κ° λλ λͺ¨λ₯΄κ² λλ¬Όμ΄ λ¬λ€.
- μΆκ°λ‘ μ€λ μ€ μ±ν
보면μ μ겨 μ¨μ§λμ€ μμλΌγ
γ
γ
γ
γ
γ
γ
π€£π€£π€£ λμ€μ 보면 μμλΌκ³ ...
- μ‘Έμ ν μ λ°°μ€μ μ λμ¬λ κ³μ ¨λλ° μ΄λ€ λΆμγ γ γ γ γ μ½λ© μλ λ κΈ°λ λ²νλ°λκ³Έγ γ γ γ γ γ γ γ γ γ γ γ γ γ μ μ§μ§ μλ€ λλ¬Όλ¬λ€. μ μ§μ§ λ무μκ²Όπ€£
- μν γ γ γ γ μν 무λκΈ°λ₯Ό ν€μ°λλ° ν 무λκΈ°μλ μ’μ λ§, ν 무λκΈ°μλ λμ λ§ ν΄μ€¬λλ° μ’μ λ§μ ν΄μ€ μν 무λκΈ°λ κ³¨κ³ λ£¨ μ μλλλ° λμ λ§ λ¬΄λκΈ° μνλ μλμ΄ λ€μλ μνλ€. κ·Έλ¬λλ γ γ γ γ κ°νκ² μ»€μΌ μν°λ€κ³Έγ γ γ γ γ λμ λ§ λ€μ΄μΌ μ μ μ°¨λ¦¬κ³ λ μν°λ€κ³Έγ γ γ γ γ γ γ γ γ γ γ μ λ무μκ²Όλ€.
π€ μ±μ₯μ μν λͺ©ν
μ§κ° μμ λΆμ μ²λΌ κ°μ§νκ³ κΊΌλ΄λ³Ό, λκΈ°λΆμ¬κ° λ λμ λͺ©νλ₯Ό μ μ΄λ³΄λ μκ°μ΄ μμλ€. λ§μΉ¨ λ©°μΉ μ μ°μ°ν(?) κΈ°νλ‘ λ λ³΄κ² λμλλ° κ·Έκ±Έ 보면μ κ°κ³ μΆμ νμ¬κ° λͺ©νκ° μκ²Όλ€! λ¬΄λ € λμ μΈμ λͺ©νμ κ΄λ ¨λμ΄ μΌμ 3μ‘°μ ν¨κ³Όλ₯Ό λ릴 μ μλ€! κ·Έλ λΆν° κ°λ°μ 곡λΆνλ λ° μμ²λ λκΈ°λΆμ¬κ° λμκ³ λ€λ μμλλ° λ§μΉ¨ μ€λ λ€μ κ°κ΄μ μΌλ‘ μκ°μ μ 리νλ μκ°μ΄ λλ€. μ΄λ―Έ μ¨κ° κ΅°λ° λ€ λΆμ¬λ¨λλ° μ‘°κΈ λ ꡬ체νν΄μ μ΄λ£¨κΈ° μν΄ ν μ μλ κ²λ€μ μ μ΄λ΄μΌμ§!
π Today was ...
- λ°±μλ μμ§λμ΄ μμ½μ΄λ‘ νλ‘ νΈλ₯Ό μ΄ν΄νλ κ΄μ (?)μ΄ λ§€μ° μλ¬λλ€. μλ§¨ν± νκ·Έμ λν΄μ μκ°ν΄λ³Ό μ μλ κΈ°νμλ€.
- CodeSandBoxλΌλ ν΄(?)μ μ¬μ©νλλ° μμ¬μ΄ μ μ΄ λ§λ€. λΌμ΄λΈκ° μ μλΌμ VSCodeλ₯Ό μ€μΉνλλ° νμ μ€ν¬λ¦½νΈ npmμ΄ μμ΄κ°μ§κ΅¬ μΈλ©°κ²¨μλ¨ΉκΈ°λ‘ λ€μ ν΄λ‘ λμμλ€. λ€νμ€λ½κ² μ λ§λ¬΄λ¦¬νκΈ΄ νλλ° λλ νμ΄λΆμ΄λ κ³μ μλ¬κ° μμ΄μ λΆνΈνλ€.
- νμ΄ νλ‘κ·Έλλ°μ΄ λλκ³ λ€λ₯Έ λΆλ€μ΄ ꡬνν κ²μ λ³Ό μ μμλλ°(a.k.a. μλνμ) μ μλνμμ΄λΌκ³ νμ§ μ κ² κ°μλ€! λ€λ€ μν΄μ ꡬ경νλ μ¬λ―Έκ° μ μ νλ€!
- μ€λλ‘μ¨ νΌλΈλ¦¬μ±μ΄ λλ¬λ€. μμΌλ‘ λ°°μΈ κ²λ€μ΄ κΈ°λλλ€!π₯°