프로젝트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

자바스크립트 함수 정의방법3 - 화살표 함수

 


자바스크립트 함수 정의하기
세번째 방법은 화살표 함수를 사용하는 것 이다.
화살표 함수는 ES6버전에서 탄생하였다.
Syntax 는 이와 같다

()=>{ 

코드구현

}

화살표 함수는 함수를 조금더 간편하게 쓰고자 채택된 방식이다.
처음 이 타입을 접하면 무슨 암호 처럼 느껴지나, 자주 사용해보면 사용에 편리함을 느낄 수 있다. 간편하게 쓰고자 함이 목적인 화살표 함수는 함수 표현식에서 익명함수만이 변환이 가능하다.

예제를 보자.

let result3 = 0;
const sum3 = ()=>{
  for(let i = 0; i < 10 ; i++){
       result3 = result3 + i;
      }
      console.log(`result3 is ${result3}`);
};
sum3();

익명함수 라 함은 함수이름이 없다는 것이다.
함수표현식 이기에 변수에 함수를 대입하고, 그 변수를 통해서 함수를 호출한다.
익명함수 일때 굳이 function 이라는 키워드를 사용하지 않아도 되니 편리하다.

화살표 함수에 대해서 정리해본다.
감사합니다.





댓글

이 블로그의 인기 게시물

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

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

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