STUDY/web

웹 사이트 개발_기초 문법 정리

sonotree 2024. 9. 1. 12:31

1.HTML

1.1. HTML이란

HTML로 웹 사이트의 구조를 정의 -> CSS로 예쁘게 디자인 한 뒤 -> JS로 동작시킨다 -> 웹 사이트/웹 문서 완성 

 

Hyper(최고의) Text Markup Language의 약어로, 마크업 언어이다. 마크업 언어란, 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지이다. HTML은 콘텐츠의 서로 다른 부분들을 씌우거나 감싸서 다른 형식으로 보이게 하거나 특정한 방식으로 동작하도록 하는 일련의 요소로 이루어져있다.

 

 

 

1.2. HTML의 구성 요소

-여는 태그(Opening tag): <[요소 이름]>으로 구성된다. 이것은 요소가 시작되는 곳, 또는 효과를 시작하는 곳임을 나타낸다.

-닫는 태그(Closing tag): </[요소 이름]>으로 구성된다. 이것은 요소의 끝을 나타낸다.

-콘텐츠(Content): 요소의 내용(content)이다.

-요소(Element): 요소는 여는 태그 & 닫는 태그 $ 콘텐츠로 이루어진다.

-속성(Attribute):  속성은 실제 콘텐츠로 표시되길 원하지 않는 추가적인 정보를 담는다. 속성은 "요소 이름(또는 요소가 하나 이상 속성을 이미 가지고 있다면 이전 속성)과 속성 사이에 공백이 있어야 한다", ''속성 이름 뒤에는 등호(=)가 와야 한다", "속성 값의 앞 뒤에 열고 닫는 인용 부호(""/'')가 있어야 한다"의 조건을 항상 충족해야한다.

 

콘텐츠가 없는 태그는 종료 태그를 생략할 수 있다. 예를 들어 가로줄을 긋는 <hr>태그는 콘텐츠를 적을 필요가 없기 때문에 <hr> 단독으로 사용한다.

 

 

 

1.3. HTML 문서 기본 구조

<!DOCTYPE html> <!--현재 문서가 어떤 버전으로 작성되는지 표시되는 곳. 여기는 html5-->
<html lang="en"> <!--html 태그, 현재 웹 문서가 어떤 언어로 작성되는지 쓰는 곳-->
<head> <!--head 태그. html 태그의 자식 태그. 문서 공간에 표시되는 곳은 아니다.-->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body> <!--#body 태그 문서 공간에 표시되는 곳이다-->     
</body>

 

 

 

1.4. HTML 태그

1)Element

:<p>이 전체가 엘리먼트</p>와 같이, 시작태그와 종료태그까지 전부를 엘리먼트라고 한다. </br>은 빈요소(empty element)라고 하며 <hr/>와 <img/>등이 있다.

 

2)태그

: "<"와 ">"로 묶인 일련의 명령어를 태그라고 한다. 태그는 시작태그, 종료태그. 빈태그 3가지 종류가 있다.

 

3)form 태그

: 정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획을 나타낸다. 데이터를 전달할 url을 적는 action속성, 양식을 제출할 때 사용하는 method속성과 함께 사용할 수 있다.

<form name="sform" action="https://search.naver.com/search.naver" method="get"">
<input name="query" type="text">
        <input type="submit" value="검색">
</form>

-> 입력창에 "[검색어]"입력, "검색" 버튼을 누르면, 브라우저는 <form>태그의"action="https://search.naver.com/search.naver"을 참고하고 , search.naver.com 서버에 접속하여 search.naver 응용프로그램의 실행을 요구해야 한다는 것을 확인한다.

->type 부분을 통해, 연결된 파일이 CSS파일임을 알 수 있다

->rel을 부분을 통해, 연결된 파일이 스타일시트임을 명시한다.

->href를 통해 연결할 CSS 파일 경로를 지정한다. mystyle.css 파일과 연결한다.

 

4)link 태그

