728x90
반응형

완성 화면

 

 

 

 

 

 

코드 보기 / 자바스크립트

//선택자
    const quizWrap = document.querySelector(".quiz__wrap");
    const quizTitle = quizWrap.querySelectorAll(".quiz__title");                    //시험 종목, 시간
    const quizQuestion = quizWrap.querySelectorAll(".quiz__question span");         //문제
    const quizQuestionNum = quizWrap.querySelectorAll(".quiz__question em");        //문제 번호
    const quizAnswerResult = quizWrap.querySelectorAll(".quiz__answer .result");    //정답
    const quizDesc = quizWrap.querySelectorAll(".quiz__desc");                      //해설 
    const quizAnswerConfirm = quizWrap.querySelectorAll(".quiz__answer .confirm");     //정답 버튼
    const quizAnswerInput = quizWrap.querySelectorAll(".quiz__answer .input");      // 사용자 정답
    const dogWrap = quizWrap.querySelectorAll(".dog__wrap");
  
 //문제 정보
const quizInfo = [
    {
        infoType: "정보처리 기능사",
        infoTime: "2011년 4회",
        infoNumber : "1",
        infoQuestion: "주파수 분할 다중화 방식에서 각 채널 간 간섭을 막기 위해서 일종의 완충지역 역할을 하는 것을 무엇이라고 하는가?",
        infoAnswer:"가드밴드",
        infoDesc: "가드밴드는 주파수 분할 다중화 방식에서 각 채널간 간섭을 막기 위해서 일종의 완충지역 역할을 한다."
    }, {
        infoType: "정보처리 기능사",
        infoTime: "2011년 4회",
        infoNumber : "2",
        infoQuestion: "사용자의 명령으로 시스템이 수행되고 그에 따른 결과를 나타내주는 대화식 운영체제는 무엇인가?",
        infoAnswer:"UNIX",
        infoDesc: "UNIX는 사용자의 명령으로 시스템이 수행되고 그에 따른 결과를 나타내 주는 대화식 운영체제이다."
    }, {
        infoType: "정보처리 기능사",
        infoTime: "2011년 4회",
        infoNumber : "3",
        infoQuestion: "프로세스들이 서로 다른 프로세스가 차지하고 있는 자원을 무한정 기다려 시스템이 멈춘 것처럼 보이는 상태는?",
        infoAnswer:"교착상태",
        infoDesc: "교착상태(Dead lock)는 2개 이상의 프로세스들이 서로 다른 프로세스가 차지하고 잇는 자원을 무한정 기다려 시스템이 멈춘 것처럼 보이는 상태이다."
    }
   ];

    //문제출력
        // //과목
        // quizTitle[0].textContent = quizInfo[0].infoType;
        // quizTitle[1].textContent = quizInfo[1].infoType;
        // quizTitle[2].textContent = quizInfo[2].infoType;
        // //회차
        // quizTime[0].textContent = quizInfo[0].infoTime;
        // quizTime[1].textContent = quizInfo[1].infoTime;
        // quizTime[2].textContent = quizInfo[2].infoTime;
        // //문제 번호
        // quizQuestionNum[0].textContent = quizInfo[0].infoNumber;
        // quizQuestionNum[1].textContent = quizInfo[1].infoNumber;
        // quizQuestionNum[2].textContent = quizInfo[2].infoNumber;
        // //질문
        // quizQuestion[0].textContent = quizInfo[0].infoQuestion;
        // quizQuestion[1].textContent = quizInfo[1].infoQuestion;
        // quizQuestion[2].textContent = quizInfo[2].infoQuestion;
        // //정답
        // quizAnswerResult[0].textContent = quizInfo[0].infoAnswer;
        // quizAnswerResult[1].textContent = quizInfo[1].infoAnswer;
        // quizAnswerResult[2].textContent = quizInfo[2].infoAnswer;
        // //해설
        // quizDesc[0].textContent = quizInfo[0].infoDesc;
        // quizDesc[1].textContent = quizInfo[1].infoDesc;
        // quizDesc[2].textContent = quizInfo[2].infoDesc;

        //#2
        //문제 종목 + 회차
        // quizTitle[0].innerHTML = quizInfo[0].infoType+" "+ quizInfo[0].infoTime;
        // quizTitle[1].innerHTML = quizInfo[1].infoType+" "+ quizInfo[1].infoTime;
        // quizTitle[2].innerHTML = quizInfo[2].infoType+" "+ quizInfo[2].infoTime;

        
        //번호
        // quizQuestionNum[0].textContent = quizInfo[0].infoNumber;
        // quizQuestionNum[1].textContent = quizInfo[1].infoNumber;
        // quizQuestionNum[2].textContent = quizInfo[2].infoNumber;
        
        //질문
        // quizQuestion[0].textContent = quizInfo[0].infoQuestion;
        // quizQuestion[1].textContent = quizInfo[1].infoQuestion;
        // quizQuestion[2].textContent = quizInfo[2].infoQuestion;
        
        // for(let i=0; i<quizInfo.length; i++) {
        //     quizTitle[i].innerHTML = quizInfo[i].infoType+" "+ quizInfo[i].infoTime;
        //     quizQuestionNum[i].textContent = quizInfo[i].infoNumber;
        //     quizQuestion[i].textContent = quizInfo[i].infoQuestion;
        //     quizAnswerResult[i].textContent = quizInfo[i].infoAnswer;
        //     quizDesc[i].textContent = quizInfo[i].infoDesc;
        // }

        quizInfo.forEach (function(e, i){
            quizTitle[i].innerHTML = quizInfo[i].infoType+" "+ quizInfo[i].infoTime;
            quizQuestionNum[i].textContent = quizInfo[i].infoNumber;
            quizQuestion[i].textContent = quizInfo[i].infoQuestion;
            quizAnswerResult[i].textContent = quizInfo[i].infoAnswer;
            quizDesc[i].textContent = quizInfo[i].infoDesc;
        });

 

 

 

 

그동안 데이터를 변수에 저장만 하고 하나씩 불러오는 방법을 사용했으나, 3번 이펙트에서 달라진 점은 같은 선택자가 반복되는 데이터를 불러오는 데에 for문과 forEach문을 사용했다는 것이다.

 

과목, 문제 번호, 질문, 정답, 해설 모두 배열의 키를 제외하면 전부 같은 문장이 반복되기 때문에 for문과 forEach문을 사용하여 데이터를 불러올 수 있다.

 

 

 

 

for문

for(let i=0; i<quizInfo.length; i++) {
            quizTitle[i].innerHTML = quizInfo[i].infoType+" "+ quizInfo[i].infoTime;
            quizQuestionNum[i].textContent = quizInfo[i].infoNumber;
            quizQuestion[i].textContent = quizInfo[i].infoQuestion;
            quizAnswerResult[i].textContent = quizInfo[i].infoAnswer;
            quizDesc[i].textContent = quizInfo[i].infoDesc;
        }

 

quizInfo

: 객체들(문제 종목과 회차, 문제 번호, 문제, 정답, 해설)이 담긴 배열이다.

 

 

quizTitle,

quizQuestionNum,

quizQuestion,

quizAnswerResult,

quizDesc

: HTML 문서에서 해당 객체 정보를 선택하여 출력하는 요소들이다.

 

 

for문을 이용해 문제의 정보가 담긴 quizInfo 배열의 길이만큼 반복하며, 각 객체의 정보를 출력하는 요소에 객체의 속성 값을 할당한다.

 

quizTitle

: 문제의 종목과 회차를 출력하는 요소이며, quizInfo 객체의 infoType 속성과 infoTime 속성 값을 가져와 할당한다.

(즉 정보처리 기능사, 2011년 4회라는 정보를 가져온다)

 

quizQuestionNum

:문제의 번호를 출력하는 요소이며, quizInfo 객체의 infoNumber 속성 값을 가져와 할당한다.

(즉 문제 1번, 문제 2번, 문제 3번 ····· 의 정보를 가져온다)

 

quizQuestion

: 문제를 출력하는 요소이며, quizInfo 객체의 infoQuestion 속성 값을 가져와 할당한다.

(즉 각 객체에서 infoQuestion이라는 키 안의 속성 값을 가져와 할당하는 것)

 

quizAnswerResult

:정답을 출력하는 요소이며, quizInfo 각 객체의 infoAnswer 속성 값을 가져와 할당한다.

 

 

quizDesc

:해설을 출력하는 요소이며, quizInfo 각 객체의 infoDesc 속성 값을 가져와 할당합니다.

 

 

 

 

 

forEach

quizInfo.forEach (function(e, i){
            quizTitle[i].innerHTML = quizInfo[i].infoType+" "+ quizInfo[i].infoTime;
            quizQuestionNum[i].textContent = quizInfo[i].infoNumber;
            quizQuestion[i].textContent = quizInfo[i].infoQuestion;
            quizAnswerResult[i].textContent = quizInfo[i].infoAnswer;
            quizDesc[i].textContent = quizInfo[i].infoDesc;
        });

 

 

forEach 함수를 이용해 quizInfo 배열의 요소들을 반복하며, 각 객체의 정보를 출력하는 요소에 객체의 속성 값을 할당한다.

 

quizTitle,

quizQuestionNum,

quizQuestion,

quizAnswerResult,

quizDesc

: HTML 문서에서 해당 객체 정보를 출력하는 요소들.

 

quizTitle

:문제 종목과 회차를 출력하는 요소이며, quizInfo 객체의 infoType 속성과 infoTime 속성 값을 가져와 할당한다.

 

quizQuestionNum

:문제의 번호를 출력하는 요소이며, quizInfo 객체의 infoNumber 속성 값을 가져와 할당한다.

 

quizQuestion

:문제를 출력하는 요소이며, quizInfo 객체의 infoQuestion 속성 값을 가져와 할당한다.

 

quizAnswerResult

:정답을 출력하는 요소이며, quizInfo 객체의 infoAnswer 속성 값을 가져와 할당한다.

 

quizDesc

:해설을 출력하는 요소이며, quizInfo 객체의 infoDesc 속성 값을 가져와 할당한다.

 

 

forEach문의 function(e,i)은 배열 요소와 해당 인덱스(키, 자리값)을 매개 변수로 받는 콜백 함수이다.

첫번째 매개변수는 element (배열요소, 속성)으로 받아들이기 때문에 인덱스(키, 자리값)을 사용하고 싶다면 반드시 앞에 el 이나 e 등 다른 변수를 적어준 후, 그 뒤에 키로 사용할 다른 변수 이름을 작성해 주어야 자리값을 사용할 수 있다.

 

 

 

 

 

728x90
반응형

 

 

 

함수 유형 : 객체 안에 함수를 이용한 형태

const info = {
    num1: 1,
    name1: "함수",
    num2: 2,
    name2: "자바스크립트",
    num3: 3,
    name3: "리액트",
    word: "실행",
    result1: function(){
        document.write(info.num1 + ". " + info.name1 + "가 " + info.word + "되었습니다", "<br>");
    },
    result2: function(){
        document.write(info.num2 + ". " + info.name2 + "가 " + info.word + "되었습니다", "<br>");
    },
    result3: function(){
        document.write(info.num3 + ". " + info.name3 + "가 " + info.word + "되었습니다", "<br>");
    },
}
info.result1();
info.result2();
info.result3();
}

더보기

결과

1. 함수가 실행되었습니다.
2. 자바스크립트가 실행되었습니다.
3. 리액트가 실행되었습니다.

 

객체 info를 선언하고 num1~3, name1~3, result1~3 속성을 가지고 있으며 result1, result2, result3 함수는  객체 info의 속성들을 참조하며, 안에 저장된 문자열을 순서대로 호출하여 출력된다.

 

각 함수는 document.write( )메서드를 사용하여 num1, naem1, word, num2,  name2, num3, name3 속성의 값을 조합하여 문자열을 생성하고 출력한다.

 

info 객체 안에는 result1, result2, result3과 같은 함수들이 포함되어 있다.

이 함수들은 객체 내부에 정의된 매서드로 해당 객체를 통해 호출할 수 있다.

 

즉, info.result1( ); , info.result2( ); , result3( );은 info 객체에서 result1,2,3 메서드를 호출하는 것을 의미하며, 해당 메서드가 실행되어 결과를 반환한다.

결과적으로 info.result1( );은 result1 메서드를 호출하고, 해당 메서드가 반환한 결과를 출력한다.

 

 

 

 

객체 생성자 함수

: 자바스크립트에서 객체를 생성하기 위한 함수이다.

생성자 함수는 일반 함수와 차이를 두기 위해 함수명의 첫 문자를 대문자로 표현한다는 특징이 있다.

생성자 함수로 생성된 객체의 속성 추가나, 삭제, 변경은 다른 객체 속성에 영항을 주지 않는다.

 

 

this 키워드를 사용하여 생성될 객체의 프로퍼티 [각주:1]와 메서드를 정의한다.

새로운 객체를 생성할 때마다 객체의 프로퍼티와 메서드를 각각 생성하여 사용할 수 있다.

 

function Func (num, name, word) {
                this.num = num;                 //함수 안의 this는 함수를 통하여 생성되는 객체를 의미한다.
                this.name = name;
                this.word = word;

                this. result = function () {
                    document.write(this.num + ". " + this.name + "가 " + this.word + "되었습니다", "<br>");
                }
            }
            //인스턴스 생성
            const info1 = new Func(1,"함수","실행");             
            const info2 = new Func(2,"자바스크립트","실행");  
            const info3 = new Func(3,"리액트","실행"); 

            info1.result();
            info2.result();
            info3.result();
더보기

결과

1. 함수가 실행되었습니다.
2. 자바스크립트가 실행되었습니다.
3. 리액트가 실행되었습니다.

 

"Func" 라는 생성자 함수를 정의하고, 이를 사용하여 세 개의 인스턴스 info1, info2, info3을 생성한다.

 

Func 생성자 함수는 num, name, word 라는 세 개의 프로퍼티를 가지고 있으며, this 키워드를 이용하여 세 개의 프로퍼티를 현재 생성되는 객체에 할당하고 있다.

이렇게 객체 생성 시 초기값을 핼당할 수 있다.

 

또한, result 메서드를 this 키워드를 이용하여 생성되는 객체에 할당하고 있다.

이 메서드는 인스턴스 객체를 통해 호출된다.

각각의 인스턴스에서 result( ) 메서드를 호출하면, 해당 객체의 num, name, word 프로퍼티를 사용하여 메시지를 출력한다.

 

Func 라는 객체 생성자 함수를 사용하여 생성된 info1, info2, info3까지 3개의 인스턴스는 각각 num, name, word 라는 속성을 가지고 있으며, result라는 메서드를 공유한다.

이렇게 생성된 인스턴스들은 info.result1( ), inforesult2( ), inforesult3( )과 같이 메서드를 호출하여 각자의 정보를 출력할 수 있다.

 

 

 

인스턴스

: 객체 생성자 함수를 사용하여 만든 객체를 말한다.

객체 생성자 함수는 템플릿처럼 사용할 수 있으며, 이를 이용해 동일한 속성과 메서드를 가진 여러 개의 객체를 만들 수 있다.

객체 생성자 함수를 통해 인스턴스를 만들면, 그 인스턴스는 해당 객체의 생성자 함수에 속성과 메서드를 상속받아 사용할 수 있다.

 

 

 

템플릿

: 미리 만들어놓은 형태나 양식으로, 내용을 채워서 사용하는 것을 말한다.

일반적으로 HTML, CSS, Javascript 등 웹 개발에서도 많이 사용된다.

 

Javascript에서는 문자열을 리터럴 내에 백틱 ` 을 사용하여 멀티라인 문자열을 만들 수 있으며, 이를 활용하여 HTML 템플릿을 만들어 사용하기도 한다. 이를 템플릿 리터럴 (Template Literal)이라고 한다.

템플릿 리터럴을 사용하면, 동적으로 값이 변하는 문자열을 만들기도 쉽다.

 

 

 

템플릿 리터럴(Template Literal)

에크마스크립트 2015에서 도입된 새로운 문자열 표기법이다.

기존의 문자열 표기법에서는 작은 따옴표(' ')나 큰 따옴표(" ")를 사용하여 문자열을 감싸고, 변수나 표현식을 문자열 안에 삽입하기 위해 연결 연산자인 +를 사용했지만,

템플릿 리터럴에서는 역따옴표(백틱 `)을 사용하며, ${ } (달러와 중괄호)를 이용하여 문자열 내에서 변수나 표현식을 쉽게 사용할 수 있다.

 

ex) 

기존 문자열 표기법

