코드는 나만의 비밀 다이어리가 아니야

HTTP가 뭐야?

HTTP는 HyperText Transfer Protocol의 약자로, 인터넷에서 데이터를 주고받을 때 사용되는 프로토콜입니다.

HTTP는 웹 브라우저와 웹 서버 간에 메시지를 교환하여 웹 페이지를 요청하고 전송하는 데 사용됩니다.

HTTP는 클라이언트-서버 모델을 따르며, 클라이언트가 요청(Request)을 보내면, 서버는 이 요청에 대한 응답(Response)을 반환합니다. 요청과 응답은 HTTP 메시지 형식으로 구성되며, 이 메시지는 텍스트 형식으로 작성됩니다.

HTTP는 웹 페이지를 전송하는 데 사용되며, 웹 페이지의 HTML, CSS, JavaScript 및 이미지 등의 리소스를 요청하고 전송합니다.

또한, HTTP는 웹 서버와 데이터베이스 서버, 웹 애플리케이션 서버 등의 서버 간 통신에도 사용됩니다.

HTTP는 기본적으로 TCP/IP 프로토콜 위에서 동작하며, 보안을 강화하기 위해 HTTPS(SSL/TLS 기반)로 대체되는 추세입니다.

HTTP는 웹의 발전과 함께 계속해서 발전하고 있으며, 현재는 HTTP/2, HTTP/3 등의 새로운 버전이 나와 사용되고 있습니다.

Axios 가 뭐야?

axios는 Promise 기반의 HTTP 클라이언트 라이브러리로, Node.js나 브라우저에서 사용할 수 있습니다. axios는 서버와의 HTTP 요청과 응답을 쉽게 처리할 수 있도록 도와주는 라이브러리입니다.

axios는 다음과 같은 기능을 제공합니다.

• HTTP 요청과 응답을 Promise 기반으로 처리할 수 있습니다.
• 브라우저와 Node.js 모두에서 사용할 수 있습니다.
• JSON 데이터를 자동으로 직렬화하고, 응답 데이터도 자동으로 역직렬화합니다.
• 요청과 응답에 대한 인터셉터 기능을 제공하여 요청과 응답을 수정할 수 있습니다.
• HTTP 요청에 대한 취소 기능을 제공합니다.
• HTTP 요청을 취소할 수 있는 CancelToken 기능을 제공합니다.

axios는 간단한 API를 제공하므로, HTTP 요청을 보내는 코드를 빠르게 작성할 수 있습니다. 또한 브라우저와 Node.js에서 모두 사용할 수 있으므로, 클라이언트와 서버 간의 HTTP 통신을 일관성 있게 처리할 수 있습니다.

Bearer 는 뭐야?

"Bearer"는 HTTP 인증 프로토콜에서 사용되는 토큰 기반 인증 방식 중 하나입니다.

헤더에 "Authorization" 필드를 포함하여 인증 정보를 전송할 때, "Bearer"는 토큰 기반 인증 방식을 사용한다는 것을 나타내며, 그 뒤에는 인증 토큰이 포함됩니다.

fetch('https://api.openai.com/v1/engines/davinci/completions', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': Bearer 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
},
body: JSON.stringify({
prompt: 'Write a sad poem about my border collie, Pepper',
max_tokens: 100
})
})
.then(response => response.json())
.then(data => {
console.log(data);
});

해당 코드에서 "Bearer" 다음에 오는 인증 토큰은 OpenAI API에 접근하기 위한 인증 토큰입니다. 이 토큰을 API에 제공하여 사용자 인증을 수행합니다. 이러한 방식으로 API를 보호하여 인증되지 않은 사용자가 API를 사용하는 것을 방지합니다.

CDN 이란 무엇일까

CDN(Content Delivery Network)은 인터넷 사용자가 웹 사이트를 방문할 때, 컨텐츠(이미지, 동영상, 문서 등)를 더 빠르게 전달하기 위해 사용되는 기술입니다. CDN은 전 세계에 분산된 서버 네트워크를 활용하여, 사용자와 가까운 위치에 있는 서버에서 컨텐츠를 제공함으로써 지연 시간을 최소화하고 대역폭을 줄이는 효과를 가집니다.

CDN은 일반적으로 다음과 같은 구성 요소로 구성됩니다.

