rim_chaeeop.log

[대구AI스쿨] JavaScript 개발일지 -4-

Wed, 08 Sep 2021 06:44:05 GMT

□ 자바스크립트 - 2강 3/3

1. 웹사이트의 주요 기능 만들기

1) 버튼을 클릭했을 때, 배경을 바꾸는 기능 개선하기

버튼을 클릭했을 때, 임의의 헥사코드값으로 배경색에 변하면서 화면에 배경색의 헥사코드값이 출력되도록 함

※ HEX Code(헥사코드) - #000fff와 같이 #과 0 ~ 9의 숫자와 a ~ f 사이의 알파벳의 6자리 조합으로 이루어져 있음

코드)

[main.js]

var hex = document.getElementById('hex');
var btn = document.getElementById('btn');


// hex 태그와 btn태그가 정상적으로 따라왔는지 확인하기
// console.log(hex);
// console.log(btn);

btn.addEventListener('click', function() {
    // console.log("클릭");

    var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "a", "b", "c", "d", "e", "f"];
    var color = "#";

    for(var i = 0; i < 6; i++) {

        var random = Math.floor(Math.random() * arr.length);
        color += arr[random];

    }

    document.body.style.backgroundColor = color;
    hex.textContent = color;

});

◆ for문 작동 스크린샷

◆ 결과 스크린샷

● addEventListener( , )의 2번째로 인수로 전달한 함수 자체를 변형하기

위의 코드에서 2번째 인수로 넣은 함수를 별도의 함수명(createColor)을 지정하여 전역변수로 만든 후, 2번째 인수로 함수명을 넣어줌(콜백함수)

코드)

btn.addEventListener('click', createColor);

function createColor () {
    // console.log("클릭");

    var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "a", "b", "c", "d", "e", "f"];
    var color = "#";

    for(var i = 0; i < 6; i++) {

        var random = Math.floor(Math.random() * arr.length);
        color += arr[random];

    }

    document.body.style.backgroundColor = color;
    hex.textContent = color;
};

★ 작성코드

Git 링크.2021_08_javaScript2

2. javaScript 활용 실습

1) 배열의 개체 안에 인용문구가 들어가 있고, 이를 랜덤하게 출력하는 기능 구현하기

[html]



    

    인용문구가 들어갈 자리
    작가가 들어갈 자리

[main.js]

var arr = [
    {
        quote: "아이들은 누구나 예술가이다",
        author: "피카소"
    },
    {
        quote: "내면의 목소리는 들리지 않게 된다.",
        author: "반 고흐"
    },
    {
        quote: "완벽을 두려워하지 말라",
        author: "달리"
    },
    {
        quote: "영감이 오는 것을 기다리고 있을 수는 없다.",
        author: "런던"
    },
    {
        quote: "의욕만 있으면 이런 노력만으로도 얼마든지 많은 생각을 찾을 수 있다.",
        author: "수스"
    },
];

// console.log(arr[0].quote);
// console.log(arr[0].author);


var quote = document.getElementById("quote");
var author = document.getElementById("author");
var btn = document.getElementById('btn');

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

    var random = Math.floor(Math.random() * arr.length);

    quote.textContent = arr[random].quote;
    author.textContent = arr[random].author;

});

◆ 결과 스크린샷

◆ 결과 스크린샷 2

★ 작성코드

Git 링크.2021_09_javaScript2

2) input 태그를 사용하여, 입력한 글자를 화면에 출력하기

입력한 글자가 있을 경우 글자를 출력하고, 글자가 없을 경우 ‘input을 입력하라’는 에러문구 출력하기

● form 태그에는 버튼을 눌러서 글자를 submit하게 되면, 작업을 수행 후 바로 창을 새로고침하게 됨 → 새로고침을 막기위해 main.js의 function( )에서 .preventDefault( ); 메서드를 작성함

● preventDefault( );는 태그의 본연의 기능을 정지시킬 수 있음

코드)

[main.js]

form.addEventListener('submit', function(e) {

    e.preventDefault();
    console.log(e);

    console.log("제출");
});

◆ preventDefault( ); 사용 결과 스크린샷

● .reset( ); 메서드 – 내용을 초기화 할 때 사용. 여기서는 input의 입력 내용을 초기화할 때 사용함.

form.reset();

● if문에서 else의 경우 새로운 클래스 명을 추가하기

.classList.add( );를 사용하여 적용시킴

else {

      feedback.classList.add('show');

  }

● 일정 시간이 지난 후, show 클래스가 사라지도록 하는 기능 적용

setTimeout( , ); 메서드를 사용함 → 2가지 인수를 받음, 첫 번째는 콜백함수, 두 번째는 시간을 받음

예시)

[main.js]

setTimeout(function() {
            feedback.classList.remove('show');
}, 2000);

★ 작성코드

Git 링크.2021_09_javaScript2_1

3) 이미지의 좌, 우측을 클릭 시, 다른 이미지로 바뀌도록 하는 기능 만들기

● document.querySelectorAll( );을 사용하여 html 영역 가져오기

가져온 html 영역은 배열 형태로 저장됨

예시)

document.querySelectorAll('.btn');

※ ‘.btn’ 클래스 영역을 가져옴

● prev나 next 버튼 클릭 시, 화면 시점이 페이지 상단으로 올라가는 기능 멈추기

html의 a 태그의 고유 기능으로 이를 멈춰야 함
.preventDefault( );를 사용함

예시)

[main.js]

document.querySelectorAll('.btn').forEach(function (element, index) {

    element.addEventListener('click', function(e) {

        e.preventDefault();           

    });

});

● 클릭한 버튼이 어떤 버튼인지 확인하는 방법

.target을 사용하여 어떤 버튼을 사용했는지 확인함

예시)

if(e.target.classList.contains('prevBtn')) {
            console.log("Prev");
}

if(e.target.classList.contains('nextBtn')) {
            console.log("Next");
}

◆ 결과 스크린샷

◆ 결과 스크린샷(prev)

◆ 결과 스크린샷(next)

★ 작성코드

Git 링크.2021_09_javaScript2_2

※ 조건문과 반복문의 작동 순서를 알고자 할 때, 도움이 되는 사이트 – https://pythontutor.com/

[대구AI스쿨] JavaScript 개발일지 -3-

Fri, 03 Sep 2021 02:47:21 GMT

□ 자바스크립트 - 2강 2/3

★ 작성코드

Git 링크.자바스크립트2

1. 반복문

조건을 만족하면 명령을 반복해서 실행함
무한반복(루프)에 빠지지 않도록 ‘조건’이 어느 시점에서 마무리 될 수 있도록 설정해야 함

※ 예시 → 구구단 2단의 경우

고정값 : console.log(2 * );
일정한 규칙을 갖고 있는 가변값 : 1, 2, 3, 4, 5, 6, 7, 8, 9

○ 반복문의 종류

● while

var num = 1;

while (num < 10) {
    console.log(2 * num);
    num++;
}
console.log("반복문 종료");

num = 1; → 반복문의 시작점
while(num < 10) → n이 10보다 작으면 { } 내용을 실행함
num++; → num의 값을 1을 더함

