Dev Diary. Day 3 | Creating a Chat Interface

한 일 | What I did

1. Added reset CSS　[📌commit]
   
2. Splitted codes and Organized the file structure [📌commit] [📌commit]

main/
├─ css/
│　├─ main styles.css	← [every html links this]
│　│　					It imports fonts, variables, components, screens
│　├─ components/    	← reusable css files
│　│　├─ header-navigation-bar.css	← friends.html
│　│　├─ footer-navigation-bar.css	← friends.html
│　│　└─ status-bar.css	← index.html, friends.html
│　└─ screens/
│　　　└─ login.css		← index.html
├─ index.html			← landing page: Login page
└─ friends.html			← Friends Dashboard: Main Page After Login

• List of actual CSS files used by linking styles.css in index.html
  • components/status-bar.css
  • screens/login.css

3. Made and use color variables [📌commit]

─
[ styles.css ] → Root CSS: It imports every CSS and Every HTML imports this.
[ varibles.css ] → Every HTML uses this.
[ reset.css ] → Every HTML uses this.
[ status-bar.css ] → /components Every HTML uses this.
─
[ index.html ] → LogIn page's html part (landing page)
└ Applied BEM naming convention [📌commit]

[ login.css ] → /screens only index.html's CSS
└ Completed welcome-header CSS [📌commit]
└ Completed login-form CSS [📌commit]
─
[ friends.html ] → Main page after LogIn succeed page's html part (landing page)
└ Completed friends page's HTML part [📌commit]

[ nav-bar.css ] → /components Footer Navigation Bar : All pages after a login contain this style
└ Completed nav-bar CSS [📌commit]

[ screen-header.css ] → /screens All pages after a login contain this style
└ Aligning elements horizontally and setting margins [📌commit]

---

배운 것 | What I learned

1. Reset CSS
   Browsers apply their own default CSS style.
   Some people make a css file that can remove all default CSS styles.

2. Components folder
   It is used to store reusable UI elements, like buttons, cards, modals, and navigation bars are stored here, making them easy to reuse throughout the application (Modularity).

3. Summary of CSS Priority

   1. HTML Inline Styles (<tag style="□"> </tag>)
   2. ID Selectors #id
   3. Classes .class, Attributes [attr=value], Pseudo-Classes :pseudo
   4. Elements and Pseudo-Elements (e.g. div, p, ::before)
   5. Universal, Inherited, Default Styles (*)
   6. !important (overrides all other rules in the same category)

4. Form action Form attribute action="" method=""

   • Action : To which page do you send the data?
   • Method : Sending method (value = post, get)
     - post : to backend server
     - get : to URL (information vulnerable)
   • e.g. <form action="friends.html" method="get" class="login-form">

5. Navigation Element<nav>
   └ Basic structure : <nav> → <ul> → <li> → <a>
   Since search bots know this structure,
   when they encounter a <nav>, they look for a <ul> inside the <nav>.
   Once they find the <nav>'s <ul>, they then look for <li> within <ul>,
   and finally, within each <li>, they attempt to find <a> link.

---

문제해결 | Challenge-Solving

• 💥 When I used Git/Github on my friend's computer, sometimes pull/push operations didn’t work.
  ↓
  🔅 I opened a GitHub(web) window and logged into GitHub.
  then the issue was solved.

• 💥 I followed Cascading principle but sometimes my css was not applying correctly.
  ↓
  🔅 There are other CSS priority rules.

Summary of CSS Priority

1. HTML Inline Styles (<tag style="□"> </tag>)
2. ID Selectors #id
3. Classes .class, Attributes [attr=value], Pseudo-Classes :pseudo
4. Elements and Pseudo-Elements (e.g. div, p, ::before)
5. Universal, Inherited, Default Styles (*)
6. !important (overrides all other rules in the same category)

---

회고 | Reflection

I'm gradually feeling a bit overwhelmed, but also feel a sense of accomplishment.
It's probably because I can see my webpage results immediately.

One small drawback is that I search things that I've learned but forgotten too many times.
Still, if I think about it positively,
There was a time when I knew nothing about HTML and CSS and couldn't even get started.
But now, I can solve problems by thinking, 'I learned this before—what was the exact syntax again?' and by searching for it.
So I see it as part of the process of gradually improving my skills.

조금씩 버거운 느낌이 들지만 그만큼 성취감도 든다.
아무래도, 눈에 바로바로 보이니까.

조금 아쉬운 건, 배웠지만 까먹은 것들을 검색해보는 횟수가 많은 것 같단 생각이 든다.
그렇지만 좋게 생각하면, 예전에는 HTML, CSS에 대해 아예 몰라서 손도 못 댔는데 이제는 '이거 배웠었는데 정확한 문법이 뭐였더라?' 하고 검색해서 해결할 수 있으니까... 조금씩 실력이 느는 과정이라고 생각한다.

🐣🐣🐣

---

참고한 것 | Reference

• None

---

계속 방문하는 사이트

• 폰트어썸
  - 사이즈조절