: 외부의 문서를 연결시키는 태그이다. <link> 태그는 <head></head>사이에 넣는다. HTML 페이지에 대한 메타 데이터를 담기 위한 태그이다. 메다 데이터란, 데이터를 설명하는 데이터로 예를 들어, 사진을 찍은 장소와 시간은 사진 데이터의 메타데이터이다.

 

5)script 태그

: <script> 태그는 자바스크립트 코드를 작성하기 위해 사용되는 태그로, html 문서 내 대부분의 위치에 삽입 가능하다.

 

6)input 태그

: <input>태그는 폼대그의 요소로, 실제 사용자로부터 입력을 받기 위한 태그이다.

<form action =  "test.do" method = "get">
        검색내용 <input type="text" name = "query">
        <input type="submit" value = "검색">

->이런 방식으로, 사용자가 입력하는 텍스트 값을 받을 수 있다.

2. css

2.1. css란?

Cascading Style Sheets의 약어로, html 문서를 꾸밀때 사용하는 스타일시트 언어이다. CSS는 HTML로 부터 디자인적인 요소를 분리해 정의할 수 있다. 잘 정의된 CSS는 서로 다른 여러 웹페이지에 적용할 수 있다.

 

 

2.2. css 기본 문법

CSS는 '선택자(selector)'와 '선언부(declaration)'로 구성된다. 

-선택자: 스타일을 지정할 HTML요소(태그, 아이디 등)를 가리킨다

-선언부: 선언부에는 CSS속성 이름과 값이 포함된다. 

 

<CSS 문법>

선택자 {속성명:속성값; 속성명:속성값....}

 

<예시>

/* h1태그의 색상을 빨간색으로 크기는 15px로 지정합니다.*/

h1 {color:red;

font-size:15px;

}

-> 선택자는 디자인을 적용하고자하는 HTML 요소이다. 따라서 선택자 정의가 중요하다.

-> 선언부는 콜론(:)으로 구분되어진 다수의 항복을 포함한다. 각 선언은 항상 세미콜론(;)으로 끝나며, 선언 블록은 중괄호({})로 묶는다.

 

 

2.3. CSS 적용 방법

HTML 문서에 CSS를 적용하는 방법은 내부 스타일시트, 외부 스타일시트, 인라인 스타일시트 등 총 3가지의 방법이 있다. 스타일 시트(stylesheet)는 웹 페이지나 문서의 레이아웃과 디자인을 제어한느 데 사용되는 CSS 규칙 집합을 의미한다.

 

1) 내부 스타일시트

html파일에 스타일을 기술하는 방법으로, <head></head> 태그 안에 <style></style>태그 부분에 작성한다. html과 css가 한 파일에 있으므로 작업이 쉽고 간편하지만 css의 재활용이 안 되는 문제가 있어 특별한 경우가 아니면 외부 스타일시트가 권장된다.

<head>
<style>
body {
    background-color: red;
}

h1 {
    color: maroon;
    margin-left: 40px;
} 
</style>
</head>
<body>
    ...
</body>

 

 

2) 외부 스타일 시트

css를 작성하는 가장 기본적인 방법이다. 별도의 파일에 css문서를 작성하고 해당 css를 필요로 하는 html문서에서 불러와 사용하는 형식이다. 이때 css는 동일한 서버에 있어도 되고, url을 통해 다른 서버의 css를 불러오는 것도 가능하다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>외부 스타일시트</title>
    <link rel="stylesheet" href="external.css" />
  </head>
  <body>
    <h1>코딩</h1>
    <p class="article">우리는 코딩을 배우고 있어요!</p>
  </body>
</html>

 

[외부에 저장된external.css 코드]

h1 {
  color: pink;
}
.article {
  border: 1px solid black;
  padding: 30px;
}

 

 

3) 인라인 스타일 시트

html 태그에 필요한 디자인 속성을 직접 작성하는 형식이다. 그때 그때 필요한 디자인을 바로 적용할 수 있다는 편리함이 있지만 일관된 디자인 체계를 유지하는 데에는 방해가 되기 때문에 꼭 필요한 경우가 아니면 사용하지 않는다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1 style="color: blue">제목</h1>
    <div style="width: 100px; height: 1--px; border: 1px solid red">안녕</div>
  </body>
