웹 개발 A to Z (1주차: 웹 브라우저 동작 원리, HTML & CSS 기초)

내일배움캠프 Spring 3기/웹개발 A to Z

웹 개발 A to Z (1주차: 웹 브라우저 동작 원리, HTML & CSS 기초)

yokxim 2024. 8. 6. 21:55

웹 사이트는 어떻게 만드는 걸까?

먼저 오늘은 웹사이트를 만드는 것에 있어서 뼈대만 구성해 보려고 한다.

바로 HTML과 CSS를 활용하는 것.

그리고 더 나아가 Javascript와 JQUERY까지 찍먹해 보려고 한다.

먼저 HTML은 웹사이트의 뼈대에 해당하고, CSS는 디자인, 그리고 움직임을 추가하려면 자바스크립트를 넣어야 한다.

오늘은 HTML과 CSS를 통해 웹사이트를 만드는 방법과 Bootstrap을 사용하는 방법에 대해 공부해보자.

< 웹 브라우저 동작 원리 >

먼저 네이버를 검색하면, 어떻게 네이버 화면이 내 컴퓨터로 옮겨져 나오는걸까?

어렸을 때는 컴퓨터 안에 사람들이 살고 있어서... 그 사람들이 열심히 일을 하면 나오는줄 알았다.

(사실 옛날 컴퓨터는 사이즈가 커서 어린 마음에 진짜 그렇게 생각했었다, 텔레비전도 ㅋㅋ)

그러면 이런 홈페이지 정보는 어떻게 보게 되는걸까?

--> 웹 브라우저의 정보를 담고 있는 곳, 즉 정보와 자원을 갖고 있는 제공자를 서버(Server), 그리고 정보와 자원을 사용하기 위해 서버에 요청하는 곳이 바로 클라이언트(Client)이다.

우리가 보는 웹 페이지는 서버에서 준비해두었던 것을 "받아서" 브라우저에서 우리가 볼 수 있도록 "그려주는" 역할을 한다! 즉 브라우저는 요청을 보내고, 요청의 답으로 받은 걸 그려주는 걸 하게 된다.

요청은 서버가 만들어 놓은 API라는 창구에 미리 정해진 약속대로 요청을 보내게 되는데, 한번만 요청을 보내고 받는 것이 아니라, 웹을 쓰는 동안에도 지속적으로 요청을 보낸다. 요청을 보낼 때마다 전체 페이지 정보를 다 가져오지는 않고, 필요한 데이터만 가져오는 경우도 있는데, 이때 JSON 형식을 사용한다. JSON 형식은 다음에 알아보자..

< HTML 기초 >

앞서 HTML은 웹사이트의 뼈대에 해당한다 말했는데, 웹의 전반을 HTML을 통해서 작성하게 된다.

CSS는 디자인을 담당하는데, CSS를 잘 사용할 줄 알아도, 예쁘게 만드는 것은 조금 다른 차원의 이야기이기 때문에 보통 웹 디자이너나 퍼블리셔에게 외주를 맡겨 사이트를 만들곤 한다.

먼저 vs code에서 html을 적으면 html:5라는 자동완성이 켜지는데, 이걸 누르면..

이런 식으로 html 뼈대가 완성된다!

그리고 우클릭을 한후 Open with Live Server를 누르면 즉각적으로 내 코드가 반영된 페이지를 확인할 수 있다.

HTML은.. 먼저 <head> 영역과 <body> 영역으로 나뉘는데,

head 영역에는 페이지의 속성 정보를, body 안에는 페이지의 내용을 담는다.

head 안에는 보통 meta, script, style, link, title 등을 담고, body에는 span, img, input, textarea 등을 담는다!

그리고 코드를 정렬하는 것은 아주 중요하다!

바로 아래처럼 코드가 적혀 있다면.. 아주 곤란할 것이다.

