두시간동안 간단한 웹(Web) 개발하는 법🔥 - 1

이 글은 조코딩님의 "코딩기초와 웹프로그래밍"영상을 기반으로 진행된 프로젝트임을 미리 알려드립니다

 

구글 검색으로 템플릿 가지고 오기

Fig. 1. 구글 검색

 

Fig. 2. www.free-css.com

• 구글에 web free templates라고 검색하시면 아래 이미지의Fig. 2 사이트를 찾으실 수 있습니다

---

Fig. 3. HMTL 탬플릿

• 사이트에 접속하게 되시면, 여러 가지 탬플릿Fig. 3 을 볼 수 있는데, 그중에 저는 Beauty kit이라는 무료 템플릿을 다운 받았습니다

 

---

Fig. 4. web 폴더 생성

• 다운로드한 후, 저는 C드라이브에 web 폴더를 생성하여 web폴더에 압축을 해제하였습니다

---

 

Fig. 5. html 폴더

• 그 후 html 폴더 안에 들어가시면, 

Fig. 6. Chrome HTML document

• 여러 가지 폴더와 index라는 이름의 Chrome HTML document를 보실 수 있는데, 이 index파일을 열어주시면, 완성된 홈페이지를 보실 수 있습니다

---

Fig. 7. index 파일

• 페이지를 보시면, 화장품을 파는 홈페이지라는 것을 알 수 있죠
• 자 이제 이렇게 HTML코드로 완성된 홈페이지를 코드를 수정해서 저만의 페이지를 만들어 보겠습니다

---

코드 수정

저는 제가 다운로드한 화장품 홈페이지 템플릿을 건강식품 홈페이지로 바꾸어 보려고 합니다

• 먼저 VScode를 실행시켜 주세요

Fig. 8. Open Folder

• 아까 C드라이브에 html폴더를 선택해 주시면 됩니다

---

Fig. 9. (VScode) html 폴더

• 위와 같이 html코드를 모르신다면, 엄청 복잡한 코드가 쓰여있는데, 당황하지 마시고, 코드에 핵심만 보시면 됩니다

---

타이틀 수정

Fig. 10. title 교체

• 원래는 Beautiflie이라고 되어있던 title을 저는 I HEAL U(건강식품 사이트 이름...)라고 바꾸어 줬습니다
• 꿀팁은 내가 바꾸고자 하는 파트를 Ctrl + F를 이용해서 검색해 주면 쉽게 찾아서 바꿀 수 있습니다

 

Fig. 11. (Fig.10) 결과

• Fig. 11 보다시피 title이 수정된 것을 확인할 수 있습니다

---

베너 수정

베너를 수정하고 싶다라고 하면 Ctrl + F 검색 banner를 해주시면 아래의 이미지Fig. 12와 같은 코드를 찾아볼 수 있습니다

 

Fig. 12. 본래 코드

Fig. 13. 수정한 코드

• 그리고 저는 건강식품을 파는 웹사이트를 만들고자 하기 때문에 위와 같이Fig. 13 수정해 준 것을 볼 수 있습니다

---

이미지 수정

 

Fig. 14. images 폴더

• 이미지 수정 같은 경우는 모든 이미지 파일은 html폴더 안에 images 폴더를 들어가 보면 웹사이트에 사용되는 모든 이미지를 찾아볼 수 있습니다Fig. 14

---

Fig. 15. 상품 이미지 code

• Fig. 15 에 맨 위에 보면 <!--product section start -->라고 되어 있는데, 이 부분부터 시작해서 순차적으로 이미지 삽입 코드가 존재합니다 ex) <img src="images/1.png"> ,  <img src="images/2.png">,... , <img src="images/12.png">
• 모든 이미지는 구글에서 저작권 무료 이미지를 다운로드하여서 첨부했고,
• 아래와 같이 홈페이지가 바뀐 것을 확인할 수 있습니다

---

Fig. 16. 원본 페이지

Fig. 17. 수정 페이지

• Fig. 17 모든 상품이 내가 첨부한 건강 보조제 이미지로 바뀐 것을 볼 수 있습니다

여기까지가 어떻게 템플릿을 가져오고, 어떻게 코드를 수정해야 하는지 적어보았습니다

다음 포스팅에서는 이렇게 만들어진 index파일을 netlify를 통해 정식적으로 등록하는 법을 알아보겠습니다

---

결과

 

https://jelonghealth.netlify.app/

I HEAL U(jelong's Personal Project)

 

참조

https://www.youtube.com/watch?v=4mRae9N2pU4&t=573s 

https://www.free-css.com/free-css-templates/page287/beautiflie

Beautiflie Free Website Template | Free CSS Templates | Free CSS