조건(삼항)연산자, [ javascript ] 삼항연산자 사이트를 참고하여 작성하였습니다.

if문을 아래와 같은 형식으로 사용해왔다.

if(조건){ 
    //조건이 참일때 
}else{ 
    //조건이 거짓일때 
}

삼항연산자는 if 조건문의 대체제로 간결하게 비교구문을 작성할 수 있다.

삼항연산자는 조건에 따라 값을 할당 하거나, 조건에 따라 연산을 진행 할 때 사용한다.

삼항연산자 구문

mdn 사이트에서 나와 있는 설명을 가져와봤다.

condition ? exprIfTrue : exprIfFalse

condition 조건문으로 사용되는 표현식

exprIfTrue condition이 truthy한 값으로 평가될 경우 실행되는 표현식 (true와 같거나, true로 치환될 수 있는 값)

exprIfFalse condition이 falsy한 값으로 평가될 경우 실행되는 표현식 (false와 같거나, false로 치환될 수 있는 값)

설명 false 이외의 falsy한 표현식에는 null, NaN, 0, 비어있는 문자열 (""), 그리고 undefined가 있습니다. condition이 이 중 하나일 경우 조건 연산자의 결괏값은 exprIfFalse 표현식을 실행한 결괏값입니다.

예제

1. 조건에 따라 값을 할당한다.

<script>

  const a = 1; 
  const b = (a===1)?'a입니다':'b입니다'; 
  console.log(b) //a입니다

</script>

2. 조건에 따라 연산한다.

<script>

  const a = 1; 
  const text; 
  (a === 1) ? text='a입니다' : text='b입니다'; 
  console.log(text) //a입니다

</script>

ES6에서의 삼항연산자 사용

1. 삼항연산자 (조건) ? 참:거짓

<script>

    let a = true;

    let ex1 = a === true ? "참" : "거짓";

    console.log(`결과: ${ex1}`);

</script>

위 예제에서 a의 값이 true 인가? 맞으면 "참", 틀리면 "거짓"을 비교하는 구문이다. 결과값은 결과: 참 으로 콘솔창에 출력된다.

2. === 같다, 조건 && 참결과

<script>

    let b = false;

    let ex2 = b === false && "거짓";

    console.log(`결과: ${ex2}`);

</script>

b는 false 로 선언된 변수이다. b라는 변수가 false인것이 참일 경우 결과 값에 "결과"라는 값을 출력하라는 조건문이다.
&& 연산자는 참의 결과를 나타내기때문에, 콘솔창에는 "결과: 거짓" 라는 값이 출력된다.

3. === 조건 || 거짓(undefined)

<script>

    let c = false;
    //변수 c 는 false이다.

    let ex3 = c === true || "거짓의결과";
    //변수 c 는 === 같냐, 트루 또는 거짓의 결과
    //-> 변수 C가 true가 아니고 false이기 때문에, 뒤에 있는 "거짓의 결과" 값을 반환한다.
    console.log(`결과: ${ex3}`);

</script>

2번과 동일한 유형으로, &&이 아닌 ||를 사용한 예제이다. || 연산자를 써서 비교할 경우 거짓의 결과가 반환된다.콘솔창에는 변수 c가 false이기때문에, "결과: 거짓의 결과"가 출력된다. 변수 c에 undefined값을 넣어도 true가 아니기때문에, || 뒤에 있는 "거짓의 결과"가 출력될 것이다.

아직도 알아야 할 내용들이 많지만 , 오늘은 WAI-ARIA 에 대해 알아보도록 하겠다.

WAI-ARIA

Web Accessibility Initiative – Accessible Rich Internet Applications

WAI는 W3C에서 웹 접근성을 담당하는 기관으로 ARIA는 RIA 환경의 웹 접근성에 대한 표준 기술 규격을 의미한다.

( RIA : 정적인 HTML, 단순한 자바스크립트 환경의 웹이 아닌 동적인 자바스크립트와 Ajax와 같은 기술을 사용한 환경에서 수준 높은 UX(User eXperience)를 제공하는 웹 애플리케이션 )

WAI-ARIA를 사용해야하는 이유

RIA(Rich Internet Applications)는 화려하고 편리한 웹 애플리케이션이지만 스크린리더와 같은 보조기술을 사용하는 장애인들이 접근하기에 취약한 부분이다. 스크린리더 및 보조기기 등에서 접근성 및 상호 운용성을 향상 시키기 위한 목적으로 나왔으며, 웹애플리케이션 역할(Role), 속성(Property) 정보를 추가하여 개선 할 수 있도록 제공하고 있다.

WAI-ARIA 를 이용해서 개발자가 의도한 유저 인터페이스 행동이나 구조적인 정보를 스크린 리더와 같은 보조 기술에 전달하여 시각/인지 장애인들에게 일반 사용자들과 동일한 정보를 제공하여 웹페이지 탐색을 돕는 UX를 제공한다.

WAI-ARIA 사용 방법

1. HTML5 Section 요소와 중복하여 사용하지 않는다. : HTML5 에서 추가된 시멘틱 태그를 먼저 사용하고 의미를 부가적으로 주어야 할 때 role을 추가한다.

<!-- X -->
<h1 role="button">바로가기</h1>
<!-- △ -->
<h1><span role="button">바로가기</span></h1>
<!-- ○ -->
<h1><button>바로가기</button></h1>

2. 만약 <button> , <input> 요소들처럼 키보드 지원이 되는 요소를 <div>와 WAI-ARIA로 작업해야 한다면, 동일하게 작업할 것

<!-- html5 -->
<button>버튼<button>

<!-- div + WAI-ARIA -->
<div role="button" tabindex="0">버튼</div>

3. 사용자의 브라우저와 디바이스가 WAI-ARIA를 지원하는 지 확인할 것 : WAI-ARIA는 우리가 사용하는 크롬, 인터넷 익스플로러, 사파리 등의 최신 버전 브라우저들은 대체로 지원을 합니다. 아래의 이미지는 Can I Use에서 확인할 수 있다.