for(let i=2; i<=9; i++){
    document.write(i + "단","<br>");

    for(let j=1; j<=9; j++){
        document.write(i + "X" + j + "=" + i*j);
        document.write("<br>");

 

 

템플릿 리터럴

for(let i=2; i<=9; i++){
	document.write(`${i}단<br>`);
    for(let j=1; j<=9; j++){
    document.write(`${i}X${j}=${i*j}`);    
}

 

 

 

 

프로토타입 함수

: 자바스크립트에서 객체가 생성될 때, 해당 객체가 상속받는 속성들을 포함하고 있는 객체이다.

이 프로토타입 객체는 해당 객체의 생성자 함수의 prototype 속성에 저장되어 있다.

 

프로토타입 함수를 생성하여 생성자 함수의 prototype 속성에 할당하면, 해당 생성자 함수로부터 생성된 모든 객체가 프로토타입 함수를 상속받을 수 있다.

이를 통해, 각 객체마다 동일한 기능을 구현하는 것이 아니라 프로토타입 객체에 구현하여 모든 객체가 공유할 수 있도록 할 수 있다.

 

프로토타입 함수를 이용하면, 객체의 메서드를 동적으로 추가하거나, 수정하도록 할 수도 있다.

이러한 유연성과 재사용성이 강점 중 하나가 된다.

 

 

 function Func(num, name, word) {
                this.num = num;
                this.name = name;
                this.word = word;
            }

            Func.prototype.result = function (){
                document.write(this.num + ". " + this.name + "가 " + this.word + "되었습니다", "<br>");
            }

            const info1 = new Func(1,"함수","실행");
            const info2 = new Func(2,"자바스크립트","실행");
            const info3 = new Func(3,"리액트","실행");

            info1.result();
            info2.result();
            info3.result();
더보기

결과

1. 함수가 실행되었습니다.
2. 자바스크립트가 실행되었습니다.
3. 리액트가 실행되었습니다.

 

 

생성자 함수 Func를 정의하고 Func의 프로토타입에 result 함수를 추가한 후, Func 생성자 함수로 세 개의 객체 (info1, info2, info3)를 만들어 result 함수를 호출하는 코드이다.

 

객체가 만들어질 때 num, name, word 프로퍼티는 Func 생성자 함수에서 this를 이용하여 각 객체에 할당된다.

 

그리고 Func.prototype.result에 result 함수를 추가함으로써, Func 생성자 함수로 만들어진 객체들이 result 함수를 공유할 수 있다.

 

세 개의 객체 info1, info2, info3의 result 함수를 호출하면, this가 info1, info2, info3 객체를 가리키게 되며, result 함수에서 해당 객체의 num, name, word 프로퍼티를 이용하여 문장을 출력하게 된다.

 

 

 

 

 

 

  1. 객체에서 값을 저장하거나 메서드를 포함하는 "이름 - 값" 쌍을 말한다.  객체의 프로퍼티는 "키 : 값" 형태로 구성되며, 쉽게 말해 객체의 속성이나 특정을 정의하는 것이다. [본문으로]
728x90
반응형

이미지 유형  사이트

 

 

 

 

 

완성화면

 

 

 

 

 

코드 보기 / CSS

<style>
        /* reset */
        * {
            margin: 0;
            padding: 0;
        }
        a {
            text-decoration: none;
            color:#000;
        }
        h1,h2,h3,h4,h5,h6 {
            font-weight: normal;
        }
        img {
            vertical-align: top;
            width: 100%;
        }

        .mt10 {margin-top: 10px !important;}
        .mt20 {margin-top: 20px !important;}
        .mt30 {margin-top: 30px !important;}
        .mt40 {margin-top: 40px !important;}
        .mt50 {margin-top: 50px !important;}
        .mt60 {margin-top: 60px !important;}
        .mt70 {margin-top: 70px !important;}

        .mb10 {margin-bottom: 10px !important;}
        .mb20 {margin-bottom: 20px !important;}
        .mb30 {margin-bottom: 30px !important;}
        .mb40 {margin-bottom: 40px !important;}
        .mb50 {margin-bottom: 50px !important;}
        .mb60 {margin-bottom: 60px !important;}
        .mb70 {margin-bottom: 70px !important;}
        
         /* common */
        .container {
            width: 1160px;
            margin: 0 auto;
            padding: 0 20px;
            /* background-color: rgba(0,0,0,0.1); */
        }
        .nexon {
            font-family: 'NexonLv1Gothic';
            font-weight: 400;
        }
        .section {
            padding: 120px 0;
        }
        .section.center {
            text-align: center;
        }
        .section__small {
            font-size: 14px;
            border-radius: 50px;
            background-color: #AC43FF;
            color: #fff;
            padding: 1px 23px;
            text-transform: uppercase;
            margin-bottom: 20px;
            display: inline-block;
        }
        .section__h2 {
            font-size: 50px;
            font-weight: 400;
            margin-bottom: 30px;
            line-height: 1;
        }
        .section__desc {
            font-size: 22px;
            color: #666;
            margin-bottom: 70px;
            font-weight: 300;
            line-height: 1.5;
        }
        /* imag_type */
        .imag_inner {
            display: flex;
            justify-content: space-between;
        }
        .imag_inner .image {
            width: 570px;
            height: 370px;
            background-color: #ccc;
            position: relative;
        }
        .image__body {
            position: absolute;
            left: 0;
            bottom: 0;
            color: #fff;
            text-align: left;
            padding: 30px;
        }
        .image__body .title {
            font-size: 32px;
            line-height: 1;
            margin-bottom: 15px;
        }
        .image__body .desc {
            margin-bottom: 15px;
            line-height: 1.5;
            padding-right: 20%;
        }
        .image__body .btn {
         color: #000;
         background-color: #fff;
         padding: 10px 30px;
         display: inline-block;
        }
        .container .section__h2 {
            font-weight: 700;
        }

 

 

 

 

 

코드 보기 / HTML

<section class="image__wrap section center nexon">
        <div class="container">
            <h2 class="section__h2">Milky way</h2>
            <p class="section__desc">Milky way는 은하수 뿐 아니라 우리 은하를 가리키는 말이기도 합니다.</p>
            <div class="imag_inner">
                <article class="image">
                    <figure class="img__header">
                        <img src="../asset/img/imageType01_01.jpg" alt="태양계가 속해 있는 우리 은하">
                    </figure>
                    <div class="image__body">
                        <h3 class="title">태양계가 속해 있는 우리 은하</h3>
                        <p class="desc">은하수는 밤하늘에 천구를 아치형으로 가로지르는 흰 빛의 흐릿한 띠 모양으로 보입니다. </p>
                        <a href="#" class="btn">자세히 보기</a>
                    </div>
                </article>
                <article class="image">
                    <figure class="img__header">
                        <img src="../asset/img/imageType01_02.jpg" alt="우리 은하의 물리적 크기">
                    </figure>
                    <div class="image__body">
                        <h3 class="title">우리 은하의 물리적 크기</h3>
                        <p class="desc">우리 은하의 원반은 직경이 약 100,000광년이고, 평균적으로 약 1,000광년 두께입니다.</p>
                        <a href="#" class="btn">자세히 보기</a>
                    </div>
                </article>
            </div>
        </div>
    </section>

 

 

 

 

vertical-align

:CSS 속성 중 하나로, 인라인 요소나 테이블 셀 요소의 수직 정렬을 지정하는 속성이다.

 

baseline, top, middle, bottom, text-top, text-bottom, sub, super 등의 다양한 속성 값이 있다.

 

각각의 속성값은

baseline

:요소의 기준선을 부모 요소의 기준선과 맞춤

 

middle

: 요소의 중앙을 부모 요소의 중앙과 맞춤

 

bottom

: 요소의 아랫부분을 부모 요소의 아랫부분과 맞춤

 

text-top

: 요소의 윗부분을 부모 요소의 폰트 윗부분과 맞춤

 

text-bottom

: 요소의 아랫부분을 부모 요소의 폰트 아랫부분과 맞춤

 

sub

: 요소를 부모 요소의 아래 첨자 [각주:1] 로 정렬함.

 

super

: 요소를 부모 요소의 위 첨자 [각주:2]로 정렬함.

 

 

 

vertical-align : top

: 요소의 윗부분을 부모 요소의 윗부분과 맞춘다.

 

 

 

figure

: figure 요소는 독립적인 컨텐츠, 일반적으로 이미지나 동영상, 삽화 등을 그룹화 하기 위해 사용된다.

시각적으로 컨텐츠의 그룹화 등을 나타내는데 사용되며, 웹 페이지의 접근성을 향상 시키기 위해 스크린 리더 등 보조 기술에서 컨텐츠의 그룹화를 알려주는 역할도 한다.

 

자식 요소로는 figcaption, img, video, adio가 있다.

 

figucaption figure 요소에 포함된 컨텐츠에 대한 설명이나
캡션을 제공하는 요소
img 이미지를 삽입하기 위한 요소
video 동영상 컨텐츠를 삽입하기 위한 요소
audio 오디오 컨텐츠를 삽입하기 위한 요소

 

 

 

display

:요소를 어떻게 보여줄지를 지정하는데 사용됨.

요소를 블록 레벨 요소, 인라인 요소, 플렉스 박스, 그리드 등의 다양한 형태로 보여줄 수 있음.

display 속성을 사용하여 요소의 보이는 방식을 지정함으로써 웹 페이지의 레이아웃을 구성할 수 있다.

 

자식 요소로는 block, inline, inline-block, none, flex, gird 등이 있다.

block 요소를블록 레벨 요소로 표시함.
새로운 줄에서시작하며, 
전체 너비를 차지함
inline 요소를 인라인 요소로 표시함.
새로운 줄에서 시작하지 않으며, 
컨텐츠의 너비만큼 공간을 차지함
inline-block 요소를 인라인 요소로 표시하면서,
블록 레벨 요소의 속성을 가짐.
none 요소를 화면에서 숨기며,
요소의 영역까지 사라짐
flex 플렉스 박스로 요소를 표시함.
플렉스 컨테이너 안에서 요소를 정렬하고 배치할 수 있는
유연한 레이아웃 제공
gird 요소를 그리드 컨테이너 안에서 그리드 아이템으로 표시
그리드 아이템은 행과 열로 구성된 그리드 안에서 배치됨

 

 

display: inline-block

: 요소를 인라인 요소처럼 취급하면서도 블록 레벨 요소의 특성을 가지게 만든다.

즉, 요소는 한 줄에 표시 되지마 너비나 높이, 여백 등의 속성을 가질 수 있다.

 

 

 

font-weight

 

:글꼴의 두께를 지정하는데 사용되며, 글꼴의 두께를 조절할 수 있다.

보통 글꼴의 두께는 100~900까지의 값 중에서 지정됨.

 

nomal 기본 값으로 평범한 글꼴 두께를 나타냄.
(400과 같음)
bold 굵은 글꼴 두께를 나타냄
(700과 같음)
bolder 상위 요소보다 더 굵은 글꼴 두께를 나타냄
lighter 상위 요소보다 더 얇은 글꼴 두께를 나타냄
100~900 지정한 값에 해당하는 글꼴 두께를 나타냄.

 

 

 

 

 

 

  1. ex) H₂O에서 2를 아래 첨자라고 함. [본문으로]
  2. ex) a² 에서 2를 위 첨자라고 함 [본문으로]
728x90
반응형

01. 결괏값을 작성하시오.

{
    if( null ){
        console.log("true");
    } else {
        console.log("false");
    }
}

 

A

: false


0 , false(블린) ,  " " (빈 문자열), undefined, null(값이 없는 것)을 조건식에 넣을 시, 값은 false (거짓)이 됨.
 
 
 
 
 

 

02. 결괏값을 작성하시오. ✔

{
    let num = 0;
    while( num <= 5 ){
        num++;
        console.log(num);  
    }
}

 

더보기

제출한 답 : 1 2 3 4 5

 

※증감식의 위치와 출력문의 위치를 잘 확인할 것.

출력문이 증감식 밑에 있으면 이미 1 증가한 뒤 출력되기 때문에 조건으로 준 숫자보다 1 큰 수까지 출력됨.

 

A

: 1 2 3 4 5 6

 


num 변수가 0으로 초기화되고, num이 5 이하일 동안 while문이  실행된다.

조건이 맞으므로, num을 1 증가시키고 console.log를 통해 출력 시킨다.

console.log가 증감식보다 밑에 있어 이미 1이 증가된 후 출력 되기 때문에 5까지 출력 되지 않고 6까지 출력된다.

 

 

 

03. 결괏값을 작성하시오.

{
    const str = [100, 200, 300, 400, 500];

    str.forEach(function(i){
        console.log(i);
    });
}
더보기

제출한 답 : 0 1 2 3 4

 

※forEach문은 함수를 사용한다는 점과 키와 값을 출력 할 수 있다는 점을 기억할 것.

 

A

: 100 200 300 400 500


str은 배열이며, forEach 메서드는 배열의 각 요소에 대해 주어진 콜백 함수를 실행한다.

이 경우, 콜백 함수는 배열의 각 요소를 매개변수 i로 받아 console.log를 실행한다.

forEach 메서드는 str 배열의 각 요소를 하나씩 순회하면서 각 요소를 하나씩 출력한다.배열 str의 요소는 [100, 200, 300, 400, 500] 이며, forEach 메서드는 이 요소들을 순서대로 처리하여 console.log로 출력한다.

 

 

 

04. 결괏값을 작성하시오. 

{
    const str = [100, 200, 300, 400, 500];

    for(let i of str){
        console.log(i);
    }
}

 

A

: 100 200 300 400 500


문자열이나 배열과 같은 반복 가능한 자료에서 사용하는 반복문으로, (변수 of 배열 이름)의 형식이다.

출력해야 할 타겟, 대상을 정하여 변수로 선언해주어야 하며 출력문에는 변수 이름을 넣어주어야 함.

 

 

 

05. 결괏값을 작성하시오.  

{
    const obj = {
        a: 100, 
        b: 200
    };

    for(let key in obj) { 
        console.log(key);
        console.log(obj[key]);
    }
}
더보기

작성한 답: 0 1 a : 100, b: 200

 

A

: a 100 b 200


key는 for in 반복문에서 현재 객체의 속성 이름을 나타내는 변수이다.

따라서 obj 객체 속성명인 a와 b가 순서대로 'key'에 할당된 후 출력된다.

 

obj[key]는 key 변수에 해당하는 속성 값에 접근하기 위한 방법으로, a와 b의 속성 값을 출력하기 위해 obj[key]를 사용한다.

첫 번째 반복에서 key는 a이므로, obj[key]는 obj.a와 같은 의미가 되기 때문에 100을 출력한다.

두 번째 반복에서의 key는 b이므로 obj[key]는 obj.b와 같은 의미가 되기 때문에 200을 출력한다.

 

 

 

06. 결괏값을 작성하시오.

{
    let num = 0;

    while( true ){
        num++;
        if( num == 3 ){
            continue;
        }
        if( num > 6 ){
            break;
        }
        console.log(num);
    }
}
더보기

작성한 답: 1 2 4 5 6

 

※조건식 위치에 0이 들어간 것이 아니므로 true가 맞음.

또한 이미 num이 한 번 증가되어 출력되기 때문에 1부터 시작하고 break문의 조건이 num 변수가 6보다 큰 수면 더이상 출력하지 않고 반복문을 끊어버리므로 결과값이 6으로 끝나게 됨.

 

A

: 1 2 4 5 6


num 변수는 0으로 초기화 되고 반복문이 실행될 때마다 1씩 증가한다.

num의 값이 3일 때는 cotinue 문을 만나 결과값이 출력되지 않고 건너 뛰어진다. 그러므로 3은 결과값으로 출력되지 않는다.

num이 6보다 커지면 break문으로 인해 반복문이 종료되므로 6 이후의 숫자는 출력되지 않는다.

 

 

 

07. 결괏값을 작성하시오.

{
    for(let i=1; i<=5; i++){
        console.log(i);

        if(i == 3){
            break;
        }
    }
}

 

더보기

작성한 답: 1 2 3 4 5

 

 

A

: 1 2 3


처음에 i는 1로 초기화 되고, 반복문이 실행될 때마다 1씩 증가하며, console.log를 통해 i 값을 출력한다.

증가식으로 인해 1씩 증가되던 i값이 3이 되면 if 의 조건문은 참이 되어 break문으로 인해 반복문이 종료된다.

따라서 3 이후의 숫자(값)은 출력되지 않는다.

 

 

 

08. 결괏값을 작성하시오.

{
    let num = 0;

    while (num < 20){
        num++;
        console.log(num);

        if(num == 1){
            break;
        }
    }
}
더보기
작성한 답 : 1 2 3 4 5 ····· 20

 

A

: 1 2 3


처음에는 i는 1로 초기화 되고, 반복문이 실행될 때마다 1씩 증가하며, console.log를 통해 i 값을 출력한다.

증가식으로 인해 1 증가된 i가 if 문의 조건을 만족했으므로 break문을 만나 반복문이 종결된다.

 

 

 

09. 결괏값을 작성하시오. 

{
    let num = 100;

    switch(num){
        case 100 : 
            console.log("100");
            break;
        case 200 : 
            console.log("200");
            break;
        default :
            console.log("300");
    }
}

 

A

: 100


case와 값을 하나씩 비교하여 일치하는 case를 실행(출력) 시킴.

if와 다르게 조건을 만족한 후에도 식이 종료되지 않으므로 break를 사용하여 끊어주어야 함.

break를 사용하지 않아도 결괏값은 출력이 되지만 값이 true인 이상 반복문은 무한하게 반복되므로 끊어주는 것이 좋음.

default는 case와 일치하는 값이 없을 때 출력됨.

 

 

 

10. 결괏값을 작성하시오. 

{
    func = () => {
        const str = "함수가 실행되었습니다.";
        return str;
    }

    console.log(func());
}

 

A

: 함수가 실행되었습니다.


리턴값 함수의 화살표 형태로, func 함수는 const str에 함수가 실행되었습니다. 라는 문자열을 선언하고 반환한다.

console.log(func())는 func 함수를 호출하고 그 결과값인 함수가 선언되었습니다. 라는 문자열을 출력한다.

 

 

 

 

11. 결괏값을 작성하시오. 

{
    let direct = 1;

    function gallery(num){
        if(num){
            if(num == 2) direct++;
        } else {
            if(num == 1) direct--;
        }
    }
    gallery(2);

    console.log(direct);
}

 

A

: 2


gallery 함수는 num이 2일 경우에 direct 변수를 1 증가시킨다.

gallery 함수가 호될 때 2가 매개변수 num으로 전달되므로 함수 내부에서는 direct 변수가 1 증가된다.

 

direct 변수의 초깃값은 1이므로 함수 호출 전에는 direct 1이었으나,

gallery(2) 함수 호출 후에 direct 변수가 1 증가하므로 출력값은 2가 된다.

 

 

12. 결괏값을 작성하시오. 

{
    let sum = 0;
    for(var i=1; i<=100; i++) {
        sum += i;
    };
    console.log(sum);
}

 

A

: 5050


let sum = 0; 은  변수 sum을 선언하고 0으로 초기화 한다.

for문을 사용하여 i를 1부터 100까지 1씩 증가시키면서 반복을 실행한다.

각 반복마다 sum 변수에 i 값을 누적하여 1부터 100까지 모든 정수를 더한 값을 sum에 저장한다.

 

 

 

13. 결괏값을 작성하시오. 

{
    const obj = {
        a: 100,
        b: 200,
        c: "javascript"
    }
    const { a:_____, b:_____, c:_____ } = obj;

    document.write(name1);
    document.write(name2);
    document.write(name3);

    //100
    //200
    //javascript
}

 

A

: name1, name2, name3


객체 obj를 정의하고 객체의 속성들을 해체하여 각각 name1, name2, name3 변수에 할당하고 이 변수들을 document.write 함수를 사용하여 출력한다.

객체의 속성들을 해체하여 변수에 할당할 때는 객체 속성 이름과 변수 이름을 콜론(:)으로 구분하여 작성한다.

 

 

 

14. 결괏값을 작성하시오. 

{
    const obj = {
        a: 100,
        b: 200,
        c: "javascript"
    }
    const { a, b, c } = _______;

    document.write(a);
    document.write(b);
    document.write(c);

    //100
    //200
    //javascript
}

 

A

: obj


객체 obj를 정의하고 객체의 속성들을 해체하여 각각 a, b, c 변수에 할당하고 이 변수들을 document 함수를 사용하여 출력한다.

객체의 속성들을 해체하여 변수에 할당할  때,  객체의 속성 이름과 변수 이름이 동일한 경우에는 {속성1, 속성2, 속성3 ... } = 객체; 와 같이 간단하게 작성할 수 있다.

 

 

 

15. 결괏값을 작성하시오. 

{
    const objA = {
        a: 100,
        b: 200
    }
    const objB = {
        c: "javascript",
        d: "jquery"
    }
    const spread = {...objA, ...objB}

    document.write(spread.a);
    document.write(spread.b);
    document.write(spread.c);
    document.write(spread.d);
}

 

A

: 100 200 javascript jquery


두 개의 객체 obj.A와 obj.B를 정의하고 spread 연산자를 사용하여 두 객체를 병합한 spread 객체를 생성한다.

spread 연산자를 사용하여 객체를 병합할 때, 두 객체의 속성 이름이 중복되는 경우에는 마지막에 병합된 객체의 속성 값이 사용된다.따라서 obj.B 객체의 c속성과 d 속성이 spread 객체에 포함되어 있다.

 

 

 

16. 결괏값을 작성하시오. 

{
    const char = ["J","A","V","A","S","C","R","I","P","T"];

    for(let i=9; i>=0; i--){
        console.log(char[i]);
    }
}

 

A

: T P I R C S A V A J

 


변수 i를 9부터 0까지 1씩 감소 시키면서 배열의 키(자리값)으로 사용한다.

따라서 char[9] 부터 char[0]까지 차례대로 출력된다.i가 증가하는 게 아니라 감소하는 반복문이므로 역순으로 출력된다.

 

 

17. 결괏값을 작성하시오. 

{
    let a = 1, b = 2, c = 3, result;
    result = ++a + b++ + ++c;

    console.log(result);
    console.log(a);
    console.log(b);
    console.log(c);
}

 

A

: 8  2   3    4  


첫번째 연산에서는 a가 1에서 2로 증가하고 전치 연산자이므로 ++a는 2라는 값을 반환한다.

두번째 연산에서는 b가 2에서 3으로 증가하지만, 후치 연산자이므로 b++는 2를 반환한다.

세번째 연산에서는 c가 3에서 4로 증가하고, 전치 연산자이므로 ++c는 4를 반환한다.

 

그래서 result 변수에는 8이 할당되고, a는 2,  b는 3, c가 된다.

 

 

 

18. 결괏값을 작성하시오. 

{
    let i = 1;

    while(i > 5){
        console.log(i);
        i++;
    }
    console.log(i);
}

 

A

: 1


while 반복문에서 i가 5보다 클 때까지 반복하는 조건이지만,

조건식이 i>5 (i의 값이 5보다 커야한다)이기 때문에 i는 1로 초기화 된 후 아무런 변화가 없다.

따라서 1이 출력된다.

 

 

 

19. 결괏값을 작성하시오. 

{
    let num = [32, 93, 15, 86, 50];
    let sum = 0;

    for(let i=0; i > num.length; i++){
        sum = sum * i;
    }

    console.log(sum)
}

 

A

: 0


i가 num.length보다 클 때까지 반복하도록 작성되어 있지만, i의 초깃값이 0으로 설정되어 있기 때문에 반복문이 실행되지 않는다.

따라서 console.log에도 0이 출력된다.

 

 

 

20. 결괏값을 작성하시오. 

{
    let a, b, result;
    a = 7, b = 4
    result = a & b;

    console.log(result)
}

 

A

: 4 (0100)


비트연산자인 &를 사용하여 7과 4를 비트 단위로 AND 연산한다.

 

7과 4는 2진수로 나타내면 각각 0111과 0100이다.이때 & 연산자는 각 비트의 값이 모두 1일 경우에만 1을 반환한다.

 

 

0111----------          = 0(두 비트모두 0이기 때문), 1 (두 비트 모두 1이기 때문), 00(두 비트가 0과 1로 다르기 때문)0100

 

이기 때문에 0111 & 0100의 결과는 0100이 된다.우측 맨 끝자리부터 2의 0승 (1), 2의 1승 (2), 2의 2승(4), 2의 3승(8) ····· 2의 8승(256)순이며,자릿값이 1인 곳을 확인하면 2의 2승 자리이기 때문에 0100을 10진수로 변환하면 4가 된다.

 

 

 

 

 

728x90
반응형

 

 

완성 화면

클릭 시 완성화면으로 넘어갑니다.

 

 

 

 

코드 보기 / 자바스크립트

<!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>퀴즈 이펙트 02</title>

    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/quiz.css">
</head>

<body>
    <header id="header">
            <h1><a href="../javascript14.html">Quiz <em> 주관식 확인하기</em></a></h1>
            <ul>
                <li><a href="quizEffect01.html">1</a></li>
                <li class="active"><a href="quizEffect02.html">2</a></li>
            </ul>
    </header>
    <!-- //header -->

    <main id="main">
        <div class="quiz__wrap">
            <div class="quiz">
                <div class="quiz__header">
                    <h2 class="quiz__title"><span></span><em></em></h2>
                </div>
                <div class="quiz__main">
                    <div class="quiz__question">
                        <em></em>. <span></span>
                    </div>
                    <div class="quiz__view">
                        <div class="dog__wrap">
                            <div class="card-container">
                                <div class="dog">
                                    <div class="head">
                                        <div class="ears"></div>
                                        <div class="face"></div>
                                        <div class="eyes">
                                            <div class="teardrop"></div>
                                        </div>
                                        <div class="nose"></div>
                                        <div class="mouth">
                                            <div class="tongue"></div>
                                        </div>
                                        <div class="chin"></div>
                                    </div>
                                    <div class="body">
                                        <div class="tail"></div>
                                        <div class="legs"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="quiz__answer">
                        <input class="input" type="text" placeholder="정답을 작성해주세요.">
                        <button class="confirm">정답 확인하기 </button>
                        <div class="result"></div>
                    </div>
                </div>
                <div class="quiz__footer">
                    <div class="quiz__desc">해설</div>
                </div>
            </div>
        </div>
</main>
<!-- //main -->

<footer id="footer">
    <a href="mailto:goed0522@gmail.com">goed0522@gmail.com</a>   
</footer>
<!-- //footer -->

<script>
    //선택자
    const quizWrap = document.querySelector(".quiz__wrap");
    const quizTitle = quizWrap.querySelector(".quiz__title span");
    const quizTime = quizWrap.querySelector(".quiz__title em");
    const quizQuestionNum = quizWrap.querySelector(".quiz__question em");
    const quizQuestion = quizWrap.querySelector(".quiz__question span");
    const quizAnswerConfirm = quizWrap.querySelector(".quiz__answer .confirm");
    const quizAnswerResult = quizWrap.querySelector(".quiz__answer .result");
    const dogWrap = quizWrap.querySelector(".dog__wrap");
    const quizDesc = quizWrap.querySelector(".quiz__desc");
    const quizFooter = quizWrap.querySelector(".quiz__footer");
    const quizAnswerInput = quizWrap.querySelector(".quiz__answer .input");
    

    //문제 정보
    const infoType = "정보처리 기능사";
    const infoTime = "2011년 5회";
    const infoNumber = "2";
    const infoQuestion = "프레젠테이션 화면 전체를 전환하는 단위를 의미하는 것은?";
    const infoAnswer = "슬라이드";
    const infoDesc = "슬라이드는 프레젠테이션 화면 전체를 말하고 개체는 화면을 구성하는 개개의 요소를 말한다.";

    //문제 출력
    quizTitle.textContent = infoType;
    quizTime.textContent = infoTime;
    quizQuestionNum.textContent = infoNumber;
    quizQuestion.textContent = infoQuestion;
    quizDesc.textContent = infoDesc;
    quizAnswerResult.textContent = infoAnswer;

    //정답 & 해설 숨기기
    quizAnswerResult.style.display = "none";
    quizFooter.style.display = "none";

    //사용자 정답
    quizAnswerConfirm.addEventListener("click", function () {
        quizAnswerResult.style.display = "block";           //정답 나타냄
        quizAnswerConfirm.style.display = "none";           //정답 확인버튼 숨김

        const userAnswer = quizAnswerInput.value.trim();
        if(infoAnswer == userAnswer) {
            alert("정답입니다") 
            dogWrap.classList.add("like");
            quizFooter.style.display = "block";             //팁 박스 숨김
            quizAnswerInput.style.display = "none";         //입력 박스 숨김
        } else {
            alert("오답입니다")
            dogWrap.classList.add("dislike");
            
        }
    });
    </script>
</body>
</html>

 

 

 

 

코드 보기 / CSS

#header {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    background-color: #390b47;
    color: #fff;
    padding: 10px;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
}
#header::before {
    content: '';
    border: 4px ridge #580073;
    position: absolute;
    left: 5px;
    top: 5px;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
}
#header h1 {
    font-size: 28px;
    padding: 5px 5px 5px 10px;
    font-family:'DungGeunMo';
    z-index: 10;
    position: relative;
}
#header h1 a {
    color: #fff;
}
#header h1 em {
    font-size: 0.5em;
}
#header ul  {
    padding: 5px;
}
#header li {
    display: inline;
    z-index: 10;
    position: relative;
}
#header li a {
    color: #fff;
    font-family: 'DungGeunMo';
    border: 1px dashed #fff;
    display: inline-block;
    padding: 5px;
}
#header li.active a,
#header li a:hover {
    background-color: #fff;
    color: #000;
}
/* footer */
#footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #390b47;
    padding: 10px;
    text-align: center;
}
#footer a {
    color: #fff;
    padding: 20px;
    display: block;
    font-family: 'DungGeunMo';
    z-index: 10;
    position: relative;
}
#footer::before {
    content: '';
    border: 4px ridge #580073;
    position: absolute;
    left: 5px;
    top: 5px;
    width: calc(100% - 16px);
    height: calc(100% - 18px);
}
/* main */
#main {
    padding: 100px;
}
/* quiz__wrap */
.quiz__wrap {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.quiz__wrap .quiz {
    width: 500px;
    background-color: #fff;
    border: 8px ridge #a12cd3;
    width: 500px;
}
.quiz__header {}
.quiz__title {
    background-color: #a12cd3;
    border: 3px ridge #a12cd3;
    border-bottom: 6px ridge #a12cd3;
    padding: 5px;
    font-family: 'DungGeunMo';
    font-size: 16px;
    color: #fffffff8;
    text-align: center;
}
.quiz__main {}

.quiz__question {
    padding: 20px;
    font-size: 24px;
    font-family: 'ElandChoice';
    font-weight: bold;
    border-bottom: 6px ridge #a12cd3;
    line-height: 1.4;
}
.quiz__question em {
    color: #2c024e
}
.quiz__answer {
    padding: 20px;
    font-size: 24px;
    font-family: 'ElandChoice';
    font-weight: 500;
    border-bottom: 6px ridge #a12cd3;
    text-align: center;
}
.quiz__answer .confirm {
    color: #fff;
    background-color: #a12cd3;
    width: 100%;
    font-family: 'ElandChoice';
    padding: 10px 20px;
    font-size: 22px;
    cursor: pointer;
    transition: all 0.3s;
    text-shadow: 1px 1px 1px #440460;
    font-weight: bold;
    margin-bottom: 10px;
}
.quiz__answer .confirm:hover {
    background-color: #620689;
}
.quiz__answer .result {
    background-color: #fff;
    border: 6px ridge #a12cd3;
    width: 100%;
    font-family: 'ElandChoice';
    padding: 10px 20px;
    font-size: 22px;
}
.quiz__answer .input {
    background-color: #fff;
    border: 6px ridge #a12cd3;
    width: 100%;
    font-family: 'ElandChoice';
    padding: 10px 20px;
    font-size: 22px;
    margin-bottom: 10px;
}
.quiz__view {
    border-bottom: 6px ridge #a12cd3;
    overflow: hidden;
}
.quiz__footer {
    font-family: 'ElandChoice';
    border-top: 6px ridge #a12cd3;
    padding: 20px;
    background-color: #f2e7fe;
}
.quiz__footer::before {
    content: "✏Tip";
    color : firebrick;
    font-weight: bold;
}
.quiz__desc {
    padding-top: 5px;
}

 

 

textContent

:문서에서 텍스트 컨텐츠를 나타내는 속성이다.

이 속성은 자식 노드[각주:1]를 포함하지 않고 요소의 텍스트 컨텐츠만 반환한다.

HTML  요소의 경우 HTML 태그를 문자열로 반환하며, 스크립트에서 해당 요소의 텍스트를 변경할 수 있다.

 

quizDesc.textContent = infoDesc;

:infoDesc라는 변수에 저장된 문자열 값을 가져와 quizDesc라는 요소의 textContent 속성에 할당한다.

quizDesc는 HTML에서 특정 요소를 나타내는 변수이며, textContent를 사용하면 해당 요소의 텍스트 컨텐츠가 infoDesc로 설정된다.

innerText와 같은 역할을 한다고 볼 수 있다.

 

 

 

value

:HTML 요소의 값을 나타내는 속성. 

이 속성은 해당 요소의 현재 값을 나타낸다. value를 사용하여 요소에 입력 된 값을 가져오거나 설정할 수 있다. 

 

 

const userAnswer = quizAnswerInput.value

:const를 사용하여 userAnswer 변수를 선언하고 quizAnswerInput 객체의 value 속성 값을 할당한다.

즉, 입력 창에 사용자가 입력한 현재 값을 가져오는 것이다.

질문에 대한 사용자의 답변을 받아 상수에 저장하는 작업을 수행한다.

 

 

 

trim( )

:원본 문자열을 수정하지 않으면서 문자열 양 옆(시작과 끝)의 공백만을 제거하여 새로운 문자열을 반환하는 메서드(Method)이다.

 

 

const userAnswer = quizAnswerInput.value.trim( );

:value가 입력 창에 사용자가 입력한 현재 값을 가져오면 trim( )은 이 값을 가져와서 앞 뒤의 공백을 제거한 후 userAnswer 변수에 할당한다.

즉, 사용자가 입력한 값의 앞 뒤 공백이 제거되기 때문에 결과적으로 문자열이 더 정확하게 비교되고 처리될 수 있다.

 

 

classList

:문서 요소의 클래스 속성을 나타내는 속성이다.
이는 DOMTokenList[각주:2]를 반환하며, 해당 객체는 클래스를 조작하는 여러 메서드(Method)를 가지고 있다.
 
 
classList 메서드를 사용하면 문서 요소의 클래스를 추가, 제거 또는 토글[각주:3]할 수 있다.
clasList의 메서드를 사용하여 문서 요소의 클래스를 동적으로 조작하거나 애니메이션 효과를 만드는데 유용하게 사용된다.
 
 
 

dogWrap.classList.add("dislike");

:dogWrap이라는 클래스 이름을 가진 HTML 요소에 dislike라는 css 클래스를 추가한다.
이를 통해 해당 요소의 스타일을 변경할 수 있다.
 

 

justify-content

 

space-between

:아이템들  즉, 요소 사이(between)에 균일한 간격을 만들어 주는 것.

한글office에서 사용하는 문단모양의 배분정렬이라고 생각하면 쉽다. 

 

position

position : fixed

:요소를 화면에서 고정된 위치에 놓도록 지정하는 속성.

스크롤 되더라고 화면에서 계속 같은 위치에 있도록 요소를 고정한다.

top, left, right, bottom 등을 사용하여 위치를 지정할 수 있다.

 

 

width, height

calc(100%-n px)

:100%에서 n px을 뺀 값을 계산하여 그 결과를 적용한다.

 

주로 박스 모델에서 사용되는 표현식이며, 요소의 너비(widht) 높이(height)를 계산할 때 유용하다.

요소가 화면 전체를 차지하면서 좌우 여백이 n px이 되도록 한다.

숫자와 연산자를 조합하여 사용할  수도 있다.

 

 

 

 

 

 

 

  1. html요소에 포함 된 하위 요소 또는 텍스트 노드 다른 말로는 자식 요소가 있다. [본문으로]
  2. 문서 요소의 클래스 목록을 나타내는 객체. [본문으로]
  3. DOMTokenList 객체의 메서드 중 하나로, 클래스의 존재 여부를 확인하고 클래스가 존재하면 제거, 클래스가 없으면 추가하는 역할을 한다 [본문으로]
728x90
반응형

 

퀴즈 이펙트 만들기

 

 

코드 / HTML

<!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>퀴즈 이펙트 01</title>

    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/quiz.css">
</head>

<body>
    <header id="header">
        <a href="../javascript14.html">
            <h1>Quiz<em> 정답 확인하기 유형
        </a></em></h1>
    </header>
    <!-- //header -->

    <main id="main">
        <div class="quiz__wrap">
            <div class="quiz">
                <div class="quiz__header">
                    <h2 class="quiz__title"><span></span><em></em></h2>
                </div>
                <div class="quiz__main">
                    <div class="quiz__question">
                        <em></em>. <span></span>
                    </div>
                    <div class="quiz__view">
                        <div class="dog__wrap">
                            <div class="card-container">
                                <div class="dog">
                                    <div class="head">
                                        <div class="ears"></div>
                                        <div class="face"></div>
                                        <div class="eyes">
                                            <div class="teardrop"></div>
                                        </div>
                                        <div class="nose"></div>
                                        <div class="mouth">
                                            <div class="tongue"></div>
                                        </div>
                                        <div class="chin"></div>
                                    </div>
                                    <div class="body">
                                        <div class="tail"></div>
                                        <div class="legs"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="quiz__answer">
                        <button class="confirm">정답 확인하기 </button>
                        <div class="result"></div>
                    </div>
                </div>
                <div class="quiz__footer"></div>
            </div>
        </div>
    </main>
    <!-- //main -->

    <footer id="footer">
        <a href="mailto:goed0522@gmail.com">goed0522@gmail.com</a>
    </footer>
    <!-- //footer -->

    <script>
        //선택자
        const quizWrap = document.querySelector(".quiz__wrap");
        const quizTitle = quizWrap.querySelector(".quiz__title span");
        const quizTime = quizWrap.querySelector(".quiz__title em");
        const quizQuestion = quizWrap.querySelector(".quiz__question span")
        const quizQuestionNum = quizWrap.querySelector(".quiz__question em");
        const quizAnswerConfirm = quizWrap.querySelector(".quiz__answer .confirm");
        const quizAnswerResult = quizWrap.querySelector(".quiz__answer .result");

        //문제 정보
        const infoType = "웹디자인 기능사";
        const infoTime = "2012년 1회";
        const infoNumber = "1";
        const infoQuestion = "인접하는 두 색의 경계 부분에 색상, 명도, 채도의 대비가 더욱 강하게 일어나는 현상을 무엇이라고 하는가?";
        const infoAnswer = "연변대비";
        
        quizTitle.innerText = infoType;
        quizTime.innerText = infoTime;
        quizQuestionNum.innerText = infoNumber;
        quizQuestion.innerText = infoQuestion;
        quizAnswerResult.innerText = infoAnswer;

        //정답 숨기기
        quizAnswerResult.style.display = "none";

        //정답 확인
        quizAnswerConfirm.addEventListener("click", function (){
            quizAnswerResult.style.display = "block";
            quizAnswerConfirm.style.display = "none";
        });
    </script>
</body>

</html>

 

 

코드 / css

#header {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    background-color: #390b47;
    color: #fff;
    padding: 10px;
    z-index: 1000;
}
#header::before {
    content: '';
    border: 4px ridge #580073;
    position: absolute;
    left: 5px;
    top: 5px;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
}
#header h1 {
    font-size: 28px;
    padding: 0px 5px 5px 10px;
    font-family: 'DungGeunMo';
    z-index: 10;
    position: relative;
}
#header h1 a {
    color: #fff;
}
#header h1 em {
    font-size: 0.5em;
}
/* main */
#main {
    padding: 100px 0;
}
/* footer */
#footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #390b47;
    padding: 10px;
    text-align: center;
}
#footer a {
    color: #fff;
    padding: 20px;
    display: block;
    font-family: 'DungGeunMo';
    z-index: 10;
    position: relative;
}
#footer::before {
    content: '';
    border: 4px ridge #580073;
    position: absolute;
    left: 5px;
    top: 5px;
    width: calc(100% - 16px);
    height: calc(100% - 18px);
}

