개발나라 스용공주

이번 글은 함수 표현식에 대해 알아볼 것이다.  [ 함수표현식 ]아래 코드는 변수 varA 안에 함수 funcA()가 있는 구조다.이때 함수 funcA()는 함수 선언식이 아니라 변수의 값으로서 함수가 생성된 것이다.let varA = function funcA() { console.log("funcA");}  따라서 아래 코드와 같이 변수명을 이용하여 호출 시 아래 결과값 이미지와 같이 변수에 담긴 함수의 기능인 콘솔창에 "funcA"를 출력하는 것을 확인할 수 있다.varA();  하지만 아래 코드와 같이 변수의 값으로 담긴 함수를 일반적인 방법으로 선언된 함수를 호출하듯 함수명 자체로 호출하게 되면 오류가 발생하는 것을 확인 할 수 있다.funcA();  따라서 자바스크립트에서는 함수도 문자나..

이번 글은 함수를 작성할 때 작성을 간소화하는 방법인 화살표 함수에 대한 글이다.  [ 화살표 함수 ]화살표 함수란, 함수의 형태를 간략하게 하여 이전보다 더 빠르고 간결하게 생성되도록 도와주는 것이다. 아래 코드의 결과는 아래 이미지와 같다.let varB = function () { return 1;};console.log(varB());  위의 코드를 화살표 함수로 만들어주면 아래 코드와 같다.function 생략 후 () 뒤에 =>를 해줌반환값이 있을 경우 {}를 생략하고 반환값만 작성함let varB = () => 1;console.log(varB());  함수의 매개변수가 있을 경우 형태는 아래 코드와 같다.let varB = (plus) => plus + 1;console.log(var..

이번 글은 삼항 연산자에 대한 설명글이다.  [ 삼항 연산자 ]삼항 연산자는 항을 3개 사용하는 연산자이다.조건식을 이용해 참과 거짓에 따라 값이 다르게 반환되는 구조이다. 아래 코드는 변수 res에 var8의 값이 짝수이면 "짝수"를, 홀수이면 "홀수"를 반환한다.let var8 = 10;let res = var8 % 2 === 0 ? "짝수" : "홀수"; 위의 코드는 아래 이미지와 같이 ?를 기준 앞에 위치한 1번 위치에 해당하는 것이 조건식이고 해당 조건식이 true면 :을 기준으로 앞에 있는 2번 위치의 값을 반환하고 false면 3번 위치의 값을 반환한다.

이번 글은 null과 undefined의 설명과 둘의 차이점과 null 병합 연산자에 대해 알아볼 것이다.  [ NULL ]null type은 아무 것도 없는 것으로 명시적으로 값을 넣어줄 때 사용된다.let empty = null;   [ Undefined ]undefined type은 변수 선언 후 아무 값도 할당하지 않았을 때 자동으로 부여되는 것이다.let none;   [ NULL과 Undefined의 차이점 ]이 둘의 차이 점은 null은 비어있는 값 자체를 값으로서 넣어준 것이고 undefined의 경우 변수의 선언만 하고 아무런 값을 넣어주지 않았을 때 정의되지 않은 곳에 자동으로 undefined이 적용된 것이다.  [ NULL 병합 연산자 ]null 병합 연산자는 존재하는 값을 추려내는..

이번 글은 비주얼스튜디오 코드를 사용하여 코딩할 때 유용한 플러그인을 소개하는 글이다.  [ Error Lens ]오류가 나타날 경우 밑줄로만 표시해주지 않고 해당 오류를 빨간색으로 표시하여 더 눈에 잘 보이도록 해주고 오류가 왜 났는지 오류의 원인을 바로 알려주는 플러그인이다.  아래 사진과 같이 오류 발생 시 오류의 원인을 바로 알려주는 것을 확인할 수 있다.

이번 글은 아래 영상에 나온 탭메뉴를 만드는 코드 리뷰이다.해당 탭메뉴는 이미지를 버튼으로 사용하여 이미지를 누르게 되면 텍스트 내용이 변경되는 코드이다.    [ 개발 과정 ]첫번째로 아래 사진과 같이 아무것도 효과도 적용되어있지않는 아래 화면을 만들어준다. 그리고 맨 첫번째 이미지에 해당하는 텍스트를 제외한 나머지 텍스트들은 안보이도록 처리해준다.(맨 첫번째 나오는 이미지와 텍스트에는 추가적으로 클래스명을 따로 부여해 해당 클래스명의 기능으로 이미지가 색상이 있고 둥근 형태이고 텍스트가 보여지는 형태가 되도록 해준다. => 그리고 클릭 시 클릭한 이미지에 추가적으로 부여한 클래스명이 옮겨가는 구조 => 옮겨가면 위에서 만든 클래스의 기능이 옮겨가지는 것 => 옮기는 것은 제이쿼리로 해준다)    두번..

이번 글은 border를 활용한 탭 메뉴 애니메이션 실습에 대한 글이다.  * border는 늘어날 수 없으므로 가상클래스로 만들어줘야함  자기자신의 X축에서 크기값을 50% 빼줘야함 (정중앙 배치)left:50%;transform: translateX(-50%); [ html ] HOME ABOUT SERVICE PORTFOLIO CONTACT  [ css ]body { margin : 0; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f4f4f4;}a..

구조 : item이 3개 있고 그 위에 덮어질 텍스트 caption 또한 3개 존재 => 이들을 감싸는 items 존재display : 가로 배치를 위해 display : inline-block;중앙정렬하는 법 : item들이 inline-block이므로 items에 text-align : center;텍스트와 이미지 겹치기 : 이미지 위에 텍스트를 겹치는 것이므로 기준점을 이미지로 삼기 위해 position 부여를 이미지는 relative, 텍스트는 absolute 후 top과 left를 0으로 적용hover 요소 : hover 시 서서히 등장하기 위해 transition을 0.5s주고 transition을 적용하기 위해 display : none이 아닌 opacity로 보이지 않게 만들어줌 (opac..