웹페이지를 이루는 구성요소인 프론트 엔드에 대해서 알아봅시다.

Front_end

프론트엔드는 말 그대로 웹페이지의 "앞"에 보이는 것들을 말합니다. 클라이언트가 접하게 되는 눈에 보이는 부분이라고 생각하면 편합니다. 이 프론트엔드에 쓰이는 언어는 무엇이 있을까요?

웹콘텐츠를 잘 보여주기 위해 구조를 만들어야 합니다.(신문,책등과 같이) - HTML
적절한 배치와 일관된 디자인 등을 제공해야 합니다.(보기 좋게) - CSS 
사용자 요청을 잘 반영해야 합니다.(소통하듯이) - Javascript 

HTML(Hyper Text Markup Language)/CSS

HTML은 클래스로 웹페이지를 계층구조화 해주는 역할을 합니다. 웹페이지 내에서 어떤 내용이 어디에 들어갈지 잡아주는 역할을 합니다. 다만 프로그래밍 언어가 아니기 때문에 사용자의 행동에 따른 반응성을 나타낼 수 없습니다.(ex- 버튼을 만들 수는 있지만, 버튼을 누르면 어떤 행동을 한다는 불가능)

아마존웹사이트의 HTML예시입니다. 

이런 식으로 <div> 라는 클래스로 웹페이지의 내용이 나뉘어 진것을 볼 수 있습니다. 이처럼 HTML은 사이트의 설계도이자 뼈대 역할을 합니다.

CSS(Cascading Style Sheet)은 웹페이지의 꾸밈 역할을 해줍니다. 아까 HTML이 사이트의 뼈대를 이룬다고 하였다면, CSS는 뼈대위에 살을 입히고 잘하는 분들은 옷도 입혀서 예쁘게 보여주는 것입니다. 물론 HTML만으로도 웹사이트를 구성하는 것은 문제가 없지만, 뼈대(해골)만 돌아다니는게 사용자가 접하기에 좋아보이기는 어려울 것입니다. 

마찬가지로 아마존 사이트의 예시입니다.  

CSS 는 위 처럼 폰트의 크기 콘텐츠 창의 색 부터해서 디자인적인 요소를 꾸며주는 것들입니다.

결론적으로 프론트는 사용자와 마주하는 최전선이라고 볼 수 있습니다. 프로그래머들이 만드는 결과물은 결국 프로그래머 혼자 쓰는게 아닌 "사용자"들이 사용하는 것이라고 할 수 있습니다. 그렇기 때문에 프론트에 디자인적인 요소(CSS)가 들어가는 것이고 흔히들 말하는 UI와 UX를 고려하여 제작하게 되는것입니다. 두번째 포스트는 여기서 마치겠습니다. 감사합니다.
* Java Script 내용은 다음 포스트인 Back_end에서 함께 진행됩니다.