1. Origin Server: 웹 사이트의 원본 컨텐츠를 저장하는 서버입니다.
2. Edge Server: 전 세계에 분산된 서버 네트워크 중, 사용자와 가까운 위치에 있는 서버입니다. Edge Server는 사용자 요청에 대한 응답을 빠르게 처리하기 위해 캐싱 등의 기술을 사용합니다.
3. DNS Server: CDN 서비스를 사용하는 경우, DNS(Domain Name System) 서버는 사용자 요청을 Edge Server로 라우팅합니다.

CDN 의 장점

1. 빠른 전송 속도: CDN은 전 세계에 분산된 서버 네트워크를 활용하여, 사용자가 컨텐츠를 빠르게 다운로드할 수 있도록 합니다.
2. 대역폭 감소: CDN은 Edge Server에서 컨텐츠를 캐싱하므로, 원본 서버로의 요청을 줄이고 대역폭을 절약할 수 있습니다.
3. 서버 부하 감소: CDN은 Edge Server에서 컨텐츠를 캐싱하므로, 원본 서버의 부하를 줄일 수 있습니다.
4. 보안 강화: CDN은 DDoS 공격 등의 보안 위협으로부터 원본 서버를 보호할 수 있습니다.
5. 지리적 제한 해결: CDN은 전 세계에 분산된 서버 네트워크를 활용하여, 지리적 제한을 해결할 수 있습니다.

CDN을 사용하는 사이트 예시

1. Netflix: Netflix는 전 세계에서 콘텐츠를 제공하는 대규모 비디오 스트리밍 서비스입니다. Netflix는 CDN을 사용하여 전 세계적인 사용자들에게 빠르고 안정적인 비디오 스트리밍 경험을 제공하고 있습니다.
2. Amazon: Amazon은 전 세계적인 온라인 쇼핑 몰로서, 많은 양의 콘텐츠(제품 이미지, 동영상 등)을 제공하고 있습니다. Amazon은 CDN을 사용하여 사용자의 지리적 위치에 따라 가장 가까운 서버에서 콘텐츠를 제공함으로써, 사용자의 페이지 로드 속도를 향상시키고 대역폭을 절약하고 있습니다.
3. Google: Google은 전 세계적으로 매우 인기 있는 검색 엔진입니다. Google은 CDN을 사용하여 매우 빠른 검색 결과 및 이미지, 동영상 등의 콘텐츠를 제공하고 있습니다.
4. Facebook: Facebook은 전 세계적으로 매우 인기 있는 소셜 네트워크입니다. Facebook은 CDN을 사용하여 전 세계적인 사용자들에게 빠르고 안정적인 페이지 로드 속도를 제공하고 있습니다.
5. YouTube: YouTube는 전 세계적으로 매우 인기 있는 동영상 공유 서비스입니다. YouTube는 CDN을 사용하여 전 세계적인 사용자들에게 빠르고 안정적인 동영상 스트리밍 경험을 제공하고 있습니다.

이러한 대형 웹 사이트들은 매우 방대한 양의 콘텐츠를 제공하고 있으며, 전 세계적으로 수많은 사용자들이 접근하고 있기 때문에, CDN을 사용하여 콘텐츠를 더욱 빠르고 안정적으로 제공하는 것이 매우 중요합니다.

CDN을 사용하지 않으면 생기는 문제들

1. 지연 시간: CDN을 사용하지 않으면, 전 세계적으로 분산되어 있는 사용자들이 웹 사이트에 접근할 때, 원본 서버에서 모든 컨텐츠를 다운로드해야 합니다. 이는 사용자 경험을 떨어뜨릴 뿐만 아니라, 웹 사이트의 성능과 로드 시간을 늦추는 원인이 됩니다.
2. 대역폭 문제: 웹 사이트의 인기가 많아지면, 대량의 트래픽이 발생하게 됩니다. 이는 대역폭을 초과하여 원본 서버에 부하를 줄 수 있습니다. 이로 인해 웹 사이트가 다운되거나 느려지는 문제가 발생할 수 있습니다.
3. 성능 문제: 사용자가 웹 사이트에 접근할 때, 원본 서버에서 모든 컨텐츠를 다운로드해야 하기 때문에, 웹 사이트의 성능이 떨어질 수 있습니다. 이는 사용자 경험을 저하시키고, 웹 사이트의 검색 엔진 최적화(SEO)에도 영향을 미칩니다.
4. 보안 문제: CDN을 사용하지 않으면, 원본 서버에 대한 공격이 쉽게 이루어질 수 있습니다. 또한, 원본 서버에서 컨텐츠를 다운로드하는 과정에서, 중간자 공격(MITM) 등의 보안 문제가 발생할 수 있습니다.

