Spring Boot 웹 개발 입문 - Web 의 기초 개념과 HTML의 기초 활용

안녕하세요!

항상 나아가는 개발자 pink_salt 핑솔입니다!

코드프레소 Java 웹 개발 체험단 활동을 하고 있습니다.

저번 게시물에서는 Spring Boot 첫 애플리케이션을 만들어보았습니다.

이제 Web에 대해서 좀 더 자세히 알아보고 공부를 진행해보겠습니다!

'Spring Boot 웹 개발 입문'강의를 듣고 공부한 내용을 정리하여 포스팅을 진행하겠습니다.

---

 

웹 Web(World Wide Web)

• 인터넷 상에서 정보를 공유하는 기술 중 하나입니다.
• Web에서의 정보는 기본적으로 Hyper Text 문서로 작성되고 공유됩니다.
  • Hyper Text를 작성하는 언어가 HTML입니다.
• Web Browser는 원격에 있는 Hyper Text 문서를 읽어서 사람이 보기 좋게 만들어 주는 프로그램입니다.

 

Hyper Text

• Hyper Text는 일종의 문서로, 링크를 포함하고 있어 다른 문서들과 연결될 수 있습니다.
  • 우리가 일상적으로 사용하는 웹페이지와 동일합니다.
• 모든 문서는 고유의 주소를 갖고 있습니다.
  • 각각의 페이지는 주소를 갖고 있고 다른 페이지 링크를 갖고 있다면 클릭해서 다른 페이지로 이동할 수 있습니다.

https://en.wikipedia.org/wiki/Hypertext

여기 페이지에서 파란색으로 된 것은 링크입니다. 그래서 클릭하면 그 주소의 페이지로 이동합니다.

 

HTML(Hyper Text Markup Language)

• Hyper Text(웹 페이지)를 작성하기 위한 언어입니다.
• Hyper Text(웹 페이지)의 구조를 결정하고 각 요소들의 의미를 부여합니다.
  • 구조 : 각 요소들의 순서 등
  • 요소 : 제목인지, 분문인지, 이미지인지 등

 

HTTP(Hyper Text Transfer Protocol)

• Hyper Text(웹 페이지)를 컴퓨터가 주고 받기 위한 규약입니다.
• 컴퓨터 간의 데이터를 주고 받기 위해서는 명확한 약속이 필요한데 IETF, W3C 등의 국제 표준 단체에서 HTTP에 대한 표준을 정하여 배포하였습니다.
• 모든 브라우저에 웹 서버 등은 HTTP 표준에 따라 개발 되고 통신합니다.

Client(웹 브라우저)가 Server로 요청합니다. Server는 요청에 대해 적절히 대응해 응답(Response)를 합니다.

데이터를 주고 받는데 규칙을 제정한 것이 HTTP입니다.

---

기본적으로 인터넷, 웹은 Client , Server 구조로 만들어져 있습니다.

이 때 클라이언트가 서버가 어디있는지 알고 요청을 하는 걸까요?

실제로는 Server에는 IP주소가 할당되어 있습니다.

그래서 클라이언트는 IP 주소(특정한 서버)로 요청을 보냅니다.

IP 주소

• 인터넷에 연결된 기기가 가질 수 있는 네트워크 상의 주소입니다.
• IP 주소 정보로 원격에 있는 자원(웹 페이지, 이미지 등)을 요청 가능합니다.
• IPv4 vs IPv6
  • IPv4는 전세계적으로 2^32개의 IP 주소가 가능합니다. (하지만 기기의 증가로 고갈 예정)
    • ex) 30.129.75.143
  • IPv6는 2^128(약 3.4*10^38)개의 IP 주소가 가능합니다.
    • ex) 2606:2800:0220:0001:0248:1893:25C8:1946

공인 IP 주소와 사설 IP 주소 (Public vs Private)

공인 IP 주소

• 공인 IP 주소는 인터넷 상에 고유한 IP 주소
• 공인 IP 주소는 IP 주소를 관리하는 기관으로부터 할당 받아 사용 가능합니다.
• 대륙별, 국가별 할당 받은 공인 IP주소가 존재합니다.
• 누구나 접속 가능해야 하는 웹 서버 등은 공인 IP 주소가 필요합니다.

사설 IP 주소

• 사설 IP는 특정 조직 내부에서의 사설 네트워크 안에서만 통신 가능한 IP 주소입니다.
  • 기관, 회사, 가정 등
• 사설 네트워크 내부에서는 사설 IP로 통신 가능하나 외부에서는 사설 IP로 기기에 접근이 불가능합니다.
  • 회사의 동일한 공유기에 연결된 컴퓨터 간에는 사설 IP로 통신 가능합니다.
  • 외부에서는 그 회사 컴퓨터의 사설 IP로 통신 불가합니다.
• 사설 네트워크 간에는 사설 IP가 중복되어도 무방합니다.
  • 각 회사 내부에서만 사용하기 때문에 회사 A의 사설 IP 192.0.0.1와 회사 B의 ㅇ사설 IP 192.0.0.1 중복 되어도 됩니다.

 

