습관적 기록

9. Responsive Web Design Projects - Build Survey Form 이번 프로젝트는 HTML에서 정말 중요한 Form을 다룹니다. Form이 중요한 이유는 Form의 내용물이 결국 서버에게 데이터를 건내는 데이터가 되고 이를 통해 서비스가 진행되기 때문입니다. 그럼 이전 리뷰와 마찬가지로 구조부터 먼저 분석하겠습니다. 1. 박스 모양으로 HTML 문서 구조 분석하기 박스를 적당한 수준에서 나누어 보았습니다. 처음 디자인 문서를 보거나 카피할 대상을 보았을때 너무 세부적인 부분까지 박스로 나누어 보다 보면 나중에 시간이 더 걸립니다. 일단 구조적 측면에서 접근하여 대략적인 틀로 먼저 나누어 문서를 작성한 후에 세부 내용을 점차 채워나가는 방식이 작업을 하시는데 유리합니다. 예전..

드디어 첫번째 Project입니다. 처음으로 본인 힘으로 아무 것도 없는 상태에서 HTML 문서를 만들게 되어 굉장히 오래 걸렸을 것으로 생각합니다. 이제 저와 같이 프로젝트를 하면서 중요한 포인트를 놓치진 않았는지, 그리고 일단 패스하였더라도 세부 사항을 놓치지 않았는지 확인을 해봅시다. 본래 프리코드캠프는 User Story에 있는 요구 조건만 충족 시키면 패스를 하지만, 저는 디테일한 부분인 블록의 미세한 크기나 폰트 같은 것을 제외하고 나머지 것들을 제공되는 예시랑 동일하게 하는 것을 목표로 할 생각입니다. 이렇게 하시고 나서 본인이 생각하기에 좋은 내용과 디자인으로 한 번 더 프로젝트를 하시면 실력이 쑥쑥 오를 겁니다. 또한, 제가 한게 하나뿐인 정답이 아니기 때문에 다른 방법도 가능하다는 점을..

22개의 주제를 갖고 있는데 생각보다 빠르게 할 수 있습니다. 타이트하게 1시간 정도면 모든 과제를 클리어할 수 있을 것입니다. Flex와 마찬가지로 Layout에 있어 엄청 중요한 부분입니다. 복습 잘 하시길 바랍니다. Create Your First CSS Grid 여기서 굉장히 유용한 스킬이 나왔습니다. background-color를 모든 div에 주는 것입니다. 이를 통해 전반적인 레이아웃을 쉽게 이해할 수 있습니다. grid 뿐만 아니라 flex나 다른 display property, float, box-model 등을 이해하는데 큰 도움이 됩니다. Add Columns with grid-template-columns grid-template-columns로 column의 수와 크기를 정할 수..

6번째 Chapter는 CSS Flexbox입니다. 그리 내용이 많지는 않아서 1시간이면 충분히 학습하실 수 있는 분량으로 보입니다. Use display: flex to Position Two Boxes flex는 기본적으로 특정 공간에서 한 방향으로 element들이 어떻게 위치할지를 정하는 방식입니다. 따라서 본문에서 display: flex값을 넣으면 기본값인 row방향으로 2개의 element가 배치하게 되는 것입니다. 앞서 설명했듯이 div는 기본적으로 block속성을 갖고 있어서 한 행을 차지하게 되어 옆에 다른 원소가 오지 않습니다만, display: flex로 주면 flex의 영향을 받아 row 방향으로 배치됩니다. Add Flex Superpowers to the Tweet Embed ..

이번 Chapter에서는 반응형 웹 디자인을 하는 방법을 배웁니다. 반응형 웹이란 여러 크기의 스크린 사이즈에 대해서 적절하게 화면을 보여주는 것을 의미합니다. 다루는 내용이 적어 30분이면 충분히 다 볼 수 있지만, 자세히 보고 이해하려면 꽤 시간이 걸리는 부분입니다. 빠르게 Subject를 해결했더라도 여기 있는 복습용 자료들을 보고 충분히 이해하시길 바랍니다. Create a Media Query Use a media query to change a variable 에서 이미 배운 적이 있는 @media 키워드에 대해 다시 배우는 Subject입니다. 자세한 내용이 궁금하시면 미디어 쿼리 문서를 참고하시길 바랍니다. Make an Image Responsive max-width, min-width,..