● do ~ while

명령을 먼저 실행한 후, 반복문을 수행함

예시)

var i = 12;

do {
    console.log(i);
    i++;    
} while (i < 10);

do { } 의 명령을 실행한 후 while이 실행되는데, 조건이 거짓이기에 ‘12’만 console에 출력되고 반복문이 끝남

● for

가장 많이 사용되는 반복문
for( ) 안에 고정값과 일정한 규칙을 갖고 있는 가변값을 넣어주어야 함
for ( ) 안에서 작성하는 규칙은 반드시 지켜야 함( ( 변수, 조건, 가변값) )

예시)

for (var i = 1; i < 10; i++) {
    console.log(3 * i);
}

● 중첩 반복문

for 반복문 안에 for 반복문을 추가로 사용하여 반복문을 만듬
반복문의 실행 순서에 대해서 이해가 필요함

예시) 구구단 2단 ~ 9단 출력

for (i = 2; i < 10; i++) {
    for(j = 1; j < 10; j++) {
        console.log( i * j);
    }
}

첫 번째 for문에서 i=2 가 참인 상태에서 j=1에서 j=9까지 반복된 후, i=3으로 바뀌고 다시 j=1에서 j=9까지 반복함
이를 i=9까지 반복하고 i=10이 되면서 반복문의 조건이 거짓이 돼서 반복을 종료함

● break

반복문을 원하는 시점에서 바로 종료하고 싶을 때 사용함

예시) 구구단 2단에서 i=5가 되면 바로 종료하고자 할 경우

for (var i = 1; i < 10; i++) {

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

    console.log(2 * i);
}

● continue

반복문에서 원하는 시점의 반복을 넘기고자 할 경우 사용함

예시) 구구단 3단에서 i=5가 되면 이를 넘기고, i=6부터 반복을 계속하게 할 경우

for (var i = 1; i < 10; i++) {

    if(i === 5) {
        continue;
    }

    console.log(3 * i);
}

● 배열의 내용을 반복문을 사용해서 출력하기

예시)

var arr = ['바나나', '사과', '수박'];

for (var i = 0; i < 3; i++) {
    console.log(arr[i])
}

※ 배열의 데이터의 개수를 모르지만, 끝까지 반복하고자 할 경우 – 조건에서 array의 length를 사용함

예시)

var arr = ['바나나', '사과', '수박', '포도', '배'];
console.log(arr);
console.log(arr.length);

for (var i = 0; i < arr.length; i++) {
    console.log(arr[i])
}

● for ~ in

범위지정을 할 필요 없이 in 이 범위가 되어 반복하도록 함

예시)

var arr = ['바나나', '사과', '수박', '포도', '배'];

for (var i in arr) {
    console.log(i);
    console.log(arr[i]);
}

● arr.forEach()

배열에서 사용가능한 메서드, for ~ in가 유사함
익명함수, 콜백함수를 사용함
return 활용불가능

예시)

var arr = ['야구', '축구', '농구', '배구'];

arr.forEach(function(element, index) {
    console.log(element);
    console.log(index);
})

element는 배열의 데이터를 의미하고, index는 배열의 좌표를 의미함
function( )의 순서는 바뀌면 안됨, ( ① element, ② index ) 순서여야 함

● arr.map()

arr.forEach()와 유사하지만 return을 사용 가능한 메서드

예시)

var arr = ['기타', '드럼', '베이스', '보컬'];

arr.map(function(element, index) {
    console.log(element);
    console.log(index);
})

var result = arr.map(function(element, index) {
    return element + " " + "10";    
})

console.log(result);

○ 객체에서 활용할 수 있는 반복문 - for ~ in을 사용해 객체 안의 데이터을 확인하기

예시)

var student = {
    name: "Kim",
    age: 20,
    skills: ["자바스크립트", "HTML", "CSS"],

    sum: function(num1, num2) {
        console.log(num1 + num2);
    }
}

// for ~ in

for (var prop in student) {

    console.log(prop + " = " + student[prop]);
}

※ for ~ in 사용시, 객체 안의 데이터에 접근하는 방법 중 한가지를 사용 ① student.name ② student['name'] → 이 방법을 사용함

2. String(문자열)이 가지고 있는 주요 기능 (property, 메서드)

● length – 문자열의 길이를 가져오는 property, 공백(스페이스)의 길이도 포함해서 길이를 가져옴 예시)

var txtLength = " Hello world ! ";

console.log(txtLength.length);

→ console에서 ‘15’가 출력됨(문자 10 + 특수문자 1 + 공백 4 )

● trim( ) - 문자열의 앞뒤 공백들을 제외하고 출력함 예시)

var txtLength = " Hello world ! ";

console.log(txtLength);
console.log(txtLength.length);
console.log(txtLength.trim());
console.log(txtLength.trim().length);

● charAt( ) - 문자를 추출할 때 사용하는 메서드 예시)

var str = "Nice to meet you";

console.log(str.charAt(0));

→ console에서 ‘N’이 출력됨

※ 문자열의 길이를 모르는 상황에서, 마지막 문자를 출력하고 싶을 경우 예시)

var str = "Nice to meet you";

console.log(str.length);
console.log(str.charAt(str.length – 1));

● slice( ) - 문자를 추출할 때 사용하는 메서트, 출력되는 범위를 정할 수 있음 예시)

var str = "Nice to meet you";

console.log(str.slice(0, 6));
console.log(str.slice(2, 6));
console.log(str.slice(2));

※ str.slice(2, 6)의 경우, 좌표값 2와 6 사이의 교집합이 되는 부분을 출력함 ※ str.slice(2)와 같이 시작 좌표만 설정하면 시작좌표에서부터 끝까지의 문자를 출력함

●** split( )** - 일정한 규칙으로 문자를 잘라낼 때, 잘라낸 문자를 배열 안에 담을 때 사용하는 메서드 예시)

var str = "Nice to meet you";

console.log(str.split(' '));

예시2)

var str1 = "apple/pear/grape"

console.log(str1.split('/'));

※ split( )을 사용하게 되면, 데이터 타입이 배열로 바뀌게 됨

● replace( ) - 원하는 문자를 지정한 후, 이를 교체하고자 할 때 사용하는 메서드 예시)

var str = "This place is good";

console.log(str);
console.log(str.replace('place', 'apple'));

● indexOf( ) – 문자열에서 단어를 검색한 후, 단어가 시작하는 위치의 좌표를 알려주는 메서드 예시)

var str = "This place is good";

console.log(str.indexOf('place'));

→ ‘place’가 시작하는 좌표값 ‘5’가 console에 출력됨

※ 단어가 존재하지 않을 경우 → ‘-1’을 반환시킴 ※ 단어 검색시, 대소문자를 구분함 ※ 여러 개의 같은 단어가 문자열에 존재할 경우, 최초로 먼저 나오는 값을 반환시킴

● 모든 문자를 대문자 혹은 소문자로 변환하는 메서드

① toUpperCase() - 대문자로 변환 ② toLowerCase() - 소문자로 변환

예시)

var str = "This place is good";