프로그래머 중에 유명한 어떤 사람이 그랬는데.. 개발자들은 코드를 쓰는 시간보다 코드를 읽는 시간에 더 많은 시간을 투자한다고 한다나... 아무튼 읽는 시간이 많다니, 가독성이 좋은 코드의 중요성이 더 올라가는 것만 같다.

vs code에서는 Shift + Alt + F를 누르면, (맥은 Shift + Option + F) 자동정렬 기능이 사용된다.

< 로그인 페이지 만들기 >

자, 이런 로그인 페이지를 만들어보자. 아주 간단하다!

먼저 원하는 곳에 폴더를 만들고 그 폴더를 vs code에서 파일 열기로 오픈한다.

그리고 그 폴더 안에 login.html라는 파일을 만들어보자!

그리고 아래 코드를 복붙한다.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>로그인페이지</title>
</head>
<body>
<h1>로그인 페이지</h1>
<p>ID: <input type="text"/></p>
<p>PW: <input type="text"/></p>
<button>로그인하기</button>
</body>
</html>

< CSS 기초 >

HTML만 써서 코드를 만들기는 너무 밋밋하니, 하는 김에 CSS를 같이 배워보자!

CSS를 사용할 때는 내가 바꾸고 싶은 곳을 가리킬 수 있는 객체가 있어야 한다.

'나는 버튼1'을 다룰 때, 그 버튼을 포함한 영역을 다룰 때, 전체 영역을 다룰 때 모두 공간을 다르게 설정해서 디자인을 제어할 수 있다.

먼저 CSS는 <head>...</head> 안에 <style> ... </style>로 공간을 만들어 작성해야 한다.

내가 꾸밀 영역을 골랐다면, div이던 p던 뭐던 간에 그 부분을 class = "클래스명"으로 클래스 이름을 정해준 후 그 이름을 <style> 안에서 ".클래스명 { }"으로 설정을 변경할 수 있다.

예를 들자면..

이 코드에서는 제목, 문단, 버튼을 각각 mytitle, mytxt, mybtn으로 분류하고 <style> 안에서 각 스타일의 설정을 변경했다.

자주 쓰이는 CSS 키워드에는

* h1 ~ h5

* background-image, background-size, background-position

* color, width, height, border-radius, margin, padding 등이 있다!

또한 만들어둔 로그인 페이지를 가운데로 가져오고 싶다면, 로그인 페이지를 박스로 씌우고 양쪽 여백을 조정하면 가운데로 오게 된다!

전체 div을 만들고, width을 주고, margin:auto를 사용하면 된다.

그리고 사용할 폰트를 수정하고 싶다면, 여기서는 구글 폰트에서 폰트를 가져와 사용하는 방법을 소개한다.

먼저 사용하고 싶은 폰트를 골라서 Get Font를 누른다.

그리고 Get embed code를 누르면..

Web 항목에서 @import를 찾으면

이렇게 <style> 태그 사이의 내용을 복사해서 내 코드 <style> 안에 넣어주면 된다.

그리고 만약 화면 전체에서 사용하고 싶다면, 아래 코드를 <style> 내에 적어준다.

< 부트스트랩 가져다 쓰기 >

먼저 부트스트랩, Bootstrap이란 예쁜 CSS가 모아져 있는 곳이라고 생각하면 쉽다.

CSS를 다룰 줄 알아서 이쁜 디자인을 직접 만들어 보고 싶은 사람도... 실제로 만들려고 하다보면 이런걸 왜 하고 있는지 모르겠는 자신을 볼 수 있을 지도 모른다.

그걸 방지하기 위해서라도 이 웹사이트에서 예쁜 디자인을 골라서 사용하는 것이 내 정신건강을 지킬 수 있는 방법이다.

https://getbootstrap.com/

Bootstrap

Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.

getbootstrap.com

먼저 내 코드 <head> 안에 이 코드를 집어넣자!

그리고 이쁘다고 생각하는 디자인의 코드를 가져와 <style> 안에 넣어주면 사용이 가능하다.

나머지는 2주차에서! 2주차에서는 부트스트랩, 자바스크립트, JQUERY에 대해 배워보자.