전반적으로 HTML5의 Accessibility에 관련하여 추가된 tag들에 대한 설명으로 이루어져 있습니다. 단순히 접근성이 필요한 사람 들에 대한 것 뿐만 아니라 일반적인 사람 들에게도 필요한 내용이 상당히 많으니 주의 깊게 꼼꼼히 볼 필요가 있습니다. 이번 Chapter는 총 22개의 Subject로 이루어져 있지만 주의 깊게 봐줄 것이 많아 시간은 꽤 걸립니다. Accesibility는 접근성을 의미합니다. 여기서 말하는 접근은 html document에 접근하는 모든 존재로부터 접근을 쉽게 한다는 광범위한 의미를 갖습니다. 이 모든 존재는 사람 뿐만 아니라 기계도 포함합니다. 사람 중에서는 색맹, 시청각 장애, 거동 문제 등의 장애를 가진 사람도 해당 장애가 없는 사람에 최대한 근접하게 정보에 ..

freecodecamp 리뷰 3번째 글입니다. 앞에서 HTML, CSS의 아주 기초적인 부분들만 배웠는데 여기 부터는 조금 더 어려운 내용을 다루고 있습니다. 52개 subjects로 Responsive Web Design Course에서 가장 많은 양을 차지합니다. 그러나, 다 글 읽고 바로 적용해보면 되는 문제라 시스템에 익숙해지면 금방 하실 수 있습니다. Create Visual Balance Using the text-align Property text의 위치를 정해주는 text-align property에 대한 내용입니다. left, center, right, justify 4가지를 갖는데 jusify는 특이하게 행 전체에 균등하게 글자를 배분합니다. 워드를 하다 보면 글씨가 이상하게 끝까지 차..

Basic HTML and HTML5 에 이은 2번째 글입니다. 저번에는 웹 페이지의 골격을 이루는 HTML에 대한 기초를 배웠다면, 이번에는 HTML을 다양한 방식으로 보여주기 위한 수단인 CSS를 배웁니다. 이전 글과 마찬가지로 일단 순서대로 모두 하신 후에 이 글을 읽으면서 내용을 복습하면 되겠습니다. 각 제목을 보면서 어떤 내용이었는지 되새겨 보신 후에 제목 아래에 있는 포인트 들을 이해하고 넘어가시면 됩니다. Change the Color of Text tag 내에 style="property: value" 이러한 방식으로 style attribute를 넣을 수 있고, 이렇게 넣은 style을 inline style이라고 합니다. css에서 color라고 하는 것은 항상 글씨의 색깔입니다. 배경..

리뷰 시리즈 첫 글입니다. 대체로 블로그 글로 리뷰란 논평의 의미를 갖지만 이 글에서 리뷰의 의미는 복습의 의미가 강합니다. freecodecamp의 경우 코딩 문제를 풀기만 하면 바로 넘어가기 때문에 내용을 제대로 이해하지 않고 넘어가는 경우도 많고, 한 주제를 빠르게 끝낼 수 있기 때문에 기억에 잘 남지 않는 문제가 있습니다. 저와 함께 freecodecamp에서 공부한 내용을 복습하여 내용이 머리 속 깊이 자리 잡을 수 있도록 해보려 합니다. Basic HTML and HTML5는 총 28개의 Subject를 갖고 있으나, 첫 주제 답게 내용이 상당히 쉽습니다. 영어라는 장벽만 넘으신다면, 처음 하시는 분이더라도 3시간 이내에 하실 수 있을 것으로 보입니다. 시간을 정확히 기록하지 않았으나, 저는 ..

1. freecodecamp? freecodecamp는 2014년에 설립된 코딩을 가르쳐주는 비영리 집단입니다. freecodecamp 측에 따르면 freecodecamp로 코딩을 배운 4만명 이상의 사람이 구글, 마이크로소프트 등의 IT 회사로 갔다고 합니다. 이런 얘기를 보니까 freecodecamp의 시스템에 신뢰도가 올라가는 느낌이 듭니다. freecodecamp는 총 11가지의 인증 과정을 갖고 있고, 이 외에도 여러 유용한 글을 올리는 news 와 관련 내용을 동영상으로 알려주는 youtube channel 및 다양한 내용에 대해서 물어보거나 새로운 글을 올릴 수 있는 forum을 갖고 있습니다. 11가지의 Certification은 여러 Course(ex. Basic H)TML and H)T..