[웹개발 종합반 1주차] 회고록

 

1. 서버/클라이언트/웹의 동작 개념

우리가 보는 웹페이지는 서버에서 준비된 HTML,CSS,Javacsript 등을 받아서 표시해주는 것. 즉, 브라우저(크롬,사파리 등)가 요청을 보내고, 받아온 HTML을 클라이언트 컴퓨터에 표시해주는 것. 서버가 만들어 놓은 API를 통해서 미리 정해진 약속대로 요청을 보내는 것.

 

하지만 매번 HTML등의 파일을 다운받는 것은 아님. 보통은 데이터만 받아오는 경우가 많음.

데이터만 받아오는 경우 위 이미지와같은 JSON 형식으로 받아오게 됨.

 

 

 

2. HTML과 CSS의 개념

HTML은 구역과 텍스트를 나타내는 뼈대, CSS는 구역과 텍스트를 꾸며주는 역할.

HTML에는 많은 태그가 있으며 각 태그에는 다양한 속성이 있음.

예) div,table,tr,td,input,form 등

 

HTML은 금방 습득 가능하지만 CSS의 경우 프로젝트의 규모가 커지면 굉장히 난해해짐.(보통 오타가 나도 알려주지않음)

 

이를 좀 더 편하고 예쁘게 CSS를 사용할 수 있도록 예쁜CSS를 모아둔 것이 부트스트랩.

 

 

3. Javascript 기초

태초의 웹은 정적인 웹이었음. 하지만 사용자들의 요구가 다양해지자 정적인 웹에서 동적인 웹으로 변하게 됨. 이를 가능하게 해준것이 Javascript이다. 참고로 JAVA 언어와는 아무런 관련이 없음.

 

HTML파일 안에 <script></script> 로 공간을 만들어서 작성하기도하고, 따로 js파일을 만들어서 사용하기도 함.

 

위 이미지는 자바스크립트의 hey함수를 실행하는 코드이다. HTML body태그 안에 button 태그를 보면 onclick 속성이 적혀있는것이 보인다. 이는 해당 버튼을 클릭하면 정의해둔 특정 코드를 실행시킨다는 것.  onclick 안에는 hey() 함수가 적혀있다. hey 함수는 <script>태그 안에 적혀있는 내용. 버튼을 클릭하면 alert('안녕!'); 이 브라우저 화면에 나타나게 된다.

 

자바스크립트 동작을 쉽게 확인하기 위해 크롬의 경우 개발자도구 기능이 있다. ctrl+shift+i 를 누르면 개발자 도구가 나타나게 되는데 이를 잘 활용하여 자바스크립트 동작이 잘 작동되는지 파악이 가능하다.