</html>

 

 

2.4. CSS 출처 적용 우선순위

사용자 !important > 제작자 !important > 제작자 > 사용자 > 브라우저. 이때 주의해야 하는 것은 important를 사용할 때이다. important는 폭포(Cascading)의 흐름을 깰 수 있으므로 주의해서 사용해야한다.

 

예를 들어, a태그로 '네이버'라는 문자열을 작성하면, 웹페이지에서는 파란색 밑줄이 쳐진 형태로 나타난다. 이는 브라우저가 기본으로 제공하는 브라우저 스타일이다. 이때 css를 사용해 a태그를 'a{color: red; text-decoration:none;}'로 변경하면 웹페이지에 빨간 밑줄이 없는 형태로 바뀌어 나타난다. 이 경우 브라우저보다 사용자 지정이 우선순위에 있기 때문에 이런 결과가 나타난다.

 

HTML문서는 제작자 스타일을 우선 적용하고 -> 그 다음 브라우저 사용자 스타일 -> 마지막으로 브라우저 기본 스타일을 적용한다. 간단히 말하자면, Cascadingdml 뜻인 폭포와 같이 스타일이 우선순위에 맞게 연속적으로 적용된다는 의미이다.

3. JS(JavaScript)

3.1. JS란?

HTML과 CSS로 구성된 웹 페이지를 동적으로 만들어주는 언어. JS를 이용하면 웹 페이지가 특정 상황(event)에 따라 동적으로 작동할 수 있도록 만들 수 있다.

 

JS의 시작은 정적인 웹을 동적으로 표현하기 위한것 이었다. 현재는 웹 브라우저에서만 동작하는 반쪽짜리 프로그래밍 언어가 아닌, 프론트엔드 영역 그리고 백엔드 영역까지 아루르는 웹 프로그래밍 언어의 표준으로 자리잡고 있다.

 

브라우저의 영역이 아닌 백엔드 영역은 Java, Python 그리고 JS(Node.JS)등 여러 언어로 구성될 수 있지만, 프론트엔드 영역은 앞에서 언급한 세 가지 언어로 구성된다.

 

 

3.2. JS 특징

자바스크립트는 객채(Object) 기반의 스크립트 언어이다. 자바스크립트는 동적이며, 타입을 명시할 필요가 없는 인터프리터 언어이다. 또한 자바스크립트는 객체 지향형 프로그래밍과 함수형 프로그래밍을 모두 표현할 수 있다.

 

 

3.3. JS 기본 문법

3.3.1. 변수

간단한 비유와 함께 변수를 이해해보자. 한 농부가 밭에 심을 씨앗을 여러 종류 구해왔고, 씨앗을 구분할 때 편의를 위해 바구니 여러개에 씨앗을 종류별로 이름표를 붙여 나눠 담으면 좋겠다는 생각을 했다.

 

이때, 변수는 데이터를 담는 바구니, 바구니에 이름표를 달아 주는 것은 변수의 선언, 바구니에 물건을 담는 것은 할당이라고 생각하면 된다. 예를들어, 바구니에 당근이라는 이름표를 붙이고 당근 씨앗을 담는 것은, 당근이라는 변수를 선언하고 이 변수에 당근 씨앗을 할당한 것과 같다.

 

JS로 변수를 선언하고 할당할 때는 다음과 같은 구조를 가진다.

let [변수이름] = [할당할 값];

-> let이라는 키워드를 사용하여 변수 명을 정한다.

-> 할당 연산자(=)을 쓰고 해당 변수에 할당할 값을 적는다

 

3.3.2. 변수명 선언 방법

-스네이크 케이스(snake_case): 언더바를 넣어 구분한다

-파스칼 케이스(PascalCase): 모든 단어를 대문자로 시작해 구분한다

-카멜 케이스(camelCase): 두 번째 단어부터 대문자로 시작해 구분한다

일반적으로, Jacascript에서 영어로 변수명/함수명을 작성할 때는 camelCase를 사용하는 것이 관례이다.

 

 