console.log(str.toUpperCase());
console.log(str.toLowerCase());

실무 사용 예시)

var search = prompt("검색어를 입력해 주세요");

if(search.toLocaleLowerCase() === "apple") {

    console.log("사과 데이터를 출력한다.");

} else {
    console.log("False");
}

→ 대문자 ‘APPLE’를 입력하더라도 true값이 출력됨

3. Array(배열)에서 가지고 있는 주요 기능 (property, 메서드)

● push( ) - 배열에 새로은 데이터를 추가할 때 사용하는 메서드(배열 뒤쪽에 삽입됨) 예시)

var arr = ["사과", "배", "수박"];
arr.push("포도");
console.log(arr);

arr.push("체리", "참외");
console.log(arr);

※ 배열 앞쪽에 삽입하고자 할 때는 unshift( )를 사용함

● 배열 안의 데이터를 삭제하고자 할 때 사용하는 메서드

① pop( ) - 배열의 뒤쪽에 있는 데이터를 삭제 ② shift( ) - 배열의 앞쪽에 있는 데이터를 삭제

예시)

var arr = ["사과", "배", "수박"];

arr.pop();
console.log(arr);

arr.shift();
console.log(arr);

● join( ) - 배열 안의 데이터를 규칙을 지정하여 문자열로 나타내는 메서드

예시)

var arr1 = ["야구", "축구", "농구"];
var str1 = arr1.join(', ');

console.log(str1);

● concat( ) - 배열들을 합치고자 할 때 사용하는 메서드

예시)

var arr1 = ["농구", "축구"];
var arr2 = ["사과", "배"];

var merge = arr1.concat(arr2);

console.log(merge);

※ 예시에서는 arr1이 기준이 되고, 그 배열 뒤쪽에 arr2의 데이터가 들어가게 됨

□ 어려웠던 점

자바스크립트라는 내용 자체가 처음이라서 내용을 이해하기가 많이 어려웠습니다.

□ 해결방법

강의 내용 중 이해가 되지 않으면 그 부분을 반복해서 보고, 인터넷에서 추가적으로 검색하여 해결하고자 하였습니다.

□ 학습 소감

자바스크립트가 C언어와 유사한 점이 많아서 이해가 조금은 되지만, 아직 배워야할 것들이 많다고 느꼈습니다.

[대구AI스쿨] JavaScript 개발일지 -2-

Tue, 31 Aug 2021 05:00:49 GMT

□ 자바스크립트 - 2강 1/3

★ 작성코드

Git 링크.자바스크립트2

1. IF 조건문

● 만약 ( ) 조건이 참(true)이면, { }의 동작을 수행함

예시) ① 조건이 참(true)일 경우

var a = 20;
var b = 40;

if(a < b) {
    console.log("a는 b보다 작다.");
}

② 조건이 거짓(false)일 경우

var a = 20;
var b = 40;

if(a > b) {
    console.log("a는 b보다 작다.");
}

● else – if 조건문에서 참(true)이 아닐 경우, 동작을 수행함

예시)

var a = 20;
var b = 40; 

if (a > b) {
    console.log("a는 b보다 크다.");
}
else {
    console.log("a는 b보다 작다.")
}

● else if – 여러개의 조건을 사용하고자 할 때 사용함

예시)

var a = 20;
var b = 40;
var c = 60;

if(a > b) {
    console.log("a는 b보다 크다.");
} else if(b > c ) {
    console.log("b는 c보다 크다.");
} else if(a < c) {
    console.log("a는 c보다 작다.");
} else if(b < c) {
    console.log("b는 c보다 작다.");
} else {
    console.log("모든 조건을 만족하지 않는다.");
}

※ 조건들 중에서 여러 가지 참(true)가 존재할 경우, 가장 먼저 나오는 참(true)만 실행함

● 중첩 IF문 – 버그나 오류를 발생시키지 않게 하기 위해, 좀더 논리구조를 탄탄하게 하기 위해 사용함

예시)

if(a !== b) {

    if(a > b) {
        console.log("a는 b보다 크다.");
    } else {
        console.log("a는 b보다 작다.");
    }

} else {
    console.log("a와 b는 같다.");
}

● 거짓이 되는 상황

false, ‘ ’ & “ ”, 0, null, undefined

●. 삼항 연산자

예시)

var age = 15;

if(age >= 18) {
    console.log("성인");    
} else {
    console.log("어린이");
}


var result = (age >= 18) ? "성인" : "어린이";
console.log(result);

● 조건문 응용 ① prompt

자바스크립트에서 미리 만들어진 메서드, 브라우저 환경에서만 동작함(브라우저마다 모양은 차이가 있음)

사용자한테 어떤 값을 전달받을 때 사용되는 팝업을 띄우는 기능

var userID = prompt("아이디를 입력해 주세요.");
var userPW = prompt("비밀번호를 입력해 주세요.");

console.log(userID); console.log(userPW);

![prompt_ex](https://images.velog.io/images/rim_chaeeop/post/92d38421-adc3-497e-8e82-79da61e30439/prompt_ex.JPG)

※ 예시로 userID와 userPW에 ‘Chaeeop’과 12345를 입력한 경우, 아래와 같이 출력함
![prompt_result](https://images.velog.io/images/rim_chaeeop/post/e706bc0d-a224-4683-8bc0-cd1f76d90b3d/prompt_result.JPG)

- 여기서 조건문과 alert를 통해서 입력값에 대한 결과창을 띄울 수 있음


if(userID === "Chaeeop" && userPW === "12345") {
    alert("로그인되었습니다.");
} else {
    alert("아이디 또는 비밀번호가 틀렸습니다.")
}

※ userPW가 “12345” (문자열)이 아닌 12345(숫자)라면 에러가 발생함
 → ```prompt```로 전달받는 값은 데이터 타입이 string(문자열)

※ ```parseInt``` -  메서드를 사용하면 문자열로 전달된 숫자를 정수 숫자 데이터 타입으로 변환시킴
예시)

var userPW = prompt("비밀번호를 입력해 주세요.");

if(parseInt(userPW) === 12345) { alert("로그인되었습니다."); } else { alert("비밀번호가 틀렸습니다.") }


● 전역 변수와 지역 변수
※ 함수(```function```)을 기준으로 나누어짐
① 전역 변수 : 함수 바깥쪽에서 만들어진 변수, 함수 안쪽과 바깥쪽 모두 영향력을 행사할 수 있음
② 지역 변수 : 함수 안에서 만들어진 변수, 함수 안에서만 영향력을 발휘함

예시)

var globalV = "전역변수";

function func() { var localV = "지역변수";

console.log(globalV);
console.log(localV);

}

func();

console.log(globalV); console.log(localV);

![global_local_V](https://images.velog.io/images/rim_chaeeop/post/a326557e-e0c1-4158-8496-31eb4ec1c84b/global_local_V.JPG)

※ 최신 JavaScript에서의 변수 작성 → let, const도 사용함

※ 변수 만들 시 주의점

예시)

var gv = "전역변수";

function func() { var gv = "지역변수"; console.log(gv); }

func();

console.log(gv);