호스트 명 (Hostname)

• 긴 숫자(일부 문자) 형태의 IP 주소는 외워서 활용하기 어렵습니다.
• 어려운 IP 대신 사람이 읽고 외우기 쉬운 형태의 주소가 필요했습니다.
  • 그래서 호스트명을 사용하게 되었습니다.
  • 호스트는 인터넷 상에 IP주소를 가진 기기를 의미합니다.
  • ex) blog.naver.com, news.google.com
• 호스트명으로 기기의 IP 주소를 찾을 수 있습니다.

localhost

• 현재 작업을 수행 중인 기기를 지칭하는 특수한 호스트명입니다.
• IP 주소로는 '127.0.0.1'로 표현합니다.
• 웹서버를 원격이 아닌 내 컴퓨터에서 실행했을 경우 연결됩니다.

 

Port

• IP 주소가 특정 호스트(기기)까지의 주소라면, Post는 호스트 내부의 프로세스의 네트워크 주소입니다.

30.129.75.143 IP 주소 뒤에 : port 번호를 쓰면 어떤 서버로 가서 전달을 하면 되는지 알 수 있습니다.

• Post 주소는 호스트에서 0 ~65,535까지 사용 가능합니다.
  • 잘 알려진 포트는 정해져 있는데 SSH는 22, HTTP는 80입니다. 이외에도 있습니다.
• 호스트 내부에서 Port 주소는 유일해야합니다.

---

이제 HTML에 대해서 좀 더 알아보겠습니다.

 

HTTP (Hypertext Markup Language)

• Hypertext
  • 링크를 통해 모든 문서가 연결되어 있는 구조
  • 일반적인 텍스트의 순차적인 구조를 뛰어넘는 비 순차적 접근법
• Markup 
  • 텍스트를 구조적으로 표현하는 방식입니다.
  • 예를 들어, 정보를 정형화해서 보여줄 수 있습니다.

• language 
  • 프로그래밍 언어

HTML은 정보를 구조적으로 표현하기 위해서 Tag 라는 개념을 사용합니다.

HTML 실습은 w3cschools.com에서 진행할 수 있습니다.

---

HTML 문서는 계층형 구조입니다.

• html tag: 최상위 태그
  • head tag: 문서의 부가 정보를 담는 태그
  • body tag: 문서의 컨텐츠를 담는 태그

우리가 실제로 보는 페이지의 내용은 body에 들어가게 됩니다.

HTML 문서의 컨텐츠는 Tag로 둘러 쌓입니다.

<tagname> 실제 컨텐츠 </tagname>

브라우저는 Tag와 Tag 내의 컨텐츠를 읽어서 사용자에게 디스플레이합니다.

Tag는 해당 컨텐츠를 사용자에게 어떻게 보여줄 것인지 정보를 담고 있습니다.

h1 ~ h6는 제목을 크기별로 나타내는 tag입니다.

br은 줄 바꿈입니다.

이런식으로 어떤 내용을 어떻게 보여줄지를 정하는 것이 tag입니다.

 

이런 tag들은 모두 외울 필요가 없습니다. 사용되는 종류는 제한적이기 때문에 적당히 외우신 후 필요한 태그들을 찾으시면서 확인하시면 좋습니다.

HTML 기초 Tag (1)

• Heading Tag
  • 제목 또는 부제목을 표시할 때 사용됩니다.
  • h1 ~ h6 까지 있습니다.
  • 숫자가 작을수록 폰트 크기가 큽니다.
  • 이 태그는 자동으로 줄바꿈이 적용됩니다.

• Paragraph Tag
  • 문단을 표현할 때 사용합니다.
  • <p> </p>로 사용합니다.
  • 문단의 첫 줄 위에 줄바꿈이 적용됩니다.

• Lline Break Tag
  • HTML은 줄바꿈이 적용되지 않습니다.
  • 문장 사이에 줄바꿈을 적용하기 위해서는 Line Breaker 적용이 필요합니다.
  • <br/>을 사용합니다.

• Bold Tag
  • 특정 문자를 강조할 때 사용합니다.
  • 2종류 Tag 사용 가능합니다. 효과는 같습니다.
    • <b></b> 단순 bold 처리
    • <strong></strong>, 중요한 text표시 (웹 접근성, 음성 강조 등)

• Italic Tag
  • 특정 문자를 이탤릭체로 변환할 때 사용합니다.
  • 2종류의 Tag 사용이 가능합니다.
    • <i></i> 단순 이탤릭체 처리
    • <em></em> 중요한 text 표시(웹 접근성, 음성 강조 등)

• Underline Tag
  • 특정 문자에 언더라인을 표시합니다.
  • <u></u> 를 사용합니다.

