개발자의 개발 블로그

보통 폼(form) 태그에서 action을 이용하여 input 정보들을 보낸다.

하지만, 이 외에도 form태그는 작성만 해놓고, 자바스크립트 내에서 처리할 수 있다.

<form name="comment_form" method="post">

 // 안에 작성

</form>

<script type="text/javascript">

function submitForm() {

document.comment_form.action = "./comment.php";

document.comment_form.submit();

}

</script>

이렇게 하면, document로 form의 이름을 불러온 뒤, action 또는 submit()함수를 실행할 수 있다.

예를 들어 어떤 버튼을 눌렀을 때, form으로 전송하고 싶다면, submit type도 있지만

위와 같이 submitForm함수를 호출하여 처리를 할 수도 있다.

보통 폼(form) 태그에서 action을 이용하여 input 정보들을 보낸다.

하지만, 이 외에도 form태그는 작성만 해놓고, 자바스크립트 내에서 처리할 수 있다.

<form name="comment_form" method="post">

 // 안에 작성

</form>

<script type="text/javascript">

function submitForm() {

document.comment_form.action = "./comment.php";

document.comment_form.submit();

}

</script>

이렇게 하면, document로 form의 이름을 불러온 뒤, action 또는 submit()함수를 실행할 수 있다.

예를 들어 어떤 버튼을 눌렀을 때, form으로 전송하고 싶다면, submit type도 있지만

위와 같이 submitForm함수를 호출하여 처리를 할 수도 있다.

- function이라는 단어와 중괄호 숫자를 줄이기 위해 만들어진 단축 문법이다.

- 화살표 함수에는 세 가지 문법이 존재.

1) function 키워드를 생략이 가능함.

2) 함수에 매개변수가 단 하나뿐이라면 괄호()도 생략이 가능함.

3) 함수 바디가 표현식 하나라면 중괄호{}와 return문도 생략이 가능함.

- 화살표 함수는 항상 익명 함수.

const f1 = function() { return "Hi"; }

이러한 함수를

const f1 = () => "Hi";

const f2 = function(name) { return `Hi, ${name}`; }

이 함수를 

const f2 = name => `Hi, ${name}`;

const f3 = function(a,b) { return a + b; }

이 함수를 

const f3 = (a,b) => a + b;

- 화살표 함수의 사용 목적 : 익명 함수를 만들어 다른 곳으로 전달하기 위해 가장 유용하게 사용됨.

- 

- 한 마디로 생명주기라고도 하기도 한다.

- 변수와 상수, 매개변수가 언제, 어디서 정의되는지를 결정하는 요소.

- 함수의 매개변수가 함수 바디 안에서만 존재하는 것도 스코프의 일종.

- 함수를 실제 호출하기 전까지는 함수의 매개변수가 존재하지 않음.

- 함수를 호출할때마다 매개변수가 나타나고, 함수가 제어권을 반환하면(종료되면) 

- 변수가 존재하지 않으면 그 변수는 '스코프 안에 있지 않음'

- 즉, 아직 선언하지 않은 변수, 함수가 종료되면서 존재하지 않게 된 변수는 '스코프 안에 있지 않음'

- 무엇인가 존재하지 않는다고 해도 곧바로 메모리를 회수하지는 않음

- 유지할 필요가 없다고 표시하면, 가비지 컬렉션 프로세서에서 메모리를 회수함.

- 가비지 컬렉션은 자동으로 일어나므로 프로그래머가 신경 쓸 필요는 없다.

- 프로그램 소스 코드는 정적인 구조지만, 실제 실행하면 실행 흐름은 이곳 저곳으로 움직임.

정적 스코프

- 어떤 변수가 함수 스코프 안에 있는지 함수를 정의할 때 알 수 있다는 뜻.(호출할 때 알 수 있는 것X)

- 함수는 자신이 정의될 때 접근할 수 있었던 식별자에는 여전히 접근할 수 있지만,

- 호출할 때 스코프에 있는 식별자에는 접근이 불가함.

- 정적 스코프는 전역 스코프, 블록 스코프, 함수 스코프에 적용됨.

1) 전역 스코프

- 프로그램이 시작할 때 암시적으로 주어지는 스코프가 필요한데 이 스코프를 전역 스코프라 부름.