1. 새 파일을 생성후, 파일 이름을 (css 파일이름).css로 바꾼다.

나같은경우는 style이라는 파일이름을 썼다. 

파일 형식을 css로 지정해주면, style.css라는 파일이 생성된다.

2. 폴더를 생성해 css파일과 html 파일을 한 곳에 넣는다. 

3. HTML 파일의 <head> 섹터 안에 코드를 넣는다

<link rel="stylesheet" href="style.css">

이 코드를 복사해서 넣으면 된다. 

나는 css 파일의 이름이 style 이니까 style.css라고 해줬고, href 다음에는 자신의 css파일 이름을 넣으면 된다. 

랜딩페이지를 제작하기 위해서 HTML 구조를 잡다가 문득 Article 과 Section중 무엇을 선택해야 할까 의문이 들었다. 

두 태그 모두 HTML 5의 시맨틱 태그이다. <article> 과 <section> 태그는 출력에 변경 사항이 없기 때문에 서로를 대체할 수 있지만 구분하면 개발자와 브라우저가 해당 콘텐츠의 종류를 이해하기 쉽게 만들어준다. 

<article> 태그:

다른 컨텐츠가 필요하지 않은 독립적인 내용을 다른다. 

여러 <article> 태그를 메인 콘텐츠 안에 넣을 수 있지만, 각 기사는 독립적인 내용을 포함한다. 

예로 유튜브에서 한 페이지에 다른 종류의 비디오를 포함시키는것을 생각하면 된다. 

<section> 태그:

이 태그는 페이지를 소개, 연락처 정보, 세부 정보 등과 같은 세부적인 섹션으로 분할하는 데 사용된다. 

<section>은 다른 <section>태그 안에 포함될 수 있다.

일반 블록을 그룹화 하는 식. 

Client-server architecture

• World Wide Web (WWW) uses the client-server architecture
  • Clients obtain service from a centralized server
  • Server waits for client requests and make response

The OSI network model

• communication between clients and servers can be seen in multiple layers
  • Abstraction è reducing complexity of problems to smaller ones
  • Division of labour

THE OSI NETWORK MODEL

Communication protocols

• Clear definition of steps is needed for two computers to communicate
  • rules
  • syntax
  • semantics
  • synchronization of communication
  • error recovery methods
• There are protocols for every layer in the networking model
• The internet engineering Task force (IETF) develops and promotes voluntary internet standards

MAC and IP addresses

• Mac address (layer2): locating a piece of communication device on a local network
• IP address(layer3): identifying a network interface in networks
  • IPv4 (32-bit) vs IPv6 (128-bit)
  • Public addresses vs private addresses
    • Private addresses limit datagrams to be sent within local network only
    • e.g., 192.168.1.123 is only meaningful within a local network
• The ARP table on a device maintains the correspondence between MAC addresses and IP addresses within a local network

TCP VS UDP

• Layer 4 protocols: ensuring reliability of data transmission
• Transmission control protocols (TCP)
  • Handshakes to establish a connection
  • Built in system to check for errors
  • Guarantee for data order and completeness
  • Good for HTTPSs, HTTP etc. 
