Web과 함께 시작하기

Web과 함께 시작하기 는 여러분에게 웹 개발의 실질적인 측면을 소개하는 간결한 시리즈입니다. 여러분은 간단한 웹페이지를 만들 때 필요한 도구를 설치하고 여러분의 코드를 게시할 것입니다.

당신의 첫 번째 웹사이트 줄거리

전문적인 웹사이트를 생성하기 위해서는 매우 많은 작업이 필요합니다. 그러니 웹 개발이 처음이라면, 처음은 작게 시작해보세요. 지금 당장 Facebook을 만들 수는 없지만, 자신만의 간단한 온라인 웹사이트를 만드는 건 그리 어렵지 않으니 여기부터 시작하겠습니다.

가이드

아래 열거된 문서들을 통해 여러분은 아무것도 없는 상태에서 첫 번째 웹 페이지를 온라인 상태로 만들 수 있습니다. 여행을 시작합시다!

기본 소프트웨어 설치

웹사이트 제작을 위한 도구는 아주 많습니다. 이제 막 시작한다면 수도 없이 많은 코드 편집기와 프레임워크, 테스트 도구 때문에 혼란스러울 겁니다. 이 문서에서는 기본적인 웹 개발을 시작하는 데 필요한 소프트웨어를 어떻게 설치할 수 있는지 차근차근 알려드립니다.

웹사이트는 어떻게 보일까요?

여러분의 웹사이트를 위한 코드 작성을 하기 전에, 먼저 계획을 세워야 합니다. 어떤 정보들을 보여줄것인가요? 어떤 글꼴이나 색상을 사용할 것인가요? 여기서 우리는 여러분이 사이트의 내용이나 디자인을 계획하기 위한 간단한 방법을 제공할 것입니다.

파일 다루기

웹사이트는 많은 파일(문자, 코드, 스타일시트, 미디어, 등등)로 이루어져 있습니다. 웹사이트를 만들 때, 여러분은 합리적인 구조로 여러 파일을 모으고 상호 작용이 가능한지 확인해야 합니다. 이 문서에서는 여러분의 웹사이트를 위해 합리적인 파일 구조를 설정하는 방법과 여러분이 알아야 할 문제들을 설명해줄 것입니다.

HTML 기본

HTML(Hypertext Markup Language)은 여러분의 웹 콘텐츠를 구조화하고, 의미와 의도를 주기 위해 사용되는 코드입니다. 예를 들면, 내 콘텐츠가 문단의 집합인지, 또는 목차(•)의 리스트인지. 페이지에 이미지를 넣어야 하는지, 데이터 테이블이 필요한지. 이 문서는 여러분을 난처하지 않게 하면서 HTML에 익숙해질 수 있는 충분한 정보를 제공할 것입니다.

CSS 기본

CSS(Cascading Style Sheets)는 여러분의 웹사이트를 디자인할 때 사용하는 코드입니다. 예를 들어, 글자 색을 검정으로 할 것인가요, 빨간색으로 할 것인가요? 콘텐츠는 화면 어디에 있어야 하나요? 웹사이트를 꾸미려면 어떤 배경 이미지나 색을 사용하실 건가요? 이 문서에서 시작하는데 필요한 모든 것들을 안내해드립니다.

JavaScript 기본

JavaScript는 여러분이 상호 기능을 웹사이트에 추가할 때 사용하는 프로그래밍 언어입니다. 예를 들면 게임, 버튼이 눌리거나 폼에 정보가 입력되었을 때 발생하는 것, 동적인 스타일 효과, 애니메이션 등이 있습니다. 이 문서는 여러분께 이 흥미로운 언어로 가능한 것들에 대한 것과 어떻게 시작할 수 있는지에 대한 아이디어를 제공할 것입니다.

여러분의 코드 공개

웹사이트를 위한 코드 작성과 파일 구성을 마쳤다면, 사람들이 찾아볼 수 있도록 이 모든 것을 온라인에 둘 필요가 있습니다. 이 문서에서는 여러분이 간단한 예제 코드를 적은 노력으로 온라인 시키는 방법을 설명할 것입니다.

웹의 동작 방식

여러분이 가장 선호하는 웹사이트에 접근할 때, 여러분이 모르는 많은 복잡한 것들이 눈에 띄지 않는 곳에서 발생합니다. 이 문서에서는 여러분이 컴퓨터로 웹페이지를 볼 때 발생하는 것들에 대해 간단하게 설명을 할 것입니다.

같이 보기

  • Web Demystified: 웹 개발을 처음 시작하는 분을 위해 웹 기초를 설명하는 뛰어난 비디오 시리즈입니다. Jérémie Patonnier께서 제작하셨습니다.
  • The web and web standards (en-US): 이 글은 웹에 대한 유용한 배경지식을 알려줍니다. 웹이 어떻게 생겨났는지, 웹의 표준 기술이 무엇인지, 어떻게 함께 작동하는지, 왜 "웹 개발자"가 직업으로 삼기 좋은지, 그리고 이 과정을 통해 어떤 모범 사례를 배울 수 있는지 알 수 있습니다.