- 즉, 자바스크립트가 실행되고 어떤 함수도 호출되지 않았을 때 실행 흐름은 전역 스코프에 있음.

- 즉, 전역 스코프에서 선언된 것은 무엇이든 해당 프로그램의 모든 스코프에서 접급이 가능함.

- 전역 스코프에서 선언된 것들을 전역 변수라고 부름.

- 전역 스코프를 남용하는 것은 모든 스코프에서 보이기 때문에 반드시 자제하고, 충분한 고려가 필요.

- 전역 변수가 변수만을 의미하는 것이 아님. 변수, 함수, 객체등을 모두 총칭하는 것.

- 전역 변수는 남용하면 안됨. 변수보다는 단일 객체에 저장할 것.

2) 블록 스코프

- let과 const는 블록 스코프에서 선언함.

- 블록 : 중괄호{}로 묶은 부분. 

- 블록 스코프는 그 블록의 스코프에서만 보이는 식별자를 의미함.

- 보통 if나 for같은 제어문의 일부분으로 블록을 사용하지만 블록만 사용하는 독립 블록도 유효한 문법.

- 독립 블록은 필요하지도 않고 단독으로는 쓸모가 별로 없다.

- 블록 안에 내부 블록을 만들면, 동일한 변수를 생성해도 다른 변수이므로 외부 스코프의 변수를 

  숨기기가 가능한 효과.

-

- 하나의 단위로 실행되는 집합.

- 모든 함수에는 바디가 존재하며, 함수 바디는 함수를 구성하는 문의 모음.

function say() {

...

}

- 이와 같은 형태: 함수 선언. 하지만, 선언을 한다고 실행이 되지는 않는다.

- 함수를 실행(호출)할때는 함수 이름 뒤에 ()를 쓴다.

반환 값(Return Value)

- 함수 바디 안에서 return 키워드를 사용하면 진행되던 함수를 즉시 종료하고 값을 반환한다.

- 이 값을 반환값이라 부른다.

호출과 참조

- 함수도 객체(Object)

- 다른 객체와 마찮가지로 넘기거나 할당이 가능함.

- 함수 식별자 뒤에 괄호를 쓰면 함수를 호출한다고 하고, 그 함수는 실행됨.

- 함수 식별자 뒤에 괄호를 쓰지 않으면 다른 값과 마찮가지로 함수를 참조하는 것. 그 함수는 실행 X

- 함수를 참조로 써서 다른 변수에 할당하면 그 다른 변수로도 함수를 호출하는 것이 가능하게 됨.

- 함수를 변수뿐만 아니라 객체 프로퍼티 또는 배열 요소로도 할당할 수 있음.

예를 들어, function a() { ... } a라는 함수가 있다. 

a(); // 이것은 함수 호출. a 함수가 실행되며, 반환값도 존재한다(없을 수도 있지만)

a;   // 이것은 함수 참조. 사용방법은 다음과 같다.

const func = a;  

func();

이처럼 함수 a를 func변수에 할당할 수 있다. 이렇게되면 func()으로도 a(); 와 동일한 결과가 출력된다.

함수와 매개변수

- 함수를 호출할때 정보를 같이 전달하는 경우 매개변수(Argument, Parameter)를 사용.

- 매개변수는 함수가 호출되기 전에는 존재하지 않는다. 호출되면 진정한 '실제 매개변수'가 됨.

- 실제 매개변수는 일단 변수와 비슷하지만, 함수 바디 안에서만 존재함.

- 원시 값을 갖은 변수가 함수 안에, 밖에 동일한 변수가 있을때,
  함수 안에서 변수가 변경되더라도 외부 변수는 변경되지 않음. 즉, 이름은 같지만 다른 개체 

- 객체의 경우, 함수 안에, 밖에 동일한 객체가 있을때,

  함수 안에서 객체가 변경되면 외부에 선언된 객체도 변경됨. 즉, 같은 객체를 참조하므로 동일함.

  (참조한다 = 가리킨다)

- 이것이 원시 값과 객체의 핵심적인 차이점.

정리하면, 원시 값을 담은 변수는 수정할 수 있지만 원시값 그 자체는 바뀌지 않는다.

반면, 객체는 변할 수 있다.

- 다른 언어들은 매개 변수의 갯수가 다르면 다른 함수로 간주함.

- 자바스크립트는 차이가 없다. 함수가 있다면 매개변수를 몇 개를 전달하든 같은 함수로 간주함.