/* quiz__wrap */
.quiz__wrap {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.quiz__wrap .quiz {
    max-width: 500px;
    background-color: #fff;
    border: 8px ridge #a12cd3;
    width: 500px;
}
.quiz__header {}
.quiz__title {
    background-color: #a12cd3;
    border: 3px ridge #a12cd3;
    border-bottom: 6px;
    padding: 5px;
    font-family: 'DungGeunMo';
    font-size: 16px;
    color: #fffffff8;
    text-align: center;
}
.quiz__main {}

.quiz__question {
    padding: 20px;
    font-size: 24px;
    font-family: 'ElandChoice';
    font-weight: bold;
    border-bottom: 6px ridge #a12cd3;
}
.quiz__question em {
    color: #2c024e
}
.quiz__answer {
    padding: 20px;
    font-size: 24px;
    font-family: 'ElandChoice';
    font-weight: 500;
    border-bottom: 6px ridge #a12cd3;
    text-align: center;
}
.quiz__answer .confirm {
    color: #fff;
    background-color: #a12cd3;
    width: 100%;
    font-family: 'ElandChoice';
    padding: 10px 20px;
    font-size: 22px;
    cursor: pointer;
    transition: all 0.3s;
    text-shadow: 1px 1px 1px #440460;
}
.quiz__answer .confirm:hover {
    background-color: #620689;
}
.quiz__answer .result {
    background-color: #fff;
    border: 6px ridge #a12cd3;
    width: 100%;
    font-family: 'ElandChoice';
    padding: 10px 20px;
    font-size: 22px;
}
.quiz__view {
    border-bottom: 6px ridge #a12cd3;
    overflow: hidden;
}
.quiz__footer {}

 

 

 

querySelector

document.querySelector( (.quiz__wrap) )

:HTML 문서 내에서 특정 선택자를 가진 요소를 찾아 해당 요소의 참조를 반환하는 역할을 한다.

Selector 뒤에 quiz__wrap이 붙으면 class 속성 값이 quiz__wrap인 첫번째 요소를 찾아 반환합니다.

반환된 요소에 대해 자바스크립트를 이용하여 다양한 조작이 가능하다.

 

quizWrap.querySelector

: quiz__Wrap 변수가 참조하는 요소의 하위 요소 중 Selector 뒤에 오는 선택자의 class 속성을 가진 첫번째 요소를 찾아 해당 요소의 참조를 반환 한다.

document.querySelector와 달리 quiz__Wrap 변수가 참조하는 요소 내에서만 검색을 수행하므로 검색 범위가한정적이다.이는 불필요한 검색을 줄이고 실행 속도를 향상시킨다.

 

.style.display

: HTML 문서 요소의 CSS 스타일을 조작하기 위한 프로퍼티로, 해당 요소의 display 속성 값을 설정하거나 가져올 수 있다.

 

요소명(ex. quizAnswerResult).style.display : none;

: 해당 요소를 화면에서 숨기는 역할을 수행한다. 요소를 화면에서 숨길 뿐 아니라 해당 요소의 영역도 사라진다.

 

요소명.style.display: block;

:해당 요소를 화면에 보이게 하는 역할을 수행한다.

 

 

 

요소명(ex.quizTitle).innerText

:텍스트 컨텐츠를 가져오거나 설정하기 위한 속성.

특정 HTML 요소의 텍스트 컨텐츠를 읽거나 수정할 수 있다.

특정 class나 id를 가진 요소의 텍스트 컨텐츠를 가져와서 변수에 저장하거나 새로운 텍스트를 할당하여 해당 요소의 내용을 변경할 수 있다.
 
 
 

.addEventListener

:이벤트를 처리하기 위해 사용되는 메서드(Method)이다.

이를 사용하면 HTML 요소에서 발생하는 이벤트 (클릭, 마우스 오버, 키보드 입력 등)을 감지하고 이벤트가 발생하였을 때 실행할 함수를 등록할 수 있다.

 

 

 

quizAnswerConfirm.addEventListener("click", function (){

            quizAnswerResult.style.display = "block";
            quizAnswerConfirm.style.display = "none";
        });

 : quizAnswerConfirm 이라는 요소 (정답확인하기 버튼)을 클릭했을 때 실행될 함수가 등록되어 있다.

등록된 함수는 quizAnswerResult 요소를 다시 화면에 보여주어(display: block; 하여) 정답 결과를 나타내고,  quizAnswerConfirm(정답확인버튼)을 화면에서 사라지게 만든다. (display: none;을 실행시킴)

 

 

 

z-index

:HTML 요소의 쌓이는 순서를 지정하는 CSS 속성이다.

z-index 값이 높을 수록 요소가 위에 쌓이게 된다.

 

또한 z-index는 요소가 겹쳐져 있을 때, 이 값을 설정하여 어떤 요소를 먼저 보여줄지 결정할 수 있다.

만약 요소 두 개가 겹쳐져 있다면 보여주어야 하는 요소의 z-index 값을 높게 설정해 위에 표시되게 한다.

z-index의 값은 정수로 지정된다. 음수 값도 사용할 수는 있다.

값이 같은 경우, HTML 코드 순서에 따라 나중에 작성된 요소가 위에 쌓이게 된다.

 

 

 

visibility

:CSS 속성 중 하나로 HTML 요소를 보이게 하는 속성이다.
이 속성을 지정하면 해당 요소가 회면에 표시된다.
 

visible or hidden

:요소를 화면에 보여주기 위해 wisible을 사용한다.
 반대로 요소가 화면에서 사라지게 할 때 hidden을 사용하며, 사용 시 요소는 화면에서 사라지지만 영역은 유지된다.
 
 
 

animation

:CSS 요소에 애니메이션 효과를 적용하는 속성으로, 이 속성을 사용하면 요소에 지정된 애니메이션 효과가 지정된 속성값에 따라 작동한다.

 

animation: cry 0.1s ease-in 0.25s forwards;

▶ cry

: 애니메이션 이름

 

▶ 0.1s

: 애니메이션의 재생 시간으로, 애니메이션이 한 번 실행될 때 걸리는 시간이다.

 

▶ ease-in

: 애니메이션의 타이밍 함수.  이 함수는 애니메이션의 속도를 조절할 수 있으며, 느리게 시작했다가 점점 빨라지는 타이밍 함수이다.

 

▶ 0.25s

: 애니메이션의 지연 시간 (delay) .

 

▶forwards

:애니메이션이 종료된 후에도 애니메이션의 마지막 프레임을 유지한다.

즉, 애니메이션이 끝난 후에도 요소의 최종 상태를 유지하는 것.

 

 

animation: movetail 0.1s linear infinite alternate forwards;

 

▶linear

:애니메이션의 타이밍 함수로, 이 함수는 애니메이션을 일정한 속도로 실행한다.

 

▶infinite

:애니메이션을 무한 반복하는 함수.

 

▶alternate

:애니메이션을 왕복하는 방향으로 반복한다.

 

 

 

 

 

 

728x90
반응형

카드 유형 사이트

 

 

 

 완성화면

 

 

 

카드 유형 사이트 - 코드

<!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>텍스트 유형01</title>

    <link href="https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css" rel="stylesheet">

    <style> 
        /* reset */
         * {
            margin: 0;
            padding: 0;
        }
        a {
            text-decoration: none;
            color:#000;
        }
        h1,h2,h3,h4,h5,h6 {
            font-weight: normal;
        }
        img {
            vertical-align: top;
            width: 100%;
        }
        .mt10 {margin-top: 10px !important;}
        .mt20 {margin-top: 20px !important;}
        .mt30 {margin-top: 30px !important;}
        .mt40 {margin-top: 40px !important;}
        .mt50 {margin-top: 50px !important;}
        .mt60 {margin-top: 60px !important;}
        .mt70 {margin-top: 70px !important;}

        .mb10 {margin-top: 10px !important;}
        .mb20 {margin-top: 20px !important;}
        .mb30 {margin-top: 30px !important;}
        .mb40 {margin-top: 40px !important;}
        .mb50 {margin-top: 50px !important;}
        .mb60 {margin-top: 60px !important;}
        .mb70 {margin-top: 70px !important;}

        /* common */
        .container {
            width: 1160px;
            margin: 0 auto;
            padding: 0 20px;
            /* background-color: rgba(0,0,0,0.1); */
        }
        .nexon {
            font-family: 'NexonLv1Gothic';
            font-weight: 400;
        }
        .section {
            padding: 120px 0;
        }
        .section.center {
            text-align: center;
        }
        .section__small {
            font-size: 14px;
            border-radius: 50px;
            background-color: #AC43FF;
            color: #fff;
            padding: 0 23px;
            text-transform: uppercase;
            margin-bottom: 1px 20px;
            display: inline-block;
        }
        .section__h2 {
            font-size: 50px;
            color: #000;
            font-weight: 400;
            margin-bottom: 30px;
            line-height: 1;
        }
        .section__desc {
            font-size: 22px;
            color: #666;
            margin-bottom: 70px;
            font-weight: 300;
            line-height: 1.5;
        }
        .text__wrap {
            
        }
        .text__inner {
            text-align: left;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        .text__inner .text {
            width: 32.3333333%;
            border:  1px solid #f5f5f5;
            padding: 90px 20px 20px 20px;
            border-radius: 10px;
            box-sizing: border-box;
            margin-bottom: 20px;
            transition: all 0.3s;
            cursor: pointer;
            position: relative;
        }
        .text__inner .text:hover {
            background-color: #ece0f8;
        }
        .text__inner .text::before {
            content: '';
            width: 60px;
            height: 60px;
            background-color: rgba(147, 87, 245, 0.76);
            background-image: url(../asset/img/textType01_01.svg);
            background-repeat: no-repeat;
            background-position: center;
            position: absolute;
            left: 20px;
            top: 20px;
            border-radius: 50%;
        }
        .text__inner .text::after {
            content: '';
        }
        .text__title {
            font-size: 24px;
            margin-bottom: 10px;
        }
        .text__desc {
            font-size: 16px;
            color: #666;
            margin-bottom: 15px;
            line-height: 1.5;
        }
        .tetx__btn {
            float: right;
            position: relative;
            padding-right: 20px;
        }
        .tetx__btn:hover::before {
            transform: rotate(360deg);
        }
        .tetx__btn::before {
            content: '';
            position: absolute;
            right: 0;
            top: 0;
            width: 15px;
            height: 15px;
            background-image: url(../asset/img/icon_plus.svg);
            transition: all 0.3s;
        }
    </style>
</head>
<body>
    <section class="text__wrap section center nexon">
        <div class="container">
            <span class="section__small">notice</span>
            <h2 class="section__h2 mb70">About the Milky way</h2>
            <div class="text__inner">
                <div class="text">
                    <h3 class="text__title">명칭 및 어원</h3>
                    <p class="text__desc">우리 은하의 명칭은 “Milky Way(밀키 웨이)”입니다. 그러나 밀키 웨이는 우리 은하 뿐 아니라 은하수 자체를 가리키기도 합니다. 은하수들도 각각의 명칭이 있습니다.</p>
                    <a class="tetx__btn" href="#">더 보기</a>
                </div>
                <div class="text">
                        <h3 class="text__title">갤러틱 할로(Galactic Halo)</h3>
                        <p class="text__desc">은하 중심부를 둘러싸고 있는 둥근 모양의 거대한 구조물 입니다. 은하 중심부에 위치한 은하 플레어와 달리, 할로는 무수히 많은 별, 암석체, 가스, 먼지 등이 혼합된 구조물입니다.</p>
                        <a class="tetx__btn" href="#">더 보기</a>
                </div>
                <div class="text">
                    <h3 class="text__title">은하 헤일로(Galaxy Hale)</h3>
                    <p class="text__desc">은하 헤일로는 아메리칸 천문학자 조지 엘리슨 헤일이 처음으로 제안한 은하 분류 체계입니다. 이 체계는 은하를 크기와 모양에 따라 4가지 유형으로 분류하고 있습니다.</p>
                    <a class="tetx__btn" href="#">더 보기</a>
                </div>
                <div class="text">
                    <h3 class="text__title">우리 은하의 구조</h3>
                    <p class="text__desc">우리 은하는 막대 나선 은하에 속하며, 허블의 은하 분류에 따르면 Sbc(중심에 막대가 존재하고 나선팔이 느슨히 감긴 형태)입니다. 막대 구조는 대부분 붉고 오래된 항성들로 구성되어 있습니다.</p>
                    <a class="tetx__btn" href="#">더 보기</a>
                </div>
                <div class="text">
                    <h3 class="text__title">우리 은하의 블랙홀</h3>
                    <p class="text__desc">우리 은하를 구성하는 별들은 은하의 중심부를 중심으로 나선팔 모양으로 공전합니다. 이는 은하 중심에 초대질량 블랙홀이 있기 때문이라 여겨집니다.</p>
                    <a class="tetx__btn" href="#">더 보기</a>
                </div>
                <div class="text">
                    <h3 class="text__title">우리 은하의 팔</h3>
                    <p class="text__desc">우리 은하에는 네 개의 큰 나선 팔이 있다고 여겨졌으나, 2008년에 스피처 적외선 망원경을 이용하여 1억 개 이상의 별의 분포를 분석한 결과, 단지 2개의 나선 팔만이 구분되었습니다.</p>
                    <a class="tetx__btn" href="#">더 보기</a>
                </div>
            </div>
        </div>
    </section>
</body>
</html>

 

 

1.  a

a {
            text-decoration: none;
            color:#000;
        }

 

text-decoration 예시

 : 링크 즉, 하이퍼링크에 생기는 글자색이 파랗게 변하는 속성, 밑줄이 그려지는 속성, 하이퍼링크 클릭 시 글자색과 밑줄 색이 변하는 스타일 속성을 없애고, 글자를 #00000 검은 색으로 바꾸는 코드입니다.

 

 

 

2. mt10~70, mb10~70

.mt10 {margin-top: 10px !important;}
.mt20 {margin-top: 20px !important;}
.mt30 {margin-top: 30px !important;}
.mt40 {margin-top: 40px !important;}
.mt50 {margin-top: 50px !important;}
.mt60 {margin-top: 60px !important;}
.mt70 {margin-top: 70px !important;}

.mb10 {margin-top: 10px !important;}
.mb20 {margin-top: 20px !important;}
.mb30 {margin-top: 30px !important;}
.mb40 {margin-top: 40px !important;}
.mb50 {margin-top: 50px !important;}
.mb60 {margin-top: 60px !important;}
.mb70 {margin-top: 70px !important;}

:section__h2 클래스가 여러 곳에서 중복으로 사용되는 클래스이기 때문에 이 페이지에 있는 h2 태그에 여백 속성을 지정하면 다른 페이지에 있는 section__h2 클래스를 가지고 있는 요소 모두에 속성이 지정 되어버리기 때문에 필요 시에만 알맞은 속성을 사용할 수 있도록, 그리고 여백 속성이 제일 먼저 우선순위를 가지도록 작성한 코드입니다.

 

 

3. .text__btn::before ~

.tetx__btn::before {
            content: '';
            position: absolute;
            right: 0;
            top: 0;
            width: 15px;
            height: 15px;
            background-image: url(../asset/img/icon_plus.svg);
            transition: all 0.3s;
.tetx__btn:hover::before {
            transform: rotate(360deg);
        }

 

 

.text__btn::before 

content: ' ';  : 가상 요소의 내용을 비워둠을 의미합니다.

position: absolute; : 가상 요소를 절대적으로 배치합니다.

right : 0, top: 0 : 가상 요소를 부모 요소의 오른쪽 상단에 배치합니다.

widht 15px, height: 15px : 가상 요소의 크기를 지정합니다.

background-image:  url(../asset/img/icon_plus.svg); : 가상 요소에 사용할 이미지를 지정합니다.

transition: all 0.3s;는 모든 속성에 대해 0.3초 동안 전환 효과를 부여합니다.

 

 

:before 

:선택한 요소의 내용의 앞부분에 가상 요소를 생성합니다.

 

 

hover

:선택한 요소에 마우스 커서를 올리면 작동하는 css 선택자입니다.

 

 

.text_btn::hover::before

:버튼 요소에 마우스를 올렸을 때 아이콘을 회전 시키기 위한 css 선택자 입니다.

 

transform: rotate(360deg); : 요소를 회전 시키는 css 속성입니다.

 

 

4. position

.parent{					//부모요소
position : relative;		
}

.child{						//자식요소
position : absolute;		
top : 20px
left: 30px
}

 

position: absolute;

: 요소를 원하는 위치에 정확하게 배치할 수 있습니다. 이 속성을 사용하면 해당 요소가 다른 요소들의 위치에 영향을 받지 않고 가장 가까운 조상 요소중 position 값이 relative나 absolute인 요소를 기준으로 위치를 지정합니다.

 

position: relative;

: 요소의 위치를 상대적으로 이동시키기 위해 사용되는 css 속성입니다. 이 속성을 사용하면 요소가 원래 있던 위치를 기준으로 위치를 이동시킬 수 있습니다.

예시에서의 top과 left 속성은 부모 요소를 기준으로 상대적으로 조정 되며, 부모 요소 내에서 자식 요소의 위치가 결정됩니다.

 

 

 

 

 

 

 

 

 

728x90
반응형

변수 : 데이터 불러오기

:변수 안에 저장 된 데이터를 불러오는 방법.

let x = 100, y = 200, z = "javascript";

    console.log(x, y, z);
더보기

100

200

javascript

 

console.log나 document.write를 사용하여 선언한 변수를 불러올 수 있다.

변수는 ( ) 소괄호를 사용하여 불러온다.

 


 

상수 : 데이터 불러오기

:상수 안에 저장된 데이터를 불러오는 방법

let x = 100, y = 200, z = "javascript";

    console.log(x, y, z);
더보기

100

200

javascript

 

상수의 값은 변하지 않는다.

상수의 값을 재선언할 시, 오류 창이 뜨며 결과값이 출력되지 않는다.

 


 

배열 : 데이터 불러오기

:배열 안에 저장 된 데이터를 불러오는 방법 

const arr = [100, 200, "javascript"];

    console.log(arr[0], arr[1], arr[2]);
더보기

100

200

javascript

 

출력문에 반드시 배열을 뜻하는 arr[ ]를 추가 시켜야 한다.

변수나 상수와 다르게 x, y, z 등의 문자를 키로 사용하지 않고 숫자(0, 1, 2···· 등)를 키로 사용한다.

 

 

 

배열 : 데이터 불러오기 (2차 배열)

:배열 안에 배열이 있는 형태의 데이터를 불러오는 방법

const arr = [100, 200, ["javascript","react"]];

    console.log(arr[0]);
    console.log(arr[1]);
    console.log(arr[2][0]);
    console.log(arr[2][1]);
더보기

100
200
javascript
react

 

javascript와 react는 [2]번 키 안에 들어있는 2차 배열이다.

일반 배열처럼 arr[키]만 적어주게 되면 값이 아니라 배열 자체가 불러와지므로, arr[큰 배열의 키][작은 배열의 키]의 형식으로 출력문을 작성해 주어야 한다.

 

 

 

배열 : 데이터 불러오기 (갯수 구하기)

:배열 안에 들어있는 값의 갯수를 구하는 방법

const arr = [100, 200, "javascript"];

    console.log(arr.length)

 

출력문 안에 arr[키] 대신 길이, 범위 등을 뜻하는 length를 넣어 배열이 얼마나 긴지, 즉 배열 안에 값이 몇 개가 들어있는지를 불러올 수 있다.

 

 

 

배열 : 데이터 불러오기 (for문)

:for문을 사용하여 배열 안에 있는 여러 개의 데이터를 불러오는 방법.

1. {
    const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];
            
    console.log(arr[0]);
    console.log(arr[1]);
    console.log(arr[2]);
    console.log(arr[3]);
    console.log(arr[4]);
    console.log(arr[5]);
    console.log(arr[6]);
    console.log(arr[7]);
    console.log(arr[8]);
}

2. 
{
    [for(let i = 0; i<9; i++) {
        console.log(arr[i]);
    }
}
더보기

100, 200, 300, 400, 500, 600, 700, 800, 900

 

for문을 통해 다수의 console.log 없이 배열에 저장된 많은 데이터를 불러올 수 있다.

for문을 사용하지 않으면 1번처럼 여러 개의 출력문을 일일히 작성해주어야 하지만, 반복문을 사용하면 여러 개의 출력문을 작성할 필요 없이 데이터를 불러올 수 있다.

for문은 i 값이 참이어야만 i가 증가하며, 증가한 식은 출력문을 통해 출력된다.

2번 식 같은 경우, 등호가 존재하지 않아 i값이 9가 되면 조건문이 거짓이 되어 식이 자동으로 종결된다.

 

 

 

배열 : 데이터 불러오기 (중첩 for문)

:for문 안에 for문이 또 있는 구조로, 첫번째 for문이 1번 반복될 동안,  안에 있는 for문은 여러 번 반복된다.

 for(let i=1; i<=10; i++ ){
        console.log("i : " + i);
        for(let j=1; j<=10; j++){
            console.log("j : " + j);
        }
    }
더보기

i:1/ j:1, j:2, j:3, j:4, j:5, j:6, j:7, j:8, j:9, j:10 ·····

i:10 / j:1, j:2, j:3, j:4, j:5, j:6, j:7, j:8, j:9, j:10

 

for문을 중첩하여 사용하기 때문에 여러 개의 식을 반복할 수 있다.

먼저 오는 for문이 큰 단락이 되며, 두 번째로 오는 for문은 그 안의 내용이 된다.

이 식 같은 경우, 첫번째 for문 (i)가 1번 반복되는 동안, 두번째 for문(j)는 10번 반복된다.

중첩 for문은 for문 안의 변수를 서로 다른 것으로 선언해야 한다.

변수는 값이 변경될 수 있기 때문이다.

 

 

 

배열 : 데이터 불러오기 (forEach)

:배열 메소드(Method)[각주:1] 중 하나로, 반복문을 사용하여 배열의 요소에 하나씩 접근하여 각 요소에 대해 주어진 함수를 호출한다.

const num = [100, 200, 300, 400, 500];
    num.forEach(function(element, index, array) {
        document.write(element,"<br>");
        document.write(index,"<br>");
        document.write(array,"<br>");
    })
더보기

100 (element)
0 (index)
100,200,300,400,500 (array)

200(element)
1 (index)
100,200,300,400,500 (array)

300(element)
2 (index)
100,200,300,400,500 (array)

400(element)
3 (index)
100,200,300,400,500 (array)

500(element)
4 (index)
100,200,300,400,500 (array)

 

배열에서만 사용할 수 있다는 특징이 있다.

또한 값, 요소값, 인덱스값(키), 배열을 불러올 수 있다는 특징이 있다.

forEach문은 화살표 함수로 간단하게 표현할 수도 있으며, 배열의 요소를 가져와서 함수를 실행해야 할 때, 배열 안에 저장된 데이터가 많을 때 등의 상황에서 주로 사용한다.

forEach문 앞에 배열 이름을 붙여주어야 하며, 출력문에 arr[변수] 형식을 사용하지 않고 

출력하고 싶은 것이 요소인지, 배열인지, 키인지에 따라 출력문에 들어가는 구문이 달라진다.

 

 

 

배열 : 데이터 불러오기 (for of)

:반복 가능한 자료(배열, 객체 등)를 순회할 때 사용하는 반복문이다.

 const arr = [100, 200, 300, 400, 500];
            
    for(let i of arr) {                                 //타겟, 대상을 정해준 다음 그 값을 i라고 선언하는 것.
        document.write(i,",");
    }
더보기

100,200,300,400,500,

 

arr 안에 배열 값이 있는 동안 계속 반복되는 반복문으로, (let 값 of  반복 가능한 자료)의 형식을 가지고 있다.

출력해야할 타겟, 대상을 정하여 변수 선언을 해주어야 하며, 출력문에는 변수 이름을 넣어주어야 한다.

for문과는 다르게 인덱스(index)나 조건식을 사용하지 않고, 객체의 값을 직접 가져와서 처리할 수 있다.

객체의 요소를 하나씩 순회하며 각 요소를 처리하는 용도로 사용된다.

 

 

 

배열 : 데이터 불러오기 (for in)

:객체의 속성을 순회할 때 사용되는 반복문.

객체의 속성을 하나씩 순회하며, 각 속성의 키(이름)을 가져올 수 있다.

const arr = [100, 200, 300, 400, 500]
    for (let i in arr) {                            //index, 즉 자리값이 출력됨.
        document.write(i); or document.write(arr[i]);
    }
더보기

01234 or 100 200 300 400 500

 

객체의 속성을 하나씩 순회하며 각 속성을 처리하는 용도로 사용된다.

for in문은 배열이나 문자열과 같은 다른 자료형에서는 사용할 수 없다.

객체의 키만 가져올 수 있으므로 해당 키의 값에 접근하려면 대괄호 [ ]를 사용한다.

출력문 안에 arr[i]를 넣을 시, 값이 출력되나,i만 작성시 값이 출력되지 않고 키만 출력된다.

배열을 순회할 때는 for of를 사용하고 문자열을 순회할 때는 for of나 for문을 사용해야 한다.

 

 

 

배열 : 데이터 불러오기 (map( ))

: 배열 안의 데이터를 다시 배열로 만드는 메소드(method)이다.

const num = [100, 200, 300, 400, 500]
    num.map(function(el, i, a){
        document.write(el,"<br>")
        document.write(i,"<br>")
        document.write(a,"<br>")
    });
더보기

100(el)
0(i)
100,200,300,400,500(a)
200(el)
1(i)
100,200,300,400,500(a)
300(el)
2(i)
100,200,300,400,500(a)
400(el)
3(i)
100,200,300,400,500(a)
500(el)
4(i)
100,200,300,400,500(a)

 

배열의 각 요소를 순회하며 콜백 함수를 실행하고 그 결과를 모아서 새로운 배열을 만든다.

기존 배열을 변경하지 않고 새로운 배열을 만들 수 있다.

배열 요소를 순회하며 어떤 계산을 수행하거나 요소를 다른 형태로 변환할 수 있다.

문자열의 배열에서 각 문자열의 길이를 구하거나 객체·배열에서 특정 속성값을 추출하여 새로운 배열을 만들 때 주로 사용된다.

 

 

 

배열 : 데이터 불러오기 (배열 펼침연산자)

:배열에 포함된 항목을 목록으로 바꾸어 주는 연산자

 let arr1 = [100, 200, 300, 400, 500];
     let arr2 = [600, 700, 800, 900];

     console.log(arr1);
     console.log(...arr1,);
     console.log(...arr1, ...arr2);
더보기

arr1 : [100, 200, 300, 400, 500]

...arr1: 100, 200, 300, 400, 500

...arr1, ...arr2: 100, 200, 300, 400, 500, 600, 700, 800, 900

 

펼침연산자: spread operator

자바스크립트에서 배열 객체, 문자열 등의 요소를 펼쳐서 개별 요소로 분리하는 연산자.

대괄호 안에서 배열의 요소를 중괄호 안에서 객체의 속성을 문자열에서는 문자열을 개별 문자로 분리할 수 있다.

 

 

 

배열 : 데이터 불러오기 (배열 구조분해할당)

:배열의 요소를 분해하여 여러 변수에 할당할 수 있다.

let a, b, c;

    [a, b, c] = [100, 200, "javascript"];

    console.log(a)
    console.log(b)
    console.log(c)
더보기

100
200
javascrpt

 

배열의 요소를 개별 변수에 할당하는 방법 중 하나이며, 배열의 각 요소를 개별 변수로 분리하여 사용할 수 있다.

배열 구조 분해 할당은 대괄호[ ]를 사용하여 구현한다.

변수의 선언과 할당을 동시에 처리할 수 있다.

배열 구조 분해 할당을 사용하여 변수를 처리할 수도 있다.

또한 기존에 존재하는 변수에도 값을 할당할 수 있다.

배열 구조분해할당을 사용하면 변수를 일일히 선언하거나 값을 할당하는 코드를 줄일 수 있다.

함수의 매개변수에서도 사용할 수 있으며, 배열이나 객체의 중첩된 값에도 적용할 수 있다.

 

 

 

객체: 데이터 불러오기

:객체 안이 있는 값을 .(온점)을 찍어 불러오는 방법

const obj = {
        a:100,
        b:200,
        c:"javascript"
    }
    console.log(obj.a);
    console.log(obj.b);
    console.log(obj.c);
더보기

100
200
javascrpt

 

객체의 속성 값에 직접 접근하는 방법 중 하나로, 객체 이름 뒤에 .(온점)을 찍고 접근하고자 하는 속성의 이름을 작성한다.

 


 

객체 : 데이터 불러오기 (Object)

:객체 안에 있는 값을 object를 사용하여 불러오는 방법.

const obj = {
    a:100,
    b:200,
    c:"javascript"
}
console.log(Object.keys(obj));    
console.log(Object.values(obj));       
console.log(Object.entries(obj));
더보기

Object.keys(obj) : a, b, c
Object.values(obj): 100, 200, javascript
Object.entries(obj): ['a', 100] / ['b', 200] / ['c', 'javascript']

 

console.log(Object.keys(obj)); //객체의 키를 불러오는 문법

console.log(Object.values(obj)); //객체의 값을 불러오는 문법

console.log(Object.entries(obj)); //객체의 배열 자체를 불러오는 문법

 

 

 

객체 : 데이터 불러오기 : 변수를 통해 불러오기

:객체 안에 있는 값을 변수처럼 선언하여 불러오는 방법.

const obj = {
    a:100,
    b:200,
    c:"javascript"
}
const name1 = obj.a;
const name2 = obj.b;
const name3 = obj.c;

console.log(name1)
console.log(name2)
console.log(name3)
더보기

100
200
javascript

 

객체의 속성 이름을 변수에 저장하여 해당 변수를 이용해 속성에 접근하여 값을 불러올 수 있다.

obj 객채에 접근하여 안에 있는 a, b, c 각 속성의 값을 각각 name1, name2, name3 변수에 할당하고

각 변수의 값을 출력하는 방식이다.

obj.a에서 obj는 객체를 의미하고 a는 속성값을 의미한다.

 

 

 

객체 : 데이터 불러오기 (for in)

:객체 안에 있는 값을 for in 문을 통하여 불러오는 방법.

const obj = {
    a:100,
    b:200,
    c:"javascript"
}
for (let key in obj){
    console.log(key);
    console.log(obj[key]);
}
더보기

a
100
b
200
c
javascript

 

for in문은 객체 obj의 속성 이름을 순회하면서 각 속성 이름을 변수 key에 할당한다.

그리고 obj[key]를 사용하여 key에 해당하는 속성 값을 출력한다.

따라서 console.log(key)는 각 속성의 이름(a, b, c)을 출력하고,

console.log(obj[key])는 각 속성의 값(100, 200, "javascript")을 출력하게 된다.

 

 

 

객체 : 데이터 불러오기 (map( ))

:객체 안에 있는 값을 map()을 사용하여 불러오는 방법.

 const obj = [
    {a:100, b:200, c:"javascript"}
]
    obj.map((el) => {
        console.log(el.a)
        console.log(el.b)
        console.log(el.c)
    });
더보기

100
200
javascript

 

obj 배열은 하나의 객체를 요소로 가지고 있으므로, map() 메소드는 해당 객체를 매개변수 el로 받아서 각 속성의 값을 출력한다.

따라서 console.log(el.a)는 객체의 a 속성 값(100)을 출력하고, console.log(el.b)는 b 속성 값(200)을 출력하고,

console.log(el.c)는 c 속성 값("javascript")을 출력한다.

배열 안에 객체가 있어야만 map()을 사용할 수 있다.

배열이 없이 객체만 있다면 "Uncaught TypeError: obj.map is not a function"obj.map()이 함수가 아니라는 경고창이 표시되기 때문에

객체가 배열 안에 있는지를 주의하여 확인해야 한다.

 

 

 

객체 : 데이터 불러오기 (hasOwnproperty( ))

:객체 안에 있는 값을 hasOwnProperty()를 통해 확인하고 불러오는 방법.

 const obj = {
    a:100,
    b:200,
    c:"javascript"
}
console.log(obj.hasOwnProperty("a"));   //true
console.log(obj.hasOwnProperty("b"));   //true
console.log(obj.hasOwnProperty("c"));   //true
console.log(obj.hasOwnProperty("d"));   //false

console.log("a" in obj);        
console.log("b" in obj);
console.log("c" in obj);
console.log("d" in obj);
더보기

true
true
true
false

true
true
true
false

 

hasOwnProperty() 메소드(Method)는 객체가 특정 속성(데이터)의 유무를 검사하는 자바스크립트 내장 메소드이다.

해당 메소드는 객체에 직접 접근하여 사용할 수 있으며, 결과값은 true(일치하는 속성이 있을 시)나 false(일치하는 속성이 존재하지 않을 시)만을 반환한다.

hasOwnProperty()는 객체의 속성을 검사하지만, 다른 객체나 상속받은 속성은 검사하지 않는다.

객체의 속성을 정확하게 확인하는데 유용하다.

기본적으로는 console.log(obj.hasOwnProperty("검사할 속성의 이름"));의 형태를 가지지만,

console.log("검사할 속성의 이름" in obj);처럼 약식으로 표현할 수도 있다.

 

 

 

객체 : 데이터 불러오기 (객체 펼침연산자)

:객체 내의 속성들을 개별적인 값으로 분해하지 않고도 객체에 값을 추가하거나 덮어씌울 수 있다.

1. const obj = {
    a:100,
    b:200,
    c:"javascript"
}
const spread = {...obj}

console.log(spread.a);
console.log(spread.b);
console.log(spread.c);

2.  const obj = {
    a:100,
    b:200,
    c:"javascript"
}
const spread = {...obj, d:"react"}

console.log(spread.a);
console.log(spread.b);
console.log(spread.c);
console.log(spread.d);

3. const obj1 = {
    a:100,
    b:200
} 
const obj2 = {
    c:"javascript",
    d:"react"
} 

const spread = {...obj1, ...obj2}

console.log(spread.a);
console.log(spread.b);
console.log(spread.c);
console.log(spread.d);
더보기

1. 100, 200, javascript
2. 100, 200, javascript, react
3. 100, 200, javascript, react

 

자바스크립트의 새로운 기능 중 하나로, ...로 표현된다.

객체 펼침 연산자를 사용하면 객체 내의 속성들을 개별적인 값으로 분해하지 않도고 객체를 간단히 복제하거나,

새로운 객체를 만들 때 속성을 추가하고 덮어쓸 수 있다.

1. 객체 펼침연산자를 사용하여 obj 객체를 복사한 수 spread 변수에 할당하는 코드이다.

spread 변수는 obj 객체와 동일한 속성(a, b, c)를 가지고 있다.

2. obj 객체를 복제하고 d라는 새로운 속성을 추가한 후, 변수에 할당한다.

따라서 처음에 선언된 객체에 존재하지 않았던 d의 값이 출력된다.

3. 객체 펼침 연산자를 사용하여 obj1 객체와 obj2 객체를 합친 뒤 변수에 할당한다.

spread 변수는 obj1, obj2 객체의 모든 속성을 가지고 있다.

따라서 obj1에 할당되지 않았던 c값과 d값이 추가되어 출력되며, obj2에 할당되지 않았던 a값과 b값이 추가되어 출력된다.

 

객체 : 데이터 불러오기 (객체 구조분해할당)

:객체를 분해하여 개별적인 변수에 할당하는 것.

1. const obj = {
    a:100,
    b:200,
    c:"javascript"
}
const {a, b, c} = obj;

console.log(a);
console.log(b);
console.log(c);

console.log(x);         //undefind (키값을 그대로 써주어야 함)

2. const obj = {
    a:100,
    b:200,
    c:"javascript"
}
const {a:name1, b:name2, c:name3} = obj;

console.log(name1);
console.log(name2);
console.log(name3);
더보기

1. 100, 200, javascript
2. 100, 200, javascript

 

자바스크립트의 새로운 기능 중 하나로, 객체를 분해하여 개별적인 변수에 할당하는 것이다.

객체구조분해할당은 객체에서 필요한 속성들만 추출하여 변수에 할당할 때 유용하며,

코드의 가독성과 유지보수성을 높여준다는 장점이 있다.

객체의 속성들이 많아지면 개별 변수에 할당하는 것이 코드를 간결하게 만들기 때문이다.

또한 객체구조분해할당은 기본값을 설정할 수도 있다.

1. 객체에서 a, b, 속성을 추출하여 각각 a, b, c 변수에 할당한다.

따라서 console.log(a)는 100을 출력하고, console.log(b)는 200을, console.log(c)는 javascript를 출력한다.

2. 객체에서 a, b, c, 속성의 값을 각각 name1, name2, name3 상수에 할당한 뒤, console.log를 사용하여 상수의 값으로 출력한다.

 

 

 

 

 


 

 

 

 

 

 

  1. 자바스크립트가 자주 쓰이는 구문을 만들어 놓은 것. 함수와 같은 개념으로 생각하면 좋다. [본문으로]
728x90
반응형

 

for in

{ const arr = [100, 200, 300, 400, 500]
    for (let i in arr) {                            //1
        document.write(i); or document.write(arr[i]);
    }
}

for of 문과 다르게 객체의 키(자리값만 가져올 수 있다.)

document 이후에 i만 작성하면 키만 출력되나, arr[i]를 작성 시 키의 값이 출력된다.

for of 문으로는 키값만 출력할 수 있지만 for in은 document.write 이후에 어떻게 작성하느냐에 따라 자리값과 키값 모두를 출력할 수 있다.

 

1. arr 배열의 키를 출력한다는 구문이다.

 

 

 

 

swich

{
const num = 100;

switch(num) {
    case 90:
        document.write("실행90");
        break;
    case 80:
        document.write("실행80");
        break;
    case 70:
        document.write("실행70");
        break;
    case 60:
        document.write("실행60");
        break;
    case 50:
        document.write("실행50");
        break;
    default:
        document.write("0");
}
}

다중 if문과 같은 형식이다.

조건식 대신 변수 이름을 넣어준다.

swich문은 case와 값을 하나씩 비교하여 일치하는 case를 실행(출력) 시킨다.

if와 다르게 조건을 만족한 후에도 식이 종료되지 않으므로 꼭 break를 사용하여 끊어주어야 한다.

default는 어느 case와도 일치하는 값이 없을 때 출력된다.

default 에는 break문을 작성하지 않는다.

 

 

 

 

중첩 for문으로 구구단 만들기

for(let i=2; i<=9; i++){							//1
    document.write(i + "단","<br>");					//2

    for(let j=1; j<=9; j++){
        document.write(i + "X" + j + "=" + i*j);    //i(곱해지는 수) * j (곱하는 수)
        document.write("<br>");               		//3
    }

    document.write("<br><br>");         			//4
}

1. 구구단의 2단부터 9단까지 반복하는 for문.

2. "n단"을 출력한 뒤에 줄이 바뀜. ","로 n단과 줄바꿈 태그를 구분한다.

3. 곱해지는 1부터 9가 출력되는 for문이다. 곱해지는 수 i와 곱하는 수 j가 반복되며 출력된다.

"+"로 연결 연산되어 출력되며, 등호 옆에는 i와 j가 곱해진 값이 출력된다.

곱해진 값이 출력된 뒤에 줄바꿈 태그가 출력된다.

4. 두 for문이 전부 출력된 뒤에 줄 바꿈이 두 번 되는 태그이다.

 

 

 

 

수를 입력 받아 양수인지 음수인지 아니면 0인지 구분하기

const number = parseInt(prompt("숫자를 입력하세요"));

function a(n) {										//1
            if (n > 0) {										//2
                document.write(`${n}은 양수입니다.`);
            } else if (n < 0) {									//3
                document.write(`${n}은 음수입니다.`);
            } else {											//4
                document.write(`${n}은 0입니다.`);
            }
        }
                
                if(!isNaN(number)) {  									//5
                a(number);  											//6
                }

 

1. parselnt ( )를 변수로 저장하는 구문.

parseInt 함수는 문자열에서 숫자를 추출할 때 사용한다.

입력 받은 문자열을 실제 숫자값으로 바꾸어서 반환하는 함수이다.

 

2. 입력받은 수 n이 0보다 클 때 (양수일 때)를 구분하기 위해 n > 0이라는 조건을 준다.

 

3. 입력 받은 수 n이 0보다 작을 때 (음수일 때)를 구분하기 위해 n < 0 이라는 조건을 준다.

4. 입력 받은 수 n이 0보다 크지도 않고 작지도 않다면 0 밖에 남지 않는다. 

5. if 문을 하나 더 작성하여 입력 받은 것이 숫자인지 아닌지를 구분해 주어야 한다.

isNaN은 어떤 값이 NaN인지 판별하는 함수이다.

isNaN 앞에 !가 붙어있으므로 숫자가 아닌 것을 판단하도록 한다.

여기서 NaN은 Not-A-Number(숫자가 아님)을 뜻한다.

6. parseInt 함수 이름인 a를 작성하여 함수가 출력되도록 한다.

 

 

 

 

두 수를 입력 받아 최대 공약수 구하기

function a (n, m) { 		            	 //1
  let max = n > m ? n : m;                  //2
  let a = 0;            	                  //3
  for (let i = 1; i <= max; i++) {          //4
    if (n % i === 0 && m % i === 0) {       //5

      a = i;   // 최대공약수              	//6
    }
  }
  return a;                               	//7
}

document.write(`308과 20의 최대공약수 : ${getGCD(308, 20)}`);
document.write(`45과 38의 최대공약수 : ${getGCD(45, 38)}`);

1. 최대 공약수를 구하기 위해서는 두 수가 필요하므로 여러 개의 함수를 작성할 수 있는 매개변수 함수를 작성해준다.

2. 둘 중에 더 큰 수를 max 값으로 두어야 하기 때문에 삼항 연산자를 사용하여 입력 받은 두 수 n과 m 중에  더 큰 수를 max 값에 저장해준다.

3.  최대 공약수를 출력할 변수를 하나 더 선언해준다.

4. for 문을 사용하여 max 값까지 반복하는 구문을 작성한다.

5. i가 n을 나누어도, m을 나누어도 0이 되어야 하기 때문에 동시에 같은 조건을 만족해야 하므로 &&(and 연산자)를 작성해준다.

6. n과 m 둘 모두를 나누어도 0이 되는 수를 만족한 i 값을 최대 공약수를 구하기 위해 선언한 변수에 넣어준다.

7. 리턴값 함수로 구해진 a의 값을 반환해준다.

 

 

 

 

 

 

728x90
반응형

 

01. map ( )

:콜백함수를 실행한 결과를 가지고 새로운 배열을 만들 때 사용한다.

모든 배열의 값에 함수를 실행하는 메서드 (Method)이다.

만약에 배열 안의 모든 값에 숫자를 추가하고 싶다면 map( )을 사용하여 추가할 수 있다.

forEach와 같은 구문이다.

 

 { const num = [100, 200, 300, 400, 500]
    num.map(function(el, i, a){
        document.write(el,"<br>")
        document.write(i,"<br>")
        document.write(a,"<br>")
        
    });
    const mapNum  = el;
    
    document.write(mapNum,"<br>")
}
더보기

100(el)

0 (i)

100,200,300,400,500 (a)

200 (el)

1 (i)

100,200,300,400,500 (a)

300 (el)

2 (i)

100,200,300,400,500 (a)

400 (el)

3 (i)

100,200,300,400,500 (a)

500 (el)

4 (i)

100,200,300,400,500 (a)

 

 

 

 

02. 익명 함수

: 함수에 변수 데이터를 저장하여 변수를 마치 함수처럼 사용할 수 있도록 한다.

{
const func = function( ) {								//1
    document.write("실행되었습니다(2)");				//2
    }
 func( );												//3
}

 

1. const로 변수를 선언하고 변수 이름을 func로 설정해야 하며, 등호를 작성한다.

등호 뒤에는 function이 먼저 오지 않고 func = 뒤에 와야 한다.

 

2. 선언적 함수처럼 document.write( ) 안에 출력될 값을 작성해준다.

 

3. 익명 함수의 호출은 변수 선언 이후에 호출 해야한다.

 

 

 

03. 리턴 값 함수 (return 값 함수)

{
function func( ) {									//1
    const str = "함수가 실행되었습니다";				//2
    return str;										//3
    }
document.write(func( ));							//4
}

 

1. 선언적 함수처럼 fuction 뒤에 func(함수 이름)이 온다.

 

2. 익명 함수와 매개변수 함수처럼 변수를 선언하고 변수 이름을 str로 선언한 뒤, 변수 안에 화면에 출력될 값을 넣어준다.

 

3. return을 선언하고 변수 이름을 작성한다.

 

4. 출력문 뒤에 실행문을 적어주지 않고 출력문 "안에" 실행문을 작성한다.

 

 

 

04. while 문

:반복문의 일종으로 for문과 유사한 형태를 가지고 있다.

{
let num = 0;						//1

while(num<5) {						//2
    num++;                          //3
    document.write(num);     
}
}

:while문은 조건부터 체크한 후 조건이 참인 동안 문장을 반복하는 반복문이다.

조건이 거짓이라면 단 한 번도 실행되지 않을 수도 있다.

 

 

1. for문처럼 변수를 먼저 선언한다.

 

2. while문의 ( )소괄호 안에 조건식을 작성한다. num<5라는 것은 5보다 작은 수까지 출력하겠다는 것.

즉, 4까지 출력하는 조건식이다.

 

3. 반드시 출력문 (document.write) "이후"에 증가식을 작성하여야 함.

출력문 이전에 증가식을 작성하면 값이 증가된 상태에서 출력되기 때문에 원하는대로 출력되지 않을 가능성이 있다.

 

 

 

05. for of 문

:반복 가능 자료에서 사용되는 반복문이다.

문자열이나 배열과 같은 반복 가능한 자료에서만 사용할 수 있다.

 

 {
    const arr = [100, 200, 300, 400, 500];
            
    for(let i of arr) {                                 //타겟, 대상을 정해준 다음 그 값을 i라고 선언하는 것.
        document.write(i,",");
    }
}

 

: 출력해야 할 타겟(대상)을 정하여 변수로 선언해주어야 하며, 출력문에는 배열 이름이 아닌 선언한 변수 이름을 넣어주어야 한다.

배열 안의 값만 출력할 수 있다.

 

 

 

 

 

728x90
반응형

문제 01. 다음의 출력값을 보고 빈 칸을 채우시오.

{
    var x = 100; 
    var y = 200; 
    var z = "javascript"; 

    console.log(__);
    console.log(__);
    console.log(__);

    //100
    //200
    //300
}
더보기

작성한 답

: x / y / z

 

※ 문제 끝까지 잘 읽기.

z에 저장된 것은 "javascript"이므로 답은 z가 아니라  x + y 이다.

 

A : 

▶ x

▶ y

▶ x + y

 

 

 

문제 04. 다음의 출력값을 보고 빈 칸을 채우시오.

{
    const arr = ________();   

    arr[0] = 100;               
    arr[1] = 200;               
    arr[2] = "javascript";     

    console.log(arr[0]);
    console.log(arr[1]);
    console.log(arr[2]);

    //100
    //200
    //javascript
}
더보기

작성한 답

: New Array

 

※배열 선언은 'N'ew Array가 아니라 new 'A'rray이다.

new에 대문자를 작성하지 않고 Array 첫 글자에만 대문자로 작성한다.

 

A :

new Array

 

 

 

문제 08. 다음의 출력값을 보고 빈 칸을 채우시오.

{
    const obj = {____________________};

    console.log(obj.a);
    console.log(obj.b);
    console.log(obj.c);

    //100
    //200
    //javascript
}
더보기

작성한 답

: a = 100, b = 200, c = "javascript"

 

※ 각각 선언하는 것이 아니므로 '='를 작성하지 않고 : 로  작성한다.

또한, 세미콜론(;)으로 끊어주지 않고 , 로 구분하며 중괄호 끝에 세미콜론을(;) 작성한다.

 

 

A :

a:100, b:200, c:300

 

 

 

문제 11. 다음의 출력값을 보고 빈 칸을 채우시오.

{
    const a = 100;
    const b = 200;
    const c = "javascript";

    const obj = { _________ }

    document.write(obj.a);
    document.write(obj.b);
    document.write(obj.c);

    //100
    //200
    //javascript
}
더보기

작성한 답

: a = 100, b = 200, c = "javascript"

 

※ 이미 값이 선언되어 있으므로 또 값을 선언하지 않고 a, b, c만 작성한다.

const (상수)이기 때문에 중복 선언시 오류가 발생한다.

 

A :

a, b, c

 

 

 

문제 12. 다음의 출력값을 보고 빈 칸을 채우시오. 

(틀린 문제는 아니지만 this를 제대로 알고 있지 않았으므로 오답노트 작성)

{
    const obj = {
        a: 100,
        b: [200, ____],
        c: "javascript",
        d: _________(){
            document.write("javascript가 실행되었습니다.");
        },
        e: function(){
            document.write( _______ + "가 실행되었습니다.");    //변수값 사용
        },
        f: function(){
            document.write( _______ + "가 실행되었습니다.");    //this를 사용
        }
    }

    document.write(obj.a);
    document.write(obj.b);
    document.write(obj.b[0]);
    document.write(obj.b[1]);
    document.write(obj.c);
    obj.d();
    obj.e();
    obj.f();

    //100
    //200,300
    //200
    //300
    //javascript
    //javascript가 실행되었습니다.
    //javascript가 실행되었습니다.
    //javascript가 실행되었습니다.
}
더보기

※ this로 값을 불러오기 위해서는 this 뒤에 : 나 ,가 아니라 .(온점)이 와야 한다.

배열이나 객체에 값을 불러올 때 . (온점)을 쓰듯이 this로 값을 불러올 때에는 반드시 . (온점)을 작성한다.

 

A: 

300

function

obj.c

this.c

728x90
반응형

 

 

 

forEach

:배열에서만 사용 가능한 반복문.

요소값, 인덱스값(배열의 자리값), 배열을 불러올 수 있다는 특징이 있다.

화살표 함수로 요약해서 표현도 가능하며, 반복실행문을 작성할 필요 없이 배열 안의 데이터를 전부 불러올 수 있다.

forEach 배열의 요소를 가져와서 함수를 실행해야 할 때, 배열 안에 저장된 데이터가 많을 때 등의 상황에서 사용한다.

 

{ 
const num = [100, 200, 300, 400, 500];
num.forEach(function(element, index, array) {
    document.write(element,"<br>");
    document.write(index,"<br>");
    document.write(array,"<br>");
    }) 
}

 

forEach는 메서드(method)라고 하여 자주 사용하는 부분들을 자바스크립트가 만들어 놓는 것으로, 함수와 같은 개념으로 생각하는 것이 좋다.

 

 

 

for of

:문자열이나 배열과 같은 반복 가능한 자료에서 사용하는 반복문으로, arr 안에 배열 값이 있는 동안 계속 반복된다.

(변수 of  배열 이름)의 형식을 가지고 있고, 출력해야 할 타겟을 정해 i라고 선언해주어야 한다.

배열 안의 값을 불러올 수 있다.

 

const arr = [100, 200, 300, 400, 500];
            
    for(let i of arr) {                       
        document.write(i,",");
    }

 

 

 

for in

:배열 안의 값을 가져오는 for of와 다르게 for in은 객체의 키만 가져올 수 있으므로 해당 키의 값에 접근하려면 arr[i]처럼 대괄호를 사용해야 한다.

for of처럼 출력문 안에 i만 작성 시에는 배열 안의 값이 출력되지 않고 index 값, 즉 자리값(키)만 출력된다.

객체의 키와 값을 불러오기 위해 만든 반복문이다.

 

const arr = [100, 200, 300, 400, 500]
    for (let i in arr) {                            //index, 즉 자리값이 출력됨.
        document.write(i); or document.write(arr[i]);  		//전자 작성시 키 출력, 후자 작성시 값 출력
    }

 

 

 

map( )

:역시 메서드 함수이다.

map( )은 배열 안의 데이터를 다시 배열로 만드는 것으로 배열 내의 각각의 모든 요소에 대하여 주어진 값을 출력한 결과를 모아 새로운 배열을 반환한다.

forEach문으로 element, index, array를 불러온 것과 같은 값을 출력한다.

 

const num = [100, 200, 300, 400, 500]
    num.map(function(el, i, a){
        document.write(el,"")
        document.write(i,"")
        document.write(a,"")
        
    });
    const mapNum  = el;
    
    document.write(mapNum,"<br>");
728x90
반응형

Grid

:grid layout은 비교적 직관적이어서 다른 레이아웃보다 사전 지식이 덜 필요하다.

1차원적인 flex 방식과 다르게 2차원적인 grid는 컨테이너의 반응 방향(가로, 세로)을 각각 지정할 수 있어 더 다양한 배치와 정렬이 가능하다.

또한 미리 정의된 레이아웃 grid에 자식 요소를 배치할 수 있어서 유연하게 레이아웃을 정의할 수 있다.

 

display: grid;

grid로 레이아웃을 정의할 때 사용하는 구문.

 

grid 속성을 주면 자식 요소들은 block 속성을 가지게 된다.

lnline-grid 속성을 주면 inline 속성이 된다.

 

 

 

grid-template-rows

:행을 추가하고, 구분된 행(세로/heghit)의 크기를 정의한다. 

라인(Line)의 이름도 정의할 수 있다.

그러나 각 라인은 갯수대로 숫자(양수 or 음수)라인 이름이 자동으로 지정되어 있다.

그렇기 때문에 굳이 라인 이름을 정의할 필요는 없다.

그리드에서는 트랙이라고도 부름.

함수를 사용할 수 있다.

 

grid-template-rows: 100px 200px 480px;

 

 

 

grid-template-colums

:열을 추가하고, 구분된 열(가로/너비/width)의 크기를 정의한다.

grid-template-rows와 같이 라인의 이름도 정의할 수 있으며, 함수를 사용할 수 있다.

 

grid-template-columns: 600px 600px;

 

 

 

grid-template-areas

:지정된 그리드 영역 이름을 참조해 그리드 템플릿을 생성하고 각 컨테이너의 위치를 정의한다.

그리드 영역 이름은 grid item 즉, body 영역에 있는 요소들에게 주어야 하는 속성이다.

 

 

열과 행을 따라  그리드 영역을 지정해주어야 한다.

위와 같은 grid 레이아웃을 만드려면 aside는 하나만 들어가지 않고, 3번 들어간다.

article이 3개 있기 때문에 aside 영역도 하나만 주지 않고 3번 전부 주어야 한다.

 

ex)

 grid-template-areas: 
            "header header"
            "nav nav"
            "aside article1"
            "aside article2"
            "aside article3"
            "footer footer"
            ;

 

 

 

grid-row-gap

:각 열과 열 사이의 간격을 지정하는 속성.

그리드 선의 크기를 지정한다고 표현할 수도 있다.

grid-row-gap : 16px;

 

 

 

 

grid-column-gap

:각 행과 행 사이의 간격을 지정하는 속성.

grid-column-gap: 16px;

 

 

 

 

grid-gap

:각 행과 행 사이, 열과 열 사이의 간격을 한꺼번에 지정하는 속성.

grid 라인의 두께를 지정해주는 것이라고 생각해도 된다.

이 속성은 컨테이너에게 지정한다.

grid-gap: 16px 16px;

 

 

 

 

grid-auto-rows

:암시적인 열 크기를 정의하는 속성.

grid-template-rows를 지정하지 않은 요소들의 열의 크기를 암시적으로 정의한다.

grid-auto-rows: 100px;

 

 

 

grid-auto-columns

:암시적인 행 크기를 정의하는 속성.

grid-template-columns를 지정하지 않은 요소들의 열의 크기를 암시적으로 정의한다.

grid-auto-columns: 100px;

 

 

 

grid-auto-flow

:배치되지 않은 요소를 어떤 방식으로 자동 배치할 지 정의하는 속성.

속성값 설명
row 각 열 축을 따라 차례로 배치
column 각 행 축을 따라 차례로 배치
row dense 각 열 축을 따라 차례로 배치하여 빈 영역을 메우는 것
column dense 각 행 축을 따라 차례로 배치하여 빈 영역을 메우는 것

 

grid-auto-flow: row / row dense / dense;

 

 

 

grid-row(or column)-start

:grid 요소들을 배치하기 위해 grid 영역이 시작할 가장자리를 지정하여 위치를 지정하는 속성.

숫자로 지정하거나, 선 이름으로 지정하거나 span 키워드를 통해 지정한다.

grid-row-start: 1;

 

 

 

grid-row(columns)-end

:grid 요소들을 배치하기 위해 grid 영역이 끝날 위치를 지정하는 속성.

grid-row-end: 3;

 

 

 

 

 

 

728x90
반응형

 

 

 

flex

:요소들이 포함된 큰 박스에 flex를 선언하고, 안에 있는 요소들에게 유연하게 배치하는 속성들을 부여하여 레이아웃 구조를 잡는 것.

 

ex)

display: flex;

flex로 레이아웃을 설계한다고 선언할 때 사용하는 구문.

 

 

 

flex-grow

:자식 요소의 수가 적거나 그 크기가 작아 공간이 남을 때 항목의 크기를 늘려 채워주는 방법을 정의하는 속성.

1을 사용하면 공간이 남아도 한 줄 가득 꽉 채울 수 있다.

속성 값 설명
0 기본 값
1 항목들이 모두 1이면 같은 크기
양수 -값을 높게 줄수록 더 늘어남
-공간이 부족할 때에는 어떤 값도 무의미함
flex-grow: 1;

 

 

 

flex-shrink

:자식 요소가 많거나 그 크기가 커서 공간이 부족할 때 항목의 크기를 줄여 채워주는 방법을 정의하는 속성.

기본값이 1이기 때문에 자식 요소는 기본적으로 좁아진다.

(공간이 넘쳐도 한 줄로 줄여서 채울 수 있다)

속성 값 설명
0 공간이 부족해도 항목의 크기를 줄일 수 X
1 기본 값으로, 자식 요소들이 많아서 컨테이너에서 넘치면 안 넘치게 알아서 좁아짐
양수  -값을 높게 줄수록 더 좁아짐. (수축지수가 자동 계산됨)
-공간이 남을 때에는 어떤 값을 주어도 무의미함.
flex-shrink: 1;

 

 

 

flex-basis

:자식 요소들의 초기 길이를 지정하는 속성

float과 다르게 width 속성을 주지 않고 flex-basis를 사용한다.

 

속성값 설명
auto 기본 값
n px 양수를 주어 원하는 가로의 크기를 부여함.
flex-basis: auto;

 

 

 

flex-direction

:자식 요소를 나열하는 방향을 지정하는 속성.

부모 요소에게 지정해주어야 한다.

속성값 설명
column 위에서 아래로 나열
column-reverse 아래에서 위로 나열
row 좌측에서 우측으로 나열 (기본 값)
row-reverse 우측에서 좌측으로 나열
flex-direction: column;

 

 

 

justify-content

:공간이 남을 때 (flex-grow: 0;)일 대 자식 요소들을 가로로 정렬하는 속성

속성값 설명
flex-start 시작쪽으로 정렬 (보통 왼쪽)
(flex-direction:row-reverse 일 때에는 오른쪽)
flex-end 끝쪽으로 정렬 (보통 오른쪽)
(flex-direction:row-reverse 일 때에는 왼쪽)
center 중앙 정렬 (가운데 정렬)
space-between 양쪽 정렬 (요소들의 사이를  찢어놓음)
space-around 요소 좌우 동일 간격
justify-content: space-between;

 

 

 

flex-wrap

:flex 자식 요소들의 줄바꿈 방식을 지정ㅇ하는 속성

속성값 설명
wrap 자식 요소들이 많으면 다음 줄로 넘침
nowrap 자식 요소들이 많아도 한 줄 안에 배치됨
wrap-reverse 자식 요소들이 많으면 다음 위 줄로 넘침
flex-wrap: wrap;

 

 

 

flex-flow

:flex-direction과 flex-wrap을 나란히 붙여 하나의 속성처럼 쓸 수 있다.

그렇기 때문에 flex-flow의 기본값은 flex-flow: row nowrap;이다.

 

flex-flow: row nowrap;

 

 

 

align-items

:자식 요소들을 세로로 정렬하는 속성

속성값 설명
flex-start 시작쪽으로 정렬 (보통 위쪽)
(flex-direction: column-reverse 일 때는 아래쪽)
flex-end 시작쪽으로 정렬 (보통 아래쪽)
(flex-direction: column-reverse 일 때는 위쪽)
center 세로 중앙 정렬
baseline 글자의 baseline을 기준으로 정렬
stretch 부모 요소의 세로 크기를 따라 확장됨
(기본값)
align-items: center;

 

 

 

order

:자식 요소들의 순서를 바꾸어주는 속성

몇 번째에 배치할지 순서를 지정해줍니다.

속성값 설명
0 순서를 바꾸지 않음 (기본값)
양수 원하는 순서를 지정
음수 좌측으로 자리를 바꾸는 횟수

 

<div style="order:1;"> </div>

 

 

 

align-self

:자식 요소 중 선택된 항목에 대해서만 세로로 다시 정렬하는 속성.

속성들은 align-items의 속성들과 같다.

 

align-self: flex-end;

 

 

 

align-content

:flex-wrap; 일 경우 여러 줄을 세로로 정렬하는 속성

속성들은 align-items의 속성들과 같다.

align-content: flex-start;

 

 

 

 

 

 

 

 

728x90
반응형

font-family

문자에 글꼴을 지정하는 속성

여러 단어이거나 한글 글꼴인 경우는 따음표로 감싸고 여러 개의 글꼴을 쉼표로 구분한다.

지정한 글꼴이 없을 경우 그 다음 글꼴로 지정할 수 있다.

font-family: "NexonLv1Gothic" sans-serif;

 

 

 

font-size

:문자의 크기를 지정하는 속성.

크기를 명시하지 않을 경우 16px이 기본 값이다.

 

 

px

:해상도에 따라 달라지는 기본 단위.

font-size: 16px;

 

 

%

:부모 요소의 글자 크기를 100% 기준으로 계산한 % 단위.

부모 요소의 글자 크기를 따로 지정하지 않았다면 16px이 100%가 된다.

font-size: 150%;

 

 

em

:부모 요소의 글자 크기를 100% 기준으로 계산한 100분의 1 단위.

보통 16px 정도가 1em이다.

font-size: 1.5em;

 

 

rem

:부모 요소가 아닌 최상위 요소의 크기를 100% 기준으로 계산한다.

rem의 r이 rooy, 즉 html 요소를 뜻한다.

html 요소에서 지정한 클자 크기가 1rem이 된다.

font-size: 1.5rem;

 

 

vw(view width), vh(view height)

: 각각 뷰포트[각주:1] 너비와 높이 값의 100분의 1 단위

(주로 반응형에서 자주 쓰인다)

font-size: 10vw;

 

 

 

font-weight

:문자를 굵게(진하게) 하거나 굵은 문자를 보통으로 재설정하는 속성

font-weight: bold;				//굵은(진하게) 문자로 설정할 때

font-weight: normal;			//굵은 문자를 보통 문자로 설정할 때

 

 

 

font-style

:문자를 기울어지게 하거나(이탤릭체) 기울어지지 않게 재설정하는 속성

font-style: italic; 				//기울어지게 설정할 때

font-style: normal;					//기울어진 문자를 재설정할 때

 

 

 

font-variant

:작은 문자를 대문자로 설정하거나 원래 문자로 재설정하는 속성

font-variant: small-caps;			//작은 문자 -> 대문자로 설정

font-variant: normal;				//원래대로 설정

 

 

 

line-height

:줄간격을 설정하는 속성

단위로는 px, %, em 등이 있다. [각주:2]

단위를 생략하면 em으로 처리된다.

line-height: 1.6;

 

 

 

font

:font~로 시작하는 속성들은 한 줄로 붙여쓸 수 있다.

붙여 쓰는 경우는 반드시 세 가지 순서에 맞추어 써야 하며, 글자 크기와 글꼴은 생략할 수 없다.

 

ex)

