서버/클라이언트
서버, 클라이언트 웹 동작에 있어 필요한 기본 요소이다.
클라이언트
웹사용자가 사용하는 인터넷이 연결된 장치와 이에 이용가능한 소프트웨어를 말한다.
말이 어렵게 되어있는데 간단히 인터넷이 연결된 컴퓨터, WI-FI가 연결된 노트북, 핸드폰이 포함되며 이러한 장치에서 사용하는 웹 브라우저를 말한다.
여기서 웹 브라우저는 크롬, 파이어폭스, 익스플로어, 마이크로소프트 엣지 등을 말한다.
클라이언트가 요청을 보내 데이터를 받으면 해당 데이터를 사용자가 볼 수 있도록 표시한다.
서버
웹페이지, 사이트 등을 저장하는 컴퓨터이다. 여기서 컴퓨터는 우리가 사용하는 컴퓨터가 아닌 해당 정보가 말그대로 저장된 컴퓨터이다. 이러한 컴퓨터는 회사 내부에 존재하며 클라이언트의 장비가 웹페이지에 접근을 요청할때 서버에서 웹 페이지의 사본이 다운로드된다.
서버에서 HTML를 뿌려주기도 하지만 매번 HTML을 뿌려주기보단 해당 틀에서 데이터만을 보내 데이터를 갈아끼우는 형식을 사용한다.
HTML
HyperText Markup Language의 약자이다. 이름에서 알 수 있듯이 마크업 언어로 서버에서 보내지는 데이터로 페이지를 그리는데 목적이 있다.
보내지는 데이터로 페이지를 그리는데는 강하지만 반대로 사용자에 입력에 따른 반응은 약하다. 때문에 이를 보안하기 위해 JavaScript, Ajax 등이 사용된다.
HTML 구조
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charest="UTF-8">
<title>이딴게.. 페이지?</title>
</head>
<body>
<h1>이거시 페이지인가??</h1>
<p>이런 끔직한 곳에 있지말고 아래 링크로 네이버나 가세요ㅎㅎ</p>
<a href="http://naver.com"/>
</body>태그(Tag)
HTML은 태그로 구성되는데 이때 태그는 '<'와 '>'로 묶인 일련의 명령어이다.
태그는 총 세가지로 나뉘는데
- 시작태그 :
<a>의 형태로 해당 요소의 시작을 의미한다. 시작태그에는 속성과 값을 가질 수 있다. 아래에서 알 수 있듯이 href가 속성으로 해당 속성에 값으로http://naver.com를 집어넣은 형태이다.
<a href="http://naver.com"/>- 종료태그 :
</a>의 형태로 해당 요소의 끝을 의미하며 앞에 '/'를 붙여 시작태그와 구별한다. - 빈태그 :
<input type="text" />의 형태로 하나의 태그로 하나의 요소를 구성한다.
요소(Element)
태그와 내용을 포한한것을 말한다.
<p>태그포함해서 모오오든거시!! 엘리먼트 즉 요소이다!</p>
head
<head>로 묶인 구역을 말하며 보통 head 안에는 페이지의 속성 정보가 들어가며 보통 meta, script, link, title이 들어간다.
body
<body>로 묶인 구역을 말하며 해당 구역내에는 페이지의 내용이 들어간다.
우리가 보이는 내용들 대부분이 body에 들어가게 된다.
CSS
Cascading Style Sheets의 약자이다.
HTML이나 XML로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트언어로 HTML이 틀을 이룬다고하면 CSS를 통해 살을 붙인다. 즉, 페이지를 더 이쁘게 만들기 위한 언어이다.
이또한 페이지에 들어가는 요소 즉, <head>구역 안에 들어가야 한다.
<head>구역 안에 <style>태그를 통해 영역을 만들어 스타일링한다.
CSS를 통해 무작정 꾸미는 것이 아닌 클래스와 아이디를 기준으로 해당 태그를 찾아 그 태그만을 꾸민다.
자주쓰는 스타일
p{
/*배경 관련*/
background-color : green;
background-image : url("");
background-position : center;
background-size : cover;
/*사이즈 관련*/
max-width : 500px;
width : 95%;
max-height : 500px;
height : 95%;
/*배경 관련*/
font-size : 12pxl;
font-weight : bold;
color : red;
/*배경 관련*/
margin : 20px 10px 20px 10px;
padding : 10px;
}위 예시는 해당 페이지에 있는 모든 <p>태그에 대한 스타일을 정의한다.
태그에 대한 크기, 색, 내용에 폰트, 폰트 사이즈 등 스타일 관련한 명령어가 존재한다.
부모 자식
html 태그는 태그를 태그로 감쌀 수 있다.
<div class="parent">
<div>
<p>자식</p>
</div>
<div>
<p>자식</p>
</div>
</div>
위 예시처럼 <div>를 <div class="parent">로 이때 <div class="parent">가 부모가 되며 그 안에있는 것들이 자식이 된다.
이 개념이 중요한 이유가 부모에 CSS를 입히게 되면 해당 아래 자식들에게도 적용이 된다.
따라서 이를 적절히 사용하거나 아래 자식들에게 따로 스타일을 주거나 해야한다.
파일분리
만약 이러한 스타일 정의를 html과 같이하게 된다면 코드가 어마어마해질 것이다. 때문에 CSS파일을 분리하는 방법이 있는데 위 스타일 코드를 따로 .css파일로 분리하여 적절한 위치에 두고 <head>구역 내에 해당 위치를 정의한다.
예를 들어 p.css라는 파일을 만들고 같은 위치에 두었다면
<head>
<link rel="stylesheet" type="text/css" href = "p.css">
</head>위와같이 <head>구역내에 정의하면 해당 스타일을 가져오게 된다.
부트스트랩(bootstrap)
부트스트랩은 이쁜 CSS를 모아놓은 것으로 우리가 하나하나 쓰지 않고 이미 만들어진 이쁜 CSS를 빠르고 간편하게 사용할 수 있다는 장점이 있다.
https://getbootstrap.com/docs/5.0
해당 링크에서 사용하고자하는 것을 찾아 붙여넣기만 하면 되는데 그냥 마술처럼 뚝딱 되는것이 아니라 부트스트랩 스타일을 가져온다는 명시가 필요하다.
<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://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
JavaScript는 프로그래밍 언어로 모든 브라우저에서 사용가능한 표준 언어이다.
HTML이 틀이고 CSS가 살을 붙여 이쁘게 꾸몄다면 JavaScript는 이벤트, 각 반응 등을 주는 역할을 한다.
JavaScript는 <head>영역 혹은 </body> 바로 앞에 선언될 수 있으며 이는 각 장단점이 존재하기 때문에 각 상황에 맞춰 써주는 것이 좋다.
<head>영역의 경우 스크립트가 무거우면 렌더링에 방해가되어 오랫동안 완성되지 못한 화면을 노출할 수도 있다.<body>영역은 포함시킬경우 html 렌더링이 끝난 후 스크립트를 실행하기 때문에 스크립트가 포함된 콘텐츠만 오래 걸릴 수 있다.
JavaScript도 마찬가지로 HTML 내에 따로 영역을 명시해줘야 하는데 이는 <script> 태그를 통해 명시한다.
<head>
<script>
function helloWord(){
alert("helloWord!!");
}
</script>
</head>
<body>
<button onclick="helloWord()"/>
</body>위 예시처럼 함수를 선언하여 원하는 태그에 이벤트로 넣을 수 있다.
기본 문법
변수선언
javascript에서의 변수는 다른 언어와는 다르게 자료형이 아닌 해당 변수의 범위, 역할로 나뉘는듯 하다.
let a = 3;
var b = 5;
var d = 1, e = 2;
const c = 6;let : 선언된 구역에서만 사용가능한 변수이다. 해당 블록 범위에서 같은 변수이름으로 선언하면 에러가 발생한다.
const : 한번 값이 저장되면 더이상 바꿀 수 없는 변수이다.
var : 블록 범위에서 사용가능한 변수이다. 따로 명시를 안했을때의 기본으로 사용된다.
함수
다른 언어와 마찬가지로 함수를 생성할 수 있으며 함수 명시, 함수이름, 파라미터, 리턴값의 구조를 가지고 있다.
function 함수명(파라미터){
함수 내용
return 리턴값
}조건문
기본적으로 if와 else문으로 구성된다.
조건문안에 들어가는 값은 논리연산자인 true 혹은 false가 나와야하며 이를 판단하여 if문이 작동한다.
if(조건문1){
실행문1
}else if(조건문2){
실행문2
}else{
실행문3
}반복문
반복문은 기본적인 for 방법과 for of, for in 등 목적에 따라 조금씩 변경된 형태가 존재한다.
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
//기본형태
for(let i = 0; i < arr.length; i++){
console.log(arr[i]);
}
//for of -> [Symbol.iterator]속성을 가지는 컬렉션에만 사용 가능
for(let value of arr){
console.log(value);
}
//for in -> 객체의 모든 열거 가능한 속성에 대해 반복
for(let value in arr){
console.log(value);
}
//forEach 함수 이용 -> array 객체 전용
arr.forEach(function(item){
console.log(item);
});가장 기본적인 형태로 다른 언어에서도 똑같이 쓰이고 있다.
전체 연습 코드
<!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://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://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title>HTML CSS JavaScript BootStrap 연습하기</title>
<link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Gowun Dodum', sans-serif;
}
.mytitle{
/*background-color: green;*/
width: 100%;
height: 250px;
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://lh3.googleusercontent.com/1uG4RyrHQBid2gA0Nezc2I-elPnfeLDlTK4p9bQdnhs6hJHqq1PDszbFNKc0Dd-spBTHn1sVoIabIg=w816-h340-p-l90-rj");
background-position: center;
background-size: cover;
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.commentList{
/*width: 300px;*/
margin-top: 10px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.commentList>div{
margin-top: 10px;
max-width: 500px;
width: 95%;
}
.mypost{
max-width: 500px;
width: 95%;
/*background-color: green;*/
margin: 10px auto 0px auto;
box-shadow: 0px 0px 3px 0px gray;
padding: 20px;
}
.postbutton{
margin-top: 10px;
}
</style>
</head>
<body>
<div class="mytitle">
<h1>찰리 푸스(Charlie Puth) 팬명록</h1>
</div>
<div class="mypost">
<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="floatingTextarea2" style="height: 100px"></textarea>
<label for="floatingTextarea2">응원댓글</label>
</div>
<div class="postbutton">
<button type="button" class="btn btn-dark">응원 남기기</button>
</div>
</div>
<div class="commentList">
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>새로운 앨범 너무 멋져요!</p>
<footer class="blockquote-footer">호빵맨</footer>
</blockquote>
</div>
</div>
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>새로운 앨범 너무 멋져요!</p>
<footer class="blockquote-footer">호빵맨</footer>
</blockquote>
</div>
</div>
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>새로운 앨범 너무 멋져요!</p>
<footer class="blockquote-footer">호빵맨</footer>
</blockquote>
</div>
</div>
</div>
</body>
</html>