3.3.3. 함수

함수는 입력에 따라 그에 걸맞는 작업을 하는 하나의 단위이다. 함수를 표현할 때는 크게 표현식과 선언식으로 나눌 수 있다.

-선언식: function keyword를 선두로 함수를 작성한다

-표현식: 변수에 할당하는 것처럼, 함수 이름을 변수에 할당하고 함수를 작성한다. 예, let name = function(parameter){...}

 

 

3.3.4. 함수의 구조

function name(parameter) {}

->function 키워드를 사용하여 함수를 만든다

->name: 함수를 호출할 때 사용할 이름

->parameter(매개변수): 함수에 필요한 변수가 있다면 여기에 넣는다

->body: 함수가 호출되면 실행할 코드가 들어있는 곳

 

그리고 함수를 만들 때, 함수 안에 return 키워드가 있어야 값이 반환된다. 함수를 사용하여 원하는 값을 얻고 싶다면 꼭 함수 안에 return 키워드를 작성하자.

 

 

3.4. var, let, const 차이점

JavaScript에서 사용되는 변수 선언 방식에는 세가지가 있다. var, let, const이다. var은 비교적 오래전부터 사용되어 왔지만, 현재는 잘 사용되지 않는 변수 선언식이고, 주로 let과 cont가 사용된다.

 

 

3.4.1. 중복 선언과 재할당

var은 중복 선언과 재할당 모두 가능하다.

var a =5;
console.log(a) //5

var a =10;
console.log(a) //10

 

 

let은 중복 선언은 허용하지않고, 재할당은 가능하다.

//중복 선언은 불가능하다
let a =5;
let a=10;
cnosole.log(a); // SyntaxError: Identifier 'a' has already been declared

//재할당은 가능하다
let a =5;
console.log(a); //5

a= 10;
console.log(a); //10

 

 

cont는 중복 선언을 허용하지 않고, 재할당도 불가능하다. 왜냐면 const는 상수를 선언하는 키워드이기 때문이다. 상수란, 한번 값이 정해지면 프로그램의 다른 부분에서 변경되지 않는 값이다.

//중복 선언은 허용되지 않는다
const a = 5;
const a = 10;
cnosole.log(a); // SyntaxError: Identifier 'a' has already been declared

//재할당도 불가능하다
const a = 5;
console.log(a); // 5

a = 10;
console.log(a); // TypeError: Assignment to constant variable.

 

 

3.4.2. 스코프 범위

var은 함수 단위 스코프(function-level scope)이다. var 변수가 선언된 함수 내부의 어디서든 참조가 가능하지만, 외부로는 참조가 불가능하다. 또한 함수 내부에서 선언된 var은 지역변수로 간주하지만, 함수 외부에서 var가 선언되었다면 전역변수로 간주한다.

function hello(){
    var a = 10;
    console.log(a);
}

hello(); // 10


console.log(a);  //ReferenceError: a is not defined

 

 

let과 const는 블록 단위 스코프(block-level scope)이다. { } 블록 내부에서 선언된 let, const 변수는 외부에서 참조되지 않는다.

function hello() {
let a = 5;
    console.log(a); // 5
}


console.log(a); // ReferenceError: a is not defined

 

 

3.4.3. 호이스팅

JS에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다. 단순하게 설명하자면, 단어 뜻 처럼 스크립트 내 변수와 함수의 선언 순서에 상관 없이 순서가 끌어올려진 듯한 현상이다. 물리적으로 끌어올려지는 것이 아니라 JS 엔진이 먼저 전체 코드를 한 번 스캔하고 실행컨텍스트에 미리 기록해 놓기 때문에 이런 현상이 발생하는 것이다.

 

var은 호이스팅이 발생한다. 뒤에 선언된 변수 a가 앞에 참조되었음에도 error가 아닌 undefined가 호출된다.

console.log(a);  // undefined :: 변수 선언 이전에 변수 참조 가능
var a  // 초기화
console.log(a);  // undefined
a = 10  // 할당
console.log(a);  // 10

 

 

let과 const도 호이스팅이 발생하지만, 다르게 작동한다.