![gv_caution](https://images.velog.io/images/rim_chaeeop/post/8427af98-59b4-4c73-b56c-3ab5727b4a25/gv_caution.JPG)

※ 전역변수를 조금 더 간편하게 확인하는 방법 → 브라우저의 검사 기능을 이용하여 console를 이용
→ console창에서 ```window```를 입력하고 실행

● 스코프 – 변수가 영향력을 발휘할 수 있는 범위
① 전역 스코프 – 모든 영역에 영향력을 발휘 할 수 있는 스코프
예시)

var gv = "전역변수";

function func() { console.log(gv); }

func();

console.log(gv);

② 지역 스코프 – 함수 안에서만 영향력을 발휘 할 수 있는 스코프

예시)

function func() { var lv = "지역변수"; console.log(lv); }

func();

console.log(lv);

![local_scope](https://images.velog.io/images/rim_chaeeop/post/c0553d86-86db-4d38-8c87-fe6d8621ce82/local_scope.JPG)


★ 함수(지역 스코프)는 서로의 스코프에 접근할 수 없다!!

예시)

function a() { var apple = "사과"; }

function b() { a(); console.log(apple);
}

b();

![scope_function_notApproach](https://images.velog.io/images/rim_chaeeop/post/25d12ccb-1879-41be-b885-1aa4fbdee7b6/scope_function_notApproach.JPG)

※ 함수 ```b()```가 함수 ```a()```에 접근할 수 없기에, 정의되지 않았다(```not defined```)는 결과가 나옴.

● 스코프 체인 – 함수 안쪽에서부터 외부를 탐색하는 것
※ 안쪽에서 바깥쪽으로 탐색은 가능하지만, 바깥쪽에서 안쪽으로의 탐색은 불가능함

예시)

var a = 10;

function func1() { var b = 20;

function func2() {
    var c = 30;
    console.log(a + b + c);
}

func2();

}

func1();

![scope_chain_1](https://images.velog.io/images/rim_chaeeop/post/d55fecac-8dae-4bfd-a196-45d98fa6b506/scope_chain_1.JPG)

※ 작동 순서
① ```func1()```을 호출하여 실행함
② ```func1()``` 안의 ```func2()```를 호출하여 실행함
③ ```func2()```의 ```console.log```를 실행하고자 정의된 a와 b를 찾아서 ```func1()```과 ```전역스코프```를 순서대로 찾아서 값을 할당함


● 렉시컬 스코핑(Lexical scoping)

예시)

var name = "Chaeeop";

function func1() { console.log(name); }

function func2() { name = "Rim"; func1(); }

func2();

![Lexical_scoping_1](https://images.velog.io/images/rim_chaeeop/post/10f34f3f-2ea1-4370-8a1a-74809f5f4bdc/Lexical_scoping_1.JPG)

예시2)

var name = "Chaeeop";

function func1() { console.log(name); }

function func2() { var name = "Rim";

func1();

}

func2();

![Lexical_scoping_2](https://images.velog.io/images/rim_chaeeop/post/a01ab55e-51bf-49a4-ae9e-1d2baa3f546d/Lexical_scoping_2.JPG)

● 호이스팅
① 변수 호이스팅 – 원칙상 코드 작성 순서대로 실행이 되어야 하지만, 실행할 때, 변수 호이스팅으로 변수 선언이 자동적으로 순서가 위로 배치되는 것

예시)

console.log(a);

var a;

// console.log(a);


→ ```console```에서 ```not defined```가 아닌 ```undefined```가 출력됨

※ 변수 호이스팅은 변수 선언에 관해서만 호이스팅이 되고, 변수 초기화에는 적용되지 않음

예시2)

console.log(a);

var a; a = "나는 A다.";

console.log(a);

![hoisting_1](https://images.velog.io/images/rim_chaeeop/post/04bc1487-e159-430b-a52d-d7b16bd15911/hoisting_1.JPG)

→ 변수 선언과 초기화를 동시에 진행해도(```var a = “나는 A다.”;```) 같은 호이스팅 결과가 나옴

② 함수 호이스팅 – 변수 안에 함수를 할당시키지 않는 방식으로 함수를 만들 때, 가능함

예시)

/* function func1() { console.log("Func1 함수다."); } */

func1();

function func1() { console.log("Func1 함수다."); }

// func1();

![hoisting_function](https://images.velog.io/images/rim_chaeeop/post/a6f75d00-404e-4005-832a-b50d75c4f74a/hoisting_function.JPG)

※ 주의점 – 변수를 만들어서 함수 안에 할당하는 방식으로 만들었다면, 함수 호이스팅은 발생하지 않음

예시)

// var func2 = undefined;

func2();

var func2 = function () { console.log("Func2 함수다"); }

// func2();


● 자바스크립트에서 빈번하게 사용되는 객체와 메서드들

1) ```Math``` 객체
- ```console.log(Math);```를 통해서 여러 프로펄티와 메서드를 확인할 수 있음
- 참고 사이트 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math

① ```Math.abs()``` - 절대값을 반환하는 메서드
② ```Math.ceil()``` - 전달된 인수를 ‘올림’ 처리하는 메서드
③ ```Math.floor()``` - 전달된 인수를 ‘내림’ 처리하는 메서드
④ ```Math.random()``` - 랜덤한 숫자를 뽑아내는 메서드, 0이상에서 1미만의 값을 범위로 갖고 있음

예시)

var num1 = Math.abs(-3); console.log(num1);

var num2 = Math.ceil(0.3); console.log(num2);

var num3 = Math.floor(10.9); console.log(num3);

var num4 = Math.random(); console.log(num4);

![Math_1_4](https://images.velog.io/images/rim_chaeeop/post/01964340-acaf-4cec-9f48-5d6246fc43ec/Math_1_4.JPG)

2) ```parseInt()```, ```parseFloat()``` - 문자열 데이터 타입을 숫자형 데이터 타입으로 변경할 때 사용함
① ```parseInt()``` - 정수형태로 변환
② ```parseFloat()``` - 실수형태로 변환

예시)

var str1 = "20.6"; var str2 = "3.14";

console.log(typeof str1); console.log(typeof str2);

var num1 = parseInt(str1); var num2 = parseFloat(str2);

console.log(num1); console.log(typeof num1); console.log(num2); console.log(typeof num2);