• User Datagram Protocols (UDP_
  • connectionless -> reducing the overhead of computation (time)
  • Extensive error checking and recovery not required
  • Good for: video conferencing, media streaming etc

Communicating over ports 

• In networking, connections are made on ports of a network device
• Each port is "listen to" served by one piece of software server
• Well known ports: 0-1023 (Http:80, Https:443)
• Registered ports: 1024-49151
• Private ports:49152-65535

Socket

• In network programming, a network socket is an endpoint for communication
• socket=transport protocol+IP address+port number
• Implementation depends on the programming language/environment

Localhost

• It is also possible to have both ends of communication only on one computer
  • Although it is in the same computer, this way allows communication to still go through network layers in the OS
• Usually identified in the computer as "localhost" or 127.0.0.1

Hypertext transfer protocol

• HTTP - hypertext transfer protocol
• Communication is initiated by a client 
  • a client sends a HTTP request to a server
  • the server returns a HTTP response to the client 
• It is stateless
  • every request is treated as an independent request
  • the protocol itself does not offer any means to relate two separate request
• HTTP/1.1 — 1997, HTTP/2 — 2015, HTTP/3 — expired draft (2020)

HTTP clients 

• Web client (“user-agent”): a software communicating with the web server over HTTP or HTTPS
  • web browsers: for end-user experience
    • html/css rendering
    • js execution
    • web technologies
  • web crawlers/ search engines
  • programmatic interfaces

HTTP servers

• Web server: handling requests for web documents with http/https, supporting server-side scripts
  • apache (was still the first last yr!)
  • nginx
  • Microsoft ISS
  • node.js
• Web caching
  • forward/reverse proxies
  • Content delivery networks(CDN)

Cyber security

• Application security
  
  • Assets at the software level
  • Database, document
• Network security
  • The infrastructure of network level
  • Connection, hardware

Important terms

• Validation
  • to check if something is valid or existing
• Varification
  • To check if something is real
• Autohentication
  • To verify a user with credentials as the correct person
• Authorization
  • To determine the permission on what a user can access.

To 10 of OWASP (open web application security project)

• Top 10 Web Application Security Risks (2021) • See more: https://owasp.org/Top10/

1. Broken access control

2. Cryptographic failures

3. Injection

4. Insecure design

5. Security misconfiguration

6. Vulnerable and outdated components

7. Identification and authentication failures

8. Software and data integrity failures

9. Security logging and monitoring failures

10. Server-side request forgery

Common Access Control Vulnerabilities

• Access granted to more than necessary capabilities, roles, or users 
• Bypassing access control checks possible with URL modificaiton
• Permitting access to someone else's account with unique identifier
• Metabeta manipulation with cookies or security tokens
• CORS misconfiguration giving rise to access from unauthorized orgins.

Bad implementation

• There may be carelessness or ignorance of threats
  • including sensitive data in URL
  • password not encrypted in storage or transit
  • Storing credentials in public code responsitories
  • permitting brute force attacks
  • running application in development debug mode for production
  • session timeout unhandled
  • missing access control to functions
  • using components with known vulnerabilities
• Using security frameworks(misconfig) instead might be helpful!
  • test the application thoroughly and rigorously

Mitigation to attacks (어떻게 완화하냐)

• Plan carefully for authentication and authorization
• combination of multiple layers of security measures
• sanitize all untrusted data
  • All user input should be considered untrusted (do not trust all users!), and should go through:
    • Validation: sting format expected?
    • Escaping: special characters (<,>) can inject HTML code. change to &lt or &gt 
    • Sanitization: if needed, only allow certain code in a whitelist.
• Enforce same-site requirements
  • Allow cross-site only if needed, with only minimal possibilities

Https (web security)

• By design, HTTP transfers everything in plain text
• HTTP secure is an extension to http
  • Authentication:
  • Encryption:
• Transport layer security(TLS)
  • private connection with symmetric cryptography
    • a key is used for encryption of plain text and decryption of ciphertext
    • a unique session key is generated at the beginning of each connection during the handshake

Certificates

• to verify identity, signed by a certificate authority(CA)
• Server certificates
  • Domain verification: only prove that domain is owned by a certain person (who.is 들어가면됨)
  • Organization Verification: company name and public address
  • Extended Verification: existence and location of a legal entity
• Browsers and OSes maintain a trusted list of CAs
  • If a cert is issued by these CAs, the cert is trusted

DDOS

• Distributed Denial-of-service attack
  • Exhausting the resources of the target, ex)consuming all the available bandwidth, or computation power
  • Distributed: not a single source of attack, usually using botnets
• Layer 7 DDOS
  • Flooding with application requests (ex, HTTP)
  • 전체 네크워크가 아닌 특정 웹 어플리케이션만 공격해서 마비시킴

Cloud solution for DDOS

• Distributed and intelligent system to mitigate attacks (ex) are you human?)

먼저 form 안에는 로그인 할수 있는 창, 설문조사 질문, 버튼 등 여러가지 요소가 있을것이다. 

이런걸 만들어볼거임

Text input field form control elements

