Waffle Studio Frontend Assignment - 1

과제 목적

적절한 HTML 태그를 사용하고 이에 익숙해지는 것이 목표인만큼, 구조/디자인은 적당히 비슷하기만 해도 괜찮습니다.
커밋은 되도록이면 최대한 잘게 쪼개서 해주세요. 커밋 내용을 지켜보고, 전체적인 진행 상황에 따라 과제 due나 명세를 수정할 수 있습니다.
개발자 도구를 사용하시면 과제하는 데 큰 도움이 될 것 입니다.

이 방법은 크롬 기준입니다.

크롬을 켠 상태에서 아래 커맨드를 입력합니다. 아래의 사진과 같이 개발자 도구가 열립니다.

Windows: F12, Ctrl + Shift + I
MacOS: cmd + option + I

최상단 메뉴바에서 Elements를 클릭하면 해당 페이지의 HTML을 파일을 볼 수 있습니다. (위 사진의 좌측 부분입니다.)
원하는 태그를 클릭하면 우측 혹은 하단에서 CSS도 확인 가능합니다. (위 사진의 우측 부분입니다.)
개발자 도구의 좌측 상단의 버튼을 클릭 후, 브라우저로 돌아가면 사진과 같이 원하는 영역을 선택할 수 있습니다. 개발자 도구를 확인하면 해당 태그가 선택된 것을 확인할 수 있습니다.

자신의 GitHub 개인 계정에 waffle-rookies-18.5-frontend-1라는 이름으로 private repository를 개설합니다.
개설 후 Settings > Manage access 로 들어갑니다.

마감 시점에 master branch를 기준으로 collaborator로 지정된 세미나 운영진들이 확인할 것입니다. GitHub repository에 반영되도록 commit, push해두는 것을 잊지 마세요.
가급적 repository 생성과 collaborator 지정은 미리 해둬주세요! 제출 방식을 다들 올바로 이해하고 계신지와 함께, 가능하다면 대략적인 진행상황을 보면서 필요하면 몇 가지 말씀을 더 드릴 수도 있습니다.

아래 3가지 사이트는 HTML/CSS의 태그 및 속성에 대해서 자세하게 설명되어 있는 사이트입니다. 참고하시면 과제에 도움이 될 것 입니다.
아래 사이트는 원하는 태그의 속성, 예시 등을 더 자세히 볼 수 있는 사이트 입니다
- [MDN]((https://developer.mozilla.org/en-US/)
아래는 과제를 좀 더 편리하게 할 수 있는 vscode extension 입니다.
HTML 태그를 하나하나 <a src="이미지주소" alt="대체텍스트" /> 이렇게 적기엔 귀찮잖아요?
심지어 기본 구조까지 하나하나 다 적기엔 너무 귀찮습니다... 이런 분들을 위해서 Emmet 문법을 소개해드리려 합니다!
아래 사이트로 들어가 보시면 에디터가 알아서 닫는 태그뿐만 아니라 원하는 class까지 적어서 완성시켜주는 편한 문법입니다!
과제하는 데 귀찮음과 함꼐 걸리는 시간이 많이 줄어들거에요!
- Emmet 문법