console.log(a);  // ReferenceError :: 변수 선언 이전에 변수 참조 불가능
let a  // 초기화
console.log(a);  // undefined
a = 10  // 할당
consloe.log(a);  // 10

-> l et과 const로 변수를 선언하는 경우에는, 변수의 선언과 초기화 사이에 일시적으로 변수값을 참조할 수 없는 구간인 TDZ(Temporal Dead Zone)가 존재하기 때문에 벌어지는 현상이다. 호이스팅은 발생하지만, 값을 참조할 수 없기 때문에 동작하지 않는 것처럼 보인다.

4. DB/SQL/MYSQL

4.1. 기초

데이터베이스(DB)는 데이터의 집합이다. 데이터베이스에는 일상행활의 대부분의 정보가 저장되고 관리됩니다.

 

DBMS는 DB의 소프트웨어로, 데이터 베이스를 관리하고 운영한다. DBMS는 "대용량의 데이터를 사용하고 저장, 관리 할 수 있어야 한다" 그리고 "공유 개념으로, 다른 사용자가 공유할 수 있다."는 핵심 개념을 가진다.

 

DBMS의 종류에는 MYSQL이 포함된다. 이외에도 많다. DBMS는 계층형, 망형, 관계형, 객체지향형, 객체관계형 등 다양한 유형이 있지만 편재는 관계형 DBMS가 가장 많이 사용되고있다. 관계형 데이터 베이스는, 데이터 항목 간에 사전 정의된 관계가 있을 때 데이터 항목들의 모음을 가리킨다. 이 항목들은 열과 행으로 이루어진 테이블 집합으로 구성되며, 테이블의 가 행은 기본키라고 부르는 고유 식별자로 표시할 수 있고 여러 테이블에 있는 행들은 외래키를 사용하여 상호 연결할 수 있다.

 

 

 

4.2. SQL이란?

SQL(Structured Query Language)는 DBMS에 데이터를 구축, 관리하고 활용하기 위해 사용되는 언어이다. 간단히 말해서 SQL은 DB용 프로그래밍 언어이다. MySQL, Oracle, MariaDB등이 있다. SQL은 구조화된 쿼리 언어이며, DB에 쿼리를 보내 원하는 데이터를 가져오거나 삽입할 수 있다. 쿼리(query)란, 질의문을 의미한다. SQL을 사용하기 위해서는 데이터 구조가 고정되어있어야 한다. 

 

 

 

4.3. SQL 문법 종류

1) DML(Data Manipulation Language) 데이터 조작어

-SELECT: 테이블에서 원하는 정보를 불러올 때 사용하는 문법이다. 테이블의 열에 속하는 데이터를 불러온다

SELECT col1, col2, ....
FROM table_name;

 

-DISTANCE: 중복을 배제하고 고유값만을 출력하고자 할 때 사용한다. SELECT와 같이 사용된다.

SELECT DISTINCT col1, col2, ...
FROM table_name;

 

-DELET: 데이터를 삭제할 때 사용한다

-INSERT: 신규 데이터를 입력할 때 사용한다

-UPDATE: 기존 데이터를 수정할 때 사용한다

 

2) DDL(Data Definition Language) 데이터 베이스 객체를 생성

-CREATE: DB 객체를 생성할 때 사용한다

-DROP: DB 객체를 삭제할 때 사용한다

-ALTER: 기존의 생성된 객체를 변경할 때 사용한다.

 

 

3) DCL (Data Control Language) 데이터 베이스 객체를 생성하는 문

-GRANT: 객체에 권한을 부여할 떄 사용한다

-REVOKE: 객체에 부여된 권한을 삭제할 때 사용한다

 

 

4)TCL: 주로 트랜잭션을 제어하기 위해 사용

-트랜젝션: 한꺼번에 수행되어야 할 연산을 모아놓은 것

-COMMIT: 현재 트랜젝션에서 수행한 모든 변경 사항을 저장하고, DB에 영구적으로 반영할 때 사용한다

