작성 규칙

1. 🟠 작성 상태
   ✅ 작성한 날짜를 기록함으로써 리마인드
   ✅ 작성한 프로젝트를 기록함으로써 프로젝트를 찾아볼 수 있음
   ✅ 몰입 상태를 기술함으로써 하루를 파악하기
2. 🧨 오늘의 공부
   ✅ 알고 있던 기능(내 블로그 링크)
   ✅ 새로 알게 된 기능(레퍼런스 링크)
3. 🎢 학습 소감
   ✅ 왜 이런 공부를 하게 되었는지?
   ✅ 공부한 내용의 난이도는 어땠는지?
   ✅ 공부한 것을 내 것으로 만들 수 있었는지?
   ✅ 오늘 다한것과 하지 못한 것, 내일 해야할 것을 적어보기

🟠 작성 상태

---

🟠 작성 날짜 : 0428, 2022

🟠 작성 프로젝트 : 기획 - Instagram UI 클론코딩

🟠 몰입 상태 : ⭐⭐⭐⭐⭐ 완전히 몰입함

🧨 Today I Learned

---

🧨 알고 있던 기능

✍ 프로젝트 기획 : 인스타 UI 클론코딩

• 프로젝트에서 작성에 필요한 뼈대 설계 구조부터 필수적인 CSS 속성에 관련한 정보를 대략적으로 작성하기

🎨 피그마 와이어프레임 작성 : 인스타 UI 클론코딩

• 기획서와 클론코딩할 프로젝트를 보면서 목업을 작성한다. 각 개체의 크기와 여백을 보면서 따라한다.

💾 파일분리 CSS, Javascript

• CSS 파일 : link rel="stylesheet" href="header.css"
• JS 파일 : script src="placeholder_focus.js"></script

🧨 새로 알게 된 기능

🔮 클론코딩 : 기획서를 작성하기 위한 코드 뜯어보기

• 인스타그램 사이트에서 개발자 도구를 열어 요소의 HTML 뼈대구조 확인하기
  - 상위, 하위 태그를 보면서 어떻게 작성할 지 확인하기
• 각각 태그를 눌러서 스타일 속성을 확인하기
  - 마찬가지로 대략적이지만 해당 태그마다 중요하게 사용된 속성(flex, 크기, 여백, 위치) 확인하기
  

🧩 HTML input tag placeholder 와 onfocus 옵션

• placeholder는 인풋태그 안에 보여주는 부분
• onfocus="this.placeholder='text'" 를 태그 안에 작성하는 것으로 인풋태그를 클릭하면 나오는 문자열 변경 가능

😈 자바스크립트 getElement

• 자바스크립트에서 getElement 메서드를 사용하여 html 엘리먼트 값 가져오기
• 엘리먼트값을 활용하여 html 요소를 조작할 수 있음

😈 자바스크립트 다른 div를 겹치게 하기

• 요소1과 2가 같은 자리에 위치해야한다면, 둘 다 position: absolute를 사용해야함
• z-index 값을 올려줘서 원하는 요소를 위로 올림

😈 자바스크립트 querySelector

• 자바스크립트에서 querySelector 메서드를 사용하여 html 태그를 값으로 가져올 수 있음
• 태그 안의 값을 상세하게 선택할 수 있음

😈 자바스크립트 style.display

• 자바스크립트 style.display() 메서드를 사용하여 태그의 css 값을 수정할 수 있음

💾 폰트어썸 라이브러리 임포트

• 폰트어썸 웹사이트에서 아이콘을 사용하기 위해 임포트 코드를 입력하고, 아이콘을 선택해 i 태그 가져오기

🎢 학습 소감

---

🎢 왜 이런 공부를 하게 되었는가?

💋 탄탄한 기획서와 와이어프레임은 계속 강조해도 지나치지 않았다

• 작성하는것 만으로도 프로젝트를 진행하는데 필요한 목업을 작성하는데 조금 더 망설이는 시간이 줄어들었다.
• 이 후 만들어진 와이어 프레임을 바탕으로 코딩을 시작할 때, 다시 기획서를 들여다 보면서 부족한 부분을 수정하거나 새로 채워넣는 등의 작업이 즐겁고 체계적일 수 있었다.
• 작성한 와이어 프레임을 보면(물론 클론코딩이라는 이미 만들어진 결과물이 있지만) 내가 어떻게 코드를 짜야할 지 감이 온다.
• 와이어 프레임에 공을 들이는 시간이 조금은 아깝다고 생각했지만, 더 세세할 수록 코딩할 때 작업 속도가 확실히 빨라졌다.

🎶 자바스크립트로 html의 요소를 자유자재로 조작하기

• 자바스크립트의 기본기를 잘 익혀두어야만 백엔드 프로그래머로서 공부하는데에도 프론트엔드를 프레임워크를 새로 공부하는 일 없이 앞으로도 잘 진행해야한다고 생각했기 때문.
• 더욱 매끄러운 웹을 사용하는데 있어, 잘 짜여진 뼈대와 미적인 스타일 이외에도 사용자에게 편리한 조작을 제공해야 한다고 생각한다. 개발자가 아닌 사람이 보아도 괜찮을 정도로 잘 다듬어져야 한다고 생각한다.

😁 파일분리를 통한 코드 가독성 올리기

• css, javascript 파일을 분리함으로써, 확인하고 싶은 코드를 더 적은 줄을 스크롤해가면서 원하는 부분을 조금 더 쉽게 찾기 위함
• 파일을 체계적으로 관리하여 프로젝트 파일전체도 직관적이게 하려는 노력

🎢 공부한 내용의 난이도는 어땠는가?

• 자바스크립트는 확실히 어려웠고 일부는 실패했지만, 대체적으로 스스로 얻어갈 수 있을 정도는 되었다.

🎢 공부한 것을 내 것으로 만들 수 있었는가?

• 오늘은 그래도 내 것으로 만들기 위한 노력을 제대로 완수한 것 같다.

🎢 오늘 마친 것, 마치지 못한 것, 해야할 것

• 오늘 마친것: 기획, 와이어프레임, 헤더 홈버튼, 검색부분
• 마치치 못한것: 헤더 아이콘 부분
• 해야할 것: 바디부분, 미디어쿼리를 활용한 반응형웹, 푸터