• Image Tag
  
  • HTML 문서에 이미지 삽입이 가능하도록 합니다.
  • <img></img> tag를 사용합니다.
  • attribute가 존재합니다. (HTML Tag의 부가적인 정보를 제공합니다.)
    • src: 이미지의 주소 정보
    • alt : 이미지를 표시할 수 없을 때 사용되는 대체 텍스트
    • 그 외에 높이, 너비 등의 attribute를 넣을 수 있습니다.

• Link Tag
  • Hypertext의 본질인 문서 간 연결을 생성합니다.
  • <a></a> Tag를 사용합니다.
  • href  attribute : 링크의 주소

 

---

HTML 기초 Tag (2)

Table

• Table 만들기
  • Table : 하나의 전체 표는 <table></table> 태그로 정의합니다.
  • Table Row: 표 내부의 1개의 행은 <tr>...</tr> 태그로 정의합니다.
  • Table Data : 표 내부의 1개의 셀은 <td> ... </td> 태그로 정의합니다.

• Table 효과
  • Table Header : 표의 제목 셀은 <th>... </th> 태그로 정의하면 볼드체로 처리됩니다.
  • <table> 태그의 border attribute를 통해 표의 테두리 두께를 지정할 수 있습니다.
  • <caption> 태그를 추가하여 표의 설명 추가가 가능합니다.

---

 

List

• List 
  • HTML의 List 종류에는 unordered, ordered가 있습니다.
  • unordered list는 <ul> ... </ul> 태그로, ordered list는 <ol> ... </ol> 태그로 정의합니다.
  • 각 list 내의 아이템은 <li> ... </li> 태그로 나열하여 정의합니다.

또한 list는 중첩이 가능합니다.

• List 효과
  • <ol> 태그 내에 type attribute를 활용해 다양한 효과를 지정할 수 있습니다.

• <ul> 태그 내에 style attibute를 활용해 다양한 효과를 지정할 수 있습니다.
  • list-style-type: 프로퍼티로 정의가 필요합니다.

---

Form

Form은 로그인, 회원가입, 댓글 남기기 등 입력 페이지를 구성하는데 필요한 Tag입니다.

• Form 만들기
  • 전체 입력 페이지는 <form> ... </form>으로 구성합니다.
  • 사용자로부터 입력 받을 각각의 정보는 <input> 태그의 type속성으로 지정합니다.

• 입력하고자 하는 정보에 따라서 <input> 태그의 type을 지정해야합니다.
• <input> 태그의 type 속성의 종류

  • 

---

CSS

웹 초창기에는 HTML에 디자인을 위한 <font>와 같은 태그들이 추가되면서 코드의 복잡도가 증가하고 정보로서의 웹의 가치가 떨어지게 되었습니다.

그래서 수정 용이성, 가독성, 코드 중복으로 인한 코드위 비용 효율성도 떨어지게 되었습니다.

이런 HTML의 한계를 CSS가 극복할 수 있도록 해주었습니다.

• HTML 태그의 한계를 극복
• HTML은 정보를 표현하는데 집중하고 CSS는 HTML 문서를 시각적으로 꾸미는 기능에 집중하는 기술입니다.
• 정보와 디자인을 분리할 수 있습니다.
• 정보를 수정하지 않고 디자인만 변경 가능합니다.
• CSS (Cascading Style Sheets)

 

CSS는 HTML 문서 안의 <style>과 </style> 태그를 생성합니다.

<style> 태그 내에 CSS코드를 삽입하면 됩니다.

CSS를 활용한 적용 대상 지정하는 방법에는 3가지가 있습니다.

1. HTML 태그명 이용하기
2. id 이용하기
3. class 이용하기

 

1. HTML 태그명 이용하기

CSS 에서 효과는 속성(property)과 값(value)으로 구성됩니다.

속성과 값은 콜론(:)으로 구분되고, 1개의 효과 끝에는 세미콜론(;)을 표기해야합니다.

여러 효과를 동시에 지정할 수 있습니다.

2. id 이용하기

HTML 내에는 중복되는 여러 개의 태그가 존재합니다.

특정 태그에만 효과를 지정하고자 할 때, 태그에 id 또는 class 값을 지정하여 이용합니다.

• 태그에 고유한 id 속성을 지정할 수 있습니다.
• 주로 css 효과 지정을 위해 특정 객체에 접근하는 기준이 id가 됩니다.
• 1개의 HTML 페이지 내에서 id는 중복될 수 없습니다.

• id 이용하기 : # 뒤에 id 명을 입력하면 됩니다.

3. class 이용

동일한 효과를 여러 태그에 한 번에 지정할 때, 별도의 class를 지정하여 활용 가능합니다.

id는 하나의 html에서 유니크하지만 class는 여러 Tag에 중복되어 지정이 가능합니다.

• class 이용하기 : . 뒤에 class 명 입력

---

 

다음 게시물에서는 Spring Boot 컨트롤러와 REST API에 대해서 알아보도록 하겠습니다.

열심히 나아가는 개발자 핑솔이었습니다.

코드프레소 URL: https://www.codepresso.kr/

프리미엄 IT 교육 서비스 - 코드프레소