코딩

컴퓨터 언어 코딩 – HMTL, CSS, Javascript, Python, MATLAB, C#

HTML, CSS 로 만드는 웹페이지 그리고 Javascript

인터넷은 요즘 세상을  살아가는 데 있어서 필수적인 요소라는 것은 그 누구도 부정할 수 없을 것입니다. 웹페이지는 정보에 편리하게 접근할 수 있고 그 정보의 양이 많을 뿐만 아니라 검색 또한 원활하게 할 수 있기 때문에 아주 편리하고 유용한 수단입니다. 그리고 대부분의 검색과 정보 습득은 웹페이지를 통해서 진행하게 됩니다. 우리가 일상생활에서 보는 웹페이지는 단순한 텍스트부터 움직이는 요소 등 다양한 방식으로 우리에게 표출됩니다. 그래서 누구나 한 번쯤은 만들어 보고 싶은 생각이 들게 합니다. 하지만 웹페이지는 파워포인트처럼 그리듯이 만드는 것이 아니라 언어를 입력해서 만들어야 합니다. 물론, 워드프레스나 그와 유사한 각종툴들이 많이 존재합니다. 그래서 쉽게 웹페이지를 근사하게 만들 수 있습니다. 하지만 그렇게 쉬운 툴을 이용했을 때에 더 자신만의 웹페이지로 특화해서 만들기 위해서는 결국 코드를 입력하거나 수정해야 할 것입니다. 코드를 입력하고 수정하는 것은 처음에 복잡하게 느껴질 수도 있습니다. 그리고 코드를 입력해서 작업하는 것은 전문 개발자들이나 하는 것으로 오해하기 쉽습니다. 하지만 HTML과 CSS를 입력하거나 수정하는 것은 불가능 하지 않습니다. 오히려 익숙해 지면 더 재미있게 느껴질 수도 있습니다. 물론, 웹페이지에 여러 가지 기능을 추가한다면 백엔드도 알아야 하고, 그에 따라서 숙지해야 할 것이 많을 것입니다. 하지만 웹페이지는 아주 전문적인 웹사이트를 제외하고 간단하게 프론트엔드만 구성하여도 웹페이지를 방문하는 사람들에게 거의 모든 것을 피력할 수 있습니다. 이런 경우 HTML, CSS의 일부만 숙지하여도 웹페이지 만드는 것이 가능합니다. 추가적으로 웹페이지를 동적으로 구성하려면 Javacsript를 숙지하면 됩니다.    

<간단하게 웹페이지를 구성하기 위해서 필요한 언어>

  • HTML(Hyper Text Markup Language) – 필수
  • CSS(Cascading Style Sheets) – 필수
  • Javascript – 선택적

그렇다면 필요한 것은?

웹페이지를 만든다는 것은 정말 흥미로운 일입니다. 이렇게 흥미로운 웹페이지 만드는 작업을 위해서는 어떤 것들이 필요할까요? 혹시 비용이 많이 필요하다고 생각하는 것은 아닐까요? 하지만 전혀 그렇지 않습니다. 웹페이지를 만들고 인터넷상에서 나타내기 전이라면 부가적인 비용은 전혀 필요하지 않습니다. 부가적인 비용이 필요한 경우는 자신이 만든 파일을 웹호스팅에 FTP(File Trasfer Protocol)를 통해서 업로드 해야 하는데, 이 때 웹호스팅 비용이 필요합니다. 이 비용은 비싸지 않습니다. 그리고 웹페이지에 알기 쉬운 주소를 부여해 주는 것에는 도메인(Domain)이 필요한데 도메인 구입 비용이 필요합니다. 이는 가격이 저렴한 것부터 존재하는데 일반적으로 이 역시 비싸지 않습니다. 아무튼, 웹페이지를 만드는 것을 시작하기 위해서 초보자라면 웹호스팅이나 도메인을 먼저 구매하기 보다는 자신의 컴퓨터에서 먼저 어느 정도 작성을 하고 웹호스팅에 업로드하는 것을 추천합니다. 부가적인 비용은 다시 말하지만 그 때부터 필요합니다.

그렇다면 어떤 것들이 필요한지 생각해 보겠습니다. 우선 컴퓨터가 무조건 필요합니다. 노트북이든 데스크톱이든 필요합니다. 당연한 얘기겠지만 데스크톱의 경우 모니터, 키보드, 마우스도 있어야 합니다. 그리고 코드를 입력하는 곳이 필요할 것입니다. 아주 예전에는 ‘메모장’에 입력했었던 시절도 있었으나 지금은 비쥬얼 베이직 코드(Visual Basic Code)를 사용하는 것이 대부분입니다. 비쥬얼 베이직 코드는 SDK(Software Development Kit)의 한 종류로써 웹페이지 제작 뿐만이 아니라 아주 다양한 언어로 개발을 할 수 있는 도구라고 생각하시면 됩니다. 비쥬얼 베이직 코드를 사용하면 단순한 메모장을 사용하는 것 보다 편리한 점이 아주 많습니다. 예를 들어 <html> 이라는 입력 코드를 입력하면 자동으로 종료 코드인 </html> 이 입력 됩니다. 이렇게 자동으로 입력되는 것은 “” 라는 표시, {} 기호 등 입력하면 자동으로 반대 기호가 입력되기도 합니다. 그리고 코드를 입력하기 위해서 알파벳 1개 또는 1개 이상을 입력했을 때 자동으로 추천되는 명령어가 나타나기 때문에 각종 명령어를 모두 정확하게 알지 못해도 추천해주는 명령어 들에서 선택하여 입력할 수 있습니다. 이 부분이 매우 편리한 부분인데 이 기능 덕분에 코드를 입력하는 속도가 매우 빨리질 수 밖에 없습니다. 그 밖에 들여쓰기나 기타 많은 편리함이 존재합니다. 그 부분은 앞으로 사용하면서 자연스럽게 자동적으로 느끼게 될 것입니다.  아무튼, 웹페이지를 만들기 위해서는 비쥬얼 스튜디오 코드(Visual Studio Code)를 다운로드 받아야 합니다. 아래 다운로드 링크를 추가해 두었으니 클릭하여 다운로드 받으실 수 있습니다. 비쥬얼 베이직 코드(Visual Studio Code)는 무료입니다. 그리고 Window, Linux, Mac 등 모두 사용 가능합니다.

비쥬얼 스튜디오 코드(Visual Studio Code) 다운로드 (클릭하시면 이동합니다.)

 

Phyhon

컴퓨터를 효율적으로 사용할 수 있는 방법