웹의 동작 개념
1. 클라이언트-서버 모델
웹 동작은 기본적으로 클라이언트(사용자가 사용하는 웹 브라우저)와 서버(웹 서버) 간의 상호작용을 기반으로 합니다. 이는 클라이언트-서버 모델이라고 불립니다.
- 클라이언트: 사용자가 웹 브라우저를 통해 웹 페이지를 요청하고, 서버로부터 응답을 받는 역할을 합니다.
- 서버: 클라이언트의 요청을 받아 처리하고, 그에 대한 응답을 돌려주는 컴퓨터 시스템입니다.
2. HTTP 프로토콜
웹에서 데이터를 주고받는 데에는 HTTP(HyperText Transfer Protocol) 프로토콜이 사용됩니다. HTTP는 클라이언트와 서버 간의 통신 규약으로, 요청(Request)과 응답(Response)의 형태로 구성됩니다.
- 요청(Request): 클라이언트가 서버에게 정보를 요구할 때 보내는 메시지입니다. 요청 메서드(예: GET, POST), 헤더(메타 데이터), 본문(데이터) 등으로 구성됩니다.
- 응답(Response): 서버가 클라이언트에게 요청에 대한 결과를 돌려주는 메시지입니다. 상태 코드(예: 200 OK, 404 Not Found), 헤더, 본문 등으로 구성됩니다.
3. 웹 동작 과정
일반적인 웹 페이지 요청과 응답 과정은 다음과 같습니다:
- 사용자가 URL 입력: 사용자가 웹 브라우저에 주소(Uniform Resource Locator)를 입력하면, 클라이언트는 해당 서버의 IP 주소를 찾기 위해 DNS(Domain Name System) 서버에 요청합니다.
- 서버 연결: 클라이언트가 DNS를 통해 서버의 IP 주소를 얻으면, HTTP 프로토콜을 사용하여 서버에 연결을 시도합니다.
- 요청 전송: 클라이언트는 서버에게 요청 메시지를 보냅니다. 요청 메시지는 HTTP 메서드(GET, POST 등)와 함께 요청하는 자원의 경로(URI) 및 필요한 데이터를 포함합니다.
- 서버 처리: 서버는 클라이언트의 요청을 받아 처리합니다. 이는 파일을 제공하거나, 데이터베이스에서 정보를 조회하거나, 프로그램을 실행하여 동적으로 페이지를 생성하는 등의 작업을 포함할 수 있습니다.
- 응답 전송: 서버는 요청에 대한 적절한 응답 메시지를 생성하여 클라이언트에게 보냅니다. 이 응답은 HTML 파일, 이미지, JSON 데이터 등의 형태일 수 있습니다.
- 페이지 렌더링: 클라이언트는 받은 응답을 해석하여 사용자에게 보여줄 수 있는 형태(웹 페이지)로 렌더링합니다.
4. 동적 웹 페이지
일반적으로 웹 페이지는 정적(Static)이거나 동적(Dynamic)일 수 있습니다.
- 정적 웹 페이지: 서버에 미리 저장되어 있는 HTML 파일과 같은 정적 파일을 클라이언트에게 직접 제공하는 웹 페이지입니다.
- 동적 웹 페이지: 클라이언트의 요청에 따라 서버에서 동적으로 생성되는 웹 페이지입니다. 데이터베이스 조회 결과를 포함한 페이지나 사용자 입력에 따라 다른 내용을 보여주는 페이지가 여기에 해당합니다.
이와 같이 웹 동작은 클라이언트와 서버 간의 상호작용을 통해 이루어지며, HTTP 프로토콜을 기반으로 데이터를 주고받습니다.
브라우저의 역할
1. 요청을 보냄
2. 받은 HTML파일을 그려주는 것
1. 우리가 보는 브라우저는 주소를 통해 API로 요청을 보냄
2. API는 요청에 맞는 HTML파일 돌려주고 브라우저는 받을 것을 화면에 그려줌
실제로 많은 웹 서비스에서는 API로 요청을 보내면 서버의 데이터베이스에서 데이터를 돌려주고, 브라우저에서 Javascript라는 언어에서 갈아 끼워준다.
HTML이란?
1. 마크업 언어
HTML은 마크업 언어의 한 종류로, 텍스트와 이미지 등의 다양한 요소를 사용하여 문서의 구조와 내용을 정의합니다. HTML 문서는 일반적으로 텍스트 파일로 작성되며, 웹 브라우저가 이를 해석하여 사용자에게 보여줍니다.
2. 구조
HTML 문서는 여러 요소(Element)들로 구성됩니다. 각 요소는 태그(Tag)라 불리는 특정 형식의 키워드로 정의됩니다. 주요 구성 요소는 다음과 같습니다:
- 태그(Tag): 각 요소의 시작과 끝을 정의합니다. 태그는 <와 >로 둘러싸인 이름으로 구성됩니다. 예를 들어, <html>, <head>, <body>, <p> 등이 있습니다.
- 요소(Element): 태그로 감싸진 요소를 의미합니다. 시작 태그(<태그명>)와 종료 태그(</태그명>) 사이에 내용(Content)이 위치할 수 있습니다. 예를 들어, <p>는 단락을 나타내는 요소로, 텍스트나 이미지 등이 포함될 수 있습니다.
- 속성(Attribute): 요소에 추가 정보를 제공하는 속성입니다. 각 속성은 값과 함께 지정됩니다. 예를 들어, <a> 태그는 링크를 만들기 위해 href 속성을 사용합니다: 링크 텍스트.
3. 기본 구조 예시
다음은 간단한 HTML 문서의 기본 구조입니다:
- <!DOCTYPE html>: HTML 문서의 유형을 정의하는 선언부입니다.
- <html>: HTML 문서의 시작을 나타내는 태그입니다.
- <head>: 문서의 메타 정보(제목, 스타일 시트 링크 등)를 포함하는 태그입니다. (meta, script, style, link, title 등)
- <title>: 문서의 제목을 정의하는 태그입니다.
- <body>: 문서의 본문을 포함하는 태그입니다. (span, img, input, textarea 등)
- <h1>, <p>, <a> 등: 각각 제목(heading), 단락(paragraph), 링크(anchor)를 나타내는 요소입니다.
4. 역할
HTML은 웹 페이지의 구조를 정의하고, 텍스트, 이미지, 링크 등 다양한 콘텐츠를 표시합니다. 또한 CSS(Cascading Style Sheets)와 함께 사용하여 콘텐츠의 스타일링을 지정하고 JavaScript와 함께 사용하여 상호작용성을 추가할 수 있습니다.
HTML은 웹 개발의 기본 요소이며, 모든 웹 페이지는 HTML로 작성되어 웹 브라우저에서 해석되어 사용자에게 보여집니다.
HTMTL tag 기초
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>스파르타코딩클럽 | HTML 기초</title>
</head>
<body>
<!-- 구역을 나누는 태그들 -->
<div>나는 구역을 나누죠</div>
<p>나는 문단이에요</p>
<ul>
<li> bullet point!1 </li>
<li> bullet point!2 </li>
</ul>
<!-- 구역 내 콘텐츠 태그들 -->
<h1>h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요.</h1>
<h2>h2는 소제목입니다.</h2>
<h3>h3~h6도 각자의 역할이 있죠. 비중은 작지만..</h3>
<hr>
span 태그입니다: 특정 <span style="color:red">글자</span>를 꾸밀 때 써요
<hr>
a 태그입니다: <a href="http://naver.com/"> 하이퍼링크 </a>
<hr>
img 태그입니다: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
<hr>
input 태그입니다: <input type="text" />
<hr>
button 태그입니다: <button> 버튼입니다</button>
<hr>
textarea 태그입니다: <textarea>나는 무엇일까요?</textarea>
</body>
</html>
자동정렬은 Shift + Alt + F(window기준)
로그인 페이지 만들기
<!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>
HTML 부모와 자식 구조
html 태그는 "누가 누구 안에 있느냐"를 이해하는 것이 가장 중요하다.
- 빨간색 div 안에, 초록색/파란색 div가 들어있다.
- 아래와 같은 상황에서 빨간색 div를 가운데로 옮기면, 내용물인 초록/파란 div도 모두 함께 이동한다.
- 즉, 박스를 옮기면 안의 내용물도 함께 옮겨지는 것과 같은 원리이다.
- 같은 원리로 초록 div의 글씨 색을 바꾸면, [나는 버튼1]의 글씨 색도 바뀐다.
CSS기초
꾸미기 위해서는 지칭할 수 있는 대상이 중요
<head>…..</head> 안에 <style>…..</style>로 공간을 만들어 작성합니다.
mytitle라는 클래스를 가리킬 때, .mytitle { } 로 작성할 것!
배경관련 background-color background-image background-size
사이즈 width height
폰트 font-size font-weight font-family color
간격 margin padding
margin은 바깥 여백
padding은 내 안쪽 여백
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.mytitle {
width:300px;
height:200px;
color: white;
text-align: center;
padding-top: 30px;
border-radius: 8px;
background-image: url('https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg');
background-position: center;
background-size: cover;
}
</style>
</head>
<body>
<div class="mytitle">
<h1>로그인 페이지</h1>
<h5>아이디, 비밀번호를 입력해주세요</h5>
</div>
<p>ID : <input type="text" /></p>
<p>PW : <input type="text" /></p>
<button>로그인하기</button>
</body>
</html>
로그인 화면 가운데로 옮기기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.mytitle {
background-color: green; // 배경색을 녹색으로 설정합니다.
width: 300px; // 너비를 300px로 설정합니다.
border-radius: 10px; // 모서리를 둥글게 10px로 설정합니다.
color: white; // 텍스트 색상을 흰색으로 설정합니다.
text-align: center; // 텍스트를 중앙 정렬합니다.
padding: 30px 0px 0px 0px; // 위쪽에 30px의 패딩을 주고, 양쪽에 0px 패딩을 적용합니다.
background-image: url('https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg');
// 배경 이미지로 지정된 URL의 이미지를 설정합니다.
background-position: center; // 배경 이미지를 중앙에 배치합니다.
background-size: cover; // 배경 이미지를 요소 크기에 맞게 비율을 유지하며 채웁니다.
}
.wrap {
width: 300px; // 너비를 300px로 설정합니다.
margin: 20px auto 0px auto; // 위쪽에 20px의 마진을 주고, 양쪽 마진을 자동으로 설정하여 중앙 정렬합니다.
}
</style>
</head>
<body>
<div class="wrap">
<div class="mytitle">
<h1>로그인 페이지</h1>
<h5>아이디, 비밀번호를 입력하세요</h5>
</div>
<p>ID : <input type="text" /></p>
<p>PW : <input type="text" /></p>
<button>로그인하기</button>
</div>
</body>
</html>
앨범(미니 프로젝트)
<!doctype html> // HTML5 문서임을 선언합니다.
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384- EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> // Bootstrap 5.0.2의 CSS를 불러옵니다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script> // Bootstrap의 JavaScript 번들을 불러옵니다.
<title>My Album</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap');
// 해당 URL을 통해 Google의 'Gowun Dodum' 폰트를 가져옵니다.
* {
font-family: 'Gowun Dodum', sans-serif; // 모든 요소에 폰트를 적용합니다.
}
.mytitle {
color: white; // 텍스트 색상을 흰색으로 설정합니다
height: 250px; // 높이를 250px로 설정합니다.
/* 내용물을 정렬 */
display: flex; // Flexbox 레이아웃을 사용하여 자식 요소를 정렬합니다.
flex-direction: column; // Flexbox 방향을 세로로 설정합니다.
align-items: center; // 자식 요소를 수평 중앙으로 정렬합니다.
justify-content: center; // 자식 요소를 수직 중앙으로 정렬합니다
background-image: url('https://images.unsplash.com/photo-1511992243105-2992b3fd0410?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
// 배경 이미지 URL을 설정합니다.
background-position: center; // 배경 이미지를 중앙에 배치합니다.
background-size: cover; // 배경 이미지를 요소 크기에 맞게 채웁니다.
}
.mytitle > button {
width: 150px;
height: 50px;
background-color: transparent; // 투명한 배경색을 설정합니다.
border: none; // 기본 테두리를 없앱니다.
color: white; // 텍스트 색상을 흰색으로 설정합니다.
font-size: 18px; // 폰트 크기를 18px로 설정합니다.
font-weight: bold; // 폰트 두께를 굵게 설정합니다.
border-radius: 5px; // 모서리를 둥글게 5px로 설정합니다.
border: 1px solid white; // 흰색 1px 테두리를 설정합니다.
margin-top: 20px; // 위쪽에 20px의 마진을 설정합니다.
}
</style>
</head>
<body>
<div class="mytitle">
<h1>나만의 추억 앨범</h1>
<button>추억 저장하기</button>
</div>
</body>
</html>
최종 HTML 결과
위 HTML과 CSS 코드를 실행하면, 중앙에 배경 이미지와 흰색 텍스트로 제목이 표시된 250px 높이의 박스와 투명한 배경에 흰색 테두리가 있는 "추억 저장하기" 버튼이 있는 웹 페이지가 나타납니다.
포스팅 박스 제작
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<title>My Album</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap');
* {
font-family: 'Gowun Dodum', sans-serif;
}
.mytitle {
background-color: green;
color: white;
height: 250px;
/* 내용물을 정렬 */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-image: url('https://images.unsplash.com/photo-1511992243105-2992b3fd0410?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
background-position: center;
background-size: cover;
}
.mytitle > button {
width: 150px;
height: 50px;
background-color: transparent;
border: none;
color: white;
font-size: 18px;
font-weight: bold;
border-radius: 5px;
border: 1px solid white;
margin-top: 20px;
}
.mycards {
margin: 20px auto 20px auto;
width: 1200px;
}
.mypostbox {
width: 500px;
margin: 20px auto 20px auto;
padding: 20px 20px 20px 20px; // 안쪽으로 띄우기
border-radius: 5px;
box-shadow: 0px 0px 3px 0px blue; // 그림자 효과
}
.mybtn {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin-top: 10px;
}
.mybtn>button {
margin-right: 10px;
}
</style>
</head>
<body>
<div class="mytitle">
<h1>나만의 추억 앨범</h1>
<button>추억 저장하기</button>
</div>
<div class="mypostbox">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">앨범 이미지</label>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">앨범 제목</label>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">앨범 날짜</label>
</div>
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
<label for="floatingTextarea">앨범 내용</label>
</div>
<div class="mybtn">
<button type="button" class="btn btn-dark">기록하기</button>
<button type="button" class="btn btn-outline-dark">닫기</button>
</div>
</div>
<div class="mycards">
<div class="row row-cols-1 row-cols-md-4 g-4">
<div class="col">
<div class="card h-100">
<img src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">앨범 제목</h5>
<p class="card-text">앨범 내용</p>
</div>
<div class="card-footer">
<small class="text-muted">앨범 날짜</small>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">앨범 제목</h5>
<p class="card-text">앨범 내용</p>
</div>
<div class="card-footer">
<small class="text-muted">앨범 날짜</small>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">앨범 제목</h5>
<p class="card-text">앨범 내용</p>
</div>
<div class="card-footer">
<small class="text-muted">앨범 날짜</small>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">앨범 제목</h5>
<p class="card-text">앨범 내용</p>
</div>
<div class="card-footer">
<small class="text-muted">앨범 날짜</small>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
'웹개발 기초정리(프엔)' 카테고리의 다른 글
| Fetch 정리. 1 (1) | 2024.07.05 |
|---|---|
| JQuery 기초정리. 2 (1) | 2024.07.05 |
| JQuery기초 정리. 1 (2) | 2024.07.02 |
| Javascript 정리. 1 (1) | 2024.07.02 |
| 웹 개발 기초정리. 2 (1) | 2024.07.02 |