![parseInt_perseFloat](https://images.velog.io/images/rim_chaeeop/post/f162eee4-504d-4da0-bb17-f55ed4b7d7cb/parseInt_perseFloat.JPG)



## □ 어려웠던 점
 자바스크립트라는 내용 자체가 처음이라서 내용을 이해하기가 많이 어려웠습니다.

## □ 해결방법
 강의 내용 중 이해가 되지 않으면 그 부분을 반복해서 보고, 인터넷에서 추가적으로 검색하여 해결하고자 하였습니다.

## □ 학습 소감
 자바 스크립트에 대해 조금씩 알아가고 있지만, 아직 이해하는데 시간이 많이 걸려서, 저 스스로 더 노력해야 된다고 생각합니다.

[대구AI스쿨] JavaScript 개발일지

Mon, 30 Aug 2021 03:10:57 GMT

□ 자바스크립트 - 1강

작성코드

Git 링크.자바스크립트

1. 자바스크립트란?

● 웹사이트의 주요기능, 주요 애니메이션 효과를 구현하는 언어

● 하이브리드 앱

html, css, javaScript를 같이 이용하여 안드로이드 앱, 애플 앱을 개발 할 수 있음

● node.js – 자바스크립트 언어로 구성되어 있는, 서버개발을 도와주는 도구

● Iot에서도 활용 가능

2. 자바스크립트 특징

● 인간에게 친숙한 언어, High Level Language(하이레벨 언어)

● 3가지 분야로 구분해서 공부하기 ① 자바스크립트 코어 – 개발언어의 문법적인 내용을 담당 ② 클라이언트 측 자바스크립트 – 브라우저를 제어할 때 사용하는 자바스크립트 ③ 서버 측 자바스크립트 – 서버와 관련된 자바스크립트, node.js의 사용 영역

3. 자바스크립트 적용 방법

① html 파일 내에서

[main.js] console.log("Main");


[custom.js]
console.log("custom");
![custom_js](https://images.velog.io/images/rim_chaeeop/post/41e5184b-c784-4390-8738-80727c6159fc/custom_js.JPG)


※ ```main.js``` 에서 작성한 내용을 ```custom.js```에서 호출이 가능함. 단, 연동되는 순서는 중요함.

예시)
[html]



[main.js]
function mainFunc() {
    console.log("Main Func");
}
[custom.js]
mainFunc();
![custom_js_2](https://images.velog.io/images/rim_chaeeop/post/ac88ad73-692d-4616-865f-b796b2542c6c/custom_js_2.JPG)

## □ 어려웠던 점
 자바스크립트라는 내용 자체가 처음이라서 내용을 이해하기가 많이 어려웠습니다. 

## □ 해결방법
 강의 내용 중 이해가 되지 않으면 그 부분을 반복해서 보고, 인터넷에서 추가적으로 검색하여 해결하고자 하였습니다.

## □ 학습 소감
 새로운 프로그래밍 언어를 배우는 것은 정말 어렵다는 것을 체감합니다. 이러한 내용을 단시간에 습득할 수 있을지 걱정은 되지만, 최선을 다해보고자 합니다.



[대구AI스쿨] 21.08.30 개발일지
Thu, 26 Aug 2021 07:27:48 GMT
□ 유튜브 2/3
★ 작성코드
Git 링크.유튜브 카피캣
1. 유튜브 왼쪽 nav 영역
● word-break : 텍스트의 줄바꿈의 영향을 주는 CSS 속성

keep-all 속성값 : 단어를 기준으로 줄바꿈

예시)
#youtube-left-content .youtube-footer .txt-wrap a {
    margin-right: 8px;

    color: #aaaaaa;
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;

    word-break: keep-all;
}
● 결과 스크린샷


2. 유튜브 메인 컨텐츠 영역
● 결과 스크린샷

□ 유튜브 3/3
1. 유튜브 채널 페이지 영역
● 결과 스크린샷

2. 유튜브 채널 탐색 페이지 영역
● 결과 스크린샷

□ 어려웠던 점
 특별히 어려웠던 내용은 없었습니다.
□ 해결방법
 강의 내용을 듣고, 코드를 작성해보면서 오타나 오류가 생기면 찾아서 수정하였습니다.
□ 학습 소감
 유튜브와 유사한 구조를 만들기 위해서 많은 div 태그를 만들어야 되서 차후에 이와 비슷한 상황이 되었을 때, 이에 대한 명칭을 지정하는 것이 고민이 많이 되었습니다.



[대구AI스쿨] 21.08.26 개발일지
Tue, 24 Aug 2021 02:47:55 GMT
□ 유튜브 1/3
★ 작성코드
Git 링크.유튜브 카피캣
1. 유튜브 전체 구역 설정
● 유튜브 왼쪽 메뉴 영역 공간 만들기 

유튜브 왼쪽 메뉴 영역에서 스크롤바가 content 영역을 침범하지 않게 하기위해 구역을 하나 더 추가함
왼쪽 메뉴 전체 영역의 width 값(240px)에서 스크롤바 생성 크기를 제외한 값을 content 영역의 width 값(225px)으로 설정함

예시)
[html]

     

     


[CSS]
#youtube-left-nav {
    overflow-x: hidden;
    overflow-y: auto;
    position: fixed;

    width: 240px;
    background-color: #212121;

    top: 56px;
    left: 0;
    bottom: 0;
}

#youtube-left-content {
    position: absolute;
    width: 225px;
    height: 100%;
    background-color: grey;
}
2. 유튜브 상단 영역
● 결과 스크린샷

□ 어려웠던 점
 특별히 어려웠던 내용은 없었습니다.
□ 해결방법
 강의 내용을 듣고, 코드를 작성해보면서 오타나 오류가 생기면 찾아서 수정하였습니다.
□ 학습 소감
 실생활에서 가장 많이 보는 사이트 중 하나인 유튜브 사이트의 구조에 대해 이해할 수 있었습니다.



[대구AI스쿨] 21.08.25 개발일지
Mon, 23 Aug 2021 00:45:25 GMT
□ CSS 추가 설명
★ 작성코드
Git 링크.CSS 추가설명
1. Reset CSS와 노멀라이즈 CSS
1) Reset CSS
● CSS 작성시, 전부 초기화하는 내용을 작성해놓은 코드 – 원래 html 태그가 가지고 있는 고유의 CSS를 초기화시킴
링크 : https://meyerweb.com/eric/tools/css/reset/
※ 링크 코드 내용 복사하여 reset.css에 붙여넣기
● 코드 작성(캐스케이딩 효과)
[html]


    
    

2) 노멀라이즈 CSS(normalize css) - 실무 사용비중은 조금 높지만, 작업 환경에 따라 다름
● 기존의 디자인을 약간의 가공을 한 형태로 만들어진 CSS
링크 : https://necolas.github.io/normalize.css/
● 브라우저마다 들어가는 CSS 디자인이 다르기에 디자인의 오차를 줄이고, 버그를 줄이는 방향으로 스타일을 정리할 때 사용하는 CSS
2. CSS 변수
※ 익스플로러에서는 사용할 수 없음
1) 변수 사용 예시(:Root는 전체 범위에 적용함)
:root {
    --black: #18181a;
    --brand-color: #9147ff;
    --font-size-16: 16px;
}

h1 {
    background-color: var(--black);
    font-size: var(--font-size-40);
    color: var(--brand-color);
}
● 결과 스크린샷

2) CSS 선택자 - 변수 사용범위 제한
예시)
[html]


    
        Header P
    

    
        Footer P
    



[CSS]
#intro {
    --font-size: 50px;
    --font-color: blue;
}

#intro p {
    font-size: var(--font-size);
    color: var(--font-color);
}

#footer p {
    font-size: var(--font-size);
    color: var(--font-color);
}
● 결과 스크린샷

□ 어려웠던 점
 특별히 어려웠던 내용은 없었습니다.
