HTTP 메서드란?
클라이언트와 서버 간 통신을 관리하는 중요한 방식
그러나 잘못 사용시, 보안에 취약할 수 있다.
GET 방식은 URL에 데이터를 포함하여 전송하므로 ?이름=값과 같은 형태로 데이터가 노출된다.
반면 POST 방식은 데이터를 요청의 본문(Body)에 포함하여 전송하기 때문에 상대적으로 보안성이 더 높다.
그렇지만 두개의 방식 모두 적절한 보안 조치를 적용하지 않으면 취약점 발생 💀
PUT 방식은 데이터를 수정할 때 사용하는 HTTP 메서드이다.
DELETE 방식은 데이터를 삭제할때 사용하는 HTTP 메서드이다.
이들은 RESTful API에서 CRUD(Create, Read, Update, Delete)작업을 표현하는데 사용된다.
RESTful이란?
HTTP 메서드(GET, POST, PUT, DELETE 등)의 본래 의미를 활용해 백엔드 서버에 요청을 보내는 방식이다.
이를 통해 서버는 클라이언트의 요청에 따라 자원을 생성해 CRUD하는 작업을 수행한다.
URL에 기능, 기술, data가 화면에 노출되지 않게 하려면 어떻게 해야할까?🤔
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>회원가입 폼</title>
</head>
<body>
<h1>회원가입</h1>
<form action="main" method="post">
<input type="hidden" name="sign" value="registMember" />
<label for="name">이름:</label><br />
<input type="text" id="name" name="name" required /><br /><br />
<label for="email">이메일:</label><br />
<input type="email" id="email" name="email" required /><br /><br />
<label for="password">비밀번호:</label><br />
<input
type="password"
id="password"
name="password"
required
/><br /><br />
<input type="submit" value="가입하기" />
</form>
</body>
</html>
input="hidden"을 작성하면 된다. 그러면 화면의 URL에 기능, 기술, data를 가릴 수 있다. 즉, 찾는 과정을 힘들게하는 것이다.
그러나, 개발자 도구(F12)를 통해 볼 수 있는 단점이 있다.
CSR과 SSR
-> 웹 페이지를 렌더링하는 방식, 두개의 가장 큰 차이는 클라이언트와 서버가 콘텐츠를 어떻게 처리하고 사용자에게 보여주는지에 대한 차이
CSR(Client-Side Rendering)
클라이언트 측 렌더링은 웹 브라우저에서 렌더링 작업이 수행되는 방식
작동방식
- 서버는 HTML의 기본 구조와 함께 JavaScript 코드를 클라이언트로 보낸다.
- 브라우저는 받은 JavaScript를 실행하여 화면에 콘텐츠를 동적으로 렌더링한다.
- 초기 로딩 시 빈 HTML만 표시되고, JavaScript가 실행되면서 데이터가 채워진다.
SSR(Server-Side Rendering)
서버 측 렌더링은 HTML 콘텐츠가 서버에서 생성된 후 브라우저로 전달되는 방식
작동방식
- 클라이언트가 요청을 보내면 서버에서 완전히 렌더링된 HTML 페이지를 생성하여 클라이언트로 보낸다.
- 브라우저는 HTML을 바로 렌더링하여 화면에 표시한다.
CSS란?
Cascading(계단식) Style Sheets의 약자, 웹 페이지의 스타일을 정의하는데 사용되는 스타일 시트언어이다.
- Cascading(계단식) - 여러 스타일 규칙이 겹칠 때 우선순위를 계산하여 어떤 스타일이 적용될지 결정
- Style Sheets - HTML 문서와 별도로 작성된 파일에 스타일 정보를 담아, 웹 페이지를 일관되게 꾸밀 수 있다.
CSS 구문
선택기는 스타일을 지정할 HTML 요소를 가리킨다.
각 선언에는 CSS 속성 이름과 콜론으로 구분된 값이 포함되어야 한다.
CSS 선택자
스타일을 만들고자 하는 HTML 요소를 "찾기"(또는 선택)하는데 사용된다.
- 간단한 선택자(이름, ID, 클래스에 다라 요소 선택)
- 조합 선택자(특정 관계에 따라 요소를 선택)
- 의사 클래스 선택자(특정 상태에 따라 요소를 선택)
- 의사 요소 선택자(요소의 일부를 선택하고 스타일 지정)
- 속성 선택자(속성 또는 속성 값에 따라 요소 선택)
CSS 그룹 선택자
그룹 선택자는 동일한 스타일 정의를 가진 모든 HTML 요소를 선택
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
</body>
</html>
| 선택자 | 예시 | 설명 |
| #id | #firstname | id="firstname"인 요소를 선택 |
| .class | .intro | class="intro"인 모든 요소를 선택 |
| * | * | 모든 요소를 선택 |
| element | p | 모든 <p>요소를 선택 |
| element,element,.. | div, p | 모든 <div> 요소와 모든 <p>요소를 선택 |
CSS를 삽입하는 3가지 방법
- 외부 CSS
- 내부 CSS
- 인라인 CSS
외부 CSS란?
외부 스타일 시트를 사용해 파일 하나만 변경하면 전체 웹사이트의 모양 변경 가능
각 HTML 페이지는 head 섹션의 <링크> 요소 내부에 외부 스타일 시트 파일에 대한 참조를 포함해야한다.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
내부 CSS란?
단일 HTML 페이지에 고유한 스타일을 적용해야 할 때 사용 가능
내부 스타일은 <style> 요소 내부에 정의되며, 이는 <head> 섹션 안에 위치한다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
인라인 CSS란?
인라인 스타일은 단일 요소에 고유한 스타일을 적용할 때 사용할 수 있다.
인라인 스타일을 사용하려면 관련 요소에 style 속성을 추가합니다. style 속성에는 모든 CSS 속성을 포함할 수 있다.
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
상속 순서 (Cascading Order)
HTML 요소에 여러 스타일이 지정되었을 때 어떤 스타일이 적용될까?
페이지 내 모든 스타일은 다음 규칙에 따라 "가상" 스타일 시트로 결합된다. 첫 번째 항목이 가장 높은 우선순위를 가진다.
- 인라인 스타일 (HTML 요소 내부)
- 외부 및 내부 스타일 시트 (head 섹션 안)
- 브라우저 기본 스타일
따라서 인라인 스타일이 가장 높은 우선순위를 가지며, 외부 스타일, 내부 스타일, 브라우저 기본 스타일을 덮어쓰운다.
CSS 배경
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This page has a light blue background color!</p>
</body>
</html>배경 불투명성
opacity 속성은 요소의 불투명도/transpa을 지정한다. 0.0에서 1.0 사이의 값을 가질 수 있다. 값이 낮을수록 더 투명해진다.
div {
background-color: green;
opacity: 0.3;
}
⭐opacity 속성을 사용하면 모든 하위 요소가 동일하게 투명성을 상속한다. 자식 요소에 불투명성을 적용하지 않으려면 RGBA 색상 값을 사용하면 된다.
div {
background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */
}
CSS 배경 이미지
background-image 속성은 요소의 배경을 사용할 이미지를 지정한다.
기본적으로 이미지는 전체 요소를 덮도록 반복된다.
body {
background-image: url("paper.gif");
}
<p>요소와 같은 특정요소에도 설정할 수 있다.
p {
background-image: url("paper.gif");
}
CSS 배경 반복
기본적으로, background-image 속성은 이미지를 수평과 수직으로 반복한다.
수평으로 반복하고 싶을 경우
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
수직으로 반복하고 싶을 경우: background-repeat: repeat-y;
배경 이미지 한 번만 표시하기
배경 이미지를 한 번만 표시하려면 background-repeat: no-repeat;을 사용
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
}
배경 이미지 위치 조정
배경 이미지의 위치를 변경하려면 background-position 속성을 사용 EX) 이미지를 오른쪽 상단에 배치하려면 다음과 같이 작성
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
CSS background-attachment
background-attachment 속성은 배경 이미지를 스크롤할지 수정할지를 지정 (페이지의 나머지 부분에서는 스크롤하지 않는다. )
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
fixed는 고정, scroll를 작성하면 배경 이미지가 페이지의 나머지 부분과 함께 스크롤
CSS 테두리 스타일
border-style 속성은 표시할 테두리의 종류를 지정
| dotted | 점선 테두리 정의 |  |
| dashed | 대시선 경계 정의 |  |
| solid | 실선 경계 정의 |  |
| double | 이중 경계 정의 |  |
| groove | 3D 홈 경계 정의, 경계의 색상에 따라 효과가 달라진다. |  |
| ridge | 3D 리지 경계 정의, 경계의 색상에 따라 효과가 달라진다. |  |
| inset | 3D 인셋 경계 정의, 경계의 색상에 따라 효과가 달라진다. |  |
| outset | 3D 아웃셋 경계 정의, 경계의 색상에 따라 효과가 달라진다. |  |
| none | 경계를 정의 x |  |
| hidden | 숨겨진 경계를 정의 |  |
CSS 여백 (Margin)
CSS 여백 속성은 요소 주위에 공간을 만들 때 사용되며, 정의된 경계 외부에 적용
CSS를 사용하면 각 요소의 여백을 세밀하게 조정
여백은 상, 우측, 하단, 좌측 각면에 대해 개별적으로 설정할 수 있는 속성을 제공
- margin-top: 상단 여백 설정
- margin-right: 우측 여백 설정
- margin-bottom: 하단 여백 설정
- margin-left: 좌측 여백 설정
'💡 URECA' 카테고리의 다른 글
| [URECA] DAY 6 | JavaScript(3) (1) | 2025.02.03 |
|---|---|
| [URECA] DAY 5 | JavaScript(2) (0) | 2025.01.24 |
| [URECA] DAY 4 | 부트스트랩(2), JavaScript(1) (0) | 2025.01.23 |
| [URECA] DAY 3 | CSS(2), 부트스트랩(1) (3) | 2025.01.22 |
| [URECA] DAY 1 | Computer Paradigm의 변천과 Web 사용 버전 그리고 HTML(1) (1) | 2025.01.20 |