font: [font-weight, font-style, font-variant], [font-size/line-height], [font-family] ;
body {font: bold 20px/1.6,"NexonLv1Gothic";

 

 

 

웹폰트

:언제 어디서나 원하는 글꼴로 페이지가 표시되도록 하려면 웹폰트를 사용하는 것이 좋다.

 

 

@font-face

:글꼴 파일을 업르도하여 사용하는 방식이다.

파일의 용량이 크면 로딩되는 속도가 느리고, 용량이 적으면 글자가 뭉개져 보인다.

css 파일 제일 상단에 위치해야 한다.

@font-face {
    font-family: 'CookieRun';
    font-weight: 400;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/cookierun/CookieRunRegular.eot');
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/cookierun/CookieRunRegular.eot?#iefix') format('embedded-opentype'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/cookierun/CookieRunRegular.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/cookierun/CookieRunRegular.woff') format('woff'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/cookierun/CookieRunRegular.ttf') format("truetype");
    font-display: swap;
}

 

 

@import

css 파일 내에 @import를 이용하여 css를 연결하는 방식.

하나의 css 파일에 여러 개의 페이지 css를 로딩 시킨다.

 

@import url('https://webfontworld.github.io/SaenggeoJincheon/SaenggeoJincheon.css');

 

 

link

:html의 link 태그를 사용하는 css 연결 방식.

로딩 속도가 빠르고 css 파일 여러 개를 link 방식으로 연결하여 페이지를 로딩하여도 속도가 빠르다.

<link href="https://webfontworld.github.io/SaenggeoJincheon/SaenggeoJincheon.css" rel="stylesheet">

 

 

 

color

글자의 색상을 지정하는 속성.

color: yellow

 

 

색상 표현법

 

색상명

:해당 색상을 의미하는 고유 명사를 속성 값으로 사용한다.

색상값을 의미하는 단어를 미리 알고 있지 않으면 사용할 수 없다.

color: blue;
backgroung: red; 					//배경색
border-color: green;					//테두리색

 

HEX값

:빛의 삼원색 (빨강, 파랑, 초록)을 16진수 00~ff의 수치로 표현하는 것.

# 다음에 00~ff까지의 6글자가 온다.

color: #00ff00;

 

RGB 값

:RGB 형태로 기술하며, 10진수 0~255 사이의 수치로 표현한다.

color: rgb(255,128,0);

 

HSL 값

:hsl 형태로 기술하며, 색상은 0~360의 색 상환값, 채도(saturation)과 명도(lightness)는 % 값으로 표현한다.

color: hsl(300, 100%, 50%);

 

RGBA 값

:rgba 형태로 기술하며 a는 (alpha)를 의미한다.

alpha는 0~1 사이의 숫자를 사용하여  투명도를 나타낸다.

color: rgba(0, 0, 0, 0.2);

 

HSLA 값

:hsla 형태로 기술한다.

rgba와 같이 a는 alpha(투명도)를 의미하며, 0~1 사이로 수로 표현한다.

color: hsla(0, 100%, 100%, 0.5)

 

 

 

letter-spacing(글자 간의 간격), word-spacing(단어 사이의 간격)

:음수를 부여하면 원래 글자 간의 간격이 넓은 글꼴인 경우에도 글자 사이를 밀착시킬 수 있다.

 

letter-spacing: -px;				//글자 사이 간격

wold-spacing: 10px;				//단어 사이 간격

 

 

 

text-decoration

:글자에 밑줄, 윗줄, 가운데줄(취소선)을 치거나, 쳤던 줄을 없애준다.

 

속성 설명
underline 밑줄
overline 윗줄
line-throught 가운데줄 (취소선)
none 줄 없음

 

text-decoration: none;

 

 

 

tetx-transform

:대소문자 변경을 실행한다.

 

속성 값 설명
uppercase 대문자
lowercase 소문자
capitalize 첫 글자만 대문자

 

tetx-transform: capitallize;

 

 

 

text-shadow

:글자에 그림자를 주는 속성

 

형식

text-shadow: 그림자가 원본에서 떨어지는 가로 거리, 세로 거리, 흐릿하게 퍼지는 정도, 그림자의 색상
text-shadow: 2px 3px 5px rgba(0, 0, 0, 0.4);

 

 

 

 

 

 

 

  1. 현재 화면에서 사용자에게 보여지고 있는 영역 [본문으로]
  2. 이 역시 부모 요소의 font-size를 기준으로 한다. [본문으로]
728x90
반응형

 

 

 

function a (n, m) {     		            	 		 //1
  let max = n > m ? n : m;                  		  //2
  let a = 0;                             			 //3
  for (let i = 1; i <= max; i++) {          		 //4
    if (n % i === 0 && m % i === 0) {       		//5

      a = i;							           	//6
    }
  }
  return a;                               			//7

document.write(`308과 20의 최대공약수 : ${getGCD(308, 20)}`);
document.write(`45과 38의 최대공약수 : ${getGCD(45, 38)}`);

 

 

1. 변수가 두 개 필요하므로 매개변수 함수 작성

2. 입력받은 두 수 중에 큰 값을 max 값으로 정해줌.

3. 최대공약수를 구할 변수를 선언해줌.

4. 입력 받은 두 수 중 더 큰 값까지 식을 반복시키는 반복문 작성.

5. i로 n과 m을 나누었을 때 모두 나누어 떨어져야 하므로 && (and 연산자) 작성.

6. 둘 다 나누어 떨어지는 i가 최대 공약수가 됨.

7. 리턴문으로 최대 공약수를 불러옴.

 

 

 

728x90
반응형

·

function isPositive(n) {
            if (n > 0) {									  //1
                alert(`${n}은 양수입니다.`);					 //2
            } else if (n < 0) {								 //3
                alert(`${n}은 음수입니다.`);					//4
            } else {
                alert(`${n}은 0입니다.`);					//5
            }
        }
                const number = parseInt(prompt('숫자를 입력하세요.'));   
         
                if(!isNaN(number)) {						//6
                isPositive(number);  						//7
                }

 

1.  여러 조건을 한꺼번에 검사하기 위해 다중 if문을 사용

2. 양수를 구분하기 위해 조건식을 걸어줌. 0보다 크면 양수이기 때문에 양수로 작성

3. 음수를 구분하기 위해 조건식을 걸어줌.

4. 0보다 작으면 음수이기 때문에 음수 작성

5.그 어느 쪽에도 해당하지 않으면 0이므로 0 작성

6. not 연산자를 사용해 NaN이 아닌 값을 출력하라는 조건을 걸어줌

7. 함수 출력문 작성

 

 

▶ parseInt()

: 함수를 사용하는 주요 목적은 문자열에서 숫자를 추출하기 위함입니다. 이 함수는 입력받은 문자열을 실제 숫자값으로 바꾸어 반환.

 

▶ isNaN()

:매개변수가 숫자인지 검사하는 함수입니다.(NaN은 Not a Number입니다.)

 

 

 

 

 

 

parselnt() : https://sisiblog.tistory.com/243

isNaN(): https://www.codingfactory.net/10383

 

[javascript] 자바스크립트 parseInt 사용 방법 (문자열을 숫자로 변환)

참고: https://www.freecodecamp.org/news/parseint-in-javascript-js-string-to-int-example/ 이 튜토리얼에서는 javascript 함수 parseInt()에 대해 설명하겠습니다. 이 parseInt() 함수는 문자열을 파싱해서 숫자나 NaN(Not a Number

sisiblog.tistory.com

 

728x90
반응형

if 문

가장 기본적인 조건문으로 0을 제외한 모든 숫자와 문자를 조건식에 넣으면 전부 참(true)인 결과를 출력한다.

빈 배열 [ ]을 넣어도 결과는 true가 된다.

데이터에 값이 없으면 false가 된다.

0 외에도 거짓(false)가 되는 것들로는 null, undefiend, false(불린), " "(빈 문자열)이 있다.

 

형식

if (조건식) {
     실행문
}

 

ex)

if(0) {
document.write("실행되었습니다 (true)");
} else {
document.write("실행되었습니다 (false)");
}  			//조건식에 0을 넣었으므로 이 예제의 결과는 false가 된다.
더보기

실행되었습니다 (false)

 

 

if문 생략

if문을 생략하여 간결한 코드를 작성하는 것을 조건 표현식이라고 한다.

조건 표현식이  if를 대체할 수는 없으므로 간단한 코드인 경우에 한하여 사용하는 것이 좋다.

간단한 조건 검사후, 반환값을 바로 대입하여 한 줄로 표현할 수 있다.

 

ex)

