Web Service 기초

1. Web Service?

웹 서비스란 뭘까?

여러 대답이 가능하겠지만, 모든 설명은 다음과 같은 뿌리에서 출발한다.

바로... "우리는 웹 서비스로부터 원하는 정보를 얻는다!"

클라이언트가 이떠어떠한 정보를 제공해달라고 요청(Request)하면,

서버는 내부에 저장된 리소스들 중, 해당되는 정보를 담아 응답(Response)해주는 것이 전체적인 Web Service의 흐름.

 

즉 우리가 웹 서비스를 만든다!라고 말을 할 때, 여기에 숨겨진 뜻은...

이용자들의 요청을 처리할 수 있는 서버를 만드는 것!이라 할 수 있겠다. 와우!

 

그렇다면 이 때, 클라이언트의 요청과 서버의 응답을 통해 무엇이 오고 가는 걸까?

→ 요 녀석이 바로 HTML!

 

2. HTML

그럼 HTML은 또 뭘까.

우와!

간단히 말해 HTML이란 Request와 Response를 통해 오고 가는 문서 형태의 정보라 생각하면 되겠다.

 

헉 그렇다면 웹 페이지를 만들기 위해서는... 요 HTML에 대한 엄청난 전문가가 되어야 하는 건가???

당연히 아니다! → HTML은 그 자체로 직관적이고, 정형화된 문법이 사용되며, 맨날 쓰이는 요소들만 쓰이기 때문에..!

기초적인 흐름과 필수적인 문법만 익혀둬도 아무런 지장 없이 사용할 수 있다. 야호!

 

세상에서 가장 쉽게 HTML 파일을 만들기 위해서는... 메모장 하나만 있으면 된다!

원하는 내용을 입력하고, 확장자를 .html로 작성한 후, UTF-8로 인코딩해주면...

우와! 웹 페이지가 뚝딱 만들어졌다!

 

그런데 문제는... 메모장에 아무리 멋지게 적어도, 서버는 이를 하나의 글 덩어리로밖에 인식하지 못한다!

 

3. HTML 문법

따라서 우리는 서버가 알아들을 수 있도록 해당 HTML 파일을 특정한 양식으로 작성해야 한다.

→ 이것이 바로 HTML 문법!

 

1) 태그와 콘텐츠

HTML은 크게 세 부분으로 나눌 수 있다.

- 글(콘텐츠)

- 글을 감싸는 틀(태그)

- 틀에 붙는 부가 설명(속성)

 

그럼 요 녀석들을 달달 외우면 되는 건가? → NO! 직접 써보면서 작동 원리를 파악해보는 게 중요!

 

2) head 태그와 body 태그

head 태그 내에는 페이지 상에 보이지 않는, 기능적인 부분을 작성.

body 태그 내에는 태그를 이용해 보이는 부분의 구조를 작성.

 

3) HTML 태그

<h1></h1> : 제목을 나타낼 때 사용. 중요도에 따라 1~6까지 지정할 수 있다.

 

<p></p> : paragraph, 즉 문단을 나타낼 때 사용.

 

<br> : 기본적으로 HTML은 엔터를 인식하지 않는데, br 태그를 통해 줄 바꿈을 구현.

 

<a></a> : 하이퍼링크를 걸어주는 태그.

→ Attribute : href, target

href : 주소를 입력.

target : 링크를 여는 방법을 지정.

 

<img> : 이미지를 보여주는 태그.

→ Attribute : src, alt

src : 입력된 주소의 이미지를 보여줌.

alt : 이미지를 불러올 수 없을 때 대체되는 글자.

 

<table> → tr, td, th

 

<li></li> : 목록을 만드는 태그. ul 또는 ol 태그의 하위에 위치.

ol(orderd list) : 번호가 있는 리스트

ul(unorderd list) : 순서가 없는 리스트

 

<form></form> : 입력 양식을 의미. 태그 내부에 input과 같은 입력 태그를 넣어 사용

→ Attribute : action, method

action : 입력된 내용이 전달될 url을 지정

method : form의 전달 방식을 지정(GET or POST)

 

<input> : 사용자 입력을 위한 태그

→ Attribute : type, name

type : 해당 입력의 종류를 지정(text, password, radio, file, submit 등)

name : 데이터의 이름을 입력

4. CSS

그런데 HTML로만 웹페이지를 구현하기에는... 명확한 한계가 존재한다.

왜? 단순히 디자인적으로나, 사용자 경험적으로나, 단순히 정보로만 이뤄진 페이지가 좋을 리 없으니까!

 

따라서 우리는 웹에 적용할 스타일을 명시해둔 CSS란 파일을 이용한다.

웹페이지에서 이용자에게 '보이는' 부분을 Frontend라 하고, 이는 HTML과 CSS를 통해 나타나진다!

5. CSS 문법

CSS는 선택자, 속성, 값으로 이뤄진다.

 

선택자(Selector)를 통해 지정된 HTML 요소에 스타일을 지정하고,

속성(Property)을 통해 지정할 스타일을 명시하고,

값(Value)을 통해 키워드나 특정 단위로 원하는 스타일을 적용!

 

그렇다면 이러한 CSS 파일을 HTML에는 어떻게 적용하면 좋을까?

→ Link style / Embedding style / Inline style

각각 HTML 외부에 있는 CSS 파일 불러옴 / <head/>에 <style>을 이용해 작성 / HTML 요소에 직접 style 속성으로 작성