웹 개발에 들어가기 앞서...

HTML, CSS, JAVASCRIPT에 관한 내용은 '이지스퍼블리싱' 출판사의 "Do it! 한 권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석"이라는 책을 공부하고 요약 및 정리한 것입니다.

 

 

웹 개발이란 무엇일까?

 

웹 개발이라고 하면 웹 사이트를 만드는 것을 떠올린다. 웹 사이트는 크게 두 종류가 있는데 단순히 정보를 보여주기만 하는 것을 정적 사이트(static site), 페이스북이나 트위터와 같이 친구 기능, 좋아요나 공유 등 다양한 서비스를 제공하는 기능까지 가지고 있는 것을 동적 사이트(dynamic site)라고 한다. 

 

웹 개발을 하기 전에 먼저 웹 사이트의 동작 과정을 한번 살펴보면...

사용자가 웹 브라우저에 정보를 입력하거나 링크를 클릭하면 웹 사이트는 인터넷에 연결된 컴퓨터의 정보를 가져와 웹 브라우저에 보여준다. 이때의 사용자는 웹 사이트에 접근하는 PC, 태블릿, 모바일 등을 말하며 흔히 들어본 "클라이언트"라고 한다. 인터넷에 연결된 컴퓨터는 서버라고 하는데, 서버에는 웹 사이트에 접속하면 보이는 텍스트, 이미지 등의 웹 요소와 사용자 정보, 상품 정보와 같은 여러 정보가 저장된다. 전자에 대해 개발하는 것이 프론트 엔드 개발, 후자에 대해 개발하는 것이 바로 백엔드 개발이다.

 

그렇다면 웹 개발을 하기 위해서 무엇을 공부해야 할까?

 

일단 웹 개발을 하려면 웹 브라우저에 정보를 어떻게 표현해야 하는지 알아야 한다. 그래서 HTML, CSS, JAVASCRIPT를 먼저 공부해야 한다고 하는 것이다. 

 

• HTML : 웹 문서의 뼈대,  웹 브라우저 창에 웹 문서의 내용을 보여 주는 데 필요한 약속이라 할 수 있다. 브라우저의 여러 내용 중 제목과 본문, 이미지, 표와 같은 웹 요소를 알려 주는 역할을 한다. 
• CSS : 웹 문서의 디자인과 레이아웃,  HTML로 만든 내용을 사용자가 알아보기 쉽게 꾸미거나 편리하게 사용할 수 있도록 배치하는 역할이다. PC, 태블릿, 모바일 등 다양한 디바이스에 따라 화면이 자동으로 바뀌는 반응형 웹 디자인을 만들려면 CSS는 필수적이다. 
• JAVASCRIPT : 사용자 동작에 반응,  대부분의 웹 사이트는 단순히 내용만을 보여주는 것이 아니라 사용자가 클릭하거나 스크롤하는 동작에 따라 반응한다. 이러한 동적인 효과를 적용하려면 자바스크립트를 꼭 배워야 한다.

 

※웹 사이트 개발은 웹 편집기를 사용할 예정인데, 기존에 사용하던 것이 없다면 Visual Studio Code를 사용하는 것을 추천한다. 무료에다가 플랫폼에 구애받지 않으며 프로그래밍 언어도 사용할 수 있다. VS Code를 통해 문서를 작성하고 이곳에서 작성한 소스를 어디서 확인하냐? 결과는 웹 브라우저에서 확인한다. 엑셀이나 워드같이 작성하면 결과가 같은 곳에서 나오지 않는다는 점을 알아야 한다. 소스 작성은 VS Code에서, 결과 확인은 웹 브라우저에서...

하지만 다행히도 VS Code에서 확장 옵션에서 Live Server를 설치해서 소스 작성 중 바로바로 결과 확인이 가능하다. 소스를 작성하고 오른쪽 마우스를 클릭해 open with live server를 선택하면 곧바로 브라우저로 확인이 가능하다.

 

이제 본격적으로 HTML에 대해 공부해보겠다.