-ROLLBACK: 트랜젝션 중 발생한 오류나 의도하지 않은 변경사항을 되돌려, DB를 이전 상태로 복구할 때 사용한다 

-SAVEPOINT: 트랜젝션 내에서 특정 시점에 저장점을 설정하여 필요한 경우 해당 시점으로 되돌릴 수 있다

-SET TRANSACTION: 트랜젝션의 속성을 설정한다. 예를 들어, 격리 수준을 설정할 때 사용한다.

 

 

4.4. MySQL이란?

MySQL은 세계에서 가장 많이 쓰이는 오픈 소스의 관계형 데이터베이스 관리 시스템이다. 다중 스레드 다중 사용자 형식의 구조질의어 형식의 데이터베이스 관리 시스템이다.

 

-MySQL 특징

<장점>

-다양한 운영체제에서 사용할 수 있으며, 여러 가지의 프로그램잉 언어를 지원한다

-크기가 큰 데이터 집합도 아주 빠르고 효과적으로 처리할 수 있다.

-널리 알려진 SQL 형식을 사용한다

-MySQL 응용 프로그램을 사용자의 용도에 맞게 수정할 수 있다.

-다양한 스토리지 엔진을 가지고 있고, 데이터 복제 또한 가능하다

 

<단점>

-큰 데이터베이스로 적용하기 어렵다.

-게임 및 모바일 애플리케이션에 인기가 없다.

 

5. FLASK

5.1. Django란?

장고는 파이썬 웹 프레임워크 중에서 가장 인기 있는 프레임워크이다. 일반적인 웹 개발의 거의 모든 기능을 위한 강력한 내장 솔루션을 제공해, 코드를 더 빠르게 작성하고 프로젝트를 더 효율적으로 구현할 수 있다.

 

프레임워크란, 웹 개발을 쉽게 하기 위해 사용되는 모듈의 모음을 의미한다. 여러 모듈이 그룹화되어 있기 때문에 앱이나 웹사이트를 새로 만드는 과정이 매우 쉬워진다.

 

 

5.2. Django의 특징

-많음 프레임워크 덕분에 개발자는 단순 작업에 소요되는 시간을 줄이고 웹사이트의 고유한 기능을 만드는데 더 집중할 수 있다. 이는 빠른 개발을 가능하게 한다

-장고는 높은 보안성을 제공한다

-장고는 다양한 영역에서 다양한 애플리케이션을 만드는데 사용할 수 있는 다용도 프레임워크이다. 부하가 많은 웹 애플리케이션을 구측하든, 간단한 웹사이트를 구축하든 모든 규모와 용량의 프로젝트를 구현하는데 훌륭하게 작동한다.

 

 

5.3. FLASK란?

플라스크는 Python의 마이크로 웹 프레임워크이다. 다양한 웹 엔진과 붙여서 쓸 수 있고, 또 가볍기도 해서 Django과 같이 쓰는 경우도 있다. 코드도 비교적 단순하고 특히 API 서버를 만들기에 매우 편리하다. 관련된 확장 기능들이 많기 때문이다. FLASK는 Pythone으로만 작성하면 심심한 코드를 웹 서버와 HTML, CSS를 함께 사용해 웹 사이트를 간단하게 제작할 수 있다.

 

5.4. FLASK의 특징

-FLASK는 가볍고 코드베이스가 작게 설계되었다. 간단하고 직관적인 API를 갖추고 있어 개발자가 웹 애플리케이션 구축을 빠르게 시작할 수 있다.

-라우팅 및 URL 매핑: 플라스크는 URL을 파이썬 코드의 함수나 메서드에 매핑할 수 있는 라우팅 메커니즘을 제공한다. 이를 통해 다양한 URL과 HTTP 메서드를 처리하고 요청에 따라 적절한 코드를 실행하는 데 도움이 된다.

-확장성: 플라스크는 개발자가 확장을 통해 기능을 추가할 수 있는 모듈식 설계를 갖추고 있다. 데이터베이스 통합. 사용자 인증, 캐싱 등과 같은 추가 기능을 제공하는 풍부한 플라스크 확장 프로그램 에코시스템을 가진다.