if(num) document.write("실행되었습니다(ture)")
    else document.write("실행되었습니다(false)")
더보기

실행되었습니다 (true)

 

 

삼항 연산자

세 항으로 줄였기 때문에 삼항 연산자라고 부른다. (조건 연산자라고도 함.)

기존 if문이 실행문을 두 번 읽어들이기 때문에 식이 길어질수록 결괏값 출력이 느리고 데이터의 용량 차지가 크다는 단점을 보완하여 나오게 되었다.

첫번째 실행문만 읽어들여 결괏값의 출력이 빠르고 효율적이라는 장점이 있다.

 

형식

조건 ? 참(true)인 경우의 if 값 :  거짓(false)인 경우의 if 값;

 

ex)

(num == 100) ? document.write("True") : document.write("false");
더보기

True

 

 

 

다중 if 문

여러 개의 조건문(if)를 사용하여 여러 조건을 검사할 수 있기 때문에 복잡한 조건문을 처리할 수 있다.

 

 

형식

if (조건식1)   {
    if(조건식2)   {
   실행문;
     }
}

ex)

const num = 100;
     if(num === 90) {
         document.write("실행되었습니다(num == 90)");
     } else if(num === 100) {
         document.write("실행되었습니다(num == 100)");
     } else if(num === 110) {
         document.write("실행되었습니다(num == 110)");
     } else if(num === 120) {
         document.write("실행되었습니다(num == 120)");
     } else {
         document.write("실행되었습니다");
     }
