🍀 LINEplus 홈페이지를 Markup해보는 시간을 가졌다.
홈페이지를 선형화하고, semantic하게 요소를 정하고 class 이름을 짓는 것만 해도 머리가 아팠다.
data를 다루는 function들은 그 관계를 정의하고 흐름을 파악하기가 쉬운데, Markup은 당장 이런 요소를 쓰면 되겠다고 생각을 해도 아직은 머릿속에 바로 그려지지가 않는다.
🍀 3월에 일주일간 진행했던 프로젝트 발표 시간을 가졌다.
다들 열심이 만들어서 동기부여가 됐다.
🍀 오전에 flex에 대해서 공부했다.
과제를 하느라 배운 걸 다 정리하지 못해서 내일 아침에 마저 정리할 예정이다.
CSS의 기초 문법, 상속과 겹침 그리고 우선순위에 대해 배웠다.
의미있는 태그. Semantic Markup이 중요함을 점점 더 느낀다.
Web Accessibility를 고려하면 간단한 화면 배치도 간단하지 않다. Markup은 공부할수록 깊이있는 언어같다. 객체지향언어에서 class를 의미있고 효율적으로 짜는 데에도 관심이 많았기 때문에 이 부분을 잘 살려서 코딩을 하고 싶다.
hexo를 계속 이용하기로 했다. 익숙하기도 하고, 나중에 내가 테마를 조금씩 수정하거나 만들고 싶다.
오늘부터 4주간 HTML/CSS를 새로 배운다. 첫 수업이었는데 많은 것을 새롭게 알았다.
웹 접근성과 웹 표준이 무엇이며 얼마나 중요한지, 개발자에 자세에 대해서 배웠다.
HTML5의 역사와 특징에 대해 다시 한 번 배웠다.
Web page 제작을 위한 단계를 배웠다.
<div>만 사용하는 것이 아니라 <header>, <footer>, <article> 등 사용편리한 Emmet Cheatsheet를 알았다. 진짜 편하다!
CSS Box Model : content-box(defualt)와 border-box의 차이점을 알았다.
flex를 이용해서 layout을 잡는 것과, 호환되지 않을 때를 대비하여 float를 이용하는 방법을 여러 case를 통해서 배웠다.
Margin collapsing, clear: both 등 float CSS trick들을 배웠다.
지난 한달 간 나에게 가장 어려운 건 javascript보다는 HTML/CSS로 layout을 잡는 것이었는데, 내 생각대로 요소들이 배치되지 않았기 때문이다.
수업에서 CSS의 여러 속성들과 기능을 배우면서 왜 그렇게 되지 않았는지 알게 되었다. flex와 float는 확실히 공부하고 넘어가야겠다.
jQeury 플러그인을 통해 Diary 화면의 배경에 ripples 효과를 줬다. 50px정도 여백에 효과가 적용되지 않는 문제가 있어 body background에 효과를 주는 것으로 해결했다.
알고리즘 스터디에서 Longest Common Prefix 문제를 다시 한 번 훑어보았다.
프로젝트 페이지의 폰트와 버튼 hover event 등을 추가하고 마무리했다.
프로젝트를 하며 겪었던 자잘한 문제들과 해결방법을 정리해두어야겠다.
첫 팀 프로젝트는 생각보다 재미있었다. 해결하지 못할 문제는 없다는 것을 다시 한 번 알았다.
✨ My Health Diary ✨
프로젝트의 모든 정보를 localStorage에 load하고 save하는 기능을 끝냈다. 점점 객체와 배열을 다루는 방법이 익숙해진다. 어렵던 select의 option value와 option:selected).text도 잘 알았다.
디자인을 수정하고 메인 페이지를 full video background로 설정했다.
알고리즘 스터디에서 Array.reduce와 eval method를 새로 알았다. 주말에 더 공부 해야겠다.
LeetCode 중 Medium 3. Longest Substring Without Repeating Characters 문제를 풀었다. 오랜만에 새로운 알고리즘 문제를 푸니 재미있었다.
LeetCode에 console.log를 찍어 stdout을 확인할 수 있다는 것을 처음 알았다. 앞으로 자주 사용해야겠다.
프로젝트가 마무리되며 볼만해진다. 공공 데이터 포탈에서 제공하는 미세먼지 API를 사용해 메인 페이지에 마스크 사용여부를 알려주고 싶었는데 낮에 신청한 직후에는 잘 안 됐다.
그런데 밤에 해보니까 결과가 나와서 내일 다시 시도해볼 예정이다.
Update your browser to view this website correctly. Update my browser now