□ 해결방법
 강의 내용을 듣고, 코드를 작성해보면서 오타나 오류가 생기면 찾아서 수정하였습니다.
□ 학습 소감
 CSS에 대한 보충 내용을 들을 수 있어서 좋았습니다. 그리고 앞서 들었던 Twitch 강의에서 어떻게 CSS 코드가 작성되었는지 알 수 있었습니다.



[대구AI스쿨] 21.08.23 개발일지
Thu, 19 Aug 2021 04:35:13 GMT
□ 트위치 2/2
★ 작성코드
Git 링크.트위치
1. 트위치 메인 콘텐츠 영역
● background: url()을 이용하여 이미지를 넣을 때, 이미지가 공간에 맞지 않을 경우와 수정방법


위와 같이 이미지가 맞지 않을 경우, background-size: cover를 이용하여 공간에 맞춰서 조절(확대, 축소)하는 기능을 이용함(원본 비율은 유지함)
※ background-size: cover를 이용하면, 공간에 따라 콘텐츠들이 가운데로 모이도록 기능을 하기에 이에 맞춰서 코드를 작성해야 함

background: center는 이미지의 기준점을 공간의 가운데로 설정함



예시)
.content #content-banner {
    position: relative;
    width: 100%;
    height: 350px;
    background: url(../img/notebook.jpg) no-repeat center;
    background-size: cover;
}
● background에서 layer를 적용하기

layer를 이용하여 배경이미지에 여러 가지 효과를 적용할 수 있음
background-color: rgba()를 이용하여 음영을 줄 수 있음


예시)
.content #content-banner .layer {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);

    top: 0;
    left: 0;
}
● 결과 스크린샷(메인 content)

● 결과 스크린샷(footer)

□ 어려웠던 점
 position이 3차원일 때, top이나 bottom 등을 이용한 좌표 설정에 대한 이해가 조금 어려웠습니다.
□ 해결방법
 강의 내용을 복습하고, 직접 코드를 작성하고 수정해보면서 이해하였습니다.
□ 학습 소감
 이제까지 해왔던 NAVER 사이트 카피캣과는 차이점이 많아서, 이를 코드로 구현하는 것이 재미있었습니다.



[대구AI스쿨] 21.08.19 개발일지
Wed, 18 Aug 2021 05:11:32 GMT
□ 트위치 1/2
★ 작성코드
Git 링크.트위치
1. 트위치 상단 영역
● 결과 스크린샷

2. 트위치 메인 영역
● left-area 영역이 화면의 크기가 변하더라도, 그에 맞춰 화면에 채워지도록 하는 방법

position이 3차원인 상태에서 top의 값을 지정하고, bottom: 0;을 설정하면 공간이 늘어지게 됨

예시)
.left-area {
    position: fixed;    
    width: 240px;     
    background-color: #202024;

    top: 52px;
    left: 0;
    bottom: 0;
}
● 결과 스크린샷

□ 어려웠던 점
 특별히 어려웠던 내용은 없었습니다.
□ 해결방법
 강의내용에 따라 코드를 작성하고, 필요한 부분은 직접 코드를 수정하였습니다.
□ 학습 소감
 position: fixed의 사용에 대해 잘 이해할 수 있었습니다. 그리고 사이트마다 자신들의 코드 내용을 보호하기 위해 다양한 방법을 사용하고 있다는 것을 알 수 있었습니다.



[대구AI스쿨] 21.08.18 개발일지
Tue, 17 Aug 2021 04:37:12 GMT
□ 네이버 오디오클립 3/3
★ 작성코드
Git 링크.네이버 오디오클립
1. 오디오클립 메인 오른쪽 영역
● display: inline-block 상태에서는 margin: 0 auto; (x축 가운데 정렬)이 적용되지 않기에, display: block으로 바꿔줘야 함
● 결과 스크린샷(인기채널 소개 & 오늘의 발견)

● 결과 스크린샷(오디오클립 안내)

2. 오디오클립 메인 하단 영역
● 결과 스크린샷

3. 오디오클립 카테고리 영역
● nth-child() 활용 방법
① li 태그 중에서 홀수의 li태그에만 적용하기(odd)
예시)
.audio-category .audio-category-lists .category-list:nth-child(odd) a {
    background-color: green;
}
② li 태그 중에서 짝수의 li태그에만 적용하기 (even)
예시)
.audio-category .audio-category-lists .category-list:nth-child(even) a {
    background-color: blue;
}
● 결과 스크린샷(카테고리 영역 메인)

□ 어려웠던 점
 특별히 어려웠던 내용은 없었습니다.
□ 해결방법
 강의내용에 따라 코드를 작성하고, 필요한 부분은 직접 코드를 수정하였습니다.
□ 학습 소감
 어떤 부분을 공통영역으로 정하고, CSS코드를 작성해야 하는지를 점차 알아가고 있습니다.



[대구AI스쿨] 21.08.17 개발일지
Mon, 16 Aug 2021 06:01:37 GMT
□ 네이버 오디오클립 2/3
★ 작성코드
Git 링크.네이버 오디오클립
1. 오디오클립 메인 왼쪽 영역
● latter-spacing : 글자간의 간격 조정
예시)
.audio-section .audio-header h2 {
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -.8px;
}
※ 글자간의 간격을 0.8px만큼 좁힘
● audio-container에서 overflow: hidden을 사용하지 못하는 경우

오늘의 오디오클립에서 방향 버튼을 표시하려고 할 때, container에 overflow: hidden이 적용되어 있으면 아래와 같은 결과가 나옴

#audio-main .audio-container {
    overflow: hidden;    
}


방향 버튼이 정상적으로 위로 표현되게 하기 위해 overflow: hidden과 float를 사용하지 않고, flex-between를 사용함

[html]


[CSS]
#audio-main .audio-container {    
    align-items: flex-start;
}

● 결과 스크린샷(오늘의 오디오클립)

● 결과 스크린샷(오디오클립 추천 오리지널 & 나를 위한 플레이리스트)

● 결과 스크린샷(라이브ON)

● 결과 스크린샷(오디오북 TOP 100 & 새로 나온 채널)

□ 어려웠던 점
 강의 내용에 덧붙여서 코드를 작성하였을 때, 원하는 결과가 나오지 않아서 이를 수정하는 것이 어려웠습니다.
□ 해결방법
 시간을 들여서 작성한 부분을 하나하나 검토하고, 수치를 조정하면서 오류를 수정하였습니다.
□ 학습 소감
 강의 내용을 따라하는 것은 크게 어렵지 않지만, 더 비슷하게 표현하기 위해 추가적인 코드를 작성했을 때, 오류가 생기지 않고 원하는 결과를 나오게 하는게 생각보다 많이 어려웠습니다. 



[대구AI스쿨] 21.08.13 개발일지
Thu, 12 Aug 2021 03:03:33 GMT
□ 네이버 e스포츠 3/3
★ 작성코드
Git 링크.네이버e스포츠
1. 메인 오른쪽 영역
● 사각형의 네 꼭지점 중, 원하는 곳만 radius값 적용하기
예시)
#esport-news-view li .image-wrap .rank {
    position: absolute;
    background-color: #4e41db;
    border-bottom-right-radius: 4px;

    padding: 4px 10px;

    top: 0;
    left: 0;

    font-size: 13px;
    color: #fff;
    font-weight: 800;
}
● 결과 스크린샷(특정 부분에만 border-radius 적용)