더보기

실행되었습니다(num == 100)

 

등호 (=) 2개는 값만 같으면 true(참)으로 인식하지만 3개(===)는 데이터 타입도 같아야 참(ture)이 된다.

값이 문자(ex. "100")인지 숫자(100)인지도 구분한다는 것이다.

그렇기에 같은 100이라도 데이터 타입이 다르면 false로 인식한다.

결괏값이 정확하고 한 치의 오차도 없기를 바란다면 ===를 쓰는 것이 좋다.

 

 

 

중첩 if문 

:조건문(if) 안에 또 다른 조건문 (if)를 포함하여 더욱 복잡한 조건을 만족시킬 때 사용한다.

겉에 있는 조건문과 안에 포함 된 조건문이 모두 참(ture)일 때 실행문이 출력된다.

조건1은 일치하더라도 조건 2가 일치하지 않으면 실행되지 않는다.

가독성이 떨어지고 복잡하기 때문에 꼭 필요한 경우에만 사용하는 것이 좋다.

 

형식

if (조건1) {
    if (조건2) {
         조건 1과 조건 2가 모두 참(true)일 때 실행되는 명령
          }
  }

 

ex)

 const num = 100;
    if(num == 100) {
        document.write("실행되었습니다(1)");
        if(num == 100) {
            document.write("실행되었습니다(2)");
        } 
            if(num == 100) {
                document.write("실행되었습니다(3)");
        } 
    }  else {
        document.write("실행되었습니다(4)");
    }
더보기

실행되었습니다(1)

실행되었습니다(2)

실행되었습니다(3)

 

 

 

swich문

: 다중 if문과 같은 형식이지만 else if 대신 case를 사용한다.

case와 값을 하나씩 비교하여 일치하는 case를 실행(출력) 시킨다.

조건이 일치하면 종료되는 if문과는 다르게 조건 만족 후에도 식이 종료되지 않으므로 break를 사용하여 식을 중지시켜 주어야 한다.

 

 

형식

swich (값) {
    case 값1  : 
      실행문;
      break;
   case 값2  : 
      실행문;
      break;
   default :
      실행문
}

ex)

const num = 100;

switch(num) {
    case 90:
        document.write("실행90");
        break;
    case 80:
        document.write("실행80");
        break;
    case 70:
        document.write("실행70");
        break;
    case 60:
        document.write("실행60");
        break;
    case 50:
        document.write("실행50");
        break;
    default:
        document.write("0");
}

default (기본값)은  case와 일치하는 값이 없을 때 출력된다.

 

 

 

 

while문

: 조건부터 체크한 후 조건이 참(true)인 동안 반복한다.

조건이 false라면 실행문은 단 한번도 실행되지 않을 수도 있다.

증감식의 위치에 따라 값이 바뀐다.

 

형식

초기 값
while (조건식) {
       실행문;
       증감식;
}

 

ex)

let num = 0;

while(num<5) {
    num++;                          //1
    document.write(num);            //2
}

출력문 다음(2번 위치)에 증감식이 오면 증감 되지 않은 상태에서 출력되어 0부터 시작하고,

출력문 이전(1번 위치)에 증감식이 오면 증감 되지 않은 상태에서 출력되어 1부터 시작하게 된다.

 

 

 

do while문

:초기 값이나 반복 횟수 없이 조건만 주어졌을 때 주로 사용한다.

while문과 다르게 일단 결과를 출력하고 나서 조건을 체크하므로  while문이었으면 결과값이 출력되지 않았을 식을 작성하여도 결괏값이 일단 한 번은 출력된다.

do를 먼저 실행하기 때문에 첫 번째 실행은 조건에 상관이 없기 때문이다.

또한 do while문은 조건식을 뒤에 작성한다.

while문과 같이 증감식의 위치에 따라 결과값이 달라진다.

 

형식

초기 값
do {
          실행문;
          증감식;
}   while (조건식)

ex)

let num2 = 0;
do{
    document.write(num2);
    num2++;
} while(num2<5);

 

 

 

 

for문

:조건이 참이 동안 계속 반복된 동작을 수행한다.

초기값이 증감식에 따라 변하면서 조건값을 만족시킬 때까지 반복 수행을 지속하며, 조건이 만족되고 나면 자동으로 식이 종료된다.

for문은 증감식에 따라 초기값이 계속 변화하므로 let으로 선언해주어야 한다.

 

형식

for (초기 값; 조건식; 증감식;)   {
         실행문;
}

ex)

for(let i=; i<=50; i++) {
    document.write(i)
}
더보기

1, 2, 3, 4, 5 · · · · · 50

 

 

중첩 for문

:반복문 안에 새로운 반복문이 들어가 있는 것으로, 겉에 있는(감싸안은) for문이 1번 실행될 때마다 안에 있는(감싸 안겨진)for문은 모든 반복을 실행한다.

안의 for문의 동작이 완료되면 다시 겉에 있는 for문이 1번 반복하고, 안의 for문이 모든 반복을 실행하는 동작이 반복되는 것이다.

 

형식

for (초기 값; 조건식; 증감식;)   {
         실행문;
} for (초기 값; 조건식; 증감식;)   {
         실행문;
}

 