- 즉, 어떤 함수를 호출하던지 그 함수에 정해진 매개변수 숫자와 관계없이 전달 가능.

- 정해진 매개변수에 값을 전달하지 않으면 undefined가 할당됨.

표현식(Expression)은 값으로 평가될 수 있는 문.

표현식이 아닌 문은 일종의 '지시'

표현식은 무언가를 '요청하는  것'

표현식은 값이 된다. 그 결과를 다른 표현식에 결합하여 다른 값이 된다. * 반복.

표현식이 아닌 문은 결합이 불가함.

표현식은 대부분 연산자(Operator) 표현식.

1. 연산자

- 하나 이상의 피연산자가 있어야 함.

- 피연산자가 맞는 말이지만, 매개변수(Argument)라고 부르기도 함.

- 자바스크립트의 숫자는 모두 더블 형식이므로 3/2의 경우의 연산 결과도 더블 형식.

- 자바스크립트에서 나머지 연산자는 피연산자에 소수점이 있어도 잘 동작함. 10 % 3.6의 결과는 2.8

- ++ 전위 연산자 : 값을 바꾼 후, 연산 시작. 

- 후위연산자 ++ : 연산 후, 값을 변경함.

비교 연산자

완전히 일치함(===)

동등함(==)

대소 관계(<,>,<=,>=)

일치함과 동등함의 차이.

두 값이 같은 객체를 가리키거나, 원시 타입의 경우 같은 타입, 값도 같다면 이 값을 '일치한다'고 함.

두 값이 일치하는지 확인할때 === 나 !==을 사용함.

동등 연산자(==)는 쓰는데 많은 문제 발생 가능성이 크므로 일치 연산자를 사용하는 것을 추천함.

일치 연산자를 사용했는데 원치 않는 결과가 나온다면 동등 연산자를 쓰지 말고 데이터 타입을 변환.

숫자 비교

특별한 숫자형 NaN은 그 자신을 포함, 무엇과도 같지 않다.

NaN === NaN 또는 NaN == NaN 모두 false.

숫자가 NaN인지 확인하는 함수는 isNaN

 isNaN(x)에서 x가 숫자면 false, NaN이면 true 반환.

for ... in 루프는 객체의 프로퍼티에 루프를 실행하도록 설계된 루프.

for(variable in object) {

...

}

const student = {name:"JSH", grade:3, age:50};    // 객체가 있다.

for(let prop in student) {                                //  for in 루프로 student 객체를 루프돌린다.

 if(!student.hasOwnProperty(prop)) continue;      //  student에에 없는 prop 값이라면 아래 코드 무시.

 console.log(prop + ': ' + student[prop]);           // 루프 돌고 난 뒤 값 출력

무조건, 객체에 존재하는 모든 요소( 처음[0]부터 끝까지)를 루프를 돌린다.

문자열을 숫자로 변환해야 하는 방법

1) Number 객체 생성자를 사용하는 방법

const numStr = "3.15";

const number = Number(numStr);  // 이렇게하면 문자열이 숫자가 됨.

숫자로 변환할 수 없는 문자열의 경우 NaN이 반환.

2) 내장 함수인 parseInt나 parseFloat 함수를 사용하는 방법

이 두 함수 모두 숫자로 판별가능한 부분만 변환하고, 나머지 숫자가 아닌 문자열은 무시됨.

이 두 함수를 사용할 시, 변환할 문자열이 몇 진수 표현인지를 지정(표기 하지 않으면 10진수로 인식)

다른 객체를 문자열로 변환

모든 객체에는 문자열로 변환하기 위한 함수 toString()이 존재.

하지만, 문자열 병합으로(+) 문자열로 쉽게 바꿀 수 있기때문에 잘 사용하지는 않는다.

단, 배열에서 toString()은 쓸 만 하다. 각 요소들을 문자열로 바꾼 다음 쉼표로 연결한 문자열을 반환함.

///////////////////////////////

참조형 VS 원시형

원시 값 

- 불변이며, 

- 복사/전달할 경우 값 자체를 복사/전달. 

- 즉, 원본 값이 변한다해도 복사/전달된 복사본 값에는 영향을 주지 않는다.

객체

- 가변이며,

- 복사/전달할 경우 객체가 아니라 그 객체를 가리키고 있다는 사실(참조)을 복사/전달.