WAI-ARIA 지원 브라우저 현황 (출처 : https://caniuse.com/?search=wai-aria)

WAI-ARIA 구조

WAI-ARIA를 구성하는 역할, 속성, 상태 기능은 HTML 요소에 보충하여 사용되는데, 여기서 role에 대해 알아보겠다.

1. 역할(Role) 컴포넌트나 요소 내의 역할을 정의

대체로 이미지나 텍스트를 봤을때 이곳을 누르면 탭이라는 것을 인지할 것이다.

탭버튼을 작업할때는 주로 <ul> ,<li> ,<a> 태그들로 탭을 구성하는데, WAI-ARIA role="tabList", role="tab", role="tabpanel"로 스크린 리더기 사용자에게 더 정확한 정보를 제공할 수 있다.

<!-- 일반적인 작업 -->
<ul class="btnList">
  <li>
    <a href="#" class="on">정보1</a>
  </li>
  <li>
    <a href="#">정보2</a>
  </li>
  <li>
    <a href="#">정보3</a>
  </li>
</ul>

<div class="wrap-tab-contents">
  <div id="tabpanel01" class="tab-contents on"><p>정보1 콘텐츠</p></div>
  <div id="tabpanel02" class="tab-contents"><p>정보2 콘텐츠</p></div>
  <div id="tabpanel03" class="tab-contents"><p>정보3 콘텐츠</p></div>
</div>

<!-- WAI-ARIA 적용 -->
<ul class="btnList" role="tabList">
  <li>
    <a href="#" id="tab01" class="on" role="tab" aria-selected="true" aria-controls="tabpanel01">정보1</a>
  </li>
  <li>
    <a href="#" id="tab02" role="tab" aria-selected="false" aria-controls="tabpanel02">정보2</a>
  </li>
  <li>
    <a href="#" id="tab03" role="tab" aria-selected="false" aria-controls="tabpanel03">정보3</a>
  </li>
</ul>

<div class="wrap-tab-contents">
  <div id="tabpanel01" class="tab-contents" role="tabpanel" aria-labelledby="tab01" tabindex="0">
    <p>정보1 콘텐츠</p>
  </div>
  <div id="tabpanel01" class="tab-contents" role="tabpanel" aria-labelledby="tab02" tabindex="0" hidden="true">
    <p>정보2콘텐츠</p>
  </div>
  <div id="tabpanel01" class="tab-contents" role="tabpanel" aria-labelledby="tab03" tabindex="0" hidden="true">
    <p>정보3 콘텐츠</p>
  </div>
</div>

위 코드를 NVDA(NonVisual Desktop Access)라는 스크린 리더기 프로그램으로 들어보면 의미가 다르게 전달되는 것을 알 수 있는데,

결과

탭 메뉴 WAI-ARIA 적용 전

• 불릿 [링크] 정보1
• 불릿 [링크] 정보2
• 불릿 [링크] 정보3 페이지를 이동하는 링크 태그로, 의미만을 정보정달해준다.

탭 메뉴 WAI-ARIA 적용 후

• 불릿 [탭] 정보1
• 불릿 [탭] 정보2
• 불릿 [탭] 정보3 버튼의 역할이 탭이라고 명시해주고 선택된 요소 정보도 함께 전달해줄 수 있다.

2. 속성(Property) 컴포넌트의 특징이나 상황을 정의

시각 정보를 이용할 수 없는 사용자는 만약 검색이라는 안내 텍스트 없이 버튼을 나타낼 때 어떤 버튼인지 알 수가 없다.

• 폼요소의 필수 요소와 관련된 aria-required
• 텍스트 레이블 없이 이미지로 표현될 때 정보를 부여하여 설명해주는 aria-label
• 업데이트된 정보의 상황 aria-live

예를 들어 '검색' 이라는 아이콘을 안내 텍스트 없이 나타낸다면, 시각 정보를 이용할 수 없는 사용자는 어떤 버튼인지 알 수 없다.

대체텍스트를 이용할 수 있지만, aria-label을 이용하여 버튼 요서에 검색이라느 설명을 추가 할 수 있다.

<button class="btn_search"></button>

<!-- 숨김 텍스트 이용 -->
<button class="btn_search">
  <span class="hidden">검색</span>
</button>
<!-- WAI-ARIA 적용 -->
<button class="btn_search" aria-label="검색"></button>

3. 상태(State) 컴포넌트의 상태 정보를 정의

• 메뉴의 활성 여부를 알려주는 aria-expanded, aria-selected
• 폼 요소 유효성 검증과 관련 있는 aria-invalid 텍스트를 노출함으로 사용성을 높여줄 수 있다.
• 상태가 변화 될때 확장됨/축소됨/눌림/눌리지않음 의 상태값을 음성으로 알려주며 aria-invalid 상태에 따라 에러 텍스트를 노출시킴으로 사용성을 높여줄 수 있다.

<ul class="btnList">
  <li>
    <button id="accordion01" aria-controls="accordion-region01"
    aria-expanded="true" >munju_dev</button>

    <div id="accordion-region01" role="region" aria-labelledby="accordion01">munju_dev</div>
  </li>

  <li>
    <button id="accordion02" aria-controls="accordion-region02">
    UX Engineer</button>
    <div id="accordion-region02" role="region" aria-labelledby="accordion02">UX Engineer</div>
  </li>

</ul>

<style>
  li {
    background-image: url(arrow_down.png);
  }
  li button[aria-expanded='true'] {
    background-image: url(arrow_up.png);
  }
</style>

웹접근성을 준수해서 코드를 작성하기 위해서는 앞으로 더 많이 웹접근성 지침 가이드나 규칙을 알아야겠다고 느꼈다.

추후에 계속 학습된 내용을 포스팅하도록 하겠다.

참고한곳 https://www.biew.co.kr/entry/WAI-ARIA-%EC%9B%B9%ED%8D%BC%EB%B8%94%EB%A6%AC%EC%8B%B1, https://y00eunji.tistory.com/entry/HTML-WAI-ARIA-aria-hidden#article-1--%EC%82%AC%EC%9A%A9-%EC%9D%B4%EC%9C%A0, https://story.pxd.co.kr/1588, https://nuli.navercorp.com/community/article/1132879, https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques 이미지출처: https://story.pxd.co.kr/1588

이 포스팅은 css 중급, 스크린리더 사용자를 위한 기법과 추가 설명 제공하기 사이트를 참고하여 작성하였습니다.

IR(Image Replacement) 기법은 이미지 대체텍스트 제공을 위한 CSS 기법으로 다양한 CSS기법을 사용하여 이미지의 대체텍스트를 제공할 수가 있다.

의미가 포함되어 있는 image를 배경으로 표현하고, 그에 상응하는 내용을 text로 전경에 기입하는 방법으로,

시각이 있는 사용자는 이미지로 처리된 화면을 볼 수 있지만 "화면 낭독기를 사용하는 시각 장애인, CSS제거 및 인쇄"시에는 문자에 접근하거나 문자를 볼 수 있는 형태로 설계 하는 기법을 말한다.

1. 스프라이트 이미지를 이용한 IR 기법

지난번 포스팅하면서 배운 이미지스프라이트와 함께 사용을 많이 한다. 이미지 스프라이트 기법은 css의 background-position 속성으로 제어하는데,

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>이미지 스프라이트 기법 사용하기</title>
    </head>
    <style>
        a { display: inline-block; }
        a::after {

            content: "";
            display: block;
            width: 28px;
            height: 28px;
            background-image: url(./css_sprites.png);
        }

        .css::after {
            width: 120px; height: 170px;
            background: url('css_sprites.png') -10px -10px;
        }

        .js::after {
            width: 120px; height: 170px;
            background: url('css_sprites.png') -290px -10px;
        }

        .html::after {
            width: 120px; height: 170px;
            background: url('css_sprites.png') -150px -10px;
        }
    </style>


    <body>
        <a href="#" class="css">CSS</a>
        <a href="#" class="js">JS</a>
        <a href="#" class="html">HTML</a>
    </body>
</html>

이미지 스프라이트 포스팅에서 봤던것과 같이 background-position 속성으로 이미지의 위치값을 설정하여 이미지의 일부만 표시하게 할 수 있다.

2. text-indent

css 에서 text-indent는 IR기법을 가장 손쉽게 사용할 수 있는 방법이자, Phark Method 권장사항으로 이미지로 대체할 요소에 배경이미지를 설정하고, 글자는 text-indent를 이용하여 화면 바깥으로 보이지 않게 하는 방법이다. (-9999px만큼)

• 스크린 리더기 읽어줌
• 추가적인 요소를 사용 안함

사용하기 간편하지만 사용자의 디바이스에 따라 이미지가 제대로 로드 되지 않았을때 스크린리더 사용자가 아니라 하더라도 이미지를 설명하는 텍스트를 보고 콘텐츠 내용을 확인해야하는 단범이 있으며, 웹페이지 로드 시 위치값을 계산해야하기 때문에 성능저하를 불러올 수 있다.

Daum CSS Convention 에서 명시한 방법을 살펴보겠다.

<!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
  </head>
  <body>

  <button type="button">검색</button>
  <a href="#">검색</a>

  <style>
    button {
      display:block; width:49px; height:36px; margin:0; padding:0;
      text-indent:-9999px; /* 들여쓰기를 -9999px만큼 지정하여 글자를 버튼 밖으로 숨김 처리 , overflow:hidden을 통해 밖으로 내보낸것 히든처리 */
      background:url('btn_search.gif') no-repeat;
      border:none;
    }
    a {
      display:block; overflow:hidden; float:left; width:49px; height:36px;
      text-indent:-9999px; /* 들여쓰기를 -9999px만큼 지정하여 글자를 버튼 밖으로 숨김 처리 
, overflow:hidden을 통해 밖으로 내보낸것 히든처리*/
      background:url('btn_search.gif') no-repeat;
    }
  </style>


  </body>
</html>

3. position: relative, z-index: -1

WA IR 권장

해당 기법을 사용할 경우, 스크린 리더기가 읽을 수 있다. 이미지로 대체할 요소에 배경이미지로 설정 한 후 글자는 <span> 으로 감싸고, position:relative,z-index:-1을 이용하여 (음수 값) 안보이게 처리한다.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <style>
        button {
            width:71px; height:71px; margin:0; padding:0;
            background:url(./ico02.png)  no-repeat;
            border:none;
        }
        a {
            display:block; width:49px; height:36px;
            text-decoration:none;
            background:url(./ico02.png) no-repeat;
        }
        span {
            position:relative; z-index:-1;
        }
    </style>

    <body>

        <button type="button"><span>검색</span></button>
        <a href="#"><span>검색</span></a>
    </body>
</html>

아이콘 뒤에는 대체 텍스트인 검색 이란 글자가 z-index 설정으로 가려져 있는 것을 알 수 있다.

4. width:0; height: 0;

이 방법은 대체 텍스트 글자가 들어가는 등의 요소의 width 와 height 값을 0으로 지정하는 방법이다. 대체할 텍스트 요소에 BackGround 이미지를 설정한 다음 대체 텍스트가 포함되는 요소의 높이와 너비를 0으로 지정하여 글자를 숨길 수 있다.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <style>
        button {
          width:71px; height:71px; margin:0; padding:0;
          background:url('./ico02.png') no-repeat;
          border:none;
        }
        a {
          display:block; width:71px; height:71px;
          text-decoration:none;
          background:url('./ico02.png') no-repeat;
        }
        span {
          display:block; overflow:hidden;
          width:0; height:0;
        }
      </style>

    <body>
        <button type="button"><span>버튼</span></button>
        <a href="#"><span>a태그</span></a>
    </body>
</html>

+추가 내용을 다시 기록하도록 하겠다..

개발자 도구에서 css 적용된 것을 보면 박스 모델에 대해 쉽게 접할 수 있다.

• content : 글씨가 삽입되는 영역
• border : 테두리 영역
• padding : content와 border 사이
• margin : border와 다른 태그 영역 사이

CSS box-sizing 속성

박스의 크기를 설정할 때 높이를 지정할 경우도 생기고, 내가 지정하고 싶은 영역의 높이나 너비가 이미 패딩이나 마진, 보더로 인해 넘어가는 경우도 발생한다.

이럴때 css box-sizing 속성을 사용하면 요소의 너비와 높이를 균일하게 유지하도록 해준다. 즉 box-sizing 속성은 CSS의 테두리 영역의 크기를 결정한다.

box-sixing : 속성값

content-box

지정한 CSS width와 height를 컨텐츠 영역에만 적용한다. padding, border, margin은 너비와 높이에 포함되지 않고, 따로 계산 되어 전체 영역이 설정값에 더해지기 때문에 커질 수 있다.

css의 기본 설정값은 content-box로 초기 설정에서 width와 height를 설정하면 레이아웃이 원하는 결과대로 나오지 않을 수 있다. 따라서 원하는 widht와 height로 지정해주길 원한다면 border-box로 지정해 주어야한다.

전체크기 : content-box + border + padding + margin 컨텐츠크기 : content-box

<html>
  <head>
    <style>
      div {
        border : 5px black solid;
        width : 100px;
        height : 100px;        
        box-sizing:content-box;
      }
    </style>
  <body>
    <div>content-box</div>
  </body>
  </head>
</html>

스타일시트에선 width와 height의 값을 100px로 지정해주었지만 border때문에 110px씩 잡힌것을 볼 수 있다.

border-box

border-box 의 경우에는 전체 요소의 크기가 width값으로 적용된다. 따라서 요소의 padding, margin, border가 width를 늘릴 수는 없다.

전체 크기 = border-box = content + border + padding + margin 컨텐츠 크기 = border-box – border – padding – margin

<html>
  <head>
    <style>
      div {
        border : 5px black solid;
        width : 100px;
        height : 100px;        
        box-sizing:border-box;
      }
    </style>
  <body>
    <div>content-box</div>
  </body>
  </head>
</html>

border-box 속성값은 지정한 width와 height의 크기가 모든 box-model의 합계로 지정되기 때문에, border-box를 설정하였을 경우 css 에서 지정한 width와 height의 값인 100px씩 적용된것을 알 수 있다. 대신 컨텐츠 영역이 자동으로 padding, margin, border의 크기만큼 줄어들기 때문에 지정할때 유념하여야 한다.

참조 문서 https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes/title https://bbaksae.tistory.com/25 https://nuli.navercorp.com/community/article/1132934 https://blog.hivelab.co.kr/%EA%B3%B5%EC%9C%A0-title-%EC%86%8D%EC%84%B1%EC%9D%98-%EB%B0%94%EB%9E%8C%EC%A7%81%ED%95%9C-%EC%82%AC%EC%9A%A9%EB%B0%A9%EB%B2%95/

오늘은 title 속성은 어느 때에 사용하고, 어떤 식으로 사용하는 것이 바람직한지 알아보도록 하겠다.

title 속성

title 속성은 엘리먼트에 대한 정보를 나타내주는 툴팁(tooltip) 기능을 가지고 있다.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>title 속성</title>
    </head>
    <body>
        <a href="#" title="link text">Deep link with title</a>        

    </body>
</html>

• title 속성값은 위의 예시처럼 마우스를 올리면 툴팁으로 title 속성에 적힌 문자 정보가 태그 위에 표시된다.

• 요소에서 title 속성이 생략된다면, 가장 가까운 부모 요소의 title 속성이 암시적으로 적용될 수 있다. 따라서 부모요소와 무관한 것임을 알려주기 위해서는 명시적으로 title 속성을 제공해야한다.
• 빈 문자열을 설정한다면 title 이 보조 정보를 갖고 있지 않음을 의미한다.
• title 속성은 개행문자를 처리하기 때문에 줄바꿈에 유의하여야한다.

title에 빈문자열을 지정할 경우

<div title="CoolTip">
  <p>여기 어디에 마우스를 올리면 “CoolTip”이 나타납니다.</p>
  <p title="">하지만 여기에서는 나타나지 않습니다.</p>
</div>

-> title에 빈 문자열을 지정한 경우 title이 더이상 관련되지 않으며, 해당 요소에는 툴팁을 표시하지 않는다.

title은 여러줄을 가질 수 있다.

툴팁이 두 줄로 나타날 수 있으므로 주의를 요한다.

<p><code>title</code> 안에서 줄을 바꿀 땐 조심해야 합니다.
이 <abbr title="This is a
multiline title">예제</abbr>처럼요.</p>

abbr 요소는 준말 또는 머리글자를 나타내는데, 이때 선택 속성인 title을 사용하면 준말의 전체 뜻이나 설명을 제공할 수 있다. title 속성은 전체 설명만 가져야하며 다른건 포함시킬 수 없다.

title 속성의 사용방법

1. a 요소 : 대상의 제목이나 설명을 나타낼때 사용한다.

<a href="https://www.naver.com/" title="네이버 홈페이지">https://www.naver.com/</a>

2. img 요소 : 이미지의 설명이나 크레딧을 나타낸다.

<img src="img/lawyer.png" alt="대표 변호사" title="변호사">

3. input 요소 : input 요소에 label을 제공하지 못하였을때 대신 사용한다. (단, label 태그는 ui 항목에 대한 설명을 나타내기 때문에, 태그 특성상 텍스트로 설명이 가능하기 때문에 title 속성을 써줄 필요가 없다.)

<input type="text" title="전화번호">

4. iframe : 프레임이 지원되지 않는 경우에는 iframe 요소의 내용이 그대로 표시될 수 있으므로 지원되지 않는 환경까지 고려하여 대체 텍스트를 넣어주어야한다. 요소에 담긴 콘텐츠를 잘 나타낼 수 있는 내용으로 지정한다.

<iframe src="ad_banner.html" name="ad" frameborder="0" 
width="350" height="50" scrolling="no" title="배너 광고">
 <p>프레임이 표시되지 않는 분은 
  <a href=" ad_banner.html">배너 광고 바로가기</a>를 클릭해 주세요.</p>
</iframe> 

이외 <span>, <td>, <input> 등에도 쓰인다.

alt 속성

alt(alternative) : 이미지의 대안이나 이미지에 대한 설명

<img src="img/apple.png" alt="사과">

인터넷 속도, 또는 컴퓨터 사양 문제로 웹브라우저 설정을 '이미지 출력 안 함'으로 한 사용자에게 이미지에 대한 간략한 설명을 볼 수 있다. (데스크탑이 아닌 모바일기기로 접속시에도 유용함.)

시각장애인의 웹서핑시 사용하는 리더(reader) 프로그램이 텍스트는 읽어주지만, 이미지는 읽을 수 없기때문에, alt 의 설명을 읽어준다.

웹서핑시 인터넷 접속 등의 문제로 해당 이미지를 불러오지 못했을 때, 해당 이미지 설명을 보여주기때문에 대략적으로 이미지에 대한 정보를 알 수 있다.

접근성과 사용성 측면

타이틀 텍스트는 마우스를 오버했을 때 나타난다고 하였다. 그렇다면, 각 요소마다 사용자가 마우스 오버를 하지 않는 이상 타이틀 텍스트가 있는지 알수 없다. 또한 1초 이상 마우스 오버 후 기다려야 표시 되기 때문에 빠르기 웹페이지를 탐색하는 부분에서는 그리 효과적이지 않다.

title 속성은 요소에 대한 부가적인 정보를 나타내며, 툴팁으로 사용되기에 적절하다. 하지만 title 속성은 스크린리더기에서 읽히지 않은 경우도 고려했을 때, 모든 사용자를 고려하는 마크업을 하기 위해선 대체 텍스트나 숨김 텍스트를 우선으로 사용하는 것이 적절하겠다.

터치스크린 디바이스의 경우 : 특정요소를 탭하는 동작을 취했을때 요소가 바로 실행되기 때문에 마우스 오버 기능을 사용할 수 없다. 모바일 웹이 아닌 PC 웹을 많이 사용하므로, 문제가 생길 수 있다.

저시력 사용자의 경우 화면을 크게 확대할 수 있다. : 마우스 오버를 할때 표시되는 타이틀 텍스트 또한 확대할 경우 일부만 표시 될 수 있는데, 다른 영역을 보기 위해 마우스를 옮기면 타이틀이 사라진다. 즉 확대 프로그램 사용자는 타이틀 텍스트 전체를 보기에는 부적합하다. 이미지에 대한 필수 정보를 타이틀 텍스트로 제공한 경우에는 더더욱 그렇다.

스크린리더 사용자 외에도 마우스를 사용하기 어려운 사용자일 경우에는 키보드 탭 키 등을 통해 웹페이지를 탐색하는데, 이때 타이틀 텍스트를 키보드 탐색 시에도 표시하게 하려면 JS 또는 CSS를 사용하여 브라우저에서 지원할 수 있도록 해야한다.

결론

W3C 스펙에 정의된 내용과 각 웹 콘텐츠 접근성 지침들의 내용들을 종합한 결론으로 보자면,

1. title 요소가 있는 부분을 선택자로 지정한 후 해당 요소에 포커스 하였을 때 타이틀 텍스트를 표시하는것이 적절하겠다. (브라우저에서 키보드 탐색 시 타이틀 텍스트 지원X)

2. title 속성과 alt 속성의 값이 동일하게 제공될 경우에는 과도한 정보제공이 될 수 있기 때문에 주의 하여야한다.

3. 필요한 경우에 사용 <iframe> 요소에 제목을 제공해야할 때에는 title 속성을 사용하여 정보를 제공하고, <label> 요소를 ui상 추가하기 어려운 상황에는 title 속성을 사용하는 것이 웹 접근성 측면에서 바람직하다고 볼 수 있겠다.

*2023.04.13 추가내용 -링크에 적용된 title 속성값은 센스리더를 제외한 다른 스크린리더들은 읽지 못하기 때문에 스크린리더 사용자에게 별도의 추가 설명이 제공되는 컨트롤을 사용할 때는 ARIA-label을 사용해야만 모든 스크린리더에서 컨트롤명과 추가 정보를 읽을 수 있다.

 <a href="https://www.naver.com/" ARIA-label="네이버 - 새 창이 열립니다">네이버</a>

이 포스팅은 [HTML/CSS] 이미지 스프라이트 기법 ✂️, [CSS] 이미지 스프라이트 기법 을 참고하여 게시하였습니다. 도움이 되어 감사합니다.

이미지 스프라이트(Image Sprite)란 🔎?

스프라이트(Sprite)란 컴퓨터 그래픽스에서 작은 2차원 비트맵이나 애니메이션을 합성하는 기술을 의미하는데, 웹의 경우에는 여러개의 이미지를 하나의 이미지로 만들어 놓는것을 의미한다고 한다. 즉 여러 개의 배경 이미지를 하나의 파일로 제작한 후 background-position 속성을 이용하여 이미지를 배치하는 방법이다.

쉽게 말하면 각각의 이미지를 개별적으로 다운받는 것이 아닌, 하나의 파일만 업로드하여 필요 부분만 개별적으로 사용하는 것이다.

👆 네이버에 메인페이지에서는 스프라이트 기법을 이용해서 아이콘이나 이미지들을 활용하는데에 쓰이고 있는 것을 알 수 있다.

이미지 스프라이트 사용법? 🤔

이미지 스프라이트는 img 태그를 사용해서 이미지를 삽입하는 것이 아닌 CSS의 background 속성을 이용하여 삽입한다. 그런데, 스프라이트 기법이 적용된 이미지를 일일이 붙여서 만들면 시간 소요가 생각보다 될 것이다. 오차가 발생할 수도 있고 이미지 적용이 생각보다 위치 잡는 데에 번거로울 수 있기 때문에 만들어주는 사이트를 사용하는것이 유용하다.

아래 링크는 CSS Sprites Generator라는 프로그램이다. 사용할 이미지들을 넣어주면 자동으로 스프라이트 이미지를 생성해준다.

https://www.toptal.com/developers/css/sprite-generator/

원하는 아이콘, 이미지의 위치값까지 (background-position) 복붙해서 사용하니 편리하다.

스프라이트 기법을 사용하기 위해서는 필수적으로 작성해줘야할것들

width, height : 삽입할 이미지의 크기를 결정한다. background-image : 삽입할 이미지의 경로를 설정한다. background-position : 이미지에서 사용할 이미지의 위치를 설정한다.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <style>
        a::after {
            content: "";
            display: block;
            width: 28px;
            height: 28px;
            background-image: url(./css_sprites.png);
        }

        .css::after {
            width: 120px; height: 170px;
            background: url('css_sprites.png') -10px -10px;
        }

        .js::after {
            width: 120px; height: 170px;
            background: url('css_sprites.png') -290px -10px;
        }

        .html::after {
            width: 120px; height: 170px;
            background: url('css_sprites.png') -150px -10px;
        }
    </style>


    <body>
        <a href="#" class="css">CSS</a>
        <a href="#" class="js">JS</a>
        <a href="#" class="html">HTML</a>
    </body>
</html>

스프라이트된 이미지를 background-image를 통해 ::after에 적용하고, background-position을 통해 위치를 잡아주었다.

브라우저에는 아래와 같이 적용된 모습을 볼 수 있다.

이미지 스프라이트 기법의 장점

1. 이미지 로딩 속도 향상(최적화)된다.

일반적으로 이미지태그를 이용해 하나씩 삽입할때보다 브라우저의 로딩 속도가 향상된다. 각각의 이미지를 가져오는것에 비해 스프라이트 이미지를 하나만 받아야하는 브라우저의 입장에서는 스프라이트 이미지 한장을 불러오는것이 더 빠를 수 밖에 없다.

2. html 마크업이 간결해지고 스크린 리더의 탐색 속도가 향상된다.

css로 작업하지 않고 일일이 html img 태그에 적용을 시킨다면, 텍스트 양도 늘어나고, img 태그로 인해 스크린 리더가 하나씩 읽게 될 것이다. 이미지 스프라이트 기법을 통해 이미지를 background 속성으로 적용하게 된다면 스크린리더가 읽을 필요가 없는 '배경이미지'로 인식하게 되어 탐색 속도가 빨라지게 될 수 있다. (css 로 조절되기 때문에 alt 속성을 지정해 줄 수 없다.) 따라서 이미지 스프라이트 기법은 되도록 의미가 없고 디자인을 목적으로 하는 이미지를 위해 사용하는것이 적합하다.

3. 하나의 파일만 관리하면 된다.

이미지 스프라이트 기법은 여러 이미지를 관리하는 것보다 하나의 이미지를 관리하기 때문에 간편하다. 하지만 관련된 이미지들로만 묶어 합쳐 놓는 것이 좋다. 여러 이미지로 혼합하여 묶을 시에는 여러개의 이미지를 하나의 이미지 파일에 관리하는 것이기 때문에 번거로움이 그대로 유지 될수 있기 때문이다.

이미지 스프라이트 기법의 단점

1. 유지 보수 어려움

장점에서는 파일관리가 쉽기 때문에 유지보수가 잘될 수 있다고 하였지만, 만약 웹페이지가 업데이트, 리뉴얼 됨에 따라 이미지가 추가 된다고 하면, 스프라이트 이미지를 다시 제작 해야한다.

이미 만들어진 이미지는 각각의 포지션 값이 정해져있기 때문에, 이미지 파일을 바꾸면 이전에 적용되었던 위치값들이 변경되기 때문에 전부 바꿔줘야하는 어려움이 발생한다.

만약 이미지가 수정이 빈번한 이미지라면 개별적인 이미지 파일로 관리하는것이 적합하겠다.

2. 데이터 관리에 문제가 생길경우 이미지 로딩이 불가능

여러 개의 이미지 파일을 이용하여 각각의 이미지를 삽입했을 때에는 하나의 이미지가 문제가 발생한다면 문제가 생긴 하나의 이미지 파일만 수정을 하면 된다.

하지만 스프라이트 이미지는 여러개의 이미지가 합쳐져 있기 때문에 스프라이트기법을 적용한 이미지 파일에 문제가 생긴다면 이미지를 볼 수 없는 상황이 발생한다.

이 포스팅은 fenjo.log, untiring_dev.log 게시물을 참고 하여 작성하였습니다. 도움이 되어 감사합니다.

Display: none

태그가 화면에 보이는 방식을 지정하는 속성이다.

display 는 주로 요소의 성격을 바꿀 때 많이 사용한다. display: block; , inline, inline-block, grid, flex 이런식으로 css 작성시 사용해왔었다.

none 태그를 화면에서 보이지 않게 만든다. block 태크를 bolck 형식으로 지정한다. inline 태그를 inline 형식으로 지정한다. inline-block 태그를 inline-block으로 지정한다.

예를 들어

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>display: none VS overflow: hidden</title>
    </head>
    <style>
        .box1 { width: 50px; height: 50px; background-color: red; }
        .box2 { width: 50px; height: 50px; background-color: blueviolet; }

    </style>
    <body>
        <div class="box1">box1</div>
        <div class="box2">box2</div>
    </body>
</html>

브라우저에는 위와 같이 div로 구성된 영역이 생성된다. 이때, box1에 display:none을 적용시켜보면,

화면에서는 box1이 사라진것을 확인할 수 있다. 하지만 개발자도구에서 확인하면 box1에 해당하는 태그는 아직 남아 있는것을 확인할 수 있다.

overflow:hidden;

overflow 속성은 내부의 요소가 부모의 범위를 벗어날 때 어떻게 처리할 건지 지정하는 속성인데, overflow란 '넘쳐흐르다' 라는 말 그대로 사전적의미가 포함되어 있다. 주로 사용되는 속성값은 hidden 이다. 보통 부모 영역보다 자식의 요소가 크면 부모영역의 크기로 맞추고 넘치는 부분을 안보이게끔 한다.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>display: none VS overflow: hidden</title>
    </head>
    <style>

        .parents {width:400px; height: 300px; background-color: aqua;  }
        .child { width: 600px; height: 200px; background-color: yellow; }
        .last { width: 400px; height: 200px; background-color: brown; }

    </style>
    <body>
        <div class="parents">
            <div class="child">child</div>
        </div>
        <div class="last">last</div>
    </body>
</html>

부모 요소에 overflow:hidden 을 넣어줄경우

hidden 영역을 벗어나는부분을 보이지 않게 만든다. 위와 같이 child 영역이 가려진 것을 확인할 수 있다.

scroll 영역을 벗어나는 부분을 스크롤을 생성하게 한다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <title></title>
    <style>
        body > div{
            width: 400px;
            height: 100px;
            border: 3px solid black;
            position: relative;
            overflow: scroll;
        }
        .box{
            width: 100px; 
            height: 100px;
            position: absolute;
        }
        .box1{
            background-color: red;
            left: 10px;
            top: 10px;
        }
        .box2{
            background-color: green;
            left: 50px;
            top: 50px;
        }
        .box3{
            background-color: blue;
            left: 90px;
            top: 90px;
        }
    </style>

</head>
<body>
    <div>
        <div class="box box1"></div>
        <div class="box box2"></div>
        <div class="box box3"></div>
    </div>
</body>

display:none의 경우 적용된 요소의 하위 요소를 포함해서 존재하지 않는것처럼 렌더링 된다. 이것이 의미하는 것은 적용된 요소 내의 콘텐츠 또한 사라진다는것이다. 그렇기 때문에 display:none 이 적용된 요소는 하위의 콘텐츠까지 스크린리더기가 읽을 수 없다.

display:none 이 적용된 요소는 접근성 트리에서 제거가 되며 해당 요소와 하위 요소-콘텐츠 등이 화면 판독 기술(스크린리더기)에 의해 인식되지 않는다.

그렇게 될 경우 스크린 리더기에 의존해야하는 사람들은 웹사이트를 이용하는데 어려움을 겪게 될 것이다.

overflow:hidden은 숨겨져있지만 숨겨진 요소가 포커스가 된다. 순서가 없이 읽으면 복잡한 데이터를 가지고 있는 것을 필요할 때 읽어주기 위함이다. 위 사진은 네이버 검색창에 있는 가상 키보드 영역이다. 키보드 아이콘을 클릭하면 텍스트 입력이 가능한 가상 키보드가 나온다. 이 가상 키보드는 #_nx_kbd 이며, display:none으로 숨겨져있다.

overflow:hidden은 숨겨져있지만 숨겨진 요소가 포커스 된다고 했다. 만약 가상키보드가 필요 없는 상황이라면 시각장애인들은 원하는 정보에 도달하기 위해 많은 포커스를 걸쳐 검색 버튼을 눌러야할것이다.

이를 방지하기 위해 가상키보드 버튼 포커스에 도달하기 위해 원하는 기능을 선택하게 하고, 기능창을 나타내어 사용하게 할 수 있도록 하며, 필요없는 상황에서는 포커스가 가지 않도록 하기위해 display:none을 사용하는 것이 적절하다.

• display:none은 보이는 것, 들리는것 둘다 없앤다.

• overflow:hidden은 보이는것은 숨기지만 들리거나 읽힐 수는 있다.

마지막으로 display:none, visibility:hidden;의 차이점에 대해 알아보겠다. 예시를 보면 명확하게 이해 할 수 있다.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <style>
        div { display: inline-block; border: 1px solid #ddd; margin: 10px; padding: 10px; }
        .dis div { width: 50px; background-color: aqua; }
        .vis div { width: 50px; background-color: red; }
    </style>
    <body>

        <h2>display</h2>
        <div class="dis">
            <div class="box1">box1</div>
            <div class="box2">box2</div>
            <div class="box3">box3</div>
        </div>

        <h2>visibility</h2>
        <div class="vis">
            <div class="box4">box4</div>
            <div class="box5">box5</div>
            <div class="box6">box6</div>
        </div>

    </body>
</html>

여기서 .box2에는 display:none을, .box5에는 visibility: hidden; 을 줘보겠다.

display: none; 은 앞서 말했듯이 화면에 보이지 않게 처리하고 차지하고 있는 공간도 없앤다. visibility: hidden; 은 화면에서는 보이지 않게 처리하지만 차지하고 있는 공간은 그대로 남는다.

• delay()
• stop()
• finish()

예제 )

<body>
    <h1>이펙트 효과의 지연 설정</h1>
    <button id="startBtn">이펙트효과시작</button>
    <div id="divBox"></div>

    <h1>이펙트 효과의 정지와 중지</h1>
    <p></p>
    <button id="toggle_btn">slideToggle</button>
    <button id="stop_btn">stop()</button>
    <button id="finish_btn">finish()</button>
    <div id="divBox2"></div>
</body>

<script>
    $(document).ready( function(){
        $('#startBtn').click( function(){
            //divBox를 0.5초에 걸쳐 사라지게 하고
            //1초 딜레이 후에 다시 2초동안 나타남
            $('#divBox').fadeOut(500).delay(1000).fadeIn(2000);
        });
        $("#toggle_btn").click( function(){
            $('#divBox2').slideToggle(2000);
        });
        $("#stop_btn").click( function(){
            $('#divBox2').stop();
        });
        $('#finish_btn').click( function(){
            $('#divBox2').finish();
        });
    });

</script>

delay()

effect 효과의 지연설정 delay() 메소드는 실행 중인 큐 안에서 연속적으로 실행되는 이벤트 효과 사이의 시간을 설정한다.

일정시간이 경과한 후에 함수 뒤의 코드를 실행하도록 강제적인 지연시간을 생성하는ㄴ데, 큐를 가진 애니메이션에만 적용된다.

stop()

effect 효과의 중지 .stop() 메소드는 선택한 요소에서 실행 중인 모든 이펙트 효과를 중지시킨다.

finish()

.finish() 메소드는 선택한 요소가 포함된 큐까지 제거하여 모든 이펙트 효과를 전부 종료시킨다.

.stop()메소드와 .finish() 메소드는 실행 중인 이펙트 효과를 멈춘다는 점이 동일하지만, .stop()메소드는 일시적으로 중지시키고 다시 재개도 가능하지만, .finish() 메소드는 중지가 아닌 아예 종료시키며 다시 재개할 수 없고 처음부터 실행을 해야한다는 점이 차이점이다.

const template = 템플릿 리터럴은 '작은따옴표(single quotes)'와 "큰따옴표(double quotes)"를 혼용할 수 있다.;

<script>
       const template = 
       `<ul class="nav-items">
            <li><a href="#home">Home</a></li>
            <li><a href="#home">News</a></li>
            <li><a href="#home">Contact</a></li>
            <li><a href="#home">About</a></li>
        </ul>`;
        console.log(template);
</script>

1. 일반적인 문자열에서 줄바꿈은 허용되지 않으며 공백을 표현하기 위해서는 백슬래시로 시작하는 이스케이프 시퀀스를 사용해야한다. ES6템플릿 리터럴은 일반적인 문자열과 달리 여러줄에 걸쳐 문자열을 작성할 수 있으며, 템플릿 리터럴 내의 모든 공백은 있는 그대로 적용한다.

<script>
    const first = "Lee";
    const last = "Jo";
    //ES5: 문자열연결
    console.log('My name is ' + first + ' ' + last + '.');
</script>

2. ES6 : String Interpolaton 템플릿 리터럴은 +연산자를 사용하지 않아도 간단한 방법으로 새로운 문자열을 삽입할 수 있는 기능을 제공한다.

<script>
    console.log(`1+1 = ${1+1}`);  // 1+1 = 2
    const name = 'Leee';
    console.log(`Hello ${name.toUpperCase()}`); //Hello Leee;
</script>

3. ${expression}을 템플릿 대입문이라고 하는데, 템플릿 대입문에서는 문자열 뿐만아니라 표현식도 할 수 있다.

Arrow Function(화살표함수)

키워드 대신 화살표 => 를 사용하여 간략한 방법으로 함수를 선언할 수 있다. (모든 경우에 사용할수 X)

화살표 함수의호출

화살표함수는 익명함수로만 사용할수 있어서 호출하기 위해서는 함수표현식을 사용한다.

매개변수 지정 방법

() => {...} 매개변수가 없을 경우 x => {...} 매개변수가 한개인경우, 소괄호 생략 가능 (x,y) => {...} 매개변수가 여러개인 경우, 소괄호 생략할수 없음

함수몸체 지정 방법 x => { return xx } single line block x => xx 함수 몸체가 한줄의 구문이라면, 중괄호를 생략할 수 없으며, 암묵적으로 return된다.

    () => { return { a: 1 }; }
    () => ({ a: 1 })

    () => {  //multi line block
        const x = 10;
        return x*x;
    };

<script>
    //ES5
    var pow1 = function(x) { return x*x; };
    console.log(pow1(10)); //100

    //ES6
    const pow = x => x*x;
    console.log(pow(10)); //100

    //ES5
    var arr = [1,2,3];
    var poww = arr.map( function(x){
        return x*x;
    });
    console.log(poww); // [1,4,9]

    //ES6
    const poo = x => x*x;
    console.log(poo(10)); //100

    //ES5
    var ree = [1,2,3];
    var pee = ree.map( function(x){
        return x*x;
    });
    console.log(pee); // [1,4,9]

    //ES6
    const reee = [1,2,3];
    const peee = reee.map(x=>x*x);
    console.log(peee);  // [1,4,9]
</script>

일반함수의 this

-일반 함수의 경우, 해당 함수를 호출하는 패턴에 따라 this에 바인딩되는 객체가 달라지고, 콜백함수 내부의 ,this는 전역객체 window를 가르킨다.

<script>
    function Prefixer(prefix){
        this.prefix = prefix;
    }
    Prefixer.prototype.prefixArray = function(arr){
        //(A)
        return arr.map( function(x){
            return this.prefix + ' ' + x; //(B)
        });
    };

    var pre = new Prefixer('Hi');
    console.log(pre.prefixArray(['Lee','kim'])); 
</script>

(A)지점에서의 this는 생성자함수 Prefixer가 생성한 객체, 생성자 함수의인스턴스 (위예제의 경우 pre).

(B)지점에서 사용한 this는 전역객체 window를 가르킨다. 생성자함수와 객체의 메소드를 제외한 모든 함수 내부의 this는 전역객체를 가르키기 때문

((A)처럼 pre라고 생각하겠지만)..

. . .

넘 어렵다..😢 다시 소화시키고 수정하겠다..

html

<body>
    <section class="main-g">
      <div class="content-container">
        <div class="main-form-wrap">
          <div class="form-box">
            <form action="/form_save.php" method="post">
              <h3>SMS 빠른상담신청</h3>
              <p>SMS상담 신청으로 간편하고 빠르게 상담 받아보세요.</p>
              <div class="form-wrap">
                 <div class="name-phone">
                   <input type="text" name="user_name"  placeholder="이름" required>
                   <input type="text" name="user_phone" placeholder="연락처" required maxlength="13" onkeyup="this.value=this.value.replace(/[^0-9]/g,'');">
                 </div>

                <div class="contents">
                  <input type="text" name="contents" placeholder="내용을 입력하세요." required>
                </div>

                <div class="chk-box">
                    <input id="chk-top" type="checkbox" name="agree_terms" value="동의" checked="checked" required>
                    <label for="chk-top">개인정보처리방침동의</label>
                    <a href="javascript:;" class="modal-link">내용보기</a>
                </div>

                <div id="modal">
                    <div class="modal-close">x</div>
                    <p>
                        <strong>개인정보 수집·이용 동의</strong><br/>

                         아무개의 개인정보 수집 이용 목적은 다음과 같습니다. 
                         내용을 읽어보신 후 동의 여부를 결정하여 주시기 바랍니다.<br/><br/>

                        1. 수집·이용 목적<br/>

                        ▪ 전화 법률상담<br/>
                        ▪ 방문예약 상담 및 관리<br/><br/>

                        2. 수집·이용 항목<br/>
                        ▪ 필수항목_이름, 연락처<br/>
                        ▪ 선택항목_이메일, 상담내용<br/><br/>

                        3. 보유·이용 기간<br/>
                        ▪ 수집일로부터 6개월까지<br/><br/>

                        동의서의 내용을 이해하였으며, 
                        개인정보 수집·이용·제공에 관하여 
                        자세한 설명을 듣고, ‘개인정보 보호법’ 
                        제15조(개인정보의 수집, 이용) 등 관련 법규에 
                        의거하여 아무개에 위와 같이 개인정보를 
                        수집·이용·제공하는 것에 동의 또는 부동의 합니다.

                    </p>
                </div>
              </div>
              <button type="submit">SMS빠른상담신청 하기 →</button>
            </form>            
          </div>
        </div>
      </div>
    </section>
</body>

css

<style>
/* 초기화 */
* { box-sizing: border-box; }
html {font-size: 16px;}
body {font-size: 0.75em; line-height: 1.2; font-family: 'Noto Sans KR',"맑은 고딕", "Malgun Gothic", Arial, sans-serif; color: #000; }
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, strong, sub, sup, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, embed, input, select, textarea, button { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 {font-size: 1em; font-family: 'Noto Sans KR',"맑은 고딕", "Malgun Gothic", Arial, sans-serif; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}
input, button, textarea, select { font-size: 1em; font-family: 'Noto Sans KR',"맑은 고딕", "Malgun Gothic", Arial, sans-serif; }
ul, dl,dt,dd {margin:0;padding:0;list-style:none}
legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
label, input, button, select, img {vertical-align:middle;font-size:1em}
input, button {margin:0;padding:0;font-family:'Noto Sans KR', dotum, sans-serif;font-size:1em}
input[type="submit"] {cursor:pointer}
button {cursor:pointer}

textarea, select {font-family:'Noto Sans KR', dotum, sans-serif;font-size:1em}
select {margin:0}
p {margin:0;padding:0;word-break:break-all}
hr {display:none}
pre {overflow-x:scroll;font-size:1.1em}
a {color:#000;text-decoration:none}

*, :after, :before {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}

input[type=text],input[type=password], textarea {
-webkit-transition:all 0.30s ease-in-out;
-moz-transition:all 0.30s ease-in-out;
-ms-transition:all 0.30s ease-in-out;
-o-transition:all 0.30s ease-in-out;
outline:none;
}

input[type=text]:focus,input[type=password]:focus, textarea:focus,select:focus {
-webkit-box-shadow:0 0 5px #9ed4ff;
-moz-box-shadow:0 0 5px #9ed4ff;
box-shadow:0 0 5px #9ed4ff;
border:1px solid #558ab7 !important;
}
/* 오시는 길 */
.main-g { background: #fff; }
.main-g .main-form-wrap { padding: 60px; display: flex; align-items: center; letter-spacing: -1px; }
.main-g .form-box { width: 490px; }
.main-g .talk-box { flex: 1; }
.main-g .talk-box img { width: 100%; }
.main-g h3 { font-size: 2.3rem; color: #000; }
.main-g p { font-size: 1.1rem; color: rgba(0, 0, 0, 0.7); line-height: 1.55; margin: 12px 0 20px; }
.main-g .name-phone input[type=text] { font-size: .9rem; width: 237px; margin-right: 10px; height: 50px; display: inline-block; border-radius: 5px; border: 1px solid #d3d3d3; padding-left: 10px; }
.main-g .name-phone input:last-child { margin-right: 0; }
.main-g .name-phone input::placeholder { font-size: 1rem; }
.main-g .contents { margin-top: 15px; }
.main-g .contents input { font-size: .9rem; width: 485px; height: 150px; border-radius: 5px; border: 1px solid #d3d3d3; padding-left: 10px; }
.main-g .contents input::placeholder { font-size: 1rem; }
.main-g .main-form-wrap button { background: #0361ca; color: #fff; border: 1px solid #0361ca; padding: 12px 30px; font-size: 1.1rem; border-radius: 25px; letter-spacing: 1px; display: inline-block; transition: .3s; margin-top: 30px; letter-spacing: -1px; }

.main-g .main-form-wrap .form-box .chk-box { position: relative; margin-top: 20px; }
.main-g .main-form-wrap .form-box #modal { position: relative; display: none; background-color: #ededed; color: #474c4a; padding: 30px; border-radius: 4px;  width: 23%; position: absolute; top: 15%; left: 30%; display: none; box-sizing: border-box; z-index: 10; }
.main-g .main-form-wrap .form-box #modal p { word-break: keep-all; } 
.main-g .main-form-wrap .form-box .modal-link { display: inline-block; position:absolute; right: 20px; margin-left: 10px; text-decoration: underline!important;}
.main-g .main-form-wrap .form-box .modal-close {  background-color: #000; color: #fff; width: 30px; height: 30px; position: absolute; top: 5px; right: 5px; cursor: pointer; padding: 4px; text-align: center;font-size: 22px; line-height: 14px; border-radius: 50%; }
</style>

script

<script>

  const btn = $('.modal-link');
  const modal = $('#modal');
  const close = $('.modal-close');

  btn.click(function(){
        modal.fadeIn('slow');
    close.click(function(){
        modal.fadeOut('slow');
    });
  });
</script>

or

<script>
  $('.modal-link').click(function(){
      $('#modal').show();
  });
</script>

내용보기 를 클릭하면 #modal 창이 천천히 나왔다가 modal-close를 클릭하면 천천히 사라진다.

정말 간단한 모달 창을 만들어봤다.

콜백함수란 나중에 호출되는 함수로 다른 함수의 매개변수로 함수를 전달하고, 어떠한 이벤트가 발생한 후 매개변수로 전달한 함수가 다시 호출되는 것을 의미한다.

콜백함수는 코드를 통해 명시적으로 호출하는 함수가 아니라, 단지 함수를 등록하기만 하고, 어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 시스템에서 호출하는 함수를 말한다. (호출방식에 의한 구분이다) 특정 함수에 전달되어 특정함수가 어떤 조건에 의해 호출하는 함수라고 설명하면 쉽겠다.

<script>
    function first(a,b,callback) {
        let v = a + b;
        callback(v);
    }

    first(1,2,function(v) {
        console.log(v); //3
    });

    function button1_click(){
        alert('버튼1을 눌렀습니다.');
    }
</script>

<body>
    <button id="button1" onclick="button1_click()">버튼1</button>
</body>

first 함수를 호출하는데, 호출할 때 익명함수를 parameter로 넘겨주고 first 함수에서는 파라미터를 callback이라는 이름으로 받는다.

first가 실행되면 a,b를 곱한 결과값을 callback함수의 파라미터로 넣어주게 되며, callback함수는 익명함수이므로 익명함수가 실행되어 3(1+2)가 된다.

콜백함수를 사용하는 이유는 🤔 ? 자바스크립트에서 비동기적 프로그래밍을 할 수 있기 때문!

1. 사용자 이벤트 처리 -브라우저 화면에서 발생하는 사용자의 이벤트는 예측이 불가능하므로 특정이벤트가 발생할 때 호출을 원하는 내용을 콜백함수에 전달하게된다.

2. 네트워크 응답 처리 -화면단에서 서버에게 요청을 보냈을 때, 응답이 언제오는 지 알 수 없기 때문에, 서버에 대한 응답처리도 비동기적으로 처리한다.

3. 파일을 읽고 쓰는 등의 파일 시스템작업, 의도적으로 지연을 사용하는 기능에 사용된다. (알람 등)

• 화면에 표시할 이미지나 데이터를 서버에서 불러와 표시해야하는데, 이때 ajax 통신으로 해당 데이터를 서버로부터 가져올 수 있다.

<script>
 function getData(){
        var tableData;
        $.get('https://domain.com/products/1', function(response){
                tableData = response;
        });
        return tableData;
    }
    console.log(getData()); 
    //undefined

 </script>

$.get()이 ajax통신을 하는 부분으로, https://domain.com 에다가 HTTP GET요청을 날려 1번 상품 (product)정보를 요청하는 코드이다. = 지정된 url에 데이터를 하나 보내주세요. 라는 요청과 같다.

그렇게 서버에서 받아온 데이터는 response 인자에 담기고, tableData = response; 코드로 받아온 데이터를 tableData라는 변수에 저장함. 이때 getData()를 호출하면 받아온 데이터가 찍히나, undefined로 나온다.

$.get()로 데이터를 요청하고 받아올 때까지 기다려주지 않고 다음 코드인 return tableData;를 실행했기 때문. 따라서 getData()의 결과 값은 초기 값을 설정하지 않은 tableData의 값인 undefined를 출력하게 된다.

이렇게 특정 로직의 실행이 끝날 때까지 기다려주지 않고 나머지 코드를 먼저 실행하는 것이 비동기처리이다. 자바스크립트에서 비동기처리가 필요한 이유는 화면에서 서버로 데이터를 요청했을 때 서버가 언제 그 요청에 대한 응답을 줄지 모르기때문에 마냥 다른 코드를 실행하지 않고 기다릴 순 없기때문이다.

-만약 저런 코드 1개가 아니라 100개를 보낸다고 생각하면 ? -비동기처리가 아니고 동기처리라면 코드를 실행하고 기다리고 -하나 실행하는데 수십분은 걸릴것.

비동기처리의 setTimeout()

setTimeout()은 web API의 종류로 코드를 실행하지 않고 지정한 시간만큼 기다렸다가 로직을 실행한다.

<script>
    console.log('hello');
    setTimeout( function(){
        console.log('bye');
    },3000);
    console.log('hello Again');
</script>

예상 : hello 출력-> 3초있다가 bye출력-> hello Again 출력 실제 : hello 출력 -> hello again출력 -> 3초있다가 bye출력

setTimeout() 역시 비동기 방식으로 실행되기 때문에 3초를 기다렸다가 다음코드를 수행하는 것이아니라 일단 setTimeout()을 실행하고 나서 바로 다음코드인 console.log('hello Again');으로 넘어간다. 따라서 hello -> hello Again -> bye 출력

비동기 실행 방식인 setTimeout을 이용한 예제

<script>
  console.log('1');
  function exec() {
      setTimeout( function(){
          console.log('2');
      },3000);
      setTimeout( function(){
          console.log('3');
      },0);

      console.log('4');
      setTimeout( function(){
          console.log('5');
          },1000);
      }
      console.log(exec());

</script>

실행결과 1 -> 4 -> 3 -> 5 -> 2 setTimeout이 지연시간이 0이라고 해도 실행컨텍스트가 다르기 때문에 1,4가 먼저 출력됨

<script>
    var i;
    for ( i = 0; i < 5; i++ ){
        setTimeout( function(){
            console.log(i);
        },1000);
    }
</script>

effect 효과가 구현되는 방법을 제어하는 프로퍼티이다.

jQuery.fx.speeds

-밀리초에 해당하는 slow(200),normal(400),fast(600)등의 값을 가지고 이펙트 효과의 속도를 나타낸다.

jQuery.fx.interval

-jQuery.fx 객체의 interval 프로퍼티는 이펙트 효과가 보여지는 동안의 초당 프레임수를 나타내는데, 연속적인 프레임에서의 초당 프레임수는 13으로 기본설정으로 되어있다. 초당프레임수를 interval 프로퍼티를 이용하여 사용 목적에 맞게 변경할 수 있음!

*jQuery.fx.off *

jQuery.fx 객체의 off 프로퍼티를 true로 설정하면, 모든 이펙트 효과를 사용할 수 없도록 비활성화시킨다. 이펙트 효과가 비활성화되면, 이펙트 효과는 실행되지 않으며 이펙트 효과의 마지막 상태로 즉시 변경되며, off 프로퍼티는 특히 구형 버전의 브라우저를 다룰 때 유용하게 사용될 수 있다.

예제를 보면 좀 더 수월하게 이해할수 있겠다.

html

<body>
    <h1>jQuery.fx.speeds 프로퍼티</h1>
    <button id="toggleBtn">이펙트효과 토글</button>
    <button id="setBtn">이펙트 효과 속도 변경</button>
    <div id="divBox"></div>

    <h1>jQuery.fx.off 프로퍼티</h1>
    <button id="toggleBtn2">이펙트 효과 토글</button>
    <button id="forbidBtn2">이펙트 효과 금지</button>
    <div id="divBox2"></div>
</body>

<style>
    #divBox,#divBox2 { width: 100px; height: 100px; 
    background-color: yellow;  border: 5px solid red; margin-top: 20px; }
</style>

script

<script>
    $(document).ready( function(){
      $('#toggleBtn').click(function(){
          $("#divBox").slideToggle("fast");
      });

      $('#setBtn').click( function(){
          //jQuery.fx 객체의 speeds 프로퍼티의 fast의 기본값을 1초로 변경함
          jQuery.fx.speeds.fast = 1000;
      });

      $('#toggleBtn2').click( function(){
          $('#divBox2').slideToggle(1000); 
      });

      $('#forbidBtn2').click( function(){
          jQuery.fx.off = true;
      });

    });
</script>

1. 리터럴 방식
2. 생성자함수

2) 생성자함수는 javascript의 객체를 생성하는 역할을 하는데, 2-1) 기존 함수에 new연산자를 붙여서 호출하면 해당함수는 생성자 함수로 동작한다. 2-2) 함수이름의 첫 문자는 대문자로 쓰는 것을 권하고 있다.

동작방식

1. 빈객체 생성 및 this바인딩

생성자 함수 코드가 실행되기 전 빈객체가 생성 됨, 생성한 객체는 this로 바인딩 되는데, 이후 생성자 함수의 코드 내부에서 사용된 this는 빈 객체를 가리킨다.

<script>
  //Person() 생성자 함수
  var Person = function() {
    //함수 코드 실행 전
    this.name = name;
    //함수리턴
    //this가 가리키는 빈객체에 name이라는 동적 프로퍼티를 생성
  }
</script>

Person() 함수를 생성자로 호출되면, 함수코드가 실행되기 전에 빈객체가 생성된다. 빈 객체는 Person() 생성자함수의 prototype 프로퍼티가 가리키는 객체를 링크로 연결해서 자신의 프로토타입으로 설정한다. -> this로 바인딩 됨

<script>
  var foo = new Person('foo');
  //리턴값이 없으므로, this로 바인딩한 객체가 생성자 함수의 리턴값으로 반환돼서 foo변수에 저장된다
  //foo객체->객체 리터럴 방식
  console.log(foo.name); //foo출력

  var lee = {
    name: 'lee nu',
    age: 35,
    gender: 'man'
  };
  console.dir(lee);
</script>

이미지를 이용해서 햄버거 버튼 클릭 시 사이드에 메뉴바가 나오는 것을 구현해보았다.

** HTML**

<body>
  <div class="box">
    <div class="container">
        <div class="header-menu">
          <button><img src="../javascript/img/close_btn.png" alt="close_btn"></button>
        </div>

      <ul class="top-menu">
        <li class="menu-items"><a href="#">menu1</a></li>
        <li class="menu-items"><a href="#">menu2</a></li>
        <li class="menu-items"><a href="#">menu3</a></li>
        <li class="menu-items"><a href="#">menu4</a></li>
      </ul>

        <ul class="bottom-menu">
          <li class="bottom-menu-item"></li>
        </ul>
      </div>
    </div>

  <div class="open-menu">
      <button><img src="../javascript/img/menu_btn.webp"></button>
  </div>

</body>

CSS

<style>
  body { height: 100%; margin: 0; background: #fffbf6; color: black; font-family: 'Roboto', sans-serif; }
  .box { height: 100vh; width: 300px; position: absolute; left: -350px; z-index: 1001; background: white; overflow: hidden; text-align: left;
  -webkit-transition: -webkit-transform 250ms ease-in-out;
  transition: transform 250ms ease-in-out;
  }
  li { list-style-type: none; padding: 0px 0px 0px 0px; }
  ul { padding: 0px; margin: 0px; }
  button:focus { outline: none; }
  .active {
  -webkit-transform: translateX(350px);
  -moz-transform: translateX(350px);
  -o-transform: translateX(350px);
  -ms-transform: translateX(350px);
  transform: translateX(350px);
  box-shadow: 0 19px 38px rgba(78, 78, 78, 0.3), 0 15px 12px rgba(78, 78, 78, 0.3);
  -moz-box-shadow: 0 19px 38px rgba(78, 78, 78, 0.3), 0 15px 12px rgba(78, 78, 78, 0.3);
  -webkit-box-shadow: 0 19px 38px rgba(78, 78, 78, 0.3), 0 15px 12px rgba(78, 78, 78, 0.3);
  }
  .open-menu {display: inline-block;}
  .open-menu button { display: inline; z-index: 0; background: transparent; border: none; margin-top: 10px; margin-left: 25px; padding: 0px; cursor: pointer; }
  .open-menu img { width: 30px; height: 30px; }
  .header-menu { height: 50px; background-color: white; margin-bottom: 200px }
  .header-menu button { position: relative; left: 260px; background: transparent; border: none; margin-top: 10px; padding: 0px; cursor: pointer; }
  .header-menu img { width: 40px; height: 40px; }
  .top-menu { margin-top: 35px; }
  .top-menu a { text-decoration: none; color: black; font-weight: 500; font-size: 16rem; display: block; line-height: 40px; padding-left: 35px;  transition: .8s; }
  .top-menu a:hover { color: #74b5ff; transition: .5s; }
  .bottom-menu { position: absolute; bottom: 0px; width: 300px; background-color: white; text-align: center; }
  .bottom-menu li { padding-top: 20px; padding-bottom: 20px; padding-left: 0px; color: black; font-weight: 700; font-size: 13px; }

</style>

script

<script>
  $(function() {
    const box = $('.box');
    const button = $('.open-menu, .header-menu');
    button.on('click', function(){
        box.toggleClass('active');
    });
  });
</script>

-예시로 현재 적용된 고객사의 게시판 모습이다. 그 전 작업자가 메인페이지에 게시판을 슬라이드 형태로 노출을 해두었는데, 카페24 작업 경험이 많지 않았기 때문에 게시판을 커스텀 하는것이란 너무 어렵게만 느껴졌다. 더구나 성공사례 게시판의 경우에는 더더욱 생소했다.

게시판

메인페이지 노출 UI / 슬라이드 구현 / 클릭시 해당 게시판 게시물로 이동

위에 이미지는 현재 개인 계정에 있는 내 포트폴리오 사이트에 작업한 결과물이다. 이미지까지 업로드 되도록 커스텀 해봤다. 만든지는 조금 됐지만 나중을 대비해 기록을 해두려한다.

html

<div class="section section05" id="section05">
    <div class="reward-wrap">
        <?php echo latest('theme/swiper', 'work', 8, 23); ?>
        <div class="txt-box">
            <p class="stit">Memo board</p>
            <p class="tit">dailymunju <br><strong>메모보드</strong></p>

            <p class="txt">부족한 부분을 게시하여 <br/>공부하는 메모보드입니다</p>
            <div class="slide-arrow-box">
                <div class="prev">←</div>
                <div class="next">→</div>
            </div>
          </div>
    </div>
</div>

<?php echo latest('theme/swiper', 'work', 8, 23); ?>

위의 php 코드를 reward-wrap코드 안에 삽입한다.

CSS

메인페이지에 구현할 스타일 시트를 추가한다.

<style>
        .section05{background-color: #aeb3b7;/* background:url(/img/section_05bg.jpg) no-repeat center; background-size: cover; */ letter-spacing: -1px;}
        .section05 .reward-wrap{display:flex; align-items: center;}
        .section05 .reward-box{width:1230px; margin-left:0; margin-right:0;}
        .section05 .txt-box{padding-left:75px;}
        .section05 .txt-box .stit{color: #767676; margin-bottom:30px; font-size:17px; letter-spacing: 2px; font-weight: bold;}
        .section05 .txt-box .tit{font-size:28px; color:#fff; font-weight: 500; margin-bottom: 50px; line-height: 1.34;}
        .section05 .txt-box .tit strong{font-size:37px;}
        .section05 .txt-box .txt{font-size:18px; line-height: 1.65; color:rgba(255,255,255,.6);}
        .section05 .txt-box .slide-arrow-box {margin-top:30px; display:flex;}
        .section05 .txt-box .slide-arrow-box > div {background:#7a7a7a; color:#fff; cursor:pointer; padding:10px 20px 12px; font-size:28px; font-weight:bold;}
        .section05 .txt-box .slide-arrow-box > div.prev{position:relative;}
        .section05 .txt-box .slide-arrow-box > div.prev::after{content:""; display:block; position:absolute; right:0;  top: 22px;  width:1px;height:20px; background:rgba(255,255,255,.5);}
        .section05  .swiper-wrapper {padding-bottom:20px; padding-top:20px;}
        .section05 .swiper-wrapper .swiper-slide{box-shadow: 2px 4px 10px rgb(0 0 0 / 20%);}
        .section05 .reward-box .img-box img {width:100%;}
        .section05 .reward-box .pan-info{padding:50px; background:#fff; position:relative;}
        .section05 .reward-box .pan-info .btn-go{display:block; width:45px; height:45px; position:absolute; right:40px; top:30px; border-radius:50%; color:#fff; font-size:35px; background:#536878; text-align:center; line-height:42px;}
        .section05 .reward-box .pan-info .tit{font-size:28px; font-weight:bold; margin-bottom:12px; text-decoration: underline;}
        .section05 .reward-box .pan-info .subject{font-size:20px; font-weight:bold; margin-bottom:12px; }
        .section05 .reward-box .pan-info .txt{font-size:15px; color:#333; display: -webkit-box;overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 4;-webkit-box-orient: vertical;}
</style>

script

슬라이드 구현 스크립트를 추가한다.

    <script>
        var swiper_slide = new Swiper('.section05 .swiper-container', {
            slidesPerView: 3,
            spaceBetween: 50,
            speed: 1500,
            autoplay: true,
            loop: true,
            navigation: {
            nextEl: '.slide-arrow-box .next',
            prevEl: '.slide-arrow-box .prev',
            },
        });
    </script>

카페24 서버에 접속하면, theme/basic에 있는 상위 폴더에서 header / index / tail 등의 php 파일에서 작업을 하는데, 경로는 대략 아래와 같다.

<?php echo latest('theme/swiper', 'work', 8, 23); ?>

이코드는 php언어로 작성되었는데, 전임자가 작업한 소스를 보고 응용하였다. 먼저 latest폴더를 생성하기 전에 해당 게시판을 관리자페이지에서 개설한다.

위 이미지 처럼 나는 스킨에 su라는 폴더를 생성해주었다. 서버에 있는 소스를 보면 이렇게 theme > basic > skin > board > su 라는 경로로 파일을 만들어서 넣어주었다. (관리자에서 생성하기 전에 서버에 생성해 주어야한다.)

분류란에 게시판에 들어갈 분류를 기입해준다.

위 이미지 처럼 게시판에 들어갔을때 카테고리별로 게시를 하도록 전체, html , css, javascript ,jquery,vue.js, react.js 의 카테고리를 생성해주었다.

su라는 폴더에는 이제 list.skin.php / style.css / view_comment.skin.php / view.skin.php / write_update.skin.php / write.skin.php 의 파일을 생성해준다.

기존에 게시판을 생성하면 리스트,뷰,라이트 페이지가 있는것처럼 디폴트로 있는 파일들을 복사해 커스텀을 하는 방식대로 진행하였다.

이제 앞서 작성한

<?php echo latest('theme/swiper', 'work', 8, 23); ?>

코드를 살펴보겠다.

경로대로 보면, latest 폴더안에 있는 swiper폴더를 생성한것을 불러오는것인데, 여기서부터 조금 어렵게 느껴졌다.

su 폴더와 동등한 경로인 latest 폴더를 생성한 후 안에 latest.skin.php와 해당하는 style.css를 만들어주었다.

latest.skin.php

<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
include_once(G5_LIB_PATH.'/thumbnail.lib.php');

// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨
add_stylesheet('<link rel="stylesheet" href="'.$latest_skin_url.'/style.css">', 0);
$thumb_width = 460;
$thumb_height = 386;
$list_count = (is_array($list) && $list) ? count($list) : 0;
?>
<div class="swiper-container reward-box">
    <div class="swiper-wrapper">
        <?php
            for ($i=0; $i<$list_count; $i++) {
      $thumb = get_list_thumbnail($bo_table, $list[$i]['wr_id'], $thumb_width, $thumb_height, false, true);

            if($thumb['src']) {
                $img = $thumb['src'];
            } else {
                $img = G5_IMG_URL.'/no_img.png';
                $thumb['alt'] = '이미지가 없습니다.';
            }
            $img_content = '<img src="'.$img.'" alt="'.$thumb['alt'].'" >';
            $wr_href = get_pretty_url($bo_table, $list[$i]['wr_id']);
        ?>

        <div class="swiper-slide">
            <div class="img-box">
                <?php echo run_replace('thumb_image_tag', $img_content, $thumb); ?>
            </div>
            <div class="pan-info">
                <a href="<?php echo $wr_href; ?>" class="btn-go">+</a>
                <p class="tit"><?php echo $list[$i]['ca_name']; ?> </p>
                <div class="subject"><?php echo $list[$i]['subject']; ?></div>
                <p class="txt">
                    <? echo cut_str(strip_tags($list[$i]['wr_content']), 130); ?>
                </p>
            </div>

        </div>        
        <?php }  ?>
    </div>
</div>

style.css

<style>
@charset "utf-8";

/* 새글 스킨 (latest) */
/*.pic_lt .mySwiper{height:600px}*/
.pic_lt a{border:2px solid #21a7ff;display:block;color:#fff}
.pic_lt a:hover{border-color:#0b101a}
.pic_lt .txt{background-color:#21a7ff;padding:20px}
.pic_lt .txt .category{font-size:16px;border-bottom:2px solid #fff;padding-bottom:3px}
.pic_lt .txt .subject{font-size:20px;margin:20px 0; display: -webkit-box;overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 1;-webkit-box-orient: vertical;}
.pic_lt .txt .ico{border-radius:50%;border:1px dashed #fff;text-align:center;width:40px;height:40px;line-height:36px;display:inline-block}
.pic_lt .lt_img img{width:100%}
/*.pic_lt .swiper-slide{height:calc((100% - 20px) / 2)}*/
.pic_lt .swiper-wrapper{padding-bottom:70px}
.pic_lt .swiper-button-next:after,
.pic_lt .swiper-button-prev:after{content:""}
.pic_lt .swiper-button-next, 
.pic_lt .swiper-button-prev{top:-130px; margin-top:0; border:1px solid #21a7ff;border-radius:50%;text-align:center;width:60px;height:60px}
.pic_lt .swiper-button-next{right:auto;left:500px;margin-left:30px}
.pic_lt .swiper-button-prev{right:auto;left:454px;margin-left:-30px}


.law-img {display:flex; align-items:center; margin: 20px 0 0; background:#fff; color:#000;  font-size:1rem;}
.law-img img{margin-right:10px;}
</style>

이제 게시판에 게시물을 작성하였을 때 view 단은

이런식으로 작성된다.

작성자를 추가하기 위해서는

관리자페이지에서 회원관리-회원추가하고, 나는 lee라는 이름으로 섬네일과 작성자를 추가했다.

예를 들면 변호사 얼굴이나 작성자의 섬네일을 등록하고 싶다면 위와 같이 추가할 수 있도록 게시판을 커스텀 해보았다.

법률홈페이지에서 작업한 게시판을 끌어다가 작업했기때문에, 작성란이라든지, 기입란 등등에 아직 흔적이 남아있다.

관리자페이지에서 글을 작성할때에는 위 캡처본처럼 소제목 기입란, 메모, 적용 등으로 분류해놨고, 맨 위쪽 분류를 보면 아까 기입했던 카테고리를 선택할 수 있다. 작성시 기입란이나 텍스트를 수정하려면 이 페이지는 write 페이지 이기때문에 su라는 게시판 폴더로 들어가 write.skin.php를 수정해주면 되겠다.

메모가 아닌 낙서 라고 변경 할경우 또는 기입란 에디터를 삭제하고 싶은경우

위에 소스에 접속하여 커스텀을 하면 된다.

메인페이지에 노출된 슬라이드는 위의 예시작업에서 이미지도 함께 업로드 될수 있도록 작업하였는데,

vue.js에 이미지를 넣기 위해서는 관리자 페이지에서 해당 게시물을 작성 할때 마지막 첨부파일에서 첨부할 수 있고, 이때 넣은 이미지가 메인페이지에 노출 된다.

파일을 넣었다가 삭제하거나 변경하려면 삭제 후 다시 업로드를 해야하는데, 체크박스에 체크를 한 후 작성완료를 누르면 업로드 되었던 이미지가 삭제되고, 다른 이미지를 넣으려면 게시물을 수정해서 다시 재첨부해야 한다.

조금은 멘붕이 왔었지만, 실제로 게시판 커스텀은 꽤나 유용하고 많은 도움이 되었다.

arguments 객체 : 함수 호출 시, 전달인자들이 배열 형태로 저장된 객체이다. 함수 호출 시 전달인자와 함께 arguments 객체가 함수내부로 전달된다.

<script>

    var self = function(){
        console.log('a');
        return function(){
            console.log('b');
        }
    }
    self = self();
    self();

    function func(arg1,arg2) {
        console.log(arg1,arg2);
    }
    func();
    func(1);
    //함수의 인자보다 적게 함수를 호출했을 경우, 넘겨지지않은 인자에는 undefined 값이 할당된다
    func(1,2);
    func(1,2,3);
    //반대로 정의된 인자 개수보다 많게 함수를 호출했을 경우에는 에러가 발생되지 않고, 초과된 인자는 무시된다. 

    //add 함수
    function add(a,b){
        //arguments 객체 출력
        console.dir(arguments);
        return a+b;
    }
    //arguments객체는 함수를 호출할때 넘긴 인자들이 배열형태로 지정된 객체들을 의미한다. 
    //실제 배열이 아닌 유사배열이기때문에 배열의 메소드는 쓸 수 없다

</script>

arguments-callee 속성

-자바스크립트 재귀함수 등에 자주 쓰이는 arguments 객체의 callee속성 : 자바스크립트의 함수는 arguments 객체를 가지고 있으며, 현재 실행중인 함수 객체를 반환하는 데 함수 실행 시 넘어온 인자는 물론이고 callee()를 사용해서 재귀함수로써 반복도 가능하다.

  <script>
    var test = function(a,b,c){
         return arguments[0] + arguments[1] + arguments[2];
    }
    console.log(test(1,2,3)); //6
  </script>

-자바스크립트의 함수는 전달받은 매개변수를 특정한 arguments에 담고 있는데, 만약 코드에서 함수에 전달된 매개변수에 접근할 경우 변수명을 사용해도 되지만 arguments를 사용할 수 있다.

<script>
    //arguments객체를 사용하여 재귀함수를 만드는 예제
    function test(num){
        if( num == 0 ){
            return num;
        }else{
            return num + arguments.callee(num-1);
        }
    }

    console.log(test(2)); //3
    console.log(test(10)); //55
</script>

append

append(), appendTo()

선택한 요소 내의 마지막 위치에 새 요소를 생성하고 추가한다.

$(요소선택).append(새요소);

$(새요소).appendTo(요소선택);

html

<body>
    <ul id="list_ul">
        <li>html1</li>
        <li>html2</li>
    </ul>
    <button id="append_btn" onclick="AppendBtn();">클릭시li추가</button>
    <button id="remove_btn" onclick="RemoveBtn();">삭제해</button>
</body>

<script>
        //요소 추가하기 javascript
        function AppendBtn() {
            var target = document.getElementById('list_ul');
            var li = document.createElement('li');
            var textNode = document.createTextNode('추가된 li입니다.');
            li.appendChild(textNode);
            li.style.color = 'red';
            target.appendChild(li);
        }

        function RemoveBtn() {
            var target = document.getElementById('list_ul');
            var li = document.querySelector('li');
            target.removeChild(li);
        }
</script>

----> 브라우저

----> 클릭시 li 추가 눌렀을 시 추가된 li입니다. 가 추가되는 것을 볼 수 있다.

----> 삭제해 클릭시 html1 삭제됨

<script>
   //제이쿼리에서 append사용
   $(function(){
          $('ul').append('<li>append</li>');
        $('ul').prepend('<li>prepend</li>');
   });
</script>

apply

apply()메서드를 이용한 명시적인 this바인딩

apply() 메소드를 사용해서 Person()함수를 호출한다.

-첫번째 인자로 넘긴 foo가 Person()함수에서 this로 바인딩 되고, apply()메서드의 두번째 인자로 넘긴 배열 ['foo',30,'man']은 호출하려는 Person()함수의 인자 name,age,gender로 각각 전달되고, Person('foo',30,'man')함수를 호출하면서 this를 foo객체에 명시적으로 바인딩 된것이다.

<script>
    function Person(name,age,gender){
        this.name = name;
        this.age = age;
        this.gender = gender;
    }


    //빈객체 생성,리터럴 방식
    var foo = {};
    //apply 메서드 호출
    Person.apply(foo,['foo',30,'man']);
    console.dir(foo);    

    Person.call(foo,'foo',30,'man');

</script>

• call()메서드의 경우에는 apply()메서드와 기능은 같지만 apply() 두번째 인자에서 배열형태로 넘긴것을 각각 하나의 인자로 넘긴다

• call(),apply()메서드는 this를 원하는 값으로 명시적으로 매핑해서 특정함수나 매서드를 호출 할 수 있다는 장점이 있다.

이 게시물은 Adam Argyle, https://web.dev/css-is-and-where/, Seletors level4, 새로운 CSS 기능적인 의사 클래스 :is()와 :where(), :is() 참고하여 작성하였습니다.

:is()와 :where()

1. :is()

기존에 css 를 작성할때 여러 요소에 동일한 스타일을 적용시키려면 긴 선택자 목록들을 나열해야만 했다.

<style>
       h1 > b, h2 > b, h3 > b, h4 < b { color: red; }
   </style>

동일한 클래스를 줘서 사용해도 되지만 기본적으로 이런식으로 css 를 작성하게 되면, 가독성이 떨어졌었다. 하지만 :is() 를 이용하면 읽기 쉬울 뿐더러 짧은 선택자 사용으로 인해 가독성이 향상 될 수 있다. 일반적으로 ,를 사용하여 선택자 목록을 만들때, 선택자 중 하나라도 유효하지 않다면 모든 선택자가 무효화 되며 요소를 찾는데 실패하게 된다.

하지만 :is()와 :where()은 실수를 용납하고 선택자 목록 전체가 무효화 되는 것을 방지한다.

<style>
    :is(h1,h2,h3,h4) > b { color: red; }    

    article :is(h2, h3, p) { 
        color: blue;
    }
</style>

2. :where()

반복선택을 줄일 수 있다는 점에서 :is()와 비슷하면서도 다른데, :where()의 예제를 살펴보겠다.

<style>
   article h2, article h3, article p {
           color: blue;
   }
</style>

<style>
    article :where(h2, h3, p) { 
        color: blue;
    }
</style>

:where()를 사용해서 다시 작성한 예제 코드이다. 여기서 article 요소 선택자는 단 한번만 사용된다. :where()은 불필요한 중복을 없앨 수 있다.

-> 이렇게만 보면 where과 is의 다른점을 찾기가 어려운데, :is()는 기본적으로 :where과 같은 동작을 하기 때문이다.

3. :is()와 :where()의 차이점

:is()가 :where()과 다른 점은 명시도가 높다는것이다. :where()은 명시도가 0이지만, :is()는 구체적인 명시도를 갖는다.

• :where()은 명시도가 없다.

• 매개변수로 전달된 선택자 목록의 모든 명시도를 무시한다. 이러한 기능은 다른 선택자에서는 찾아볼 수 없다.

• :is()는 가장 구체적인 선택자의 명시도를 따라간다.

• :is(a,div,#id) 의 명시도는 ID의 명시도인 100점이라고 볼 수 있다.

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>:where()와 :is()의 차이점</title>

    <style>
        :where(section.where, aside.where, footer.where) p {
            color: red;
        }

        :is(section.is, aside.is, footer.is) p {
            color: green;
        }

        footer p {
            color: blue;
        }
    </style>
</head>

<body>
    <article>
        <h2>:where()</h2>
        <section class="where">
            <p>Section</p>
        </section>
        <aside class="where">
            <p>Aside</p>
        </aside>
        <footer class="where">
            <p>Footer</p>
        </footer>
    </article>
    <article>
        <h2>:is()</h2>
        <section class="is">
            <p>Section</p>
        </section>
        <aside class="is">
            <p>Aside</p>
        </aside>
        <footer class="is">
            <p>Footer</p>
        </footer>
    </article>
</body>

</html>

추가내용- 사실 차이점을 명확하게 이해하지 못했는데, 오늘 다시 코드를 보면서 생각해보니 이해가 되었다. :is()의 명시도가 더 구체적이고, 높기 때문에 코드에서 footer p {color:blue;} css가 적용된건 아래 html 에서 적용된 곳에서만 blue가 적용되었다.

 <footer class="where">
     <p>Footer</p>
 </footer>

-> class 가 is인 footer는 blue가 적용되지 않았다.

4. 선택자의 그룹화

<style>
  /*선택자 처음*/
  :where(h1,h2,h3,h4,h5,h6) > b {
      color: hotpink;
  }

  /*선택자 중간*/
  article :is(header,footer) > p {
      color: gray;
  }
  /*선택자 끝*/
  .dark-theme :where(button,a) {
      color: rebeccapurple;
  }

  /*여러 가지 사용*/
  :is(.dark-theme, .dim-theme) :where(button,a) {
      color: rebeccapurple;
  }

  /*결합*/
  :is(h1,h2):where(.hero,.subtitle) {
      text-transform: uppercase;
  }
  /*중첩*/
  .hero:is(h1,h2,:is(.header,.boldest)) {
      font-weight: 900;
  }
</style>

:is()나 :where()의 이점은 쉼표가 여려개있고 선택자가 반복되는 곳을 찾아서 사용하면 의사 클래스의 유연함을 깨달을 수 있다.

이 게시물은 @supports, CSS Supports, @supports (지원하는 css에 따른 스타일 적용) 사이트를 참고하여 작성하였습니다.

@supports의 사용

@supports 문법을 사용하면 CSS 기능 지원에 따라 달라지는 CSS 선언을 지정할 수 있다. @supports 문법은 미디어 쿼리 문법과 유사한데, 아래 예시 코드를 살펴보겠다.

html >

<div>
  <h1>@supports</h1>
</div>

CSS >

<style>
  @supports (테스트할 프로퍼티 혹은 조건) {
      적용하려는 스타일
  }  
</style>

<style> 
@supports(display: flex) {
  div h1 { 
        display: flex;
        justify-self: flex-start;
        color: red; 
        border: 3px solid red;
        padding: 20px;
        font-size: 40px;
     }

 </style>

위의 예시 코드를 보면, @supports 로 작성된 스타일 시트가 적용된 것을 볼 수 있다. display: flex를 지원하는 브라우저와 그렇지 않은 브라우저에서 적용될 소스가 다르게 된단 말이다.

이처럼 css 속성이 지원하거나 지원하지 않는 상황에 따라 css 값을 달리 적용시킬 수 있다.

@supports 연산자 사용

• not / and / or

1. not

not 키워드는 조건 지정의 반대를 확인하는 데 사용할 수 있다. 연산자 not 은 표현식 앞에 와서 표현식을 부정한다. ()괄호 안의 내용이 유효하지 않은 것으로 간주되면 true를 반환한다.

아래 예시에서는 브라우저가 플렉스가 아닐 때에 지원하기 때문에 즉 특정 스타일을 해당 브라우저에 적용하기 위해 지원하지 않는 브라우저를 확인하는 것이다. 원한다면, 여러개의 'not'을 연결하여 부정의 부정문으로도 쓰일 수 있다.

<style>
@supports not(:not( border-radius:10px)){

}
</style>

2. and 연산자

and 를 기점으로 작성한 조건의 css가 모두 (동시에) 참일 경우에만 관련 css값을 적용한다.

<style>
@supports (display: flex) and (display:gird) {
}
</style>

'display: flex'와 'display:gird'를 모두 동시에 지원하는 지 확인하고 {} 안의 내용을 실행한다.

<style>
@supports (display: table-cell) and ((display: list-item) and (display: contents)) {

}
</style>

--> 괄호 없이 여러 접속사를 병치 할 수 있다.

3. or 연산자

연산자 or은 하나 또는 둘다 참일 경우 참을 반환하여 실행한다.

<style>
@supports (transform:rotate(45deg)) or (-webkit-transform:rotate(45deg)){
   .box{transform:rotate(45deg);}
 }
</style>

transform:rotate(45deg) 나 -webkit-transform:rotate(45deg)의 css 중 하나라도 브라우저에서 지원을 하게된다면 .box에 입력한 css 가 적용된다. ===> 참고:and 및 연산자를 모두 사용하는 경우 or괄호를 사용하여 적용 순서를 정의해야 합니다. 그렇지 않으면 조건이 유효하지 않으며 전체 규칙이 무시된다.

4. 함수구문

1) seletor()

브라우저에서 특정 선택자를 지원하는 문법을 통해 분별하여 스타일을 적용시킬 수 있다.

<style>
    @supports selector(h2 > p) {
    }

       @supports selector(A > B){
      .contents > .box {background:#000;}
       }
 </style>

• 직계 자손 선택자 (>) 를 지원하는 브라우저일 경우에
• .contents > .box에 입력한 css를 적용할 수 있게 만든다.
• selector() 를 사용할 때는 selector 문법 뒤에 띄어 쓰기 없이 selector(선택자 조건)을 입력한다.

            selector (A ~ B){}   ---- 안됨.
            selector(A ~ B){}    ---- 이렇게 써야합니다.

2) 글꼴지원font-format

다음 예제는 woff2 글꼴 형식을 지원하는경우 {} 안의 내용 실행한다.

<style>
    @supports font-format(woff2) {
        font-family: "Open Sans";
        src: url("open-sans.woff2") format("woff2");
    } 
</style>

이 포스트는 var,let,const차이,es6 문법정리 사이트를 참고하여 게시하였습니다. 많은 도움이 되었음에 작성자분들께 감사드립니다. :)

ECMAScript란?

-ECMA스크립트(ECMAScript, 또는 ES)는 자바스크립트를 표준화하기 위해 만들어진, ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어를 말한다.

자바스크립트에서 var로 변수 선언이 가능했는데, 왜 let과 const 가 나왔으며, 이 둘의 사용을 권장하는 것일까? 먼저 그동안 사용했었던 변수에 대해 알아보고 기초부터 개념정리를 한 후 넘어가도록 하겠다.

변수

변수(variable)는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인이름을 말한다. 말그대로 변할수 있는 값이다.

자바스크립트는 매니지드 언어(managed language)이기 때문에 개발자가 직접 메모리를 제어하지 못기때문에 개발자가 직접 메모리 주소를 통해 값을 저장하고 참조할 필요가 없고 변수를 통해 안전하게 값에 접근이 가능하다. 변수명(식별자)인 myNumber는 변수의 값이 아닌 메모리 주소를 기억하고 있다. 변수명을 사용하면, 자바스크립트 엔진이 변수명과 매핑된 메모리 주소를 통해 거기에 저장된 값(23)을 반환한다. 이처럼 변수에 값을 저장하는 것을 할당(assignment, 대입, 저장)이라 하며 변수에 저장된 값을 읽어 들이는 것을 참조(reference)라 한다. 그리고 변수명을 자바스크립트 엔진에 알리는 것을 선언(declaration)이라 한다.

-->지금껏 그냥 변수 지정해서 스크립트를 짜왔는데, 이와 같은 설명을 보고 나니 이해하기가 쉬웠다.

변수선언

자바스크립트에서 변수 선언은 선언 → 초기화 단계를 거쳐 수행된다.

• 선언 단계: 변수명을 등록하여 자바스크립트 엔진에 변수의 존재를 알린다.
• 초기화 단계: 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당하고 초기화한다.

<script>
  var munju
  console.log(munju) 
  // output: undefined
</script>

var 키워드를 이용한 변수 선언은 선언 단계와 초기화 단계가 동시에 진행되어, munju에 암묵적으로 undefined를 할당해 초기화한다. 반대로, console을 먼저 찍어도 반환 값이 undefined로 나온다.

<script> 
  console.log(mj) 
  // output: undefined
  var mj
</script>

이는 변수 선언이 런타임에서 되는 것이 아니라, 그 이전 단계에서 먼저 실행되기 때문이다. 자바스크립트 엔진은 소스코드를 한 줄씩 순차적으로 실행하기에 앞서, 변수 선언을 포함한 모든 선언문(ex. 변수 선언문, 함수 선언문 등)을 찾아내 먼저 실행한다.

즉, 변수 선언이 어디에 있든 상관없이 다른 코드보다 먼저 실행되는 특징을 호이스팅(hoisting)이라 한다. 변수 선언 뿐만 아니라, var, let, const, function, function*, class 키워드를 사용해 선언한 모든 식별자(변수, 함수, 클래스 등)는 호이스팅이 된다. 이내용은 아래 호이스팅에 대해 더 자세히 알아보도록 하겠다.

<script>

  var mj // 변수 선언 
  mj = 'mandu' // 값의 할당

  var mj = 'mandu' // 변수 선언과 할당새로운 변수에 새로운 값을 재할당할 수 있다
  console.log(mj) // output: mandu 

  var mj = fff
  console.log(mj) // output: fff

</script>

재할당은 변수에 저장된 값을 다른 값으로 변경하는 것으로, 만약 변경할 수 없는 값이라면 변수가 아니라 상수(constant)라 부른다.

변수 let / const

변수의 선언은 var, const, let 키워드로 할 수 있으며, ES6에서 const와 let이 추가되었다. 우선, var는 변수 선언방식에 있어 큰 단점을 가지고 있다.

<script>
  var name = 'munju'
  console.log(name) // munju

  var name = 'javascript'
  console.log(name) // javascript
</script>

변수를 한번 더 선언했음에도 불구하고 에러가 나오지 않고 각각 변수에 따라 다른 값이 콘솔창에 출력되었다. 유연한 변수 선언으로 간단한 테스트에는 편리할 수 있으나 코드량이 많아진다면 어디에서 어떻게 변수가 사용되었는지 파악하기가 어렵고 값이 바뀔 우려가 있다.

var 변수를 쓸 경우

• 변수 중복 선언가능하나 예기치 못한 값을 반환할 수 있다.
• 함수 레벨 스코프로 인해 함수 외부에서 선언한 변수는 모두 전역변수로 된다.
• 변수 선언문 이전에 변수를 참조하면 언제나 undefined 를 반환한다.

es6에서 나온 let과 const는 위의 문제점을 해결해준다.

<script>
  let name = 'munju'
  console.log(name) // munju

  let name = 'javascript'
  console.log(name) 
  // Uncaught SyntaxError: Identifier 'name' has already been declared
</script>

name 이 이미 선언되었다는 에러메시지가 출력된다. (const로 바꿔서 넣어도 동일하게)

let과 const의 차이점

let

• let은 변수에 재할당이 가능하다.

<script>
  let name = 'munju'

  name = 'velog'
  console.log(name) // output: velog
</script>

const

• const는 반드시 선언과 초기화를 동시에 진행하여야한다.

<script>             
const name; // output: Uncaught SyntaxError: Missing initializer in const declaration
const name = 'mj'
</script>

• const는 변수 재선언, 변수 재할당 모두 불가능하다. 재할당의 경우, 원시 값은 불가능하지만, 객체는 가능하다. const 키워드는 재할당을 금지할 뿐, '불변'을 의미하지 않는다.

<script> 
    // 원시값의 재할당
    const name = 'mj'
    name = 'mj' 
    // output: Uncaught TypeError: Assignment to constant variable.

    // 객체의 재할당
    const name = {
      eng: 'mj',
    }
    name.eng = 'munju'

    console.log(name) // output: { eng: "munju" }
</script>

스코프

스코프(scope)는 식별자(변수명, 함수명, 클래스명등)의 유효범위를 뜻하며, 선언된 위치에 따라 유효범위가 달라진다. 전역에 선언된 변수는 전역 스코프를, 지역에 선언된 변수는 지역 스코프를 갖는다.

전역 변수는 어디에서든지 참조가 가능한 값이다. 반면, 지역 변수는 함수 몸체 내부라고 볼 수 있고, 지역 변수는 자신의 지역 스코프와 그 하위 지역 스코프에서 유효하다.

한 가지 주의해야 할 점은, 자바스크립트에서 모든 코드 블록(if, for, while, try/catch 등)이 지역 스코프를 만들며, 이러한 특성을 블록 레벨 스코프라 한다.

하지만 var 키워드로 선언된 변수는 오로지 함수의 코드 블록만을 지역 스코프로 인정한다. 이를 함수 레벨 스코프라 한다.

<script>
    var a = 1

    if (true) {
    var a = 5
    }

    console.log(a) // output: 5
</script>

함수가 아닌 곳에서 var 키워드를 이용해 a를 선언했기 때문에 전역 변수로 취급한다. 기존에 있던 a 변수가 중복 선언되면서, 최하단의 console에서도 출력 값이 5로 바뀐 것을 확인할 수 있다.

해당 예제는 코드가 짧아서 어디에서 문제가 일어난지 바로 알 수 있었지만, 실무에서는 그렇지 않다. 전역 변수로 인해 재할당이 발생하거나, 전역 스코프를 공유하기 때문에 어딘가에 동일한 이름이 있다면 예상치 못한 결과를 가져올 수 있는 위험이 있다. 따라서 오로지 함수 코드 블록만을 지역 스코프로 인정하는 var 대신, 블록 레벨 스코프를 지원하는 const와 let을 사용하는 것을 권장한다.

함수 호이스팅

호이스팅(Hoisting)이란, var 선언문이나 function 선언문 등을 해당 스코프의 선두로 옮긴 것처럼 동작하는 특성을 말한다. -> 위에서 변수 선언 뿐만 아니라, var, let, const, function, function*, class 키워드를 사용해 선언한 모든 식별자(변수, 함수, 클래스 등)는 호이스팅이 된다.라고 했었는데,

function 키워드로 선언한 모든 식별자도 호이스팅이 가능하다.

var 로 선언된 변수와는 달리 let 로 선언된 변수를 선언문 이전에 참조하면 참조 에러(ReferenceError)가 발생한다.

<script>
  console.log(abc); // undefined
  var abc;

  console.log(aaa); // Error: Uncaught ReferenceError: bar is not defined
  let aaa;
</script>

let으로 선언된 변수는 스코프의 시작에서 변수의 선언까지 일시적 사각지대에 빠지기 때문인데, 앞에서 말했듯이, 변수는 선언 > 초기화 > 할당 단계에 걸쳐 생성된다.

함수는 크게 네가지로 작성 할 수 있는데,

<script>
   //함수선언문 - 함수 이름 생략 불가
   function add(x,y) {
       return x + y
   }

   //함수 표현식 -함수 이름 생략가능
   var add = function(x,y) {
       return x+y
   }

    //함수이름으로 작성
    var add = function plus(x,y){
       return x+y
    }

    //Function 생성자 함수
    var add = new Function('x','y','return x+y')

    //화살표함수
    var add = (x,y) => x + y
</script>     

<script>
        //var
        // 스코프의 선두에서 선언 단계와 초기화 단계가 실행된다.
        // 따라서 변수 선언문 이전에 변수를 참조할 수 있다.

        console.log(foo); // undefined

        var foo;
        console.log(foo); // undefined

        foo = 1; // 할당문에서 할당 단계가 실행된다.
        console.log(foo); // 1

        let 으로 선언된 변수는 선언과 초기화 단계가 분리되어 진행된다.

        // 스코프의 선두에서 선언 단계가 실행된다.
        // 아직 변수가 초기화(메모리 공간 확보와 undefined로 초기화)되지 않았다.
        // 따라서 변수 선언문 이전에 변수를 참조할 수 없다.

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

        let foo; // 변수 선언문에서 초기화 단계가 실행된다.
        console.log(foo); // undefined

        foo = 1; // 할당문에서 할당 단계가 실행된다.
        console.log(foo); // 1


        // 함수 참조
        console.dir(add) // output: f add(x, y)
        console.dir(sub) // output: undefined

        // 함수 호출
        console.log(add(2, 5)) // output: 7
        console.log(sub(2, 5)) // output: Uncaught TypeError: sub is not a function

        // 함수 선언문
        function add(x, y) {
        return x + y
        }

        // 함수 표현식
        var sub = function(x, y) {
        return x + y
        }
</script>

함수선언문의경우에는 함수 자체를 호이스팅 시킬 수 있다. 반면 함수 표현식은 변수 호이스팅과 같이 런타임 이전에 해당값을 undefined로 초기화만 시키고 런타임에서 해당 함수 표현식이 할당되어 객체가 된다.

1. 변수 선언에는 기본적으로 const를 사용하고, 재할당이 필요한 경우에는 한정적으로 let을 사용하는것이 좋겠다.

2. 재할당이 필요없는 상수와 객체에는 const사용 / ( 객체를 재할당 하는 경우는 흔하지 않다. const를 사용하면 의도치 않은 재할당을 방지해주기 때문에 보다 안전하겠다. )