ex)

for(let i=2; i<=9; i++){
    document.write(i + "단","<br>");

    for(let j=1; j<=9; j++){
        document.write(i + "X" + j + "=" + i*j);    //i(곱해지는 수) * j (곱하는 수)
        document.write("<br>");               		//가독성을 위하여 줄바꿈 태그를 추가함.
    }

    document.write("<br><br>");        			 //각 숫자의 단이 깔끔하게 정리되기 위하여 줄바꿈 태그를 추가함.
}

 

더보기

2단
2X1=2
2X2=4
2X3=6
2X4=8
2X5=10
2X6=12
2X7=14
2X8=16
2X9=18
·····
9단
9X1=9
9X2=18
9X3=27
9X4=36
9X5=45
9X6=54
9X7=63
9X8=72
9X9=81

 

 

 

 

break 문

:현재 실행문을 중지 시키고 다음 실행문으로 넘어가게 하는 중지문이다.

반복문은 지정한 횟수만큼 명령을 반복하지만, break문을 사용하면 반복문을 중간에 끝내게 하여 식이 조건을 만족하여 알아서 종결되는 것이 아니라 break문에 의해 반복문을 끊어버리는 것이다.

 

 

형식

break;

 

ex)

for(let i=1; i<100; i++){
    document.write(i)
    if(i == 50) {
        break;
    }
더보기

1, 2, 3, 4, 5 ····· 50

이 식은 1부터 100까지 출력해야 하는 반복문이지만 break문을 사용하므로 50까지만 반복하고 식이 종결되어버린 것이다.

 

 

 

coutinue 문

:조건을 만족하면 실행하던 반복 문장을 건너뛰는 건너뛰기 문이다.

조건에 해당되는 값을 만났을 때 실행하던 반복 문장을 건너 뛰고 반복문의 맨 앞으로 되돌아가 다음 반복 과정으로 넘어가도록 한다.

반복과정을 한 차례 건너뛰는 것이기 때문에 조건에 해당하는 값이 출력되지 않는다.

continue문이 실행문 이후에 위치하면 건너뛰어지지 않고 실행되기 때문에 반드시 실행문 이전에 continue문을 작성하여야 한다.

 

형식

coutinue;

 

ex)

for(let i=1; i<10; i++){
    if(i == 10) {
        continue;
    }
document.write(i)
}
더보기

123456789

 

 

 

 

 

 

 

 

 

728x90
반응형

 

함수

: 프로그램에서 반복적으로 사용되는 기능별로 다양한 여러 개의 명령을 묶어놓은 코드들의 집합.

 

 

종류

분류 종류 설명
사용자 정의 함수 -선언적 함수
-익명 함수
프로그램에서 필요한 기능을 사용자가 직접 정의해서 사용하는 함수
내장 함수 -인코딩, 디코딩 함수 
-숫자 판별 함수 
-유 · 무한 값 판별 함수
-숫자 변환 함수
-문자 변환 함수
-자바스크립트 코드 변경 함수
프로그램 개발에서 자주 사용되는 기능들을 자바스크립트 내부적으로 제공해주는 함수

 

 

 

함수의 선언과 호출

선언

: function이라는 예약어를 사용하여 함수 이름을 적은 후, 중괄호 { } 안에 실행할 여러 개의 명령을 묶어주는 것

function 함수명 ( ) {
      명령(들)
}

 

호출

: 미리 선언해 놓은 함수를 실행할 때 함수 이름을 사용하는 것.

함수명 (    )

 

 

 

선언적 함수

형식

:

function 함수  (   ) {
     실행문;
}

 

 

호출

:선언적 함수는 함수를 호출할 때 앞 또는 뒤에서 호출 가능함.

function 함수 ( ) {
      실행문;
}

 

ex)

좌 함수의 뒤에서 호출 우 함수의 앞에서 호출

변수나 함수를 선언하지 않고 호출하였을 때 에러가 발생하는 것이 맞지만,[각주:1] var로 선언한 변수와 선언적 함수는 선언 이전에 호출하여도 에러를 발생시키지 않음.

이를 호이스팅[각주:2]이라고 함.

 

 

 

익명 함수 

:변수에 함수 데이터를 저장하여 변수를 마치 함수처럼 사용할 수 있도록 만들어줌.

 

형식 

:

var or const 변수  =  function (  ) {
       실행문;
}

 

호출

: 선언적 변수와 다르게 반드시 변수 선언 이후에 호출해야 함.

var or const = function (   ) {
         console.log  or  document.write ('익명 함수');

};
function (  );  <= 아래에서 호출함.

 

ex)

 

 

익명 함수 중에는 필요에 따라 일회성으로 사용되는 함수가 존재. [각주:3]

선언과 동시에 함수가 실행되며, 함수명이 없기 때문에 재호출이 불가능함.

보통 처음 한 번만 실행하는 초기화 코드에 사용됨.

[각주:4]

 

 

 

매개변수 함수

:함수를 호출할 때  전달하는 변수를 가리키기도 하고, 함수를 선언할 때 외부에서 값을 받는 변수를 가리키는 말이기도 함.

흔히 'a는 b와 c 를 연결해주는 역할을 한다'는 뜻인 '매개체'를 생각하고 이해하는 것이 편함.

함수 이름 옆의 소괄호 ( ) 안에 매개변수 이름을 넣어주어 사용할 수 있으며, 이름을 붙이는 방법은 변수 이름을 붙이는 방법과 같음.

선언 된 함수에서만 사용하며, 여러 개의 매개변수를 나열할 때에는 "," (쉼표)로 구분함.

 

형식

:

function 함수명 (매개변수 1, 매개변수2 ·····) {
         실행문; 
        }

함수명 (매개변수1 값, 매개변수 2 값·····);

 

ex)

 

 

 

 

return 함수

:함수를 통해 처리된 결과를 반환시켜주는 명령어.

함수에서 실행한 후 결과까지 처리할 수도 있지만, 함수의 실행 결과를 받아 또 다시 처리해야 하는 경우도 많음.

이 경우, 함수의 실행 결과를 다시 함수를 실행한 시점으로 넘겨주어야 하는데 이것을 '함숫값을 반환한다'고 함.

함수의 결괏값을 반환할 때에는 return 다음에 넘겨줄 값이나 변수를 지정하면 됨.

 

 

형식

:

function 함수명(   ) {
       실행문;
       return;
}

 

ex)

 

 

 

화살표 함수

:ECMA Script (2015)에 추가된 내용으로  부등호(=>)를 이용하여 함수를 간결하게 표현할 때 사용.

function 키워드를 생략하고 합쳐진 부등호(=,>)을 합쳐 사용하며 항상 익명 함수 형식으로 표현함.

단일 명령문일 경우에는 함수의 중괄호 { }와 return을 생략할 수 있음.

 

ex)

 

좌 선언적 함수 (화살표ver) 우 익명함수 (화살표 ver)
좌 매개변수함수 (화살표ver) 우 리턴값 함수 (화살표 ver)

 

 

 

 

 

 

  1. 자바스크립트는 인터프리터 언어이기 때문에 보통은 순서대로 읽어들이기 때문에 선언하지 않고 호출하면 에러가 발생함. [본문으로]
  2. 끌어 올리기 [본문으로]
  3. 즉시 실행 함수 [본문으로]
  4. 형식은 

    (function (  ) {
          실행문;
    })  (   );

    이다.  보다시피 함수명이 존재하지 않음.

    [본문으로]

728x90
반응형

See the Pen 테이블 칸만큼 숫자 넣기 by WOO HYUN (@fiatlux__) on CodePen.

728x90
반응형

▶선택자 (Selector)

-CSS의 UI로 어느 부분을 디자인할지 표현할 대상이 되는 부분

-요소를 선택하는 방법

 

 

▶type 선택자

- html 문서의 태그 이름을 선택자로 사용할 수 있음

 

▷ type 선택자 (빨간 밑줄)을 사용하여 h1 (노란 밑줄) 태그 안의 글자들을 보라색으로 표시하도록 속성을 부여함.

 

 

▶id 선택자

-html 문서의 요소 중 같은 요소라도 각기 다른 이름을 지정하여 속성을 부여할 수 있음

-유일한 이름을 부여해야 함

-선택자 앞에 #을 붙어서 사용함.

 

 

 

 

▷id명을 각기 다른 태그에 각기 다른 이름으로 부여함(빨간색 밑줄)

▷#을 사용하여 속성을 부여함 (파란색 밑줄)

 

 

▶class 선택자

- html 문서의 여러 요소 중 같은 이름을 갖는 요소들만 따로 모아 속성을 부여함.

-같은 이름을 부여할 때에 사용.

-여러 개의 요소에 같은 class 명을 부여할 수 있음. (노란색 밑줄)

-하나의 요소에 여러 개의 class 명을 부여할 수도 있음

-선택자 앞에 .를 붙임

 

여러 개의 요소에 하나의 class를 부여한 모습

▷ 여러 개의 요소에 하나의 class 명을 부여한 모습

 

 

▷같은 class를 가진 모든 요소에 공통된 속성을 부여할 수 있음 (빨간색 밑줄)

 

 

▷하나의 요소에 여러 개의 class 명이 부여된 모습 (분홍색 밑줄 )

 

 

 

▶전체 선택자 (*)

-페이지의 모든 요소를 가리킴.

- * 로 표시함

-어떤 id명이나 어떤 class 명이 부여되었든 상관없이 속성을 적용함.

 

 

▶하위 선택자

-요소 내부에 있는 모든 해당 요소를 가리킴.

-선택자 사이를 공백으로 분리

 

 

 

▷첫번째 빨간색 밑줄에서 class 명 사이와 태그 사이가 공백으로 분리된 것을 확인할 수 있음.

▷class 선택자 밖에 있는 p 태그에 있는 글자는 속성이 부여되지 않은 것을 확인할 수 있음.

 

 

 

▶자식 선택자

-요소 내부에 있는 해당 요소를 가리킴

-그러나 하위 요소의 하위 요소는 가리키지 않음.

-선택자 사이를 " > "로 분리함

 

 

 

▷선택자 사이를 " > " 로 분리함 (빨간색 밑줄)

▷요소 내부에 있는 해당 요소 P들(노란색 밑줄)은 속성이 부여가 되었음.

▷그러나 하위 요소의 하위 요소인 P들(파란색 밑줄)은 똑같은 P 태그 임에도 속성이 부여되지 않은 것을 확인 가능.

 

 

 

▶인접 선택자

-현재 요소의 바로 뒤에 나오는 요소만을 가리킴

-선택자 사이를 " + "로 분리함.

 

▷선택자 사이를 "+"로 구분함

▷h1과 인접해있는 p 태그(파란색 밑줄)에는 속성이 부여되었음.

▷그러나 인접해있지 않은 p태그 (연두색 밑줄)에는 속성이 부여되지 않았음.

 

 

 

▶형제 선택자

-현재 요소와 같은 계층에 있는 요소만을 선택함

- " ~ "로 구분함

-인접해 있지 않고 멀리 있어도 같은 계층에 있다면 속성이 부여됨

 

▷선택자 사이가 " ~ "로 구분됨 (빨간 밑줄)

▷같은 계층에 있는 p 태그들(연두색 밑줄)은 속성이 부여됨

▷그러나 하위 계층에 있는 p 태그들 (노란색 밑줄)은 속성이 부여되지 않음

 

 

▶그룹 선택자

-여러 선택자들을 " , " (반점)으로 구분하여 함께 묶어 속성을 부여하는 것

 

 

▷선택자가 " , " (반점)으로 구분된 것을 확인할 수 있음.

▷그룹으로 묶인 h1 태그와 p 태그(노란색 밑줄)는 속성이 부여된 것을 확인할 수 있음

▷그룹으로 묶이지 않은 h2 태그 (파란색 밑줄)은 속성이 부여되지 않은 것을 확인할 수 있음.

 

▶속성 선택자

html 요소의 속성 유무 또는 속성 값을  [ ] 중괄호 안에 넣어 선택자로 사용 가능.

속성 값 설명
h1 [class] class 명을 가진 h1 요소
img [alt] alt 속성을 가진 img 요소
p [class="abc"] class 명이 유일하게 'abc'인 p 요소
p [class~="abc"] class명이 유일하게 'abc'이거나 여러 개의 class명 중 하나가 'abc'인 p 요소
p [class|="abc"] class명이 'abc'이거나 'abc~'로 시작하는 p 요소
p [class^="abc"] class명이 철자 'abc'로 시작하는 p 요소
p [class$="abc"] class 명이 철자 'abc'로 끝나는 p 요소
p [class*="abc"] class 명에 철자 'abc'가 포함되어 있는 요소
a  [href^="mailto"] href 속성값이 'mailto'로 시작하는 a요소

 

▶가상 클래스 선택자

: 링크가 걸린 문자에 스타일을 부여하는 것

 

속성 값 설명
 a: link 링크가 걸린 문자에 속성을 부여하는 선택자
a:visited 링크를 클릭하여 해당 페이지에 갔다가 돌아온 경우의 속성을 부여하는 선택자
a :hover 링크가 걸린 문자에 마우스가 닿았을 겨우의 속성을 부여하는 선택자
a:active 링크 걸린 글자가 활성화 되었을 경우의 속성을 부여하는 선택자
(클릭했다가 돌아왔거나 클릭하려다 만 경우)
a:focus 링크 걸린 글자에 포커스가 생길 경우의 속성을 부여하는 선택자
(키보드의 [Tab]키 등으로 포커스가 나타날 경우)

 

▶가상 요소 선택자

속성 값 설명
:first-letter 요소의 첫 글자
:first-line 요소의 첫 줄
:first-child 같은 요소 중 첫 번째 요소
:last-child 같은 요소 중 마지막 요소
:nth-child (n) 같은 요소 중 n번째 요소
:before 요소 안 맨 앞에 배치 될 요소
(마크업에 없는 가상 요소)
:after 요소 안 맨 뒤에 배치 될 요소
(마크업에 없는 가상 요소)

 

 

▶종속 선택자

-type 선택자와 id선택자, class 선택자가 결합된 형태

 

예를 들어 마크업이 아래와 같다면,

<p id=atxt"> 선택자의 다양한 표현</p>

▷ #atxt와 p#atxt는 같은 선택자임.

▷ 그러나 우선순위는 p#atxt가 #atxt보다 높은 우선순위를 가짐.

▶선택자의 우선순위

같은 선택자가 여러 css 명령을 중복으로 받았을 때,

일반적으로 우선순위가 같은 선택자라면 나중에 기술한 것이 먼저 기술한 것보다 우선순위가 높음.

 

선택자 우선순위
전체 선택자 ( * ) 0
type 선택자
(p, h1, ul ···· 등)
1
가상 선택자
(first-child ···· 등)
10
class 선택자
(.abc ···· 등)
10
id 선택자
(#abc ···· 등)
100

 

▷요소에 직접 style=" " 형식으로 css를 기술하는 인라인 스타일은 어떤 선택자보다 우선으로 실행됨.

▷그 어떤 방법보다 최우선으로 CSS를 적용할 경우에는 선택자에 속성을 부여하는 마지막에 !important를 붙여줌.

ex) p { color: red !important; }  

 

▷ 전체 우선순위

 

Type 선택자 < class 선택자, 가상 선택자 < id 선택자 < inl line style < !important

 

 

 

 

 

 

 

 

 

 

 

 

728x90
반응형

 

 

▶변수

-데이터를 저장하는 저장소(공간).

▷ var나 let으로 변수를 선언할 수 있음.

▷ var는 구 방식으로 현재는 var 보다 let을 주로 사용함.

 

 

 

-  저장한 데이터를 변경할 수 있음.

 

▷ 변수는 재선언이 가능함.

▷ 재선언 시 이전 값은 표시되지 않고 재선언한 값이 표시됨.

 

 

 

- 데이터를 추가할 수도 있음.

▷ 변수는 연산자를 이용해서 연산이 가능하며, 연산된 값이 출력됨.

▷ +연산자를 변수(숫자)에 사용하면 더해진 값이 결과로 출력되고, 문자에 사용하면 두 값이 연결 되어[각주:1] 결과에 출력됨.

 

 

 

 

 

▶상수