● 폰트 서체 지정하기

font-family를 사용하여 폰트 서체 지정 가능
브라우저마다 적용 가능한 폰트가 달라서 여러 개의 폰트를 적용함
sans-serif는 모든 브라우저에서 적용 가능한 폰트

예시)
* {
    font-family: Arial, Times, sans-serif;
}
● 구글 폰트 웹에서 받아서 사용하기 – https://fonts.google.com/

① 구글 폰트에서 원하는 서체를 선택하기
② 원하는 폰트 weight style을 선택하고 link를 복사하여 코드에 붙여넣기(※ CSS link보다 위에)
※ 폰트마다 적용가능한 weight가 각각 다름
예시)
[html]



    

    
    
    
    

[CSS]

* {
    font-family: 'Nanum Gothic', sans-serif;
}
● 결과 스크린샷(많이 본 뉴스)

● 결과 스크린샷(경기 일정/결과)

□ 네이버 오디오클립 1/3
1. 오디오클립 상단 영역
● 활성화된 메뉴 하단에 밑줄 생성하는 방법 중 하나


3차원 공간(position: fixed, relative, absolute)에서 이용하는 방법
top, bottom, left, right를 이용하여 공간을 만듬

예시)
[html]


    홈
    랭킹
    연재 채널
    오디오북
    카테고리
    이벤트                        
[CSS]

#audio-header .audio-nav-left li a {    
    display: block;
    font-size: 17px;
    padding: 12px 13px 17px 12px;    
}

#audio-header .audio-nav-left li a.active {
    font-weight: 700;
}

#audio-header .audio-nav-left li a span {
    position: relative;
    display: inline-block;
    height: 21px;
}

#audio-header .audio-nav-left li a.active span::after{
    display: block;
    position: absolute;
    content: '';     
    border-bottom: solid 3px #222222;
    border-radius: 1.5px;

    z-index: 1;

    left: -4.5px;
    right: -5.5px;
    bottom: -22px;
}
● 결과 스크린샷(오디오클립 상단 영역)

□ 어려웠던 점
 강의내용에 덧붙여서 자신의 판단에 따라 코드를 수정하고, 원하는 결과가 나오게 하는 것이 어려웠습니다.
□ 해결방법
 이전에 배운 강의 내용을 참고하고, 인터넷에서 다른 사람들이 올려놓은 자료와 방법을 참고하여 수정하였습니다.
□ 학습 소감
 따라하는 것만이 아니라 자신이 생각하기에 더 나은 방법을 적용하는 것이 어렵다는 것을 새삼 깨달았습니다.



[대구AI스쿨] 21.08.12 개발일지
Wed, 11 Aug 2021 05:06:21 GMT
□ 네이버 e스포츠 2/3
★ 작성코드
Git 링크.네이버e스포츠
1. 메인 왼쪽 영역
● 기사 영역 3분할(1:0.5:0.5) 방법


float 기능과 width: %값, height: %값을 사용하여 구역을 3분할함

예시)
[html]



     

     

     

     

     

     

[CSS]

#esport-main-article {
    overflow: hidden;
    width: 100%;
    height: 468px;    
    border-radius: 10px;
}

#esport-main-article .article {
    float: left;
    width: 50%;
    height: 50%;
}

#esport-main-article .article.full {
    height: 100%;    
}
● 결과 스크린샷(3분할)

● 2줄 이상의 문장에 대한 말줄임 표현하기
① CSS에서 아래의 내용을 넣음
  display: -webkit-box; 
  -webkit-line-clamp: 3; 
  -webkit-box-orient: vertical;  

  overflow: hidden;
  text-overflow: ellipsis;
② height 혹은 max-height로 높이 설정
예시)
#esport-main-article .article .txt-wrap p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;

    overflow: hidden;
    text-overflow: ellipsis;    

    max-height: 57px;    

    margin-top: 5px;

    font-size: 14px;
    font-weight: 500;
    line-height: 19px;
}
● 결과 스크린샷(3분할&경기 다시보기)

● 결과 스크린샷(추천뉴스&전문가 칼럼)

□ 어려웠던 점
 특별히 어려운 점은 없었습니다.
□ 해결방법
 강의 내용에 따라 순서대로 코드를 작성하여 해결하였습니다.
□ 학습 소감
 반복학습을 통해 사이트를 보면 어떻게 구성이 되어있고, 이를 코드로 작성하면 어떻게 해야하는지가 익숙해지고 있습니다.



[대구AI스쿨] 21.08.11 개발일지
Tue, 10 Aug 2021 02:56:31 GMT
□ 네이버 e스포츠 1/3
★ 작성코드
Git 링크.네이버e스포츠
1. 상단 영역
● 결과 스크린샷

2. 메인 Top 영역
● 형제관계의 레이아웃 겹침현상 수정 

상단 영역이 position: fixed를 사용하여 3차원이 되어 main영역과 레이아웃이 겹치게 됨


이를 수정하기 위해 padding-top값을 상단영역의 height값(※ border값 포함)만큼 넣어줌



● 결과 스크린샷(Timeline 영역)

● 결과 스크린샷(Live 영역)

□ 어려웠던 점
 position: fixed를 자주 사용하지 않다보니, fixed만 적용했을 때 어떻게 수정해야하는지가 바로 생각나지 않았습니다.
□ 해결방법
 강의 내용에 따라 순서대로 코드를 작성하여 해결하였습니다.
□ 학습 소감
 마진병합현상이나 형제관계의 레이아웃 겹침현상이 발생했을 때, 이를 수정하는 방법을 많이 공부해야겠다는 생각을 하게 되었습니다.



[대구AI스쿨] 21.08.10 개발일지
Mon, 09 Aug 2021 04:06:04 GMT
□ 네이버게임 3/3
★ 작성코드
Git 링크.네이버게임
1. 네이버게임 메인 오른쪽
● 결과 스크린샷(최근 방문 영역)

● 결과 스크린샷(인기 게임라운지 및 급상승 게임 라운지 영역)

● 결과 스크린샷(e스포츠 주요 뉴스 영역)

● 결과 스크린샷(이번주 신생 라운지 및 이용약관 영역)

□ 어려웠던 점
 폰트마다 같은 font-size값을 적용하더라도 나오는 글자 크기 결과가 차이가 있어서, 이를 네이버게임 사이트와 유사하게 맞추는 것이 어려웠습니다.
□ 해결방법
 브라우저의 검사를 통해 속성값을 수정해보면서 원하는 결과값을 맞췄습니다.
□ 학습 소감
 코드를 작성하면서 공통으로 사용될 수 있는 영역을 따로 CSS에 작성해놓으면, 그만큼 코드 작성 시간이 줄어들 수 있다는 것을 점점 확실히 체감하고 있습니다.



