MGS Day 08

margin  : 요소의 외부 여백(공간)을 지정하는 단축 속성

                  cf. margin-방향(상하좌우) - 개별 속성

                  음수를 사용할 수 있다 !

                  속성값으로 auto를 주게 되면, 브라우저가 여백을 계산 

                                       cf. 가로(세로) 너비가 있는 요소의 가운데 정렬하는 데에 활용한다 !

                  단축속성이기 때문에 1개의 값을 설정하면 순서대로 top & bottom & left & right의 값을 의미

                                                                                               ex. margin : 10px; => 상, 우, 하, 좌의 값이 모두 10px 

                                                         2개의 값을 설정하면 순서대로 top & bottom, left & right의 값을 의미

                                                                                               ex. margin : 10px  20px; => 상하의 값이 10px, 좌우는 20px 

                                                         3개의 값을 설정하면 순서대로 top, left & right , bottom의 값을 의미

                                                                                               ex. margin : 10px  20px 30px;

                                                                                                                => 상의 값이 10px, 좌우는 20px, 하는 30px

                                                         4개의 값을 설정하면 순서대로 top, right, bottom, left의 값을 의미

                                                                                               ex. margin : 10px  20px, 30px, 40px;

                                                                                                                => 상의 값이 10px, 우는 20px, 하는 30px, 좌는 40px 

 

 

 

<실습>

 

cf. 마진에 음수를 주는 경우 위와 같이 요소들이 겹쳐지게 되는데, 

                                                   세번째 요소는 다 보이고,

                                                   그 밑의 두번째 요소는 밑에 부분만 세번째 요소로 20px만큼 겹쳐서 80px로 보이고,  

                                                   제일 밑의 첫번째 요소는 

 

 

 

 

padding : 요소의 내부 여백(공간)을 지정하는 단축 속성

                    cf. padding-방향(상하좌우) - 개별 속성

                    패딩을 적용하게 되면 요소의 크기가 커진다 !

           

       

                   

                    cf. 패딩을 % 단위의 값으로 주게 되면 부모 요소의 가로 너비에 대한 비율로 지정된다 !

                    cf. padding-방향(상하좌우) - 개별 속성 이고,  margin과 같은 방식으로 지정한다.

 

 

 

 

 

 

자바스크립트

 

메소드 체이닝 (Method Chaining) : 메소드를 체인처럼 연결해서 쓰는 것을 가리키는 말

                                                                    메소드들을 다 분리해서 적용하도록 작성하면 코드가 길어지니까,

                                                                    좀 더 간단하고 깔끔하게 작성하기 위해 사용하는 방법.

 

 

const b는 변수 a에 메소드 split를 호출하고 그 뒤에 reverse와 join 매소드를 연달아 붙이고 있다. (메소드 체이닝)

                                     이 3 개의 메소드가 다 실행되고 나서 b라는 변수에 저장되는 것.

 

 

 

cf. null : 값이 의도적으로 비어있음을 의미하는 데이터

 

     

     { } : 객체 데이터(Object)

       cf. 객체 데이터에서 없는 속성의 속성값을 출력하려고 하면, 값(데이터) undefined가 출력된다. 

 

 

     인수(argument) : 함수가 호출될 때 함수 내부로 들어가지는 값(데이터)

       cf. 매개변수(parameter) : 이 값(함수를 호출해서 전달받은 인수)을 함수 내부로 전달하는 변수

 

 

     익명 함수(Anonymous Function) : 이름이 별도로 없는 함수

 

 

     goodbye 이름의 함수표현과 호출 : const goodbye = function ( ) { };        // 익명 함수기 때문에 정상적으로 호출  

                                                                       goodbye( );                                               // 할 수 가 없으므로,  호출할 수 있도록

                                                                                                                                             // goodbye 라는 이름의 변수에 할당 !

 

 

     메소드(Method) : 객체 데이터의 속성 중 그 속성(- key 키)의 값(- value 밸류)로 함수가 할당된 속성(Property)

      ex. const user = {                                              // 변수 user에 담긴 객체 데이터의 속성 getName가 메소드 !

                 getName: fucntion ( ) { }                    // ∵ 키 getName의 밸류가 (익명)함수이므로.

              }

 

 

     defer : 가져온 JS 파일을 HTML 문서 분석 이후에 실행하도록 지시하는 HTML 속성 

 

 

    <div id="nColor">무지개</div> 라는 요소의 내용을 콘솔 출력하려면?

     const nColorEl = document.querySelector('#nColor');         // HTML의 선택자 변수에 담기

     console.log(nColorEl.textContent);                                               // 그 변수(요소)에 textContent 속성 추가해 출력

                                                                                                             cf. textContent : 요소의 갖고 있는 내용을 확인할 수 있음

 

 

      let: 값(데이터)을 재할당할 목적의 변수를 선언하는 키워드

          cf. const: 값(데이터)을 재할당하지 않을 목적의 변수를 선언하는 키워드

 

 

      const nColorEl = document.querySelector('#nColor'); 라는 코드의

      nColorEl 요소에 클릭(Click)이벤트를 추가해서, 클릭할 때 'Good bye'를 콘솔 출력하려면?

      nColorEl.addEventListener('click', function ( ) {

          console.log('Good bye');

       });

        cf. 위의 익명 함수 function ( ) 을 핸들러라고 하고, 'click'이라는 이벤트가 발생하면 핸들러의 내용이 작동된다.

 

 

       <div>1</div>

       <div>2</div>

       위 2개의 div 요소에 JS로 class='goodBye'를 추가하려면?

       const divEls = document.querySelectorAll('div');   // 변수 divEls에는 여러 개의 데이터가 저장되고, 

       divEls.forEach(fuction (divEl) {                                        // 배열 형태로 저장(완벽한 배열이 아닌 유사 배열)한 것을

           divEl.classList.add('goodBye');                                   // forEach 메소드로 익명함수를 인수로 추가

        });                                                                                                 // divEls의 forEach로 각각의 반복되는 실제의 요소들을 

                                                                                                             // divEl이라는 매개변수로 받아줄 수 있다 ! divEl에다

                                                                                                             // classList : HTML class의 정보를 가지고 있는 객체 !를

                                                                                                             // 를 적용하고, 그 안에서 add라는 메소드를 실행                                                                                                                                                       // (goodBye라는 클래스를 추가)

 

 

        const nColorEl = document.querySelector(.nColor'); 라는 코드의

        nColorEl 요소에 HTML 클래스 속성의 값으로 'active'가 포함되어 있으면, '포함됨!'을 콘솔 출력하려면?

       if (nColorEl.classList.contains('active')) {                    // 조건에  해당되면 true가, 해당되지 않으면 false가 반환

           console.log('포함됨!');

        }