• <input type="text"> : single line input
• <input type="password">: password
• <textarea>: multiple line input

<select name="language">
    <option value="C">C</option> 
    <option value="C++">C++</option> 
    <option value="Java">Java</option> 
    <option value="JavaScript" selected>JavaScript</option> 
    <option value="SQL">SQL</option>
</select>

<form>
    <input type="radio" id="male" name="gender" value="male"> <label for="male">Male</label><br>
    <input type="radio" id="female" name="gender" value="female"> <label for="female">Female</label><br>
    <input type="radio" id="other" name="gender" value="other"> <label for="other">Other</label>
</form>

<fieldset>: groups items together

<legend>: show group caption

button

<button type="button">

<button type="reset">: clears and restores all input controls in form

<button type="submit">: will by default run the form action (if action attribute defined in form --> send form data to server script, not defined--> reload page)

자 이제 교수가 준 html 스크립트를 한번 분석해보자. 

<form><!--form의 시작. 유저 인풋을 받기 위한 html form을 만들때 쓰인다. <form> 요소는 텍스트 필드, 체크박스, 라디오 버튼, 제출 버튼 등과 같은 다양한 유형의 입력 요소를 위한 컨테이너다 -->
<input type="text" <!-- single line input을 받을때-->
       name="LoginName" 
       value="Initial Value"> <!--initial value라는 글자가 이미 입력되어있다-->
  <br>
<input type="password" <!--password를 위한 박스-->
       name="Pass">
  <br>
<textarea name="name" 
          cols="25" rows="5">
Initial text to 
appear 
in the text area. <!-- name 박스 안에 처음 보이는 글자-->
</textarea>
  <br>
  <hr>
Email: <input type="email"> <!--이메일 입력을 위한 박스-->
  <br>
Search: <input type="search"> 
  <br>
Tel: <input type="tel">
  <br>
URL: <input type="url">
  <br>
Color: <input type="color">
  <br>
  <hr>
<input type="checkbox"
 name="web" checked> Web<br>
<input type="checkbox"
 name="design"> Design<br>
<input type="checkbox"
 name="code"> Code
<br>
  <hr>
<input type="radio" name="lang"
 value="Java"> Java<br>
<input type="radio" name="lang" 
 value="C++"> C++<br>
<input type="radio" name="lang" 
 value="JS" checked> JS
  <br>
  <hr>
<select name="language">
  <option value="C">C</option> <!-- 그냥 옵션--> 
  <option value="C++">C++</option>
  <option value="Java">Java</option>
  <option value="JavaScript" selected>		JavaScript</option>
  <option value="SQL">SQL</option>
</select>
<br>
  <hr>
  <form>
  <fieldset>
<legend>Choose your interests</legend>
<div>
  <input type="checkbox" id="coding" name="interest" value="coding"> <!--fine tuning input control 을 사용함(value)--> 
  <label for="coding">Coding</label>
</div>
<div>
  <input type="checkbox" id="music" name="interest" value="music">
  <label for="music">Music</label>
</div>
</fieldset>
<button type="button">Simple button</button><br>
<button type="reset">Reset button</button><br>
<button type="submit">Submit button</button>

</form>

이걸 실행시키면 이렇게됨

고등학교 CAS로 사이트 만들기할때 폼 만드는 방법 몰라서 구글 폼 썼던 기억이 있는데ㅋㅋㅋㅋ

이거랑 submit form element을 써서 form 을 보낼수 있도록 약간의 js 를 배우면 form도 이제 만들수 있을듯

발전한 나! 

참고로 고등학교때 만든 사이트:

http://esisb.now.sh

이때 JS 몰라서 사이트 publish는 딴애가 했는데 이제 내가 만들수 있어야하네ㅋㅋ

진짜 개허접하고 하찮다 

HTML과 마찬가지로 CSS는 기능이 이 외에도 매우 많으니 무작정 다 외우는것보단 

https://www.w3schools.com/ < 여기서 필요할때마다 찾아쓰는게 효율적입니다~

Length Units

• px: One dot on screen
• em: Relative to current font size
• rem: Relative to the root element font size
• %: size of the same property of parent
• vh: 1% of the viewpoint (browser screen)height
• vw: 1% of the viewpoint width

Different ways to print colours~~