[대구AI스쿨] 21.08.06 개발일지
Fri, 06 Aug 2021 03:11:13 GMT
□ 네이버게임 2/3
★ 작성코드
Git 링크.네이버게임
1. 네이버게임 메인 왼쪽 2/2
● 결과 스크린샷(section-3)

● 결과 스크린샷(section-4)

● 결과 스크린샷(section-5)

● 결과 스크린샷(section-6)

□ 어려웠던 점
 CSS에 공통영역으로 작성한 내용과 커스텀해야하는 내용이 자주 번갈아가면서 나와서, 이를 오류없이 적용하는게 어려웠습니다.
□ 해결방법
 차근차근 코드를 작성하고, 브라우저의 검사를 통해 오류를 찾아 수정하였습니다.
□ 학습 소감
 앞서 만들어진 부분을 복사하여 커스텀하다보니, id나 class 명칭 차이로 인한 전혀 다른 결과값들을 수정하는 것이 힘들었습니다.



[대구AI스쿨] 21.08.05 개발일지
Thu, 05 Aug 2021 05:43:22 GMT
□ 네이버게임 1/3
★ 작성코드
Git 링크.네이버게임
1. 네이버게임
● css in js : 자바 스크립트를 기반으로 하여 css를 적용하는 방법
● box-shadow : 영역에 그림자를 넣는 속성
참고 사이트 : https://cssgenerator.org/box-shadow-css-generator.html
2. 네이버게임 상단
● 검색창 테두리에 radius 효과 나타내기
[html]

     
     
[css]
#game-header nav .right .search-wrap {
    width: 300px;
    border-radius: 20px;
    background-color: rgba(0, 0, 0, .28);
}


위의 상태에서는 input과 button의 영역으로 인해 테두리의 radius 효과가 보이지 않음
효과를 표현하기 위해 search-wrap { }에 overflow: hidden을 적용함

#game-header nav .right .search-wrap {
    width: 300px;
    border-radius: 20px;
    background-color: rgba(0, 0, 0, .28);

    overflow: hidden;
}

● 영역에 마우스를 가져다 놓을 때, 위로 부드럽게 동작하게 하기

css에서 event-wrap과 event-wrap:hover를 사용하여 아래의 코드를 입력함
top을 사용해 위치를 지정하고, trasition을 통해 부드러운 움직임을 표현함

#game-header .game-events-wrap .event-wrap {
    position: relative;
    width: 407px;
    height: 264px;
    border-radius: 40px;

    top: 0;
    transition: top linear 0.2s;
}

#game-header .game-events-wrap .event-wrap:hover {
    top: -10px;
}
● 결과 스크린샷

3. 네이버게임 메인 왼쪽 1/2
● 결과 스크린샷(section-1)

● 결과 스크린샷(section-2)

□ 어려웠던 점
 CSS에 공통영역으로 작성한 내용과 커스텀해야하는 내용이 자주 번갈아가면서 나와서, 이를 오류없이 적용하는게 어려웠습니다.
□ 해결방법
 차근차근 코드를 작성하고, 브라우저의 검사를 통해 오류를 찾아 수정하였습니다.
□ 학습 소감
 반복되는 내용에 대한 공통영역 작성이 많아서, 이에 대한 적절한 명칭과 커스텀해야하는 부분을 가려내는 것이 많이 헷갈렸습니다. 



[대구AI스쿨] 21.08.04 개발일지
Wed, 04 Aug 2021 02:49:45 GMT
□ 네이버 뉴스 – TV연예 페이지 3/3
★ 작성코드
Git 링크.네이버 TV연예
1. TV연예 메인 오른쪽
● 결과 스크린샷(section-10 & banner)

● 결과 스크린샷(section-11)

● 결과 스크린샷(section-12)

● 결과 스크린샷(section-13)

□ 어려웠던 점
 특별히 어려운 내용은 없었습니다.
□ 해결방법
 이해가 안되는 부분은 강의를 반복해서 들어서 해결하였습니다.
□ 학습 소감
 코드를 작성하는데 점차 걸리는 시간이 줄어들고, 어떻게 더 효율적으로 코드를 작성해야 하는지 고민하고 이를 코드에 반영하였습니다.



[대구AI스쿨] 21.08.03 개발일지
Tue, 03 Aug 2021 05:15:43 GMT
□ 네이버 뉴스 – TV연예 페이지 2/3
★ 작성코드
Git 링크.네이버 TV연예
1. TV연예 메인 왼쪽 2/2
● { box-sizing: border-box }의 사용유무 차이점( ※ li{ } 에 width 값과 border값이 있는 상태)
예시)
#ent-main .ent-left #ent-section-9 li {
    width: 200px;
    border: solid 1px #000000;
}

#ent-main .ent-left #ent-section-9 li a img {
    width: 200px;
    height: 122px;
}
① 사용하지 않을 경우 – li img{ } 의 width 값이 li의 width값과 같아도 img가 border를 침범하지 않음

② 사용할 경우 - li img{ } 의 width 값이 li의 width값과 같으면 img가 border를 침범함

→ 침범하지 않으려면 li img{ } 의 width 값을 100%로 함
예시)
#ent-main .ent-left #ent-section-9 li a img {
    width: 100%;
    height: 122px;
}
● 결과 스크린샷(section-4)

● 결과 스크린샷(section-5~6)

● 결과 스크린샷(section-7)

● 결과 스크린샷(section-8)

● 결과 스크린샷(section-9)

□ 어려웠던 점
 특별히 어려운 내용은 없었습니다.
□ 해결방법
 이해가 안되는 부분은 강의를 반복해서 들어서 해결하였습니다.
□ 학습 소감
 강의 내용을 보면서 실제 코드를 작성하였을 때, 원하는 결과값이 나오지 않을 경우 문제점을 직접 찾아서 수정을 할 수 있었습니다. 그리고 카피캣을 좀 더 비슷하게 하기위해 직접 수치나 속성값을 주어서 더 나아보이도록 노력하였습니다.



[대구AI스쿨] 21.08.02 개발일지
Mon, 02 Aug 2021 04:36:59 GMT
□ 네이버 뉴스 – TV연예 페이지 1/3
★ 작성코드
Git 링크.네이버 TV연예
1. TV연예 상단
● margin 병합 현상

형제 관계에서 공통된 공백이 있는 경우, 큰 값이 작은 값을 병합함
형제 관계에서는 margin 병합 현상이 top, bottom에서만 일어나고 left, right에서는 일어나지 않음

● 결과 스크린샷

2. TV연예 메인 왼쪽 1/2
● { letter-spacing } : 글자간 간격 조정
예시)
#ent-main .ent-left #ent-media-headline .media-bottom p {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -1px;
}
● 결과 스크린샷

□ 어려웠던 점
 특별히 어려운 내용은 없었습니다.
□ 해결방법
 이해가 안되는 부분은 강의를 반복해서 들어서 해결하였습니다.
□ 학습 소감
 사이트의 구조를 어떻게 체계적으로 만드는 가에 대해 생각하게 되었고, 그 구조에서 반복 활용될 수 있는 부분을 찾아내서 재활용하는 것에 익숙해져가고 있습니다.