195일차 웹개발 - 메인화면 템플릿 뼈대 만들기

백엔드를 개발할 때는, 파이참을 사용하지만, 템플릿은 VSCode로 개발할 예정이다. 왜냐하면 VSCode에는 Live Server라는 확장 프로그램이 있어서 템플릿 개발할 때, 더 좋기 때문이다.

앞으로 템플릿을 개발할 때는, VSCode와 codesandbox를 주로 사용할 예정이다.

 

1. main.html 생성

 

2. Head 설정

developers.google.com/search/docs/advanced/crawling/special-tags?hl=ko

Google에서 인식하는 특수 태그  |  Google 검색 센터  |  Google Developers

 

3. 템플릿을 어떤 모양으로 만들지 생각해보자...

최상단(header)에는 Title과 Nav가 필요하고, 중단부(section)에는 메인이미지가 들어가고, 하단부에 Footer를 작성해서 간단한 웹 템플릿을 개발할 것이다.

 

4. 뼈대 만들기

 

5. 결과물

 

아주 투박한 결과물이 보여진다. 이제 CSS를 활용해서 예쁘게 꾸며보자.