HTML, CSS 클론 코딩 - 라인플러스 홈페이지

1) 개요

• HTML5, CSS3를 학습한 내용을 바탕으로 연습하고자 뷰 레이아웃이 그나마 단순한 라인 플러스 홈페이지를 참고삼아 클론코딩을 하게 되었습니다.

 

• 또한, 수평 정렬에 있어 기존에 사용해왔던 float 속성보다는 Flexbox 속성을 위주로 레이아웃을 잡고 진행하였고 미디어 쿼리를 이용하여 반응형 웹사이트가 되도록 구현하였습니다.

 

• 클론코딩 사이트 (https://linepluscorp.com/)

LINE Plus Corporation | 홈

2) 레이아웃

3) 결과 (서버 배포)

• 오라클 클라우드에 놀고 있는 VM에 httpd 설치 후, 배포하였고 또 다른 클론 코딩을 위해 vHost로 설정했습니다!

 

• 정적 리소스라 할지라도 https 적용은 해야 할 것 같아서 let's encrypt + certbot3 이용하여 SSL 적용하였고 나중에 추가할 사이트를 위해 와일드카드 기반 인증서로 발급했습니다.

 

• 서버 배포 (https://lineplus.shucloud.site/)

sHu's Portfolio

4) 느낀 점

• 최대한 순수 HTML5, CSS3 속성만으로 클론코딩하려 했으나 Section (Video)에서는 백그라운드를 유튜브 동영상으로 설정하기 위해서 jQuery를 이용하여 구현했습니다! (구글링...)

 

• 또한, 일부 드롭다운 메뉴 (ex. Family Site)는 아직 미구현 상태로 순수 HTML5, CSS3 속성만으로는 따라하기가 힘들어 JS를 배우고 난 다음에 Try 해봐야 할 것 같네요..

 

• 그리고 수평 정렬에 있어 기존에 배웠던 float 속성을 써오다 이번 클론코딩에서는 Flexbox 속성으로 구현해보았는데.... float 속성보다 굉장히 편리하여 앞으로 자주 쓰게 될 것 같네요 b

 

• 마지막으로 레이아웃을 설계하는 데 있어 굉장히 두려웠었는데 이번 HTML5/CSS3 클론 코딩을 통해 자신감을 가지게 됐습니다!!

 

4) GitHub 저장소

• https://github.com/akgkfk3/HTML5-CSS3-Clone-Coding

GitHub - akgkfk3/HTML5-CSS3-Clone-Coding