습관적 기록

1. 박스 모양으로 HTML 문서 구조 분석하기 User Story #1, #2, #3, #4, #6는 박스를 확인해주시기 바랍니다. 2. HTML 세부 사항 설명하기 User Story #5: The projects section should contain at least one link to a project. User Story #7: The navbar should contain at least one link that I can click on to navigate to different sections of the page. About ... Hey I am Mimic a web developer a element의 href에 #id를 넣으면 해당 위치로 바로 이동하게 됩니다. 이로서 nav와..

1. 박스 모양으로 HTML 문서 구조 분석하기 User Story #1, #2, #3, #5, #7, #8, #9, #11, #12 는 박스를 확인해주시기 바랍니다. User Story #6: The .main-section elements should contain at least 5 code elements total (not each). 전체를 스크롤링하기에는 너무 양이 커서 이 부분은 생략했습니다. code tag를 이 안에 5개 이상 만들기만 하면 됩니다. 2. HTML 세부 사항 설명하기 User Story #4: Each section element with the class of main-section should also have an id that corresponds with the..

이번 프로젝트의 핵심은 반응형 디자인입니다. 보여주는 화면의 크기에 따라서 레이아웃 구성을 변경해야 합니다. 코드펜을 이용하시는 경우에 간단히 해보시는 방법은 다음과 같습니다. (이용하지 않는 경우에는 2번 부터 하시면 됩니다, 단축키는 window/linux 기준입니다) Open Live View in a New Window(단축키 Ctrl + Shift + 0) 크롬 개발자 도구에 들어간다(단축키 F12) Toggle Device Tool Bar(단축키 Ctrl + Shift + M) 여기서 다양한 width로 변경을 하시면 됩니다. Bootstrap의 경우 5개의 break point를 Tailwindcss도 동일하게 5개의 break point를 사용하고 있습니다. break point란 이걸 기..

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

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

이번 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는 특이하게 행 전체에 균등하게 글자를 배분합니다. 워드를 하다 보면 글씨가 이상하게 끝까지 차..

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