습관적 기록

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란 이걸 기..

useContext hook의 return 값은 useState와는 달리 context로 등록된 value 하나뿐입니다. 따라서 Provider에게 전달해준 value 자체를 수정할 방법은 없습니다. 그래서 리액트 공식 문서를 찾아보면 하위 컴포넌트에서 상위 컴포넌트에서 정의한 context를 수정하는 예시를 보여주고 있는데 예시의 핵심은 value안에 state와 setState를 모두 전달하는 것입니다. Context 선언 하는 방법 export const ThemeContext = React.createContext({ theme: themes.dark, toggleTheme: () => {}, }); 상위 컴포넌트가 클래스형일 때 context를 제공하는 방식 class App extends Re..

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에 접근하는 모든 존재로부터 접근을 쉽게 한다는 광범위한 의미를 갖습니다. 이 모든 존재는 사람 뿐만 아니라 기계도 포함합니다. 사람 중에서는 색맹, 시청각 장애, 거동 문제 등의 장애를 가진 사람도 해당 장애가 없는 사람에 최대한 근접하게 정보에 ..