Web과 함께 시작하기(Getting stated with the Web)는 여러분에게 웹 개발의 실질적인 측면을 소개하는 간결한 시리즈입니다. 여러분은 간단한 웹페이지를 만들 때 필요한 도구를 설치하고 여러분의 코드를 게시할 것입니다.
전문적인 웹사이트를 생성하기 위해서는 매우 많은 작업이 필요합니다. 그러니 웹 개발이 처음이라면, 처음은 작게 시작해보세요. 지금 당장 Facebook을 만들 수는 없지만, 자신만의 간단한 온라인 웹사이트를 만드는 건 그리 어렵지 않으니 여기부터 시작하겠습니다.
아래 나열한 항목을 순서대로 진행하면 백지부터 시작해서 첫 웹페이지를 인터넷에 띄울겁니다. 시작합시다!
웹사이트 제작을 위한 도구는 아주 많습니다. 이제 막 시작한다면 수도 없이 많은 코드 편집기와 프레임워크, 테스트 도구 때문에 혼란스러울 겁니다.기본 소프트웨어 설치하기에서는 기본적인 웹 개발을 시작하기 위해 필요한 소프트웨어를 어떻게 설치할 수 있는지 차근차근 알려드립니다.
여러분의 웹사이트를 위한 코드 작성을 하기 전에, 먼저 계획을 세워야 합니다. 어떤 정보들을 강조할 건가요? 어떤 글꼴이나 색상을 사용할 것인가요? 웹사이트의 외관은 어떻게 할까요?에서 우리는 여러분이 사이트의 내용이나 디자인을 계획하기 위해 따라할 수 있는 간단한 방법을 제공할 것입니다.
웹사이트는 많은 파일(문자, 코드, 스타일시트, 미디어, 등등)로 이루어져 있습니다. 웹사이트를 만들 때, 여러분은 합리적인 구조로 여러 파일을 모으고 서로 상호 작용이 가능한지 확인해야 합니다. 파일 다루기에서 여러분의 웹사이트를 위해 합리적인 파일 구조를 설정하는 방법과 여러분이 알아야 할 문제들을 설명할 것입니다.
HTML(Hypertext Markup Language)은 여러분의 웹 컨텐츠를 구조화하고, 의미와 의도를 주기위해 사용되는 코드입니다. 예를 들면, 내 컨텐츠가 문단의 집합인지, 또는 목차(*)의 리스트인지? 내 페이지에 이미지를 넣어야 하는지? 데이터 테이블이 필요한지? 여러분을 난처하지 않게하면서, HTML 기본은 여러분이 HTML에 익숙해질 수 있도록 충분한 정보를 제공할 것입니다.
CSS(Cascading Style Sheets)는 여러분의 웹사이트를 꾸밀 때 사용하는 코드입니다. 예를 들면, 글자 색을 검정과 빨강 중 어느걸 하실건가요? 아니면 컨텐츠를 화면 어디에 표시해야 하나요? 웹사이트를 장식하려면 어떤 배경 이미지나 색을 사용하실 건가요? CSS 기본으로 시작에 필요한 모든걸 준비해보세요.
JavaScript는 여러분이 인터렉티브한 기능을 웹사이트에 추가할 때 사용하는 프로그래밍 언어입니다. 예를 들면 게임, 버튼이 눌리거나 폼에 정보가 입력되었을 때 발생하는 것, 동적인 스타일 효과, 애니매이션 등이 있습니다. JavaScript 기본은 여러분께 이 흥미로운 언어로 가능한 것들에 대한 것과 어떻게 시작할 수 있는지에 대한 아이디어를 제공할 것입니다.
일단 여러분이 코드 작성과 웹사이트를 위한 파일 구성을 마쳤다면, 사람들이 찾아볼 수 있도록 이 모든 것을 온라인에 둘 필요가 있습니다. 예제 코드 출판하기는 여러분이 간단한 예제 코드를 어떻게 최소한의 노력으로 얻을 수 있는지 설명할 것입니다.
여러분이 가장 선호하는 웹사이트에 접근할 때, 여러분이 모르는 많은 복잡한 것들이 눈에 띄지 않는 곳에서 발생합니다. 웹의 동작 방식은 여러분이 컴퓨터로 웹페이지를 볼 때 발생하는 것들에 대한 개략적인 설명을 할 것입니다.
Web Demystified: 웹 개발을 처음 시작하는 분을 위해 웹 기초를 설명하는 뛰어난 비디오 시리즈입니다. Jérémie Patonnier가 제작했습니다.
The web and web standards: 이 글은 웹에 대한 유용한 배경지식을 알려줍니다. -- 웹이 어떻게 생겼는지, 웹의 표준 기술이 무엇인지, 어떻게 같이 작동하는지, 왜 "웹 개발자"가 직업으로 삼기 좋은지, 그리고 관련 과목들을 공부하면서 어떤 것들이 최선의 관행인지 알려줍니다.