웹 개발 처음부터

오늘은 빈 폴더에서 웹 페이지를 하나 만들어 브라우저로 열어보겠습니다. 시작하기 전에 따로 설치하셔야 하는 것은 없습니다.

지난 시간에는 제목 하나와 글 두 줄짜리 페이지를 만들었습니다. 오늘은 읽는 사람이 훑어볼 수 있도록 페이지에 구역을 만들어보겠습니다.

지금까지 페이지에는 제목과 문단, 목록 두 개가 들어가 있습니다. 오늘은 눌러서 갈 수 있는 곳과, 눈으로 볼 것을 추가하겠습니다.

지금 페이지에는 사진과 제목, 목록, 링크 두 개가 들어가 있습니다. 오늘은 그 부분들에 이름을 붙여보겠습니다.

네 편 동안 의미만 다뤘고, 페이지는 아직 문서처럼 생겼습니다. 오늘은 CSS 를 붙여서 모양을 직접 정하기 시작합니다.

지난 시간에는 규칙 하나를 썼고, 그것이 전체에 적용됐습니다. 오늘은 원하는 것만 정확히 골라내는 법을 배웁니다.

CSS 규칙 여섯 개로 페이지가 페이지처럼 읽히게 되었습니다. 오늘은 그 규칙들이 바꾸고 있던 모양 자체를 들여다봅니다.

1강부터 우리 페이지의 모든 것이 위아래로 쌓여 왔습니다. 오늘은 상자 두 개를 나란히 놓아보겠습니다.

이 화면에서는 페이지가 제대로 보입니다. 오늘은 휴대폰에서도 제대로 보이게 만들겠습니다.

HTML 과 CSS 로 아홉 편을 왔고, 페이지는 열리는 순간 이미 완성이었습니다. 오늘 세 번째 언어가 들어오면서 그것이 달라집니다.

지난 시간에는 스크립트가 한 번 돌고 콘솔에 출력했습니다. 오늘은 여러분을 기다렸다가 페이지에 글을 씁니다.

버튼은 누를 때마다 같은 말을 합니다. 오늘은 세기 시작하는데, 그러려면 기억할 자리가 필요합니다.

페이지가 대답은 하는데, 미리 정해둔 말만 합니다. 오늘부터는 다른 사람이 그 말을 정할 수 있게 됩니다.

지금은 다시 누르는 순간 앞의 줄을 잊어버립니다. 오늘은 전부 간직해서 목록으로 보여줍니다.

지금까지 만든 것은 새로 고치면 사라집니다. 오늘 그것을 고치고, 15편이 만든 것을 돌아보겠습니다.