- 즉, 원본이 바뀌면 사본도 역시 따라 바뀜. 원본과 사본 모두 동일한 객체를 가리키게 됨.

- 이러한 특징때문에 객체를 참조 타입이라고도 부름.

책 : 러닝 자바스크립트 : ES6로 입문하는 웹 개발

자바스크립트에서는 리터럴과 상수 그리고 변수를 알아야 한다.

1) 변수(Variable)

- 이름이 붙은 값.

- 언제든지 변경 가능.

- let number = 22; 와 같이 선언(let은 ES6에서 생성됨. 그 전에는 var만 사용 가능) 

  변수 number를 선언(즉, 생성)하고 초기값을 할당(22)하는 2가지를 나타냄.

- 초기값을 반드시 지정해야 하는것은 아니지만, 할당하지 않으면 undefined가 출력.

- 다중 선언 가능.   let num01 = 11 , num02 = 22, num03;

- 값이 수시로 변할 상황에서 변수를 사용한다.

2) 상수(Constant)

- const 키워드 사용. Ex)  const ROOM_NUMBER  = 1004;

- ES6에서 새로 생성됨.

- 변수와 마찮가지로 값을 할당할 수 있지만, 한 번 할당된 값은 변경이 불가.

- 상수 이름은 대문자와 밑줄만 사용해야 한 눈에 상수인지 파악. 가독성이 높음.

- 상황에 따라 다르지만, 될 수 있으면 변수보다 상수를 사용하는 것이 바람직함.

- 한 번 정해진 값이 변하지 않을 경우 상수로 선언한다.

3) 식별자(Identifier) 규칙

- 글자, 달러 기호 $ , 그리고 밑줄 _ 로만 시작해야 함(숫자 시작 불가)

- 글자, 달러 기호 $ , 그리고 밑줄 _ , 숫자로만 쓸 수 있음.

- 예약어(또는 키워드)는 쓸 수 없음.

- 카멜 케이스(Camel Case) : 두 단어 이상일때, 첫 글자는 대문자로 작성. 

  이러한 형태가 낙타의 혹처럼 보인다해서 이렇게 부른다. examBestScore 이런식으로..

- 스네이크 케이스(Snake Case) : 뱀처럼 _를 쓰는 방식.  exam_best_score 이런식으로..

- 대문자로 시작은 안 됨.

4) 리터럴(Literal)

- 위 num01... 변수에 선언한 11 22 33이 모두 리터럴.

- 리터럴이란 값을 프로그램 안에서 직접 지정한다는 의미이다.

- 리터럴과 식별자의 차이.

   let num01 = 11

에서 num01은 변수를 가리키는 식별자, 11은 숫자형 리터럴이자 num01의 값. 따옴표를 통해 구별함.

5) 원시 타입(Primitive)과 객체(Object)

- 원시 타입의 종류 : 숫자, 문자열, 불리언, null, undefined, Symbol(심볼)

- 원시 타입은 불변함. 숫자는 항상 같은 숫자. 문자열도 항상. 같음.

- 객체 : 원시 값과 달리 객체는 여러 가지 형태와 값을 갖을 수 있음

- 자바스크립트에서 내장된 객체 종류도 많다 : Array, Date, Map, Set ...

/////////////////////////////////////////////////////////////////////////////////////////////////////

/////////////////////////////////////////////////////////////////////////////////////////////////////

<숫자>

- 자바스크립트에서는 숫자형 데이터 타입이 하나밖에 존재하지 않음.  바로, 더블(Double) 형식.

<문자열>

- 자바스크립트 문자열은 유니코드 텍스트.

- 자바스크립트 문자열 리터럴은 작은 따옴표, 큰 따옴표, 백틱(Backtick)을 사용.

- 이스케이프 문자. 문자열안에 따옴표 쓰거나...   \를(역슬레시)를 써줘야 문자열로 인식

- 문자열은 작은, 큰 따옴표 모두 가능하지만, 큰 따옴표를 추천함.

- 특수문자 :  \n \r \t \' \" \` \$ \\ 등등...

<템플릿 문자열>

- 문자열 병합 : + 기호로 숫자 등을 문자열으로 만들어 사용.

- ES6 이전에는 문자열 병합뿐이었지만, ES6에서는 문자열 템플릿이라는 기능이 도입.

