프로젝트4 - div 섹션 구역 분리 와 CSS 스타일 적용하기

이미지
웹 브라우저에 표시되는 글자와 이미지 들에 디자인 적인 효과( 배경색, 글자색, 크기 조절...) 및 브라우저 내에서의 배치등을 조절하기 위해서는 구역을 나누면 편리해진다. 바로 구역(섹션) 을 나누어 주는 역할을 하는 태그가 div 이다. <div>태그는 브라우저에서 보여지는 시각적 기능은 없다. 단지, 구역을 나누는 역할을 한다.  코드를 만들어 본다. <!DOCTYPE html> <html> <head>   <title>div</title> </head> <body>   <div>     <p>Ice cream is a frozen dessert typically made from milk or cream that has been flavoured with a sweetener,        either sugar or an alternative, and a spice,        such as cocoa or vanilla, or with fruit, such as strawberries or peaches.</p>   </div>   <div>     <p> Food colouring is sometimes added in addition to stabilizers.        mixture is cooled below the freezing point of water and stirred to incorporate air spaces and prevent detectable ice crystals from forming.        It can also be made by whisking a flavoured cream base and liquid nitrogen together.        The result is a smooth, semi-solid foam that is solid at v

자바스크립트 기본자료형

 


자바스크립트 기본자료형은 문자열, 숫자형, 논리형, undefined, null 이 있다.

1. 문자열
문자열은 말그대로, 문자형 데이터를 저장한다.
let string = "hi" ;
let string2 = 'morning' ;
처럼 "", '' 쌍따옴표 혹은 따옴표 로 문자를 표현하고 그 값을 변수에 담을 수 있다.
자바 나 C와 같은 언어 였다면 변수의 타입조차 string, char[] 등으로 표현했겠지만
변수는 그대로 둔 상태에서 들어가는 데이터에 따라 자료형을 분류하니 이는 자바스크립트가 가지는 재미있는 요소라고 생각한다.

ES6 부터는 문자열을 표현하기 위해서 ` 백틱 기호를 사용한다.
관련해서는 하기 포스팅을 참고하자.


2. 숫자형
숫자형 역시 숫자를 담는다. 다만 그 숫자라 함은 정수 와 실수를 포함한다.
let number = 123 ;
let number2 = 1.23;

실수의 연산시 자바스크립트 역시 오차가 생김에 주의해야 한다.

3. 논리형
논리형은 true 와 false 라는 값을 가진다.

let bool = true;
let bool2 = false;

이 역시 자바 나 기타 객체언어 였다면, boolean 이라는 데이터 타입을 가졌을것이지만
자바스크립트에서는 let 혹은 var 변수로 담고 그 값에 따라 데이터 타입이 정해진다.
물론, typeof bool 했을때는 boolean 값이 나온다.

4. undefined 
변수에 값이 할당되지 않았을때 자바스크립트 엔진에서 기본으로 넣어주는 값이라고
생각하자

let temp ; 

이렇게 변수를 선언하고 초기화 하지 않았다면
temp에는 undefined 가 할당된다. 이는 다음에 볼 null 과는 차이가 있다.

5. null
null 은 변수가 참조하는 값이 없다는 것을 의미한다.
할당 되지 않음을 나타내는 undefined 와는 다르다. 
가리키는 값이 없다는 null은 undefined와는 다르게 사용자가 직접 할당할 수 있는 값이다.

이상으로 자바스크립트의 기본자료형을 정리해본다.
감사합니다.







댓글

이 블로그의 인기 게시물

구글 블로그 이미지 복사 붙여넣기 가능한가요?

HTML 페이지 기본 구성.(HTML Page Structure)

구글 블로그 대표이미지 설정하기