🐭 1주차 회고록 gogo
웹의 동작 개념
웹의 클라이언트와 서버가 있다 서버에서 만들어둔 HTML, CSS , Javascirpt로 이루어진 페이지를 클라이언트가 불러와 브라우저에 보이게 함으로써 사용자에게 보여진다 페이지에도 크게 두 가지가 존재한다
정적 웹 페이지
서버에 미리 저장된 파일이 그대로 전달되는 웹 페이지 클라이언트에서 서버에 요청하면 미리 저장된 서버 파일을 보내준다 서버의 데이터가 변경되지 않는 한 사용자는 고정된 웹 페이지를 본다
동적 웹 페이지
서버에 있는 데이터들을 스크립트에 의해 가공해 처리한 후 생성되어 전달되는 웹 페이지 서버는 클라이언트의 요청을 해석하여 데이터를 가공한 후 만들어진 페이지를 보내준다 사용자는 요청 상황에 따라 다른 웹 페이지를 본다 그렇다면 페이지는 어떤 식으로 만드는 것인가
HTML + CSS + Javascript
- HTML은 프로그래밍 언어가 아닌 마크업 언어이다 우리 페이지의 뼈대라고 볼 수 있다 기본적인 틀이 존재해야 모양이 만들어지듯이 HTML도 그런 존재이다
- CSS는 그 틀을 만드는 스타일링이라고 볼 수 있다 단순하게 글자만 있다면 사용자들의 관심을 받을 수 없다 스타일링을 통해 그 사이트를 꾸밀 수 있다
- Javascript는 웹 페이지에 생동감을 불어넣기 위한 스크립트 프로그래밍 언어이다 Javascript가 없다면 사용자들은 페이지에서 할 수 있는 행동이 엄청나게 줄어든다
🐭 아직 잘 모르겠어 예시를 보여줘
예시
아주 간단한 페이지 만들어보면서 HTML + CSS + Javascript가 모두 필요한 이유를 설명해보겠습니다
우리는 HTML의 태그를 이용해 h1 태그로 페이지에서 제목을 담당하고 button 태그를 이용해 버튼을 만들었습니다 그럼 결과물을 확인해봅시다
여기까지가 HTML의 역활은 끝났습니다 그렇다면 그 사이트를 꾸미기 위해선 CSS를 사용해야 합니다 일단 CSS로 폰트 변경과 위치를 중앙으로 이동시키고 버튼 모양은 bootstrap에서 가져와 보겠습니다 폰트 변경과 bootstrap 사용은 아래 링크를 이용했습니다
폰트
Bootstrap
Javascript를 이용하여 버튼 활성화
다음과 같이 폰트, 위치, 버튼을 모두 생성했습니다 그럼 이제 HTML + CSS는 끝났습니다 이제 저 버튼을 클릭을 해봅시다 아무런 반응이 없을 겁니다 이제 Javascript를 이용해서 버튼을 클릭했을 때 알람 창이 뜨도록 해보겠습니다
다음과 같이 버튼을 클릭하면 알람 창이 나옵니다 HTML + CSS로 만든 것을 Javascript를 이용해 동적으로 사용할 수 있도록 하여 사용자에게 더 좋은 페이지를 제공할 겁니다
🐭 2주차에는 뭐할 거야?
jQuery를 이용한 Ajax로 통신하기
Javascript 중에 다양한 라이브러리가 존재하지만 그중에 가장 많이 알려진 jQuery를 이용하여 Javascript를 좀 더 편리하게 사용해보고 Ajax를 사용하여 더욱 쉽게 JSON을 가져오는 예제를 해보도록 하겠습니다