- 문자열 템플릿은 문자열 채우기라고도 부름.

- 문자열 템플릿은  문자열의 정해진 위치에 값을 채워 넣는 간편한 방법.

- 문자열 템플릿은 큰, 작은 따옴표를 사용하지 않고 백틱을 사용함.

(기존. 문자열 병합)

let roomNumber = 112;

const message = "방 번호는 " + roomNumber + "입니다";

(ES6. 문자열 템플릿)

let roomNumber = 112;

const message = "방 번호는 ${roomNumber}입니다";

- 문자열 템플릿에서는 달러 기호가 특수문자가 됨.

- 달러 기호 다음 중괄호로 감싼 값이 문자열에 곧바로 삽입됨.

<숫자와 문자열 결합>

const num1 = 5 +'50' : 550    // 5가 문자열로 바뀜.

const num2 = 5 * '50' : 250    // 50이 숫자로 바뀜.

<불리언>

- true 또는 false 두 값만 갖는 데이터 타입. 

- 불리언을 사용할 때는 따옴표 안에 넣지 말것. 따옴표 "false" 또는 "true"는 그냥 문자열.

<Symbol>

- ES6에서 새롭게 도입된 데이터 타입.

- 심볼은 항상 유일하며 다른 어떤 심볼과도 일치하지 않음(객체와 유사)

<null & undefined>

- null이 갖을 수 있는 값은 null 하나. 또한 undefined가 갖을 수 있는 값도 undefined 하나로 동일.

- 또한, 둘 모두 존재하지 않는다는 것을 나타냄.

- null은 프로그래머에게 허용된 데이터 타입. undefined는 자바스크립트 자체에서 사용한다.

- undefined를 할당하기보다, 불확실한 변수 값, 적용할 수 없는 경우 null을 선택하도록.

- 변수를 선언만하고, 값을 할당하지 않으면 undefined가 기본적으로 저장됨.

<객체>

- 원시 타입은 단 하나의 값만 나타낼 수 있고, 불변하지만

- 객체는 여러 가지 값이나 복잡한 다수의 값을 나타낼 수 있으며, 변할 수도 있다.

- 빈 객체 생성 : const obj = {};

텍스트를 덩어리로 묶는 태그

<h1>부터 <h6> 태그 : 

- 일반 텍스트 보다 크고 진함... 즉, 제목을 표시함.

- <h1>이 가장 크며 주로 사용됨. 뒤로 갈수록 작아짐.

<p>태그

- 단락 만들어주는 태그. 텍스트를 사용할때 가장 많이 사용하는 태그.

- 단락이란 앞뒤에 줄바꿈이 있는 텍스트 덩어리.

- </p>가 나올때까지 텍스트를 한 줄로 표시하며, 한 줄이 넘어갈경우 자동으로 개행됨.

<br>태그

- 줄 바꾸는 태그

- 편집기에서 줄 바꿈을 해도 브라우저 창에서는 무시하고 한 줄로 표시됨.

- 웹 브라우저 창에서도 줄 바꿈 표시를 하고싶다면 <br>태그를 사용.

<hr>태그

- 수평 줄 넣기.

- 텍스트의 주제 등이 변할 때 구분하기 위해 사용.

- 닫는 태그는 없음

<blockquote>

- 글을 인용할 때 사용하는 태그

- 다른 텍스트보다 안에 들여쓰기되므로 구별하기 쉬움.

- 웹 브라우저마다 표시하는 방식이 각기 다름.

<pre>

- 편집기 작성한 소스에 공백이 브라우저에 그대로 표시됨.

- Preformatted Text의 약자.

- 접근성을 고려해봐야 함.

텍스트를 한 줄로 표시하는 태그

<strong> 태그, <b> 태그

- 굵게 강조하여 표시하는 태그

- 두 태그의 차이 : strong : 주의 사항처럼 중요한 내용 강조, b : 키워드처럼 단순히 굵게 표시.

<em> 태그, <i> 태그 

- 이탤릭체로 표시하는 태그 

- 두 태그의 차이 : em : 어떠한 기술적인 용어... i : 언어의 관용구 등

<q>

- 인용 내용 표시하기

- <blockquote>과 다른 점 : <blockquote>는 블록 레벨 태그여서 인용 내용이 줄이 바뀌어 표시되며 다른 내용과 구별되도록 들여쓰기가 적용됨

