툴은 VSCode를 이용할 것이고, 초기 셋팅은 이전 포스팅을 참조하세요.
먼저 파일의 이름은 index.html로 합니다.
1. 빈 파일에서 Ctrl+Spacebar 를 누르시면 아래와 같은 박스가 나오는데, HTML sample 을 선택하시면 샘플 코드가 작성됩니다.
2. 하지만 해당 샘플은 사용하지 않고 네이버의 치지직이라는 홈페이지를 참조하겠습니다. 먼저 Head 부분의 일부를 가져옵니다.
당장 필요하지 않은 부분은 빼고 가져옵니다. 먼저 타이틀 부분을 치지직 클론입니다로 변경하고, shortcut icon 주소를 제 깃허브 주소로 바꿔서 아이콘을 변경시킵니다.
3. 다음은 바디부분을 만들어 보겠습니다. 마찬가지 극히 일부분의 소스를 가져온 뒤, 약간의 수정을 해봅니다.
4. 간단하게 토끼 이미지와 텍스트를 넣어 홈페이지를 소개해 봅니다. 이때 토끼 이미지 소스를 조정할 경우 인기방송국의 이미지도 함께 변경되므로 .content로 격리시킵니다.
공부내용정리