1. Colour names 
2. Combination of red blue green value (#rrggbb)
3. Other functions including rgb(), hsl(), ...

a:hover{background:green}

CSS(Cascading Style Sheets) 는 사이트 꾸밀때 쓰는거임 

쓰면 사이트가 이뻐짐 

Why using CSS? - 수업 ppt에서 가져옴 

• Every element in HTML that is presentable has a set of style properties that can be modified via CSS 

• Separating design from contents

• Hopefully handled by different teams in the development

• Easily changing the skin of a web page

• Sharing of the stylesheet among pages on the same site

Using CSS in html

1. external stylesheet: where a stylesheet file (.css) is linked
2. internal stylesheet: the styles are included in the HTML head
3. inline styles: specifying the behaviour for a particular tag directly using a style attribute

External Stylesheet example (쓰는법)

<head>
...
<link rel="stylesheet" href="style1.css" > 
...
</head>

<!--이런식으로 head 안에 link 달아서 만들어놓은 css 파일을 불러온다-->

Internal Stylesheet example (쓰는법)

<head> 
... 
<style>
  hr { color: sienna; }
  p { margin-left: 20px; }
  body { background-image: url("images/back40.gif"); }
</style>
... 
</head>

<!--head 안에 style 테그를 넣는다-->

Inline style example (쓰는법)

<p style="color: sienna; margin-left: 20px;"> 
This is a paragraph
</p>

<!--set style directly-->

style 걍 꼴아박는다

Inheritance and cascading (종속, 상속)

• A child inherits the parent's properties if unspecified
• The idea of “cascading” reflects the priority of CSS rules:
  1. Overriding importance: inline style > internal stylesheets > external stylesheets
  2. More specific ones override generic ones
  3. Naturally, later ones override earlier ones

      

      

     Element selectors	Description
     p	Select all <p> elements
     h1, h2	Select all <h1> and <h2> elements
     *	Select all elements
     p a	Select all <a> elements that is a child of a <p> element

     Pseudo-element selectors	Description
     p:nth-child(3)	Select all the <p> elements that are the 3rd child
     p::first-letter	Select the first letters of all <p> elements

      

     ID and class selectors	Description
     #example	Select the only HTML element having attribute id="example" Note: the id value should be unique in the document
     .new	Select all HTML elements having attribute class="new"
     p.new	Select all <p> elements having attribute class="new"
     pa	Select all <a> elements that is a child of a <p> element

     Pseudo-class selectors	Description
     a:hover	Select all <a> elements that has the mouse cursor over it
     a:link	Select all unvisited <a> elements

     a:hover: 마우스 커서를 가져가면 <a>를 선택함. 

     ex) 색을 바꾸라고 하면 마우스 가져다댈때마다 색변함

     <html>
     <head>
       <title>TITLE</title>
     </head>
     <body>
       <p id="p2" style="background:yellow">random</p>
       <a>new</a>
       
     
     </body>
     </html>

a:hover{background:green}

How to change Fonts

https://fonts.google.com/ 여기 들어가면 많은 폰트들을 볼수있다. 

대충 이것들 복붙하면 폰트가 바뀜

 

원하는 폰트에 들어가서 다음과 같이 생긴 오른쪽 상단의 버튼을 누르면

이런 창이 나온다. 저기서 위에 있는 링크를 <head>안에 복붙하고 밑에있는 링크를 css에 넣으면 된다. 

body{font-family: 'Mochiy Pop P One', sans-serif;}

이런식으로. 

그러면 이런식으로 폰트가 이쁘게 바뀐다. 

Inline vs. Block-level elements in html

 

Positioning

By default, all HTML elements has a static position

• Four other possibilities
• absolute: define the top-left using top and left properties

• fixed: positioned relative to the browser window

• relative: relative to original static position

• sticky: position becomes fixed at a certain scroll position, often used for navigation bar or site title bar

 

The box model

All HTML elements are considered boxes, and they can occupy some space according to these properties

padding: 1px 2px 3px 4px; margin: 4px 3px 2px 1px;	top, right, bottom, left padding/margin being set accordingly
padding: 5px 0px; margin: 10px;	Only two values: top/bottom, left/right Only one value: all sides
padding-left: 5em; margin-top: 2em;	Also possible to set values independently
margin: 0 auto; border: 2px dotted red;	To align a box in middle, use auto x-margin