<q>는 인라인 레벨 태그여서 줄바꿈없이 다른 내용과 함께 한 줄로 표시되며 구별할 수 있도록 따옴표로 표시됨.

<mark>

- 노란색 형광펜으로 그어 놓은 듯한 효과를 냄.

- 예제 :       <mark>형광펜 표시형광펜 표시</mark>

<span>

- 태그 자체로는 아무 의미가 없으나 텍스트 단락 안에서 줄바꿈없이 일부의 특정 부분의 텍스트만을 묶어 스타일을 적용하려고 할 때 주로 사용함.

- <mark>형광펜 표시?형광펜 표시<span style="color:red;">형광펜 표시</span>?</mark>

<ruby> 태그

- 동아시아 글자를 표시하기 위한 태그

- 주석으로 표시할 내용을 <rt>태그로 사용함.

- 처음 봄. 거의 안 사용함.

목록을 생성하는 태그

<ul> 태그

- Unorder list의 약자. 순서가 필요하지 않은 목록을 생성 시 사용.

- <li> 태그를 사용하여 각 항목을 표시함.

- 순서가 정해지지 않았기 때문에 작은 원 또는 작은 사각형같은 불릿이 붙는다.

- 이 불릿은 CSS에서 list-style-type 속성을 이용해서 수정할 수 있다.

<ol> 태그

- Order list의 약자. 순서가 필요한 목록을 생성 시 사용.

- 역시 <li> 태그를 사용하여 각 항목을 표시함.

- 숫자를 다양한 형태로 표기 방법을 변경할 수 있다.

- 순서와 관련된 속성이 몇 가지 존재함.

1. type 속성 : 1(숫자=기본값) 이지만, a  또는 A i,  I 등 여러 형태로 변경이 가능함.

2. start : 시작 숫자를 입력하면 1이 아닌 다른 번호로 시작할 수 있다.

3. reserved : 번호를 역순으로 표기.

<li>를 여러 항목을 사용할때는 닫는 태그 </li>를 생략해도 있는것처럼 인식함.

<li> 항목 밑에 다시 ul이나 ol 태그를 사용하여 중첩할 수도 있다.

<dl>, <dt>, <dd> 태그 

- 설명 목록 만들기

<dl> 태그 : 사전 구성과 같이 제목과 설명이 한 쌍으로 이루어진 설명 목록(Description list)를 만듦.

- 예를 들어 단어/정의 목록, 질문/답 목록 등에서 사용이 가능

<dl>아래에 <dt>와 <dd>를 표시함. dt는 제목을, dd는 설명을 표시함.

- 하나의 dl 안에 dt와 dd가 여러개 있을 수 있음.

테이블(표)을 생성하는 태그

- 자료를 정리할 때 자주 사용.

- 행Row와 열Column으로 이루어저 있으며 행과 열이 만나 이루는 영역을 셀Cell이라 부름.

<table> <tr> <th> <td> 태그 

- 기본적인 표를 만들기 위한 태그

1. table 태그 생성

2. 몇 행을 생성할 것인지 계산해서 tr태그로 생성

3. 그 안에 몇 개의 열이 들어갈 것인지 td로 생성

행 또는 열 합치기

- 셀을 합치는 것이므로 td 또는 th 태그에서 이루어진다.

행row을 합치려 한다면?  rowspan

열column을 합치려 한다면? colspan

<caption> 태그, <figcaption> 태그

- 표에 제목을 붙일 때 새용하는 태그.

- <caption>는 <table>태그 바로 다음에 사용. 표의 가장 위쪽 중앙에 표시되며 다른 태그를 삽입하여 여러 줄로 작성하거나 텍스트를 꾸미는 등 스타일링 가능 

- <figcaption>는 <figure>와 <caption>의 합성어로 <figure>태그로 감싼 뒤 <figcaption>태그를 이용하여 제목이나 설명글을 입력한다.

- 중앙에 정력되지 않으며, 또한 table 시작 태그<table> 위 또는 닫기 태그</table> 아래에 위치 가능.

<thead> tbody tfoot

- HTML5에서 시각 장애인들을 위한 접근성과 관련이 있다.

- 제목이 있고, 본문이 있고, 마지막에 합계나 요약 내용을 표시하는데 주로 사용됨.