첫 HTML CSS 프로젝트: 클론 코딩 1주

공부 방법 (How I studied)

1. 먼저 실제 브라우저를 분석하고 코드를 스스로 작성한다.
2. 예상한 대로 되지 않거나 모르는 기능은 인터넷과 책으로 공부한 후 적용해본다.
3. 새롭게 배운 내용은 메모해놓고 다른 부분에서도 활용한다.
4. 웹사이트 페이지 원본 보기 기능으로 실제 코드와 비교해본다.
5. 실제 코드에서 사용된 더 좋은 코드로 다시 짜본다.

---

매일의 공부 (My everyday study)

29, 30 July

• html, css 기본 공부

01 Aug

• display: inline-block; margin-top: 60px; text-align: center; Why doesn't this work?
  A: text-align should be marked to the parent tag. Others to child tag.
  
• Which tags to use to parent elements or child elements?
  A: CSS Cascade: Styles are applied based on specificity and importance. Inline styles override external or internal styles, and ID selectors override class selectors, etc. The "Styles" pane will show you the source of each rule (e.g., line number in a CSS file).
  

02 Aug

• CSS override rules:
  A: Inline override others, id > class > tag
  
• Imac over 왼쪽 오른쪽 시작 나누는 법
  A: div parent elemetn 하나 더 만들어서 margin쓰기. display와 justify-content는 부모요소에.
  

03 Aug

• Which tags are used to which occasions to seperate areas?
  A: avoid margins, remember box-sizing, never use floats, use grid (or flex)
  
• Drawing padding, border, and margin etc was helpful!

04 Aug

• how to use media queries.
  A: @media [screen] and () {}
  
• What are relative and absolute umits and when they're used:
  A: absolute - px
  relative - % (relative to the parent element), em (relative to all the parent elements above), rem (relative to the root element )
• how to calculate % -> px?
  A: value in pixels = (value in other unit) * (parent width in pixels) / 100
  

05 Aug

• How do i make CSS look better?
  A: Best way to make CSS look simple is called 'CSS nesting'
  
• use max-width, min-width for flexibility

06 Aug

• the smallest screen-> not just hidden, but overflow: hidden?
  
• difference between width: auto; and width: 100%;
• ENG word learning: index -> indices
• use negative margin for list(nav) to give the opening effect
• how to use :root() and var(-- ~ )

---

어려웠던 점, 해결방법 (challenges and Solutions)

• CSS의 설렉터를 활용하기 어려웠다. 어느 것이 우선순위인지 몰라 코드를 여러 번 고쳐썼다.
  설렉터 개념을 먼저 공부하지 않고 무작정 코드부터 쓰려고 해서 그런 것 같다.
  반응형 웹 개념을 공부할 때는 웹 페이지의 어떠한 기능이 프로그래밍 언어의 어떤 파트에서 나온 개념인지 알고 그것을 중심으로
  다양하게 공부한 후 코드를 작성하니 수월했다.
• CSS들이 쌓여서 겹치니 생각하지 못한 영향을 미치는 것을 미리 생각해내기 어려웠다. padding, margin 등을 그림을 그려가며 이해하니 화면의 내용을 예상하며 코드를 쓸 수 있었다.

---

고칠 점 (Compared with the real code)

• 변수 이름
• id는 최후의 방법으로 사용하고, 주로 class를 사용한다
• 중첩 클래스를 활용하여 보다 보기 쉬운 코드를 짠다
• border-box를 모든 element에 적용하여 복잡함을 덜어낸다, 합칠 수 있는 것은 합치기
• padding: 0; margin: 0; for lists, they're not default
• use global variable, preventing to repeat the same code over your work

---

일주일 후 느낀 점 (How it has been helpful so far)

• 수업에서 배우기 전에 실제로 활용하며 실전적인 방법으로 개념을 익히니 기억에 더 잘 남았다. 수업에서는 궁금했던 점과 더 좋은 방법을 알아가는 것에 초점을 맞추니 그냥 처음부터 개념 하나하나 암기하기보다 보람있었다.
• 프론트앤드는 처음해보는데 지루하지 않고 재미있게 배울 수 있었다. 웹사이트들이 어떻게 만들어졌는지 스스로 이해해보는 시간이 좋았다.