-변수와 똑같이 데이터를 저장하는 저장소(공간

-그러나 변경은 불가능

▷ 상수는 var나 let이 아니라 const를 사용하여 선언함.

▷ const를 사용하여 선언하였을 경우 재선언 하였을 때 값이 바뀌어서 출력되지 않고

라는 경고문구가 출력됨.

 

 

 

 

 

▶배열

-여러 데이터를 저장할 수 있음

-소괄호 ( )가 아니라 대괄호 [ ]를 사용함

-배열의 선언은 arr, Array로 함.

▷ 변수나 상수와 달리 변수만 쓰는 것이 아니라 arr [ ]를 같이 작성해야만 값이 출력됨.

▷ 배열의 키값은 0부터 시작함.

 

 

-  new Array( ); 선언을 빼고 arr만 작성하여 배열을 선언할 수도 있음.

 

 

-아예 new Array 선언을 빼고 arr 만으로도 선언할 수 있음.

 

-반복되는 arr 선언을 줄여 한 줄로 선언하는 것도 가능함.

 

 

 

 

 

▶객체

-데이터 뿐 아니라 그 속성(키와 값)까지 저장

-배열의 특징도 같이 가지고 있음.

-객체의 선언은 Object로 함.

-데이터를 식별하여 가져오는 것도 가능

 

 

 

-데이터의 키와 값을 직접 지정할 수 있음

▷ 배열처럼 지정된 [0], [1], [2]를 사용할 수도 있지만 키값을 직접 지정할 수 있음.

▷ a, b, c로 키값을 지정해준 것.

 

 

 

-{ } 중괄호로 표시

▷ 선언이 반복되는 것을 줄여 { } 중괄호 안에 한 줄로 만들 수 있음.

 

 

 

-객체 안에 배열을 넣어 하나의 객체 안에 두 개 이상의 값을 가질 수 있도록 할 수 있음

▷ 불러올 때에는 객체를 불러오기 위해 obj 작성 후 키 값과 배열의 위치를 작성해주면 됨.

▷ 단순히 b나 c라고만 적어주면 값이 아니라 배열 자체가 불러와지기 때문에 주의.

 

 

 

-배열 안에 객체를 넣을 수도 있음

▷ 배열 안에 객체가 있는 형태로 키값을 먼저 작성하는 것이 아니라 배열의 위치부터 작성한 뒤에 키값을 작성해야 함.

 

 

 

-객체 안에 변수를 저장 시킬 수 있음

▷ 데이터 값 안에 변수를 저장시킬 수 있음.

▷ a 대신에 변수가 저장된 형태로 키 값은 생략할 수 있음.

 

 

 

 

 

-함수를 포함시켜 실행문을 작성할 수도 있음

 

▷ d는 함수가 포함된 실행문이기 때문에 console.log를 작성하지 않음.

▷d는 키 값도 없기 때문에 obj.d ( )라고만 작성해주면 실행문이 출력됨.

 

 

 

 

 

 

  1. 이것을 연결 연산이라고 함 [본문으로]
728x90
반응형

See the Pen Untitled by WOO HYUN (@fiatlux__) on CodePen.

 

 

 

 

▷와장창 해설

 

1. 빨간 밑줄

: 사용자에게 값을 입력받아야 하므로 a에 값을 넣어주지 않고 prompt를 넣어 변수를 선언해줌.

 

2. 파란 밑줄

: 입력 받은 수까지의 짝수 합만 구하게 될 변수로 0을 선언해줌.

 

3.  노란 밑줄

: 입력 받은 값은 null이 아니며 1보다 커야한다는 뜻.

 그렇기 때문에 null 값이 아니어야 한다는 뜻의 !== 연산자를 사용,

null도 아니어야 하고 1보다 커야하기 때문에  && (and 연산자)를 사용하였다.

 

4. 하늘색 밑줄

: 입력 받은 값(1보다 큰 임의의 값)을 1씩 증가하며 비교해 봐야 하기 때문에 i를 1로 선언.

i는 입력받은 값(a)보다는 작거나 같아야 하므로 <= 를 사용 하였고, 1씩 증가시키라는 뜻의 i++를 사용.

 

5. 보라색 밑줄

: 입력 받은 값(a)가 홀수나 짝수인지 구분해야 하기 때문에 % (나머지 연산자)를 통해  구분하였고, 홀수이면 화면에 표시하는 명령을 건너 뛰어야 하기 때문에 짝수를 구분하게 하지 않고 홀수를 구분하게 함.

 

6. 연두색 밑줄

: 홀수이면 화면에 표시하는 명령을 건너 뛰고 짝수를 더하는 연산을 계속해야 하므로 coutinue; 사용.

 

7. 분홍색 밑줄

:좌측에는 짝수가 표현되어야 하고 우측에는 좌측 숫자까지의 짝수 합을 표현해야 하므로 좌측에는 짝수를 세는 변수인 i를 작성, 오른쪽에는 입력 받은 짝수까지의 수를 합하는 변수 b를 넣어줌.

또한 가독성을 위하여 <br> 태그도 같이 넣어줌.

 

728x90
반응형

▶ float

-block 요소를 가로로 배치하는 속성.

-세로로만 나열되는 block들을 가로로, 서로 어울리게 배치하려 할 때 유용함.

-float 속성을 준 박스에 가로 사이즈를 지정해주어야 크로스 브라우징[각주:1] 됨.

-heading 요소나 인라인 요소들은 가로 사이즈 없이 float 해도 레이아웃이 흐트러지지 않음

 

▷ float 속성

left 요소를 왼쪽에 배치하고 나머지 컨텐츠는 그 주변을 흐르도록 함.
right 요소를 오른쪽에 배치하고 나머지 컨텐츠는 그 주변을 흐르도록 함
none float을 취소

 

좌 float 속성 전 모습 우 float 속성 후 정렬된 모습

- float 이전에 하단으로 나열되었던 컨텐츠들이 우측 옆에서  흐르는 모습을 확인할 수 있음.

(①과 ②에 모두 float 속성을 주어야 함.)

- float : right는 컨텐츠가 우측으로 붙었던 float : left와 달리 좌측에 컨텐츠가 붙는다는 것 외에는 차이가 없음.

 

 

▷사용법

float 사용법

- float 속성은 <head>(빨간밑줄)  태그 안에 <style>(노란밑줄) 선언을 하고 주어야 함(파란밑줄).

-그렇지 않으면 float 속성이 활성화 되지 않아 컨텐츠가 정렬되지 않음.

 

 

 

▶ clear

float으로 레이아웃을 설정하고 난 뒤에 컨텐츠가 계속 있으면 그 이후에 이어지는 컨텐츠가 화면에서 사라지거나 (깨짐현상) 같이 딸려 올라가 내용의 정렬이 맞지 않게 됨.

 

float 속성으로 인해 하단 컨텐츠가 없어진 모습

위에서 봤던 온전한 모양과 달리 하단 컨텐츠가 없어진 것을 확인할 수 있음.

이는 우측의 큰 박스가 float 됨으로써 하단 컨텐츠도 같이 끌어 올려졌기 때문.

 

clear 속성은 이런 현상을 해결하기 위해 float을 해제시켜주는 역할을 하는데 clear 속성이 사용될 요소는 block 요소여야 함.

 

 

▷clear 속성

left float 된 박스 중 좌측(왼쪽)이 짧을 때 좌측의 빈 공간부터 채워 내려옴 
right float 된 박스 중 우측(오른쪽)이 짧을 때 우측의 빈 공간부터 채워 내려옴
both  float 된 박스 중 어느 쪽도 채우지 않고 다시 한 단으로 배치

(left, right는 사용하는 경우가 거의 존재하지 않음.)

 

 

clear 속성을 주고 난 후의 모습

 

이번 예제 같은 경우는 하단의 컨텐츠가 어느 쪽도 짧지 않았기 때문에 clear :  both 속성을 주었음.

그 후에 하단의 컨텐츠가 제대로 표시되는 모습을 확인할 수 있음.

 

 

 

▷번외. clear를 사용하지 않고도 float이 해제되는 몇 가지 이유

1 - float 요소를 감싸는 박스가 이미 float 되어 있는 경우
(우연히 일어나는 경우가 드물며, 어차피 감싸는 박스의 float을 해제해야 함)
2 - float 된 요소를 감싸는 박스에 overflow : auto; 를 준다.
(세로 스크롤바가 생길 경우 사용할 수 없음, width[각주:2]값을 주어야 크로스 브라우징 됨)
3 - float 된 박스들을 감싸는 박스에 height[각주:3]값을 준다.
(세로 사이즈가 불변일 경우가 아니면 사용불능)

 

 

 

 

 

 

  1. 웹 페이지 제작 시 모든 브라우저에서 깨지지 않고 의도한대로 올바르게 나오게 하는 작업. [본문으로]
  2. 너비(가로) [본문으로]
  3. 높이(세로) [본문으로]
728x90
반응형

 

 

주어진 배열 안에서 10보다 큰 값 찾기

const arr = [1, 3, 5, 7, 9, 11, 13, 15, 17, 19];

  for(let i=0; i<=arr.length; i++) {
    if(arr[i]>=10) {
      document.write(arr[i],"<br>");
    }
  }

 

 

 해설

 

 

1. const arr  (빨간색 밑줄)

: 문제가 배열 안에서 10보다 큰 숫자를 찾는 것이었기 때문에 문제와 똑같은 배열을 선언해줌.

 

2. i<=arr.length; (파란색 밑줄)

: 배열 요소의 갯수만큼 반복해야 하므로 숫자가 아닌 배열의 수만큼 반복하라는 뜻의 arr.length를 넣어줌

 

3. arr[i]>=10 (노란 밑줄)

: 배열 안의 값 안에서 찾는 것이므로 arr [i]를 넣어주었으며 10보다 큰 수를 찾아야 하기에 >=10 (10보다 크거나 같다는 뜻의 비교 연산자)을 넣어줌. 

 

4. arr[i], "<br>" (분홍색 밑줄)

:콘솔이 아닌 화면으로 출력하기 위해 document.write를 사용하였으며,

 배열 안의 값을 출력하기 위해 arr [i]를 넣어주었고, 가독성을 위해 <br> 태그를 추가함.

 

 

 

 

 

출처 : Do it!모던 자바스크립트 프로그래밍의 정석 p.113

 

 

 

728x90
반응형

▶if 문

-if 다음에 소괄호( )를 사용해서 조건을 표기

-조건을 체크한 후 결괏값이 참(true)이면 if 문에 있는 명령(들)을, 거짓(false)이면 if문에 있는 명령(들)을 건너뛰고 그 다음 명령을 실행

 

 

▷if문의 기본 형식

if (조건)  {
       조건이 true(참)일 때 실행할 명령(들)
}

 

 

좌 if문의 흐름도 우 기본 if문 예시

조건 (빨간 밑줄)이 참(true)라면 첫번째 명령문 (파란색 밑줄)을, 거짓(false)라면 그 다음 명령문(노란색 밑줄)을 출력한다.

위 예시 같은 경우, 0  은 false가 출력된다. [각주:1] 

 

 

 

▶if else문

[각주:2] 

-조건을 체크한 후 true(참) 일 때 처리할 명령과 false(거짓)일 때 처리할 명령이 따로 있을 때 사용

-if else 안에 또 다른 if문이나  if else문을 사용할 수 있음

 

 

▷if else 문의 기본 형식

if (조건) {
       조건이 true 일 때 실행할 명령(들)
} else if (조건2) {
       조건이 false 일 때 실행할 명령(들)
}
eles {
        어떠한 조건에도 맞지 않을 때 실행할 명령
}

 

 

좌 if else 흐름도 우 if else 예제

상수 값(분홍색 밑줄)이 쳐진 곳이 아래 조건들(빨간색 밑줄, 파란색 밑줄, 노란색 밑줄) 중 일치하는 결괏값이 출력된다.

기본 형식에서의 조건 1 즉, true일 때 실행될 명령이 파란색 밑줄이 쳐진 곳이 되며,  거짓(false)일 때 출력되는 곳들이 노란색 밑줄이 쳐진 곳임.

else (노란색 밑줄)은 분홍색 밑줄의 값이 빨간색 밑줄, 파란색 밑줄 중에서 일치하는 것이 없을 때 출력된다.

 

 

 

▶중첩 if 문

-조건문(if) 안에 또 다른 조건문(if)을 포함하여 더욱 복잡한 조건을 만족할 때 사용

-겉에 있는 조건문과 안에 포함된 조건문에서 모두 참일 때 실행

-조건 1이 참(true)지만 조건 2가 거짓이면 실행되지 않음.

-가독성이 현저히 떨어지기 때문에 꼭 필요한 경우에만 사용하는 것이 좋음.

 

 

▷중첩 if문의 기본 형식 

if (조건1) {
    if (조건2) {
         조건 1과 조건 2가 모두 참(true)일 때 실행되는 명령
          }
  }

 

 

 

중첩 if 예제

분홍색 밑줄 (조건)이 빨간색 밑줄들과 일치해야만 명령이 실행된다.

하나라도 일치하지 않으면 중첩된 if 문들은 실행되지 않으며, else 문(노란색 밑줄) 이 실행된다. 

 

 

 

▶삼항 연산자 [각주:3]

-연산자가 3개라 삼항 연산자라고 함.

-조건이 복잡하지 않고 참(true)과 거짓(fasle)이 명확할 경우 if 문을 사용하지 않고 삼항 연산자 만으로 조건을 체크할 수 있음

 -조건에 따라 결과를 반환함

 

 

 

▷삼항 연산자의 기본 형식

(조건) ? true일 때 실행할 명령 : false 일 때 실행할 명령;

 

 

 

삼항 연산자 예제

흰 박스 안에 있는 식을 한 줄로 줄일 수 있다.

조건(빨간 밑줄)이 true(참)이면 첫번째 명령 (노란색 밑줄의 명령)을,  false(거짓)이면 두번째 명령(파란색 밑줄의 명령)을 실행한다.

 

 

 

 

 

  1. 0 외에도 null, undefiend, false (불린), " "(빈 문자열)을 넣으면 false가 됨. [본문으로]
  2. 다중 if 문이라고도 함 [본문으로]
  3. 피연산자가 3개라서 삼항 연산자라고 하며, 조건 연산자라고도 함. [본문으로]
728x90
반응형

See the Pen Untitled by WOO HYUN (@fiatlux__) on CodePen.

728x90
반응형

▶for문

: 자바스크립트에서 가장 많이 사용하는 반복문.

조건에 들어가는 값이 일정하게 커지면서 명령 반복 실행할 때 편리.

몇 번 반복했는지 기록하기 위해 카운터를 사용하며, 첫 항에서 카운터 변수를 지정함.

 

▷for문의 실행순서

: 초깃값 할당[각주:1] > 조건 체크 > 명령실행 > 증가식 실행 

 

for (초깃값[각주:2]; 조건[각주:3] ; 증가식[각주:4]) { ·····}

 

for 문 예제

 

▷예제의 실행 순서를 표로 그려보면 다음과 같다.

하는 일 소스  결과
초깃값 실행 i = 1 i = 1
조건 체크 i < 10 true
실행 console.log(i) 1
카운터 증가 i++ i  = 2
조건 체크 i < 10 true
실행 console.log(i) 2
· · · · · ·
카운터 증가 i++ i=10
조건 체크 i (10) < 10 false
for문 종결

 

 

▶forEach문

:배열에서는 forEach 문을 사용해서 편리하게 반복할 수 있음.

배열의 길이가 바뀌어 정확하게 배열의 크기를 알 수 없을 때, 배열의 요소를 가져와서 함수[각주:5]를 설정해야 할 때 사용함.

 

배열문.forEach(콜백함수[각주:6]) { · · · · · }

 

좌 :forEach 예제문 우 : 예제문의 결과값

for문을 작성하여 배열 안에 있는 모든 수를 불러 오려면  초깃값을 할당하고, 조건과 증감식을 작성해야 했는데 forEach 문을 사용하면 초깃값을 할당하고, 조건을 지정하고 증감식을 작성해야 할 필요가 없어짐.

 

 

▶for...in문

- 배열 안에서만 반복되는 반복문이 forEach 문이라면 for...in 문은 반복해서 객체의 값을 가져와 처리할 수 있게 함.

 - 객체의 키만 가져올 수 있으므로 해당 키의 값에 접근하기 위해 [ ] (대괄호)를 사용함.

- 모든 열거할 수 있는 속성들을 순회할 수 있도록 함.

- 순서를 지정할 수 없기 때문에 속성들 간의 순서가 중요한 객체에서는 사용하지 않는 것이 좋음.

 

for (변수 in 객체) {  · · · · ·   }

 

좌 for in 문 예제 우 결과

 

 

▶for...of문

: 문자열이나 배열과 같은 반복 가능[각주:7] 자료에서 사용하는 반복문.

forEach 문를 사용해서 작성했던 것과 같은 결과를 볼 수 있음.

let a 안에 값이 있는동안 계속 반복함.

좌 for of 예제 우 결과

 

 

 

 

 

 

 

  1. 처음에 한 번만 할당 [본문으로]
  2. 몇 번 반복할지 지정하기 위해 카운터 변수를 사용하는데, 이 항목에서 카운터 변수를 선언하고 초기화 함.  초깃값은 0이나 1로 시작 [본문으로]
  3. 문장을 반복하기 위해 체크할 조건 부분. 이 조건을 만족(true)해야 for문의 명령을 반복할 수 있음 [본문으로]
  4. 문장을 실행한 후 카운터 변수를 증가시키는 부분. [본문으로]
  5. 함수는 여러 명령을 묶어 놓은 것이라고 생각하면 됨. [본문으로]
  6. 다른 함수의 인수로 사용할 수 있는 함수를 가리킴. [본문으로]
  7. literable [본문으로]
728x90
반응형

▶ 섹션(section) 요소

: HTML 문서의 독립적인 구획을 나타냄, 더 적합한 의미를 가진 요소가 없을 때 사용.

 

 

 

▶ 섹션과 관련된 태그

태그명  속성
<main> 문서주요 컨텐츠 영역 설정
<section> 주제별 그룹의 컨텐츠 섹션 설정
<article> 문서독립적인 컨텐츠 섹션 설정
<aside> 주요 컨텐츠의 보조적 컨텐츠 섹션 설정
<header> 문서의 소개 및 메뉴 그룹 컨텐츠 섹션 설정
<nav> 문서에 대한 메뉴 링크를 제공하는 섹션 설정
<footer> 문서 관련 정보 및 관련 링크 컨텐츠 섹션 설정
<h1> ~ <h6> 섹션의 제목 설정
<address> 문서 관련 연락처 컨텐츠 섹션 설정
<body> 문서의 모든 콘텐츠 [각주:1]를 포함하는  영역 설정

 

 

ex) 섹션 영역

 

 

<header>

- HTML 문서의 헤더 영역을 의미하는 태그

- 제목이나 내비게이션, 검색 등 소개 및 탐색에 도움을 주는 내용을 포함

- 텍스트, 인라인 요소, 블록 레벨 요소를 포함 O

- <header>, <footer> 태그는 자식요소로 포함 할 수 X

- HTML 문서는 여러 개의 <header> 요소를 포함할 수 O

- <head>[각주:2]와 달리 웹 페이지 상단에 정보를 보여줌.

 

 

<body>

-  한 문서에 단 하나만 존재할 수 있음

-  문서의 두 번째에 와야 하는 요소

- 특정한 조건[각주:3]에서는 태그를 시작 태그나 종료 태그를 생략할 수도 있음

- HTML5 이후 <body> 태그의 모든 레이아웃 관련 속성들을 지원하지 않음.

 

 

<nav>

- 메뉴, 목차, 인덱스 등에 사용

- 다른 페이지나 현제 페이지의 다른 섹션으로 이어지는  주요 탐색 링크 블록을 위한 요소

- 텍스트, 인라인 요소, 블록 레벨 요소 포함 O

- 하나의 문서 안에 여러 개의 <nav> 태그를 가질 수 O

- 그러나, 메인 메뉴가 아닌 곳에서는 잘 사용하지 않음

 

 

<main>

- 주요 컨텐츠  전체를 감싸주는 태그

- 해당 문서의 중심 주제 또는 주요 기능과 직접적으로 관련 되어 있거나 확장되는 컨텐츠로 구성

-한 문서에 단 하나만 존재 할 수 있음

- <article>, <aside>,<footer>,<header>,<nav> 요소의 자식 요소로 올 수 X

 

 

<aside>

- 메인 컨텐츠와 직접적으로 관련이 없는 보조적 영역을 의미

- HTML 문서의 왼쪽 or 오른쪽의 사이드 메뉴나 광고 등으로 사용

- 텍스트, 인라인 요소, 블록 레벨 요소 포함 O

 

 

<section>

- HTML 문서에서 맥락이 같은 요소들을 주제별로 그룹화 하는 태그

- 문서에 포함된 독립적인 섹션(section)을 정의

- 섹션 주제에 대한 제목 요소(<h2~h6>)를 자식 요소로 포함하는 경우가 많음

-텍스트, 인라인 요소, 블록 레벨 요소 포함 O

 

 

<article>

- HTML 문서 내에서 독립적으로 배포나 재사용이 가능한 컨텐츠를 정의

- 안에 포함될 수 있는 요소는 블로그 포스트, 뉴스 보도 기사, 논평 등이 있음

- 텍스트, 인라인 요소, 블록 레벨 요소 포함 O

-  <adress>의 자식 요소로 사용할 수 X

-하나의 문서에 다수의 <article> 존재 가능

 

 

<footer>

- HTML 문서의 푸터 영역 (페이지 하부 영역)을 의미함

- 섹션 작성자나, 저작권에 관한 정보, 연락처, TOP 버튼 등을 포함

- 하나의 문서에 다수의  <footer> 사용 가능

-링크를 포함할 수도 있음

 

 

<address>

- 사이트 주소, 회사 이름, 회사 주소 등 처럼 주소나 연락처에 관련된 정보를 표시

- 연락처보다 광범위한 정보를 포함할 수 O

- 주로 <footer> 영역에서 자주 사용

- <body> 요소 안에서는 해당 문서의 연락 정보를 나타냄

- <article> 안에서는 해당 글에 대한 연락 정보를 나타냄

-약간의 공백이 자동 삽입되어 다른 텍스트들과 구분됨

 

 

<h1> ~ <h6>

-문서에서 제목을 정의할 때 사용

-숫자의 순서가 낮을수록 중요한 제목을 정의함

-단계를 건너뛰지 않고 순차적으로 사용해야함

-<h1>~<h6>까지의 모든 태그의 폰트 크기나 굵기가 서로 다르게 설정되어 있음

 

 

 

 

 

  1. 하이퍼링크, 이미지, 텍스트,리스트 등 [본문으로]
  2. <head>태그는 웹 화면에 보이지 않는 내용을 주로 다룸. [본문으로]
  3. [시작태그가 생략될 수 있는 경우]

    1. 요소가 비어 있는 경우

    2. 첫 번째 항목이 공백, 주석, <script>, <style> 요소가 아닌 경우

    [종료 태그가 생략 될 수 있는 경우]

    1. <body> 요소가 시작 태그를 가지고 있으며, 바로 뒤에 주석이 따라오지 않는 경우 [본문으로]

728x90
반응형

▶산술 연산자

종류 속성
+ 더하기 연산을 할 때 사용
문자와 문자, 문자와 변수 등을 연결할 때 사용
- 빼기 연산을 할 때 사용
* 곱하기 연산을 할 때 사용
/ 나누기 연산(몫을 구할 때 )에 사용
% 나누기 연산 (나머지를 구할 때 ) 사용
++ 1씩 증가 시킬 때 사용
-- 1씩 감소 시킬 때 사용

 

 

▶+ 연산자

-좌변과 우변에 숫자가 아닌 문자나 변수 등이 오면 연결 연산을 함.

-숫자가 오면 더하기 연산을 함.

 

+ (더하기 ) 연산자

 

 

▶% 연산자

-반복적인 숫자 구간의 패턴이나 조건문을 사용한 짝, 홀수 판단 등의 식을 만드는데 사용함.

 

% (나누기) 연산자

 

 

▶++ , -- 연산자

-++나 -- 사이에 공백  존재 X.

-1씩 증가 · 감소 시키는 연산자

-변수의 앞이나 뒤에 붙여서 사용. (연산자의 위치에 따라 값이 달라짐)

 

 

++ 연산자

 

 

▶대입 연산자

종류 속성
= num = n[각주:1]
오른쪽의 값을 num(변수)에 저장(대입)
등호 (=)처럼 '같다'는 의미가 아님.
+= num += n
num = num + n 와 같은 의미를 가짐
-= num -= n
num = num - n 와 같은 의미를 가짐
*= num *= n
num = num * n 와 같은 의미를 가짐
/= num /= n
num = num  / n 와 같은 의미를 가짐
%= num %= n
num = num % n 와 같은 의미를 가짐

 

 

▶ = 

 

 

▶ += 

 

 

▶비교 연산자

종류 속성
>
(왼쪽이 오른쪽보다 크다)
[각주:2]
a > b가 참일 때 : true
                거짓일 때 : false
<
(왼쪽이 오른쪽보다 작다)
[각주:3]
a < b가 참일 때 : true
                거짓일 때 : false
>=
(같거나 크다)
[각주:4]
a >= b가 참일 때 : true
                거짓일 때 : false
<=
(같거나 작다)
[각주:5]
a <= b가 참일 때 : true
                거짓일 때 : false
== 왼쪽 값이 오른쪽 값과 같을 때 : true (참)
         같지 않을 때 (다를 때) : false (거짓)
!=
[각주:6]
왼쪽 값과 오른쪽  값이 다를 때 : true (참)
                                같을 때 : false (거짓)
=== 왼쪽 값과 오른쪽 값이 같고, 데이터 타입도
같을 때 : true
                         같지 않을 때 (다를 때) : false
!== 왼쪽 값과 오른쪽 값이 같지 않거나 데이터 타입이
      같지 않을 때 : true
같을 때 : false

 

▶ > (초과)

비교 연산자 : < (초과)

 

 

▶ <= (이하 / ~까지)

비교 연산자 : <= (이하)

 

 

▶ 논리 연산자

종류 속성
&& 
(AND 연산자)
왼쪽 값과 오른쪽 값이 모두 참(true)일 때, 참(true)이 됨.
어느 한 쪽이라도 거짓(false)이면 거짓(false)이 됨.
|| 
(OR 연산자)
왼쪽 값이나 오른쪽 값 둘 중 하나라도 참(true)이면,
참(true)이 됨.
!
(NOT 연산자)
왼쪽 값이 참(true)이면 거짓(false)로,
거짓(false)이면 참(true)로 바꿔줌.
(결과값과 반대로)

 

 

 

 

▶ 비트 연산자 (잘 쓰이지 않음 / 죽은 문법)

▷ &  (AND 연산자)

 

1&1, 1&0=0, 0&0=0

 

ex) [ 1 & 3 ]
1의 2진수는 0001, 3의 2진수는 0011
  0001
&0011          2진수 0001은 10진수 1.
----------
   0001

 

| (OR 연산자)

 

1|1=1, 1|0=0, 0|0=0

 

ex) [ 1 |3]
   0001
 | 0011          2진수 0011은 10진수 3.
----------
   0001

 

~ (NOT 연산자)

 

ex) ~2 (음수 만들기)

2의 2진수는 0010이고 부호를 음수로 바꾸기 위해 1을 더함
0010 + 1 = 0011
2진수 0011은 10진수 3. 그러나 부호가 반대라 -3.

 

 

^ (XOR 연산자)

 

1^1, 1^0=0, 0^1=1, 0^0=0

ex) [ 1 ^ 3 ]
    0001
 ^ 0011          2진수 0010은 10진수 2.
 ----------
    0001

 

<< (LEFT Shift) 

왼쪽으로 이동 시, 오른쪽 끝자리는 0.

 

ex) 1 << 2
1의 2진수는 0001, 왼쪽으로 2번 이동 시 0100.
2진수는 0100은 10진수 4

 

▷>> (Right Shift)

오른쪽으로 이동 시, 왼쪽 끝자리는 0.

 

ex) >> 1 의 경우
8의 2진수는 1000, 왼쪽으로 1번 이동 시 0100.
2진수 0100은 10진수 4

 

 

▶ 삼항 연산자 

:조건식의 결과 (true, false)에 따라 결과 값을 다르게 나오게 해주는 연산자

 

-형식

조건식 ? 실행문1 : 실행문 2

 

조건식이 true 일 때 : 실행문 1 실행

조건식이 false 일 때  : 실행문 2 실행

 

ex)

let num1 = 10;
let num2 = -10;

console.log(num1 > 0 ? '양수' : '음수');
console.log(num2 > 0 ? '양수' : '음수');


양수 (num1 (10)은 0보다 크므로 참(true)가 되어 실행문 1 실행 되어 결과값 : 양수 출력)
음수 (num2 (-10)은 0보다 작으므로 거짓(false)가 되어 실행문 2 실행 되어 음수 출력)

 

  1. 임의의 값 [본문으로]
  2.   초과 [본문으로]
  3.   미만 [본문으로]
  4. 이상 [본문으로]
  5. 이하 [본문으로]
  6. 앞에 !가 붙으면 붙지 않은 것과 속성이 반대임 [본문으로]

+ Recent posts