JLog🦖

대구AI스쿨 실무 프로젝트

Mon, 04 Oct 2021 13:54:24 GMT

약 한 달 간의 대구AI스쿨 마지막 실무 프로젝트가 9월로 끝이났다. 개발자로서의 첫 발자취라 할 수 있는 이번 프로젝트에 대한 진행 과정을 기록해 보고자 한다. 😚

📕 프로젝트 개요

프로젝트 명칭 : <구로 항동 발도르프 킨더교육원> 사이트 구축
사이트 목적 : 기관 홍보
총 개발기간 : 21년 9월 6일 ~ 21년 9월 27일

📙 웹 개발 스터디

** 참고 : (1) http://plandas.kr/ui-ux-design/uxui-5/ (2) http://fureweb.com/web-development-process-from-planning-to-deploy/**

일반적으로 웹 사이트 구축은 크게 기획, 디자인, 퍼블리싱, 개발이라는 4단계를 거쳐서 진행된다.

** 요구분석 > 기획 > 디자인 > 퍼블리싱 > 개발 > 테스트 > 디버깅 > 오픈 **

이러한 단계를 기준으로 클라이언트와 프로젝트 진행자와 Kick off Meeting(프로젝트 구축 시작 미팅)을 시작으로 기획자, 디자이너, 퍼블리셔, 개발자의 협업을 통해 프로젝트가 진행된다. 일반적으로 일정에 따라 각 분야별로 겹쳐지면서 병행하여 진행되며 클라이언트의 요청에 의해 다양한 변수를 가져올 수 있다.

기획

일반적으로 계약을 통한 개발을 진행하게 된다면 클라이언트와의 미팅 후 요구사항을 정리하여 어떤 기능들이 존재해야하며 어떻게 사용자에게 보여져야하는지 정의하는 시기를 거치게 된다. 이때 화면, 기능, 프로세스 및 데이터베이스 등을 설계하게 된다.

** 사이트맵 작성 -> 화면설계(스토리보드) -> 화면별 프로세스 설계 -> 데이터베이스 설계 **

디자인

화면이 설계되고 페이지 범위가 확정되면 front-end라고 하는 사용자가 보는 페이지를 전부 제작한다.

웹사이트 전략에 따른 디자인 컨셉을 수립하고, 다양한 미디어와 시각적 요소를 활용하여 디자인 시안을 제작하며 클라이언트의 컨펌과정을 통해 완성해간다. 기획자와 원활한 소통을 통해 클라이언트와 사용자 입장을 고려하여 UX/UI 전략을 수립하고 컨셉을 설정한다. 이를 통해 시안을 제작하고 확정이 되면 실제 디자인을 진행한다. PC웹, Mobile웹 등의 범위에서 적응형, 반응형, 하이브리드 형으로 사용성을 고려하여 제작한다.

퍼블리싱

완료된 UX/UI 디자인을 HTML페이지로 코딩하는 과정 (디자인된 이미지를 실제로 웹 프로그램에 사용할 수 있도록 코딩을 해 주는 직군) 실제로 웹에 적용되는 표준을 잡아주는 직업이므로, HTML, CSS, 자바, 웹 표준, 웹 접근성, 심지어는 웹디자인에 대한 폭넓은 이해가 필요하다.

개발

개발단계는 웹을 구현하는 전문적인 프로그램 개발자가 진행하며 PHP, ASP, JSP, JQuery, Javascript 등 다양한 언어로 제작되어 진다. 기능 구현 등

📒 기획 단계

우리팀은 '구로 항동 발도르프 킨더교육원'을 담당해 기관 홍보 페이지를 제작하도록 요청받았다.

2주라는 짧은 개발기간과 백엔드 구현의 한계로 인해 전체 코딩을 하는 것이 아닌, 웹빌더를 이용한 작업을 진행하기로 했다. 따라서 가장 먼저 사이트 제작에 쓰일 웹빌더를 선정했다. 처음에는 공부한 HTML, CSS, JS를 많이 다룰 수 없어서 아쉬웠지만, 클라이언트 측에 전문가가 없어 사후 관리를 위해서라도 웹빌더를 사용하는 편이 나을 것 같다고 판단했다.

전달 받은 기획서에 간략한 홈페이지 레이아웃이 있어서 사이트맵과 스토리 보드를 우선 제작했다.

후에 기능 요구사항 정의서를 작성해 클라이언트 측에게 게시했다.

📗 디자인·퍼블리싱·개발 단계

웹빌더를 사용했기 때문에 위의 모든 단계를 통합해서 진행했다.

디자인을 담당하는 전문가가 따로 없었기 때문에 로고는 텍스트로 간단하게 삽입하였고, '유치원'과 '무지개'의 테마를 기본으로 잡고 산뜻하고 발랄한 분위기의 컨셉을 방향으로 잡았다. 또한 전체적으로 작업한 뒤 클라이언트에게 반복적으로 피드백을 받으며 수정해나갔다.

전체 폰트 서체 적용은 HTML과 CSS를 이용해 작업해 주었다. @font-face지시어로 사용할 웹폰트들을 호출하고, 개발자 도구를 이용해 각 요소의 클래스명을 찾아 속성값을 주었다.

pc버전으로 작성해 자동으로 제작된 모바일 버전의 일부 레이아웃이 틀어지는 현상이 발생해, 모바일 버전의 틀어지는 요소들을 제거하고 모바일 버전으로만 새로 삽입하였다.

📘 디버깅 단계

1. '교육활동 > 리듬활동' 페이지에 overlay로 삽입한 아이콘의 크기 축소

웹빌더에 내장된 기본 위젯으로 마우스 hover 애니메이션으로 아이콘을 삽입했으나, 아이콘의 크기가 전체 이미지를 덮을 만큼 커져서 줄어들지 않았다. background-size: 100px !important;를 삽입해 고정해주었다. 동일 클래스에 다른 background-size의 영향을 받고 있어서 그랬던 것 같다.

2. pc버전에서 모바일 버전으로 브라우저 사이즈 축소시, 텍스트로 삽입한 로고 틀어짐

1차 수정 min-width, display: flex;, flex-wrap: nowrap;을 적용했으나 먹히지 않음
2차 수정 flex-wrap: nowrap이 먹히지 않는 이유가 display: table-cell;일 것으로 추정, 가장 하위 클래스를 찾아 아래 값을 삽입
```
.inline-col-group {
overflow: visible; text-overflow: unset; white-space: nowrap;
```
=> 디버깅 완료

📚 Review

프로젝트 전체 소스 : 💾

처음해보는 웹 개발을 웹빌더로 작업한다는 것이 처음에는 마냥 당황스럽고, 3개월간 공부했던 코딩 요소들을 자유롭게 활용할 수 없다는 것에 불만이 많았다. 하지만 결국 웹개발에 있어서 최종 목표는 클라이언트가 해당 사이트를 잘 이용할 수 있게 하는 것이고, 내 실력을 뽐내는 장이 아니라는 것이다. 백엔드를 배우지 않은 나의 한계점을 인정하고 클라이언트의 요구사항에 맞게 개발 기간안에 작업을 끝마쳐야 한다는 것이 최우선사항이라는 것을 이번 프로젝트를 통해 깊이 깨달았다. 또한 웹빌더를 사용하는 과정에서 오로지 마우스로 드래그앤 드롭을 한것만이 아니라, 개발자 도구를 이용해 해당 기능을 어떻게 구현했는지를 면밀히 살피면서 오히려 자습이 되었다. 실제로 웹빌더를 이용해 사용은 하지 못했지만 Github 브랜치를 공부해 개발자들이 협업하는 방법을 익히기도 했다. 결과적으로 해당 프로젝트를 맡은 팀들 중에 우리팀의 사이트가 선정되었고, 프론트엔드 개발자로서 한 단계 성장한 것 같아 뿌듯하다.

210907 개발일지

Tue, 07 Sep 2021 14:45:57 GMT

📌 학습한 내용

전체 코드 : 💾

jQuery 라이브러리

라이브러리 : 반복적인 기능에 대해 미리 작성해둔 코드
production (압축된 버전, minify -> 파일의 용량을 줄여, 사이트의 로딩 속도를 줄임)
vs* development (압축이 안된 버전, javascript로 작성) ✔

jQuery 기본구조

: 아래와 같은 구조를 만든 뒤, 안쪽에 jquery관련 코드 기입

// 과거 버전
// html문서를 다 가져온 다음 jquery 코드를 실행
$(document).ready(function() {

});

// 3. 버전에서 간소화
$(function() {
    // console.log("Hello World");
})

jQuery 선택자

: querySelector와 동일한 접근 방법 사용(css와 동일)

// $('디자인 또는 기능을 적용할 영역')
$('header').css('background-color', 'yellow');
$('#masthead-id').css("color", "red");
$('.,masthead-heading').css("color", "blue");

// 해당 요소를 개별적으로 가져올 수도 있음
console.log($("#masthead-id"));

// 가져온 영역을 자바스크립트 변수 안에다가 할당 가능
// -> 암묵적으로 변수명 앞에 $기호로 변수명을 시작 
// -> (jQuery 라이브러리를 이용해 할당시킨 값임을 명시적으로 표기)
var $masthead = $("#masthead-id");
console.log(masthead);

부모 자식관계로도 요소에 접근 가능

$('header #masthead-id').css('color', 'red');
$('header #masthead-id.masrhead-subheading').css('color', 'red');

선택자가 존재하지 않을 때 : 비어있는 형태로 반환
```
console.log($("#test"));
```

jQuery 가상 선택자

코드는 항상 0부터 시작
:even : 인덱스 넘버에 따라 홀수 선택
:odd : 인덱스 넘버에 따라 짝수 선택

:eq(index) : 원하는 영역에 디자인 가능, 인덱스 넘버에 해당하는 요소에 적용

$('.nav-item:even').css('background-color', 'blue');
$('.nav-item:odd').css('background-color', 'green');
$('.nav-item:eq(3)').css('background-color', 'pink');

👉 라이브러리를 이용할 때, html에

var btn = document.querySelector("#btn");
btn.addEventListener("click", function(e) {
    // console.log(e);
    e.preventDefault();
});

📌 학습내용 중 어려웠던 점

appendChild()와 removeChild(), eventListener() 적용 도중 Uncaught TypeError: Cannot read property 'appendChild' of null 에러가 계속해서 발생
일지를 작성하던 중, 인수와 인자의 차이가 헷갈렸다.

📌 해결방법

대게는 ;이 빠진 경우였고, 오타가 없을 때 에러가 났을 경우는 다시 작성하니 해결되었다.
따로 서칭을 해본 결과 인수는 argument, 인자는 parameter라고 칭한다.

인수는 전달인자라고도 하며 매개변수와 달리 고정되어 있지 않고, 호출할 때마다 수시로 변하는 값(Value)이기 때문에 변수가 아닌 값(Value)으로 정의한다. 인자는 함수 내부에 있는 인자로써, 특정한 값으로 정해져 있는 것이 아니라, 함수가 호출하면서 건네준 argument의 값이변수(Variable)에 담기게 된다. 들어오는 인자가 매개체 역할을 하기 때문에 매개변수라고도 한다. ( 참고 사이트 : https://velog.io/@colki/JS-parameter-%EC%99%80-argument-%EC%9D%98-%EC%B0%A8%EC%9D%B4-%EC%9D%B8%EC%88%98-%EC%9D%B8%EC%9E%90 )

📌 학습소감

여태껏 해왔던 자바스크립트 문법과 실습을 하면서 '그냥 이런게 있구나' 하고 넘어갔던 부분들에 대해서 확실히 짚고 넘어갔다. 확실히 메서드 하나하나의 기능을 알고 사용하니 훨씬 이해가 잘 됐다. 😋

210901 개발일지

Wed, 01 Sep 2021 03:28:59 GMT

📌 학습한 내용

전체 코드 1 : 💾

생성자 함수 (클래스)

: 공통된 요소들을 묶어내는 일종의 박스

객체지향 프로그래밍 (OOP - Object Oriented Programming)과 밀접한 관계
(기능을 만들 때 사용하는) 일반 함수와 구분하기 위해 첫 글자를 대문자로 작성

// 생성자 함수 (붕어빵 틀에 비유)
function Heroes(name, age) {
    this.name = name;
    this.age = age;
} // this 자체가 인스턴스를 가리키고 있는 것

// 인스턴스 = new 생성자 함수명(매개변수) 
var superMan = new Heroes('슈퍼맨', 30);
var blackWidow = new Heroes('블랙위도우', 34);

인스턴스 : new 키워드를 이용해 생성자 함수를 호출한 결과값이 담겨진 결과물 (붕어빵에 비유)

생성자 함수 내에서 메서드 정의

function Person(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;

      // 인스턴스가 활용할 메서드 정의
    this.fullName = function() {
        console.log(this.firstName + " " + this.lastName);
    }
}

var jeong = new Person("Jane", "Jeong");
var park = new Person("David", "Park");

console.log(jeong);
console.log(park);

jeong.fullName();
park.fullName();

인스턴스 자체도 객체와 같은 구조를 가지고 있음

프로토타입 (Prototype)

: 생성자 함수 안에서 모든 인스턴스에 공통적으로 적용되는 메서드가 존재할 경우 사용

각각의 jeong과 park이라는 인스턴스에서는 firstName과 lastName에 서로 다른 키값이 들어가 있다. 하지만 fullName에 대해서는 동일한 값을 가지고 있다. -> 같은 코드가 반복적으로 노출되는 상황 -> 불필요한 메모리를 차지

👉 ** Person 생성자 함수를 만들 때, Person.prototype 객체가 같이 생성된다.**

// 조상 (Person.prototype)  
function Person(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
}

//Person.prototype 객체에 'fullName' 이라는 메서드를 추가한 것 (조상에게 기술을 부여한 것)
Person.prototype.fullName = function() { 
    console.log(this.firstName + " " + this.lastName);
}

// 후손(인스턴스 자체) - 조상에게 부여한 기술을 가져다 사용o , 가지고 있는 것은 x -> 불필요한 메모리를 가지지 x
var jeong = new Person("Jane", "Jeong");
var park = new Person("David", "Park");

jeong.fullName();
park.fullName();

인스턴스가 어떤 프로토타입으로 부터 영향을 받는 것인지 식별하는 방법

// 배열을 만드는 방법
var arr1 = [];
var arr2 = new Array();

Array() : 자바스크립트에서 만들어 놓은 배열을 만드는 생성자 함수, 데이터가 들어갈 자리를 미리 만들어 놓음 (비어있는 데이터)

// 문자열을 만드는 방법
var str1 = "Hello";
var str2 = new String("Nice");

String() : 자바스크립트에서 만들어 놓은 문자열을 만드는 생성자 함수. 단, 만들어진 데이터 타입은 객체.

//함수를 만드는 방법
var func1 = function() {
}
var func2 = new Function("x, y", "return x * y");
console.log(func2);

Function() : 자바스크립트에서 만들어 놓은 문자열을 만드는 생성자 함수.

=> arr2, str2, func2 = 인스턴스

console.dir() : 인자의 내부 구조를 좀 더 디테일하게 확인하고자 할 때 사용

`proto`

: 인스턴스의 조상(프로토타입 객체)을 알아낼 때 사용되는 프로퍼티

var person = new Object();
console.log(person);

person.name = "Jane";  // 새로운 프로퍼티 추가 가능
person.sayHi = function() {
    console.log("hi"); 
}  // 새로운 메서드 추가 가능

console.log(person);
console.log(person.__proto__ === Object.prototype);
// -> person의 조상이 Object.prototype 객체가 맞는가?
// output = true

Object.prototype : 모든 자바스크립트 객체의 조상

constructor

: 인스턴스의 생성자 함수를 알아낼 때 사용되는 프로피터

모든 생성자 함수의 프로토타입 객체는 Function.prototype 객체

.prototype객체가 들어가 있는 것은 객체, 생성자 함수 명만 있는 것은 생성자 함수

Person.prototype // 프로토타입 객체
Person // 생성자 함수

전체 정리

// 생성자 함수
function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}

// 인스턴스 var jeong = new Person("Jane", "Jeong")

console.log(jeong); console.log(jeong.proto === Person.prototype); // true console.log(Person.prototype.proto === Object.prototype); // true console.log(jeong.proto === Object.prototype); // false -> 중간 단계의 조상을 띄어넘는 것은 x

console.log(Person.proto === Function.prototype); // true 모든 생성자 함수의 직계 조상은 Function.prototype 객체 console.log(Function.prototype.proto === Object.prototype); // true

console.log(jeong.constructor === Person); // true console.log(Person.prototype.constructor === Person); // true


## this
: this가 어디에 포함되어 있는가에 따라서 가리키는 대상이 매번 달라짐 (코드를 간소화 하기 위해 주로 사용)

### 1. 일반 함수 this / 중첩 함수 this : window (브라우저)
* 중첩으로 들어가 있는 함수 안에서의 this는 무조건 window
```js
function a() {
    function b() {
        console.log(this);
    }
    b();  // window
}
a();  // window

2. 이벤트에서의 this : 이벤트 객체

var prevBtn = document.querySelector('.prevBtn');

prevBtn.addEventListener('click', function() {
    console.log(this);  // prevBtn
})

3. (객체안에 있는) 메서드 안에서의 this : 객체

var obj = {
    age: 100,
    sum: function() {
             console.log(this);  // obj 자체
    }
}
obj.sum();

4. 메서드 안에 함수(중첩함수)가 들어가 있는 경우 this : window(브라우저)

var obj = {
    age: 100,
    sum: function() {
             // console.log(this);  // obj 자체

               function a() {
        console.log(this); // window 
         }
        a();
    }
}
obj.sum();

5. 중첩 함수안의 this도 obj(객체)를 가리키게 하고 싶을 때 : 변수 that에 this를 저장

var obj = {
    age: 100,
    sum: function() {
        var that = this; // sum 안에서의 this는 obj를 가리킴 -> that에는 obj가 들어가게 됨
        function a() {
            console.log(that); 
        }
        a();
    }
}
obj.sum();

템플릿 리터럴 (Template Literal)

: `(벡틱)으로 문자열을 만들 수 있음, 변수 안의 값을 특정 문자열 안에 다이렉트로 삽입하고자 할 때 사용 (ES6 버전부터 도입)

백틱 안 문자열을 쓰고, ${}안에 자바스크립트 일부 코드(변수)를 작성할 수 있다.
```
var name = "jane";
```

console.log("내 이름은" + " " + name + "입니다."); console.log(내 이름은 ${name}입니다.);


## 실습
### 1. 생성자 함수 활용하기

![](https://images.velog.io/images/jiyoon_jeong2005/post/f4be393b-7687-4de5-a700-ee2a707fc2fa/js%EC%8B%A4%EC%8A%B51.gif)

* _'210831 개발일지'_ 의 4번 실습 코드 중, 이미지 정보 리스트를 생성자 함수로 생성

```js
var arr = [];
var i = 0;

// 생성자 함수
function PuppyPicture(name, img, txt) {
    this.name = name;
    this.img = img;
    this.txt = txt;  // 매개변수 값 할당
}

function creatPuppyPicture(name, img, txt) {
    var fullImg = `img/img-${img}.jpg`;
    var puppy = new PuppyPicture(name, fullImg, txt);  // 이미지 인스턴스
    arr.push(puppy); // 객체 결과물을 배열 안쪽의 데이터로 넣어줌
}

creatPuppyPicture("puppy 1 name", 0, "puppy 1 description");
creatPuppyPicture("puppy 2 name", 1, "puppy 2 description");
creatPuppyPicture("puppy 3 name", 2, "puppy 3 description");
creatPuppyPicture("puppy 4 name", 3, "puppy 4 description");  // 위의 매개변수에 각각 할당

console.log(arr);

전체 코드 2 : 💾

2. 무한 루프

% (나머지 반환) 특성을 이용해 'current'가 배열의 인덱스값 안에서 무한 반복되도록 설정
setTimeout(함수, 시간) : 타이머가 만료된 지정된 함수 실행

unction loop() {

    var current = index % arr.length;  // 최초값 0 % 3 = 0, arr.length = 고정값
    console.log(arr[current]);
    index++ // 호출될 때 마다 index값은 1씩 증가

    setTimeout(function() {
        loop();
    }, 1000); // 1초마다 function()이 실행되게 함
}

loop(); // 최초 loop는 실행

3. 배열 안의 텍스트 데이터 한 글자씩 생성/삭제 반복

1. html 작성 후, js 파일 연결 -> 작업할 html 태그와 노출시킬 텍스트 리스트 작성

// 이벤트를 설정할 html 태그 가져오기
var txtElement = document.getElementById('txt');
// 이벤트 실행시 호출할 함수 생성
var words = ["엔드게임", "인피니티 워", "에이지 오브 울트론"];

2. 생성자 함수 생성, 호출

//생성자 함수
function TypeWriter(txtElement, words) {
    this.txtElement = txtElement;  // txt
    this.words = words;  // words 함수

    // 글자가 하나씩 완성되는 영역
    this.txt = ""; // 출력될 글자들이 들어갈 위치
    this.wordsIndex = 0; // 기준점
    this.isDeleting = false;
  // 기준점2 - 현재 상태(삭제중/작성중), 처음에는 작성 중이기 때문에 false 기본값으로 넣어줌

    this.type();
}

TypeWriter.prototype.type = function() {
}

new TypeWriter(txtElement, words); 
// 생성자 함수 호출시, 인스턴스가 반드시 필요한 것은 x

3. type 메서드 생성

1) 현재 배열안에 있는 데이터 가져오기

TypeWriter.prototype.type = function() { 

    var current = this.wordsIndex % this.words.length; 
    // 최초값 0 % 3 = 0
    var fullTxt = this.words[current]; 
    // 현재 current에 있는  값을 기준으로 배열 안의 데이터를 가져온다

2) this.isDeleting = true / false 로 분기처리

substring(시작점, 끝점) : string 객체의 시작 인덱스로 부터 종료 인덱스 전 까지 문자열의 부분 문자열을 반환 substring(n) : n번째부터 시작하는 부분 잘라내서 반환

if(this.isDeleting) {
    // 엔드게임 -> 엔드게
    // 엔드게 -> 엔드 ...
    this.txt = fullTxt.substring(0, this.txt.length - 1);

} else {
    // "" -> 엔
    this.txt = fullTxt.substring(0, this.txt.length + 1); // 0번째 부터 txt현 상태에 대한 length에 +1 까지
}

this.txtElement.textContent = this.txt; //h1 태그에 노출

3) 텍스트가 완성되었을 때 / 텍스트가 모두 삭제되었을 때로 분기처리

if(!this.isDeleting && this.txt === fullTxt) {    
    this.isDeleting = true;

}  else if(this.isDeleting && this.txt === "") {
    this.isDeleting = false;
    this.wordsIndex++ // 다음 텍스트로 넘어가기
}

4) 0.4초 마다 자기자신 호출

var that = this 
// this.type(); 이 window를 가리키는 것을 막기 위해 
// (중첩 함수의 this의 대상을 해당 객체자체로 바꾸기 위해)

// 자기자신(TypeWriter.prototype.type) 다시 호출
setTimeout(function() {  
        that.type();

    }, 400);

📌 학습내용 중 어려웠던 점

__proto__ 와 [[prototype]]의 차이점 강사님과 동일하게 작성한 코드를 개발자 도구에서 확인했을 때, __proto__ 가 아닌 [[prototype]]으로 나타남.

📌 해결방법

인터넷 서칭 결과 [[prototype]]이 Prototype Object이고 __proto__는 Prototype Link라고 한다. (참고 사이트 : https://okayoon.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%ED%94%84%EB%A1%9C%ED%86%A0%ED%83%80%EC%9E%85Prototype%EC%9D%B4%EB%9E%80-%ED%94%84%EB%A1%9C%ED%86%A0%ED%83%80%EC%9E%85%EB%A7%81%ED%81%ACPrototype-Link%ED%94%84%EB%A1%9C%ED%86%A0%ED%83%80%EC%9E%85%EA%B0%9D%EC%B2%B4Prototype-Object)

📌 학습소감

오늘은 일지 정리를 하는 데에도 고민을 많이 했다. 특히 마지막 실습에서는 배운 내용들이 모두 등장했는데 어떤식으로 나눠서 작업해야 다시 봤을 때 이해할 수 있을지 생각했다. html이나 css에서는 등장하는 개념들이 어려운 부분은 많이 없었는데, 자바스크립튼는 개념 자체와 단어가 명확하게 정의되지 않아서 더 헷갈리는 것 같아. 😵

210831 개발일지

Tue, 31 Aug 2021 13:10:36 GMT

📌 학습한 내용

전체 코드 1 : 💾

JavaScript 기본 실습

1. 버튼 클릭시 랜덤으로 배경 색상 변경 & 해당 헥스코드 노출

1) html코드 먼저 작성 후,

2) js에서 작업할 영역 가져오기 (이벤트 발생 지점 선택)

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

3) 이벤트 설정

// 두 번째 인수로 익명 함수를 전달해 다이렉트로 기능 만들기 
btn.addEventListener('click', function() {
})

4) 이벤트 실행시, 호출할 함수 생성

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);
                 // arr 배열 내에서 랜덤한 숫자를 뽑는 변수 생성 (arr의 길이를 곱해줌으로써 램덤 숫자의 범위를 0 ~ arr 데이터 길이 까지로 설정)
        color += arr[random];
               // 6번 반복으로 color값 뽑아내기
    }
});

4) 생성된 color값을 html 태그에 적용

// 에 color값 적용
document.body.style.backgroundColor = color;
// #hex 요소 에 글자 삽입
hex.textContent = color;

textContent : js를 이용해 html에 문서에 글자를 삽입할 때 사용하는 프로퍼티

추가 방법 (실무형)

: 버튼 클릭시, 두 번째 인수로 전달한 함수를 호출 (호출 기호 x, 결과적으로는 콜백함수로 볼 수 있음)

btn.addEventListener('click', createColor);

function createColor() {

    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;
}

전체 코드 2 : 💾

2. 버튼 클릭시 랜덤한 인용문구 출력하기

1번 실습과 유사

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;

});

전체 코드 3 : 💾

3. 사용자가 입력한 결과 화면에 출력, 글자가 없는 경우 error문구 출력

1) 이벤트 발생지점 선택


    
    


Input 값을 입력하세요.
입력된 텍스트가 출력되는 영역

var form = document.getElementById('form');
var input = document.getElementById('msg');

var feedback = document.querySelector('feedback');
var txt = document.getElementById('txt');

querySelector('태그명/#id/.class') : 자바스크립트에서 css의 요소 접근 방식으로 접근하기 위한 방식

2) 이벤트 설정

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

      var msg = input.value
    //value 프로퍼티: 에 입력되는 글자만을 가져올 때 사용
})

에 type="submit" 속성을 가진 버튼이 있다면 js의 'sbmit' 이벤트가 작동.
단, 'submit' 이벤트는 동작이 됌과 동시에 브라우저를 새로고침하는 기능을 갖고 있다.
해당 기능을 꺼주기 위해 두 번째 인수로 전달한 콜백함수에 e (a, b, c... 관계x) 라고 하는 매개변수를 전달 후, 이벤트 객체에 내장된 e.preventDefault()메서드 적용
e : 이벤트 객체 ?

3) 으로 입력받은 값 분기처리

입력받은 텍스트가 있는 경우 / 비어있는 경우 : 문자열이 빈 값이 아니라면 true / 빈 문자열은 false로 처리되는 특성을 이용해 if로 경우의 수를 나눔
```
if(msg) {
// true인 경우(텍스트가 있는 경우)
} else {
// false인 경우(텍스트가 없는 경우)
}
```
입력받은 텍스트가 있는 경우, 해당 텍스트를 표시한 후 form.reset()으로 안의 모든 을 초기화
```
if(msg) {
  txt.textContent = msg;
  form.reset()  // 입력받은 텍스트 초기화
}
```

입력받은 텍스트가 비어있는 경우, 'feedback' 부분에 class를 추가해 노출했다가 1초후에 class를 다시 삭제해 화면에 보이지 않게 함

else {
   // 빈 값인 경우 feedback에 .show 클래스 추가
 feedback.classList.add('show');

   // 2초 후에 .show 클래스 삭제
 setTimeout(function() {
     feedback.classList.remove('show');
     }, 2000);
}

classList.add() : 특정 영역에 class를 추가할 때 사용
classList.remove() : 특정 영역에 class를 제거할 때 사용
setTimeout(콜백함수, 시간) 메서드 : 타이머가 만료된 뒤, 함수나 지정된 코드를 실행하는 타이머를 설정 (1000ms = 1sec)

전체 코드 4 : 💾

4. 좌/우 버튼 클릭 시, 이미지와 설명 변경

1) btn 클래스를 가진 모든 요소 호출

document.querySelectorAll('.btn').forEach(function(element, index) {
    element.addEventListener('click', function(e) {
        e.preventDefault();
    });
});

document.querySelectorAll('.btn') : .btn이라는 클래스명을 가진 모든 영역을 배열과 같은 형태로 가져옴
가져온 각각의 개체에 이벤트를 적용하기 위해 forEach를 사용
가 가진 본연의 기능을 막아주기 위해 e.preventDefault() 메서드 적용

2) 가져온 버튼 구분 prev/next

// 클릭한 영역에 어떤 클래스가 있는지 분기 처리
if(e.target.classList.contains('prevBtn')) {
    console.log("prev");
} // 선택한 요소가 prevBtn 클래스를 가지고 있음

if(e.target.classList.contains('nextBtn')) {
    console.log("next");
} //선택한 요소가 nextBtn 클래스를 가지고 있음

e.target : 클릭한 영역을 호출
classList : html태그의 클래스 목록을 가져온다.
contains() : 인수에 들어간 요소(class)가 포함되어 있는지의 여부를 논리값(boolean)으로 반환

3) 버튼에 따른 페이지 변경 설정

이미지와 이미지 정보를 담은 객체들을 배열로 저장

var arr = [
 {
     img : "img/img-0.jpg",
     name : "puppy 0",
     txt : "puppy description 0"
 },
 {
     img : "img/img-1.jpg",
     name : "puppy 1",
     txt : "puppy description 1"
 },
 {
     img : "img/img-2.jpg",
     name : "puppy 2",
     txt : "puppy description 2"
 },
 {
     img : "img/img-3.jpg",
     name : "puppy 3",
     txt : "puppy description 3"
 },
];

객체에 접근할 인덱스를 저장할 변수 생성
```
var i = 0; // 기준점
```

prev/next 에 따라 인덱스 값 조정

if(e.target.classList.contains('prevBtn')) {
 // console.log("prev");

     if(i === 0) {
         i = arr.length;
           // 현재 배열의 length 는 4
     }
         i--;

           document.getElementById('img').src = arr[i].img;
         document.getElementById('name').textContent = arr[i].name;
         document.getElementById('txt').textContent = arr[i].txt;
     }

if(e.target.classList.contains('nextBtn')) { // console.log("next");

    if(i === arr.length -1) {
            i = -1;
        }

        i++; // 이 지점에서 i가 0으로 감

        document.getElementById('img').src = arr[i].img;
        document.getElementById('name').textContent = arr[i].name;
        document.getElementById('txt').textContent = arr[i].txt;

    }
});

});

```

📌 학습내용 중 어려웠던 점

3, 4번째 실습에서 원리가 이해가 되지 않는 부분이 많았다.
📌 해결방법

https://pythontutor.com/visualize.html#mode=edit 해당 사이트를 이용해 코드가 어떤 식으로 작동하는지 다시 한 번 공부해야겠다.

📌 학습소감

아직까지 객체와 메서드 들의 기능을 확실하게 이해하지 못해서 어려운 부분이 가장 크다. 전체적으로 자바스크립트 강의들을 따라간 뒤에 다시 한 번 처음부터 복습하는 것이 이해에 도움이 될 듯 하다. 또한 이번 개발일지를 작성하면서 다른 참가자들의 일지를 많이 참고 했다. 다른 사람이 이해한 내용과 비교해가며 들으니 시간은 조금 더 걸렸지만 훨씬 도움이 된 것 같다. 그래도 아직까지는 여전히 어려운 자바스크립트 화이팅 😂

210830 개발일지

Mon, 30 Aug 2021 14:06:48 GMT

📌 학습한 내용

전체 코드 : 💾

반복문

: 고정값이 존재하고, 일정한 규칙을 갖고 있는 가변값이 존재하는 경우 사용

while

var num = 1; // 시작점

while (num < 10) { // 범위(조건) -> 참이면 실행, 거짓이 되는 순간 반복 종료
    console.log(2 * num)
    num++; // 기존의 num 값에 +1
}

👉 무한 루프에 빠지는 것을 막기 위해 반복문이 거짓이 되는 순간을 만들어 줘야 한다.

do ~ while

: 최초 한 번의 실행을 보장, 그 다음에 조건을 따짐

var i = 12;

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

for

: 가장 많이 사용

for (가변값의 시작점; 조건; 규칙) {
    console.log(2 * i); // 고정값, 가변값
}

중첩 반복문

for(var i = 2; i < 10; i++) {
    for(var j = 1; j < 10; j++) {
        console.log(i * j);
    } // 안쪽의 반복문이 끝나야 바깥쪽의 반복문이 실행
}

break와 continue

: 반복문에서 특정 값을 찾아내거나, 제외하기 위해 사용

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

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

    console.log(2 * i);
}

break : 숫자 5가 되는 순간 반복문을 종료시킴, 아래쪽의 코드는 출력되지 x
continue : 숫자 5의 결과값은 스킵하고 진행

반복문 응용 (배열 반복문)

var arr = ['바나나', '사과', '수박'];
console.log(arr);
console.log(arr.legth);

// 고정값 : console.log(arr[]) ;
// 가변값 : 0, 1, 2, 3

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

arr.length() : 배열안에 들어있는 데이터의 갯수를 반환하는 property

for ~ in

: 범위 지정이 따로 필요 없음

var arr = ['바나나', '사과', '수박'];
for (var i in arr) {
    console.log(i);  // 배열의 인덱스
    console.log(arr[i]);
}

배열에 내장된 메서드

forEach

.forEach() : 주어진 함수를 배열 요소 각각에 대해 실행, 인수로 무조건 함수를 전달해야 함 (매게변수의 순서 중요)

return 사용 불가
인수로 전달된 해당 함수 자체도 callback함수 인 것
callback함수(익명함수, 콜백함수) : 특정 조건에 도달하면 호출되는 함수, 함수명이 없음

var arr = ['바나나', '사과', '수박'];
arr.forEach(function(element, index) {
    console.log(element);
    console.log(index);
})

map

.map() : forEach와 유사, 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환

return 사용 가능 -> .map으로 돌린 어떤 값을 변화시켜서 다른 변수에다 전달 가능
```
var result = arr.map(function(element, index) {
  return element + " " + "10";
})
console.log(result);
```

객체 반복문 for ~ in

var student = {
    name: "Jane",
    age: 23,
    skills : ["자바스크립트", "HTML", "CSS"],
    sum: function(num1, num2) {
        console.log(num1 + num2);
    }
}

for (var prop in student) { // prop = 키값, 데이터가 들어가는 좌표
    console.log(prop);
    console.log(student[prop]);
}

문자열 properties & methods

(참고 사이트 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String)

length : 공백 포함 문자열의 길이 반환
trim() : 문자열 앞, 뒤의 공백을 제거, 문자열 내부의 공백은 제거 x
chartAt(index) : 문자열에서 특정 인덱스에 위치하는 하나의 문자를 반환 (공백도 문자로 인식)
slice(시작점, 끝점) : 문자열의 일부를 추출(시작점 이상 끝점 미만), 끝점도 시작점과 마찬가지로 맨 앞에서 부터 시작됨 slice(index) : 해당 인덱스 이상부터 있는 모든 글자를 추출
split() : 일정한 규칙으로 문자를 잘라 배열안에 담아서 반환 -> 데이터 타입이 변경됨(문자열 -> 배열)
```
var str = "Nice to meet you abc";
console.log(str.split(' ')); // 공백을 기준으로 자름
```

var str = "Nice to meet/you abc"; console.log(str.split('/')); // /를 기준으로 자름

![](https://images.velog.io/images/jiyoon_jeong2005/post/435c9ef0-b907-492b-9efe-bc12d093b2b9/image.png)

* `replace('바꿀 단어', '변경할 단어')` : 일부 또는 모든 부분이 교체된 새로운 문자열을 반환 (바꿀 단어 -> 변경할 단어)
* `imdexOf()` : 호출한 객체에서 주어진 값과 일치하는 첫 번째 인덱스를 반환, 일치하는 값이 없으면 -1을 반환, 대소문자 구분
* `toUpperCase` : 문자열을 모두 대문자로 전환해서 반환
* `toLoweCase` : 문자열을 모두 소문자로 전환해서 반환
```js
var search = prompt("검색어를 입력해 주세요.");

if(search.toLowerCase() === "apple") {
  // 사용자에게 입력받은 값을 모두 소문자로 전환
    console.log("사과 데이터를 출력한다.")
} else {
    console.log("false")
}

배열 properties & methods

(참고 사이트 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array)

length : 배열의 길이(배열 안의 데이터 갯수)를 반환
push(추가할 데이터) : 배열의 끝에 하나 이상의 데이터를 추가
unshift(추가할 데이터) : 새로운 데이터를 배열의 맨 앞쪽에 추가
pop() : 배열에서 마지막 요소를 제거하고 그 요소를 반환
shift() : 배열에서 첫 번째 요소를 제거하고 그 요소를 반환
join() : 배열의 모든 요소를 특정 규칙에 따라 연결해 하나의 문자열로 만들어서 반환
```
var arr1 = ["사과", "배", "바나나"];
var str1 = arr1.join(', ');
console.log(str1)
```
기존배열.concat(합칠배열) : 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환

📌 학습내용 중 어려웠던 점

📌 해결방법

📌 학습소감

오늘은 단순히 수업 내용을 따라가면 되어서 특별히 어렵다할만한 점은 없었다. 하지만 배열 데이터 타입의 메서드를 공부하면서 return에 대한 개념이 다시 등장했는데, 아직까지 완전히 이해한 것 같지 않아 return의 개념과 활용에 대한 복습이 다시 필요할 것 같다. 🤔

210827 개발일지

Thu, 26 Aug 2021 13:43:47 GMT

📌 학습한 내용

전체 코드 : 💾

IF 조건문

소괄호() 안의 문장이 참일때만, 중괄호{} 안의 식이 출력된다.

if(조건식) {
  실행문
} else if(조건식) {
  실행문
} else if(조건식) {
  실행문
} else {
//(앞의 조건식이 (모두) 거짓일 경우) 
실행문
}

여러 조건들 중에서 여러 개의 참이 존재한다면, 가장 먼저 나오는 참만 실행시킴

중첩 IF문

: if조건문을 보완하기 위함 (if문 안에 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 변수명 = (조건식) ? "조건이 참일 경우 실행 결과" : "조건이 거짓일 경우 실행 결과"

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

// 위와 동일한 결과값을 반환
var result = (age >= 18) ? "성인" : "어린이";
console.log(result)

조건문 응용

prompt : 브라우저에서 사용자에게 값을 전달받기 위한 팝업창을 띄우는 메서드. 모든 브라우저에서 사용 가능하며 팝업창의 형태와 디자인은 브라우저 마다 다름. 해당 메서드로 전달 받은 값은 모두 문자(string) 타입으로 저장됨
```
var userId = prompt("아이디를 입력해 주세요.");
var userPw = prompt("비밀번호를 입력해 주세요.");
```

console.log(userId); console.log(userPw);

![](https://images.velog.io/images/jiyoon_jeong2005/post/97256b55-69e5-4687-ab7b-856c288140fa/image.png)
(chrom 브라우저 기본 팝업창)

* `alert` : 브라우저에서 사용자에게 정보 전달만을 수행하는 메서드.
* `parseInt` : 문자 데이터 타입으로 전달된 숫자를, 숫자 데이터 타입(정수형)으로 바꿔줌.
```js
if(userId === "jane" && parseInt(userPw) === 12345) {
    alert("로그인되었습니다.");
} else {
    alert("아이디 또는 비밀번호가 틀렸습니다.")
}

전역변수 & 지역변수

: (과거)함수를 기준(중괄호x)으로 구분

전역변수 : 함수 바깥쪽에 위치하면서 함수 안쪽/바깥쪽 모두에 영향력을 발휘 o
지역변수 : 함수 안쪽에서 만들어진 변수 자체, 함수 안에서만 영향력을 발휘 o
(최신) 자바스크립트 버전에서는 변수 생성시,var가 아니라 let, const 등을 이용해 변수 생성이 가능 -> 전역변수, 지역변수 구분기준이 달라짐.
모든 전역변수는 window라는 객체에 property(key)로 할당된다.

스코프 (Scope)

: 변수가 영향력을 발휘할 수 있는 범위 (전역변수와 지역변수를 구분짓는 역할)

전역 스코프 : 모든 영역에 영향력을 발휘할 수 있는 스코프
지역 스코프 : 함수 안에서만 영향력을 발휘할 수 있는 스코프

👉 ** 함수는 서로의 스코프에 접근할 수 없다. (렉시컬 스코핑 (lexical scoping))**

function a() {
    var apple = "사과";
}   
// apple이 영향력을 발휘할 수 있는 범위는 함수 호출과 관계없이 여기까지

function b() {
    console.log(apple);
}
// 함수b 내부에는 apple이 존재 x, 하지만 전역변수로 apple이 존재하는 것도 x => error

b();

스코프 체인 (Scope Chain)

: 안쪽에서 부터 바깥쪽을 탐색하는 구조 (바깥쪽에서 안쪽을 탐색하는 것은 불가능)

var a = 10;  // -> 전역 변수, 전역 스코프

function func1() {
    var b = 20;

    function func2() {
        var c = 30;

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

    func2();

}

func1();

호이스팅 (Hoisting)

: 끌어올리다, 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것

변수 호이스팅

: 변수 및 함수 선언문 보다 앞서 호출을 해도 정상작동이 되는 현상 (변수가 끌어올려 짐)

끌어올리는 기능은 초기화에서는 발생 x, 변수를 선언한 상태에서만 호이스팅 발생.

console.log(a);  // 값을 할당하기 이전 상태이기 때문에 undefined 출력

var a;
a = "나는 A다.";  // 초기화

console.log(a);

함수 호이스팅

: 함수 호출을 먼저 하고, 함수를 만들어도 작동 가능

변수 안에 함수를 할당시키지 않는 방식으로 함수를 만들었을 때 가능, 변수 안에 함수를 할당한 경우에는 함수 호이스팅은 발생 하지 않는다.

/*
function func1() {
    console.log("Func1 함수다.");
*/ // 호이스팅
func1();

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

func2();
var func2 = function () {
  // 변수는 값을 할당하기 이전에 호이스팅으로 인해 이미 undefined가 들어가 있다.
    console.log("Func2 함수다.");
}

// func2();

자주 사용되는 객체와 메서드

Math 객체

(참조 사이트 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math)

// console.log(Math);
Math.abs() // 절댓값 반환
const num1 = Math.abs(-3);
console.log(num1);  // 3

Math.ceil() //무조건 올림 처리
const num2 = Math.ceil(0.43);
console.log(num2); // 1

Math.floor() // 무조건 내림 처리
const num3 = Math.floor(10.9);
console.log(num3); // 10

Math.random() // 0에서 1 사이 랜덤으로 숫자를 뽑아냄
const num4 = Math.random();
console.log(num4); // 0 ~ 1 사이 랜덤

parse 메서드

parseInt() : 문자열을 정수형으로 변환 소수점 아래는 버린다.
parseFloat() : 문자열을 실수형으로 변환

📌 학습내용 중 어려웠던 점

스코프와 호이스팅의 개념이 아직 정확하게 이해가 되지 않는다.

📌 해결방법

처음 접하는 부분이라 반복하는 것이 가장 좋은 방법이라 생각한다. 본 강의 뿐만 아니라 유튜브 강의와 서칭을 통해 찾은 포스팅을 통해 이해하려 노력해야겠다.

📌 학습소감

꽤 오랜 시간에 걸쳐서 강의를 들었다. 강의 자체는 재생 시간이 그리 길지 않았는데, 중간중간 이해가 가지 않는 부분을 되감아 듣고, 검색을 하는 등 시간이 많이 소모됐다. 특히 스코프와 호이스팅의 개념은 생소해서, 이해하는 데 시간이 걸렸다. 아직 몇 번 더 반복해야 완전히 내 것이 될 듯 하다. 😵

210825-26 개발일지

Wed, 25 Aug 2021 14:16:31 GMT

📌 학습한 내용

전체 코드 : 💾

JavaScript

: 웹 사이트의 주요 기능들, 주요 애니메이션 효과를 구현할 때 사용되는 high level 언어.

이전에는 웹사이트 영역에 대해서만 활용이 가능했지만 현재는 하이브리드 앱을 제작할 수 있을 정도로 발전
하이브리드 앱 : HTML, CSS, JavaScript 세 가지 언어를 기반으로 안드로이드 앱(Java, Kotlin) 또는 아이폰 앱(Swift, Objective-C)을 제작
** Node.js** : JavaScript 언어로 구성되어 있는 서버개발을 도와주는 도구(tool)
IoT(사물인터넷) 개발에도 사용 가능

JavaScript의 세 분류

1) 자바스크립트 코어 : 자바스크립트의 문법적인 특징을 공부하는 영역

2) 클라이언트 측 자바스크립트 : 브라우저를 제어할 때 사용되는 자바스크립트 (스크롤의 위치, 마우스의 위치, 브라우저의 크기등을 가져오고 싶을 때, 자바스크립트를 이용해 HTML, CSS에 접근해 변화를 주고 싶을 때)

3) 서버 측 자바스크립트 : Node.js 영역, 서버 개발에 용이

JavaScript 언어를 HTML에 적용하는 방법

1) HTML 문서에

-> 하나의 html 문서 안에 html 언어와 javascript 언어가 혼재된 상태 (코드분량이 길어져 가독성이 떨어짐)

👉 위의 두 가지 방법중 하나만 사용해야 함 (파일 경로를 입력한

2) // 한 줄 주석 처리 - 전체 주석 안에 한 줄 주석을 넣을 수 있음.

JavaScript 문법

변수 선언

변수 : 데이터를 저장하는 공간

// comic 박스 생성
// 변수 선언
var comic;

// comic 박스 안에 원피스 데이터를 할당한 상태
// 변수 초기화
comic = "원피스";

//변수 선언과 동시에 초기화 진행
var apple = "사과"; 


//변수 동시 선언
var a, b, c;
var a,
    b,
    c;

//변수 동시 초기화
var d = 10, e = 20, f = 30;
var d = 10,
    e = 20,
    f = 20;

👉 모든 변수는 선언과 동시에 undefined 가 자동으로 할당된다.

변수안에 들어가는 데이터는 언제든 변경할 수 있다.
```
var house;
house = "집";
console.log(house);
```

house = "아파트"; console.log(house);


* 최초 변수를 선언하고, 최초 초기화를 했을 때, undefined 에서 할당된 데이터로 변경되는 것.
```js
var house;
console.log(house);

//undefined -> 집
house = "집"
console.log(house);

변수명 작성법

: 일반적으로 변수명 작성시, 최소한 두 개의 명사를 이어서 작성 -> 구체적으로 명시를 해줘야 이해가 명확해진다.

var mathScoreStudent = 10;  // camelCase
var math_score_student = 10;  //snake_case

<변수명 작성시 주의점>

하이픈(-) 사용불가 -> error로 취급
```
var math-score-student = 100;  //kebab case
```
_, $를 제외한 특수문자는 변수의 첫 글자로 사용 불가
숫자는 변수 첫 글자로 사용 불가
변수명은 값을 유추할 수 있도록 최대한 자세히 작성
예약어는 변수명으로 사용 불가

데이터 타입 (= 데이터 종류)

: 8개의 타입과 2가지 진영

1. 원시 타입(Primitive Type) 문자열(String), 숫자(Number), 논리(Boolean, 참/거짓), undefined, null

2. 참조 타입(Reference Type) 배열(Array), 함수(Function), 객체(Object)

문자열(String)

: 두 가지 형식으로 작성 가능 (혼용x)

var msg1 = "Hellow World";
var msg2 = 'Welcome';

문자열에 '/"가 들어가는 경우
```
var msg4 = "She's girl";
var msg5 = 'She\'s girl';
```
=> 검은색 텍스트로 출력됨

숫자(Number)

정수, 실수, 연산작업 모두 가능

var num1 = 10;
var num2 = -3.14;

console.log(num1 + num2);
console.log(num1 + num3);

=> 파란색 텍스트로 출력됨

👉 연산자

1) 숫자 사칙연산

var a = 20;
var b = 10;

console.log(a + b);
console.log(a - b);
console.log(a * b);
console.log(a / b);
console.log(a % b);  // 나머지

2) 문자열 연산

: 덧셈을 제외하고는 사칙연산 일부 작업이 가능

var str1 = "20";
var str2 = "10";

console.log(str1 + str2);
// 글자를 이어붙인다
console.log(str1 - str2);
console.log(str1 * str2);
console.log(str1 / str2);
console.log(str1 % str2);

-> 이러한 특성을 이용해 아래와 같은 작업이 가능 (공백을 문자로 인식, html과 차이점)

var firstName = "Jane"
var lastName = "Jeong"

console.log(firstName + "       " + lastName)

3) ++, -- 연산자

: +1 / -1 씩 증가 / 감소 시킬 때 사용

var num10 = 10;

// num10 = num10 - 1;
// console.log(num10);
console.log(--num10); // 9
console.log(--num10); // 8

console.log(++num10); // 11
console.log(++num10); // 12

-> 등호 데이터는 뒤에서 부터 해석하는 것이 좋음 (10이라는 데이터가 들어있는num10에서 -1을 한 데이터(9)를 다시 자기자신에 업데이트 한 것)

👉 연산자를 앞/뒤, 어디에 붙이느냐에 따라 그 결과값은 달라짐

var num10 = 10;

console.log(num10--);
console.log(num10);
// -> 우선 num10의 값을 출력하고, -1을 차감하는 것 (후차감)

console.log(--num10);
console.log(num10);
// -> -1을 차감한 상태로 값을 업데이트를 해서 나타내는 것 (선차감)

4) +=, -+, *=, /+. %=

: 자기자신에 대해 새로운 값을 업데이트(재할당) 할 때 사용

var num20 = 20;

// num20 = num20 + 10;
num20 += 10;

console.log(num20);

5) 비교연산자

: >, <, ==, ===, !=, !==, <=, >=

결과값으로 항상 논리값(Boolean)이 나온다.
== : 값만 동일하면 true
=== : 값과 데이터타입 모두 동일해야 true
```
var num10 = 10;
var num20 = 20;
```

var str10 = "10"; var str20 = "20";

console.log(num10 == str10); console.log(num10 === str10);

![](https://images.velog.io/images/jiyoon_jeong2005/post/05eba398-43a4-4141-9d59-2225f25a746f/image.png)

#### 6) 논리연산자: AND (&&), OR(||)

* `&&` : 모든 조건이 참이어야 true 반환
* `||` : 하나라도 참이면 true 반환

#### 논리값(Boolean) : true/false
: 결과값이 true/false 로 나타나는 상황 자체, 일반적으로 논리 연산자와 결합해 사용
```js
console.log(true);
console.log(false);
console.log(1 === 2);
console.log(10 < 20);
console.log(10 === 10 || 20 === 30)

ex) 사이트에 로그인 하는 경우 아이디와 비밀번호 입력시, 하나라도 틀리면 로그인이 되지 않게 함

null, undefiend

: 양쪽 모두 값이 없는 상태

null : 등호 사용, 변수 초기화로 명시적으로 빈 값을 변수 안에 할당한 상태
undefined : 변수를 선언만 한 상태

typeof a : a 의 데이터 타입을 반환

console.log(typeof 10);
console.log(typeof "Hello World");

typeof null -> object : null 이 태생적으로 갖고 있는 버그때문
typeof undefined -> undefined
null == undefined -> true : 값이 없음 null === undefined -> false : 데이터타입 다름

숫자 + null = 숫자 : null이 0으로 바뀌게 됨
숫자 + undefined = NaN NaN (Not a Number) : 숫자가 아님, 연산 불가능한 값을 전달했을 때 발생하는 오류

! 부정문

: 반대값으로 반환

!true -> false / !false -> ture
!null -> true !!null -> false : 이미 ture로 반환된 값을 다시 !ture 한 것으로 취급되어 false가 됨, undefined도 동일한 결과를 가짐

함수 (Function)

기본 구조

// 함수 선언 : 기능을 만든 상태
// 매개변수 : a, b
function 함수명(a, b) {

    console.log(a + b);
}

//함수 호출 : 만들어진 기능의 스위치를 켜는 행위 자체 
// 인수 : 10, 20
함수명(10, 20);

Parameter (매개변수) : 함수 작동 시 필요로 하는 값 선언
Argument (인수) : (인자), 함수 호출 시 전달되는 값
매개변수를 지정 후, 인수 전달 시 누락된 매개변수가 있을 경우 해당 매개변수에는 undefined가 할당되어 있는 상태
매개변수와 전달된 인수는 항상 쌍을 이루고 있는 상태로 함수를 호출해줘야 함
자바스크립트의 모든 데이터 타입은 매개변수로 전달할 수 있다.

return

: 함수를 호출했을 때, 호출된 시점에 return 안에 들어가있는 값을 반환

다른 변수에 값을 전달할 경우

function sum(num1, num2) {
  return num1 + num2;
}

var result = sum(10, 20); console.log(result);

* return으로 전달받은 값으로 새로운 공식에 대입할 경우
```js
function area(hor, ver) {
    return hor * ver; 
}

var volume = area(10, 20) * 100; // 200을 갖고 있는 상태
console.log(volume);

(참고 사이트 : https://brunch.co.kr/@brunch92ny/9)

배열 (Aarray)

var alphabet = ["a", "b", "c"];
console.log(alphabet);

-> 각각의 좌표값(index) 0: "a" 1: "b" 2: "c"

console.log(alphabet[2]);  // c
console.log(alphabet[1]);  // b

-> 특정 데이터에 접근 가능

인덱스를 이용해 데이터를 변경 가능
```
alphabet[2] = "d";
consle.log(alphabet); 
```

// => ["a", "b", "d"]

* `length` : 배열안에 들어가있는 데이터의 갯수

* **자바스크립트의 모든 데이터타입을 배열에 삽입 가능**

#### 👉 배열을 작성할 때 주의점
1) 배열 안의 데이터는 가능한 **동일한 데이터 타입**을 갖고 있어야 함.
```js
var num = [10, 20, 30, 3.14]; // o
var num = [10, 20, 30, "Hello World"]; // x

2) 배열 안의 데이터는 가능한 동일한 성격을 갖고 있어야 함.

var fruit = ["사과", "배", "바나나", "멜론"];  // o
var fruit = ["사과", "배", "바나나", "양상추"];  // x

배열 안에 있는 배열 데이터에 접근하는 방법

var score = [[10, 20, 30], [100, 200, 300]];

console.log(score);
console.log(score[1]);
console.log(score[1][2]);

객체 (Object)

: 베열과 유사, 여러 개의 데이터를 한 곳에 넣고자 할 때(항목들을 받아내는 영역)

var student = {
    name: "Jane",
    age: 23,
    skills: ["JS", "HTML", "CSS"]
}

console.log(student);

key : name, age, skills
value : "Jane", 23, ["JS", "HTML", "CSS"]

=> property

객체 안에 있는 데이터에 접근하는 방법

1) consloe.log(변수명.데이터 key)

console.log(student.name);
// => Jane

2) console.log(변수명['데이터key']);

console.log(student['name']);
// => Jane

객체 안에 있는 특정 배열 데이터에 접근하는 방법

console.log(studet.skills[1]);
// -> HTML

기존 객체 안에 없는 새로운 데이터를 추가하는 방법

객체명.새로운key값 = "value" 직접적으로 추가

자바스크립트의 모든 데이터타입을 객체에 삽입 가능

var student = {
    name: "Jane",
    age: 23,
    skills: ["JS", "HTML", "CSS"],

    test1: true,
    test2: null,
    test3: undefined,
    test4: {color: "red"},

      //메서드
    sum: function (num1, num2) {  
    // sum이라는 키값 자체가 함수명을 대체
        return num1 + num2
    }
};

var result = student.sum(10, 20);
console.log(result);   // => 30

메서드 : 객체 안쪽에서 만들어진 함수
함수 : 객체 바깥쪽에서 만들어진 함수

student.sum(10, 20);
// student라는 객체 안에 있는 sum이라는 에서드를 이용한 것.

console.log("Hellow World");
// console이라는 객체 안에 있는 log 라는 메서드를 아용한 것.

원시 타입(Primitive)과 참조 타입(Reference)의 차이점

(참고 사이트 : https://brunch.co.kr/@brunch92ny/10)

원시 타입 : 원본과 복사본의 개념이 존재, 서로 독립적 (원본을 수정하든, 복사본을 수정하든, 서로의 데이터에는 영향을 미치지 x)
참조 타입

-> Obj1이 가리키고 있는 주소를 Obj2도 가리키게 되는 것으로, 주소를 공유하고 있는 것. 따라서 주소 안의 데이터가 변경되면 양쪽 모두의 데이터가 바뀌게 되는 것이다.

배운 것 적용하기

var colors = [
    'yellow', 
    'green', 
    'pink', 
    '#dc143c', 
    'rgba(123, 123, 123, 0.5)'
];

var bg = document.getElementById('color-bg');
var btn = document.getElementById('btn');

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

    // 0 ~ 4
    var random = Math.floor(Math.random() * 5) 
    // console.log(random);
    console.log(colors[random]);

    bg.style.backgroundColor = colors[random];
})

document : html문서에 영향력을 미치는 객체 (클라이언트 측 자바스크립트 - html 문서를 제어, 브라우저를 제어)
getElementById : document 객체 안에 있는 메서드

addEventListener('이벤트의 종류', function()' {}) : 이벤트를 실행했을 때, 두 번째로 만들어 놓은 함수를 자동으로 호출
```
btn.addEventListener('click', function() {
  console.log("Hello");
})
```
익명 함수 : 함수 이름이 없는 함수
콜백 함수 : 호출 기호 없이 특정 조건 하에 자동으로 호출이 되는 함수
Math.random() : 0을 포함해 1미만까지의 숫자를 실수형태로 랜덤하게 표현할 때 사용하는 메서드
Math.floor() : 소수점 이하는 버림

추가 설명

여러 개의 js 파일을 html에 연동할 때도, 작성된 순서 대로 결과값을 반환한다.
하나의 js파일에서 생성한 변수를 다른 js파일에서 호출할 수 있다.
하나의 js파일에서 생성한 함수를 다른 js파일에서 호출할 수 있다. 단, html파일에 연동시키는 순서는 항상 주의해야 한다. (먼저 존재하는 파일을 연동 시키고, 사용할 파일을 그 후에 연동시켜야 한다)

📌 학습내용 중 어려웠던 점

📌 해결방법

📌 학습소감

오늘부터 드디어 자바스크립트를 시작했다! 오늘은 자바스크립트 코어(문법) 영역을 중점적으로 공부했다. Python을 몇 번 다뤄 본적이 있어서 변수명과 데이터 타입에 대해서는 금방 따라갈 수 있었다. 하지만 실습에서 html과 css 그리고 자바스크립트를 연동해 다양한 객체와 메서드를 불러와서 작업할 때는 어질어질했다. 처음 접하는 작업이니 그럴 수 있다고 생각하다가도 얼른 이해해버리고 다음 단계로 넘어가야지하는 의욕이 생긴다. 오랜만에 실습이 아닌 개념 공부를 하니까 또한 재미있었다.😋

210824 개발일지

Tue, 24 Aug 2021 13:06:30 GMT

📌 학습한 내용

네이버 모바일 실습 2

전체 코드 : 💾

이벤트 채널

좌우의 공통된 영역을 뽑아 우선적으로 작업하고, 왼쪽영역의 일부를 수정해서 오른쪽 영영을 만들어 주었다.

👉 `float`의 특징

: 부모가 갖고 있는 공간의 크기보다 float을 사용한 자식들의 공간의 크기의 합이 더 크다면, 레이어가 어긋나는 현상 발생

내부 요소들이 (자식태그들이) 모두 float으로 3차원적 특징을 가지기 때문에
오늘 네이버

하단 영역

📌 학습내용 중 어려웠던 점

📌 해결방법

📌 학습소감

드디어 html, css 관련 실습이 끝이 났다. 네이버 모바일 버전이 생각한 것 보다 간단하기도 했고, '이벤트 채널' 영역을 작성할 때, 공통된 부분을 잘 뽑아내서 클래스화 시킨 것 같다. 내일부터는 드디어 자바스크립트를 시작한다. 여태껏 실습해온 페이지들에 이것 저것 기능을 적용시켜 좀 더 화려해질 수 있다고 생각하니, 정말 기대가 된다. 😆

210823 개발일지

Mon, 23 Aug 2021 13:06:23 GMT

📌 학습한 내용

네이버 모바일 실습

전체 코드 : 💾

👉 모바일 버전 작업시 반드시 넣어줘야 하는 코드

-> 디바이스 화면 크기에 맞춰서 비율을 자동으로 확대/축소 해줌

overflow-x: hidden; : x축으로 영역을 벗어나는 요소를 숨김
overflow-y: auto; : y축으로 영역을 벗어나는 요소가 있을 시 스크롤 생성 (없으면 스크롤 생성 x)
vh(viewpoint height) : 기기 화면의 높이값을 기준으로 맞춤 (100vh = 기기 높이의 100%)

상단 네비게이션

overflow-x: auto; : 가로 스크롤 생성
flex를 이용해 x축 정렬 + 줄바꿈 없이 옆으로 넘어가게 하기 위해 flex-wrap: nowrap, white-space:nowrap으로 줄바꿈 없애줌
```
#main-nav {
  overflow: hidden;
  background-color: rgb(7, 189, 120);
}   
```

#main-nav ul { overflow-x: auto;

display: flex;
flex-wrap: nowrap;
align-items: center;

white-space: nowrap;

}

### 👉 스크롤 감추기 
```css
#main-nav ul {
    -ms-overflow-style: none; 
    scrollbar-width: none;
}

#main-nav ul::-webkit-scrollbar {
    display: none;
}

-ms- : explore, edge 브라우저에 영향을 미치는 pre-fix
scrollbar-width : firefox에서 사용 가능한 css
::-webkit-scrollbar { display: none; } : -webkit- : chrom, safari, opera 브라우저에서 사용하는 가상선택자 => 위의 세 가지의 코드는 스크롤바에 영향을 미치는 css 속성

상단 헤더

이미지의width를 설정해주면 height도 자동으로 비율에 맞춰 조정됨
전체적으로 배너는 이미지를 사용해서 넣어줬다. 'banner-4' 영역은 실제 화면보다 큰 이미지를 사용했다.
overflow: hidden;을 사용해 해당 영역을 벗어나는 부분을 감추고, x축 중앙정렬 공식으로 정중앙으로 배치
```
#banner-4 {
   overflow: hidden;
   background-color: #ffffff;
   margin-top: 10px;
}
```

#banner-4 .banner-wrap { width: 100%; height: 155px; }

#banner-4 .banner-wrap img { position: relative;

height: 100%;

left: 50%;
transform: translate(-50%);

}

![](https://images.velog.io/images/jiyoon_jeong2005/post/0fcf2fa0-9453-4a70-b52c-81c19cdb6241/%EC%A0%9C%EB%AA%A9%20%EC%97%86%EC%9D%8C.png)

### 일기예보
![](https://images.velog.io/images/jiyoon_jeong2005/post/bcd313a1-5c5c-40a1-916a-215116a8b7ed/image.png)

### NOW.

* 영역 하단의 버튼에 대해 `:before` 가상선택자를 지정할 때, '|'의 위치 조정
1) `display: inline-block;` 설정시
```css
#now .btn-wrap .btn-shopping:before {
    display: inline-block;
    content: "";
    width: 1px;
    height: 14px;

    margin-top: 15px;
    background-color: rgba(125, 127, 133, .2);

    vertical-align: top;
}

-> 동일 선상에 배치됨

2) '|'를 해당 영역 안에서 왼쪽 끝으로 넣어주어야 하므로, float: left;를 사용 -> float을 사용하면 3차원 속성을 일부 가지게 되기 때문에 display를 이용해 배치작업을 하지 않아도 된다.

margin-left: 20px;

padding-left: 20px;

margin-left

2) padding-left 적용시

코로나19

:before 가상선택자에 position: absolute;를 사용할 경우, 가상선택자 바로 앞의 태그를 기준으로 움직이기 위해 해당 태그에 position: relative;를 적용해주어야 한다.
```
#corona .corona-wrap a {
  position: relative;

  display: flex;
  flex-wrap: wrap;
  align-items: center;

  padding: 20px 0;
}
```

#corona .corona-wrap a.right-corona { padding-left: 11px; }

#corona .corona-wrap a.right-corona:before { display: inline-block; content: "";

position: absolute;
width: 1px;
height: 42px;
background-color: #efeff0;

top: 20px;
left: 0;

}


### QR 체크인 안내
![](https://images.velog.io/images/jiyoon_jeong2005/post/7cf36214-2bc9-4fdb-9161-6f90bdd9a384/image.png)

* 실제 네이버 모바일에서는 높이값을 고정값으로 잡아주었지만, `padding` 값을 넣어주는 것으로 대체

# 📌 학습내용 중 어려웠던 점
---
1. 상단 네비게이션 바에서 '홈' 영역의 아래쪽에 `border-bottom` 넣기

# 📌 해결방법
---
1. 평소에 자주 했던 부분인데 조금 헤맸다. 실제 네이버 모바일 페이지의 상단바와 동일하게 `border-bottom`을 넣어주기 위해, 
(1) ``에 `display: block;`을 넣어 `height: 100%;`를 인식할 수 있게 함.
(2) 강의에서는 ``에 작성했던 `padding: 0 10px;`을 ``로 옮겨줌.
(3) 해당 영역의 모든 ``에 `border-bottom: solid 3px transparent;`을 적용 후, `class="on"` 선택자를 가진 ``의 ``의 `border-bottom`의 색을 변경해줌.

# 📌 학습소감
---

모바일 버전은 오랜만에 만들었다. 네이버는 pc 버전과 모바일 버전을 하나의 html 파일로 만들지 않고 완전히 다르게 사용했다. 이는 디자인에서 많은 차이가 나기 때문이다. 모바일 버전은 실제 pc 버전보다 요소들이 간소화 되어 있고, 이미지로만 이루어진 배너가 대부분을 이루어 꽤 쉽게 작업했다. 😗

210820 개발일지

Fri, 20 Aug 2021 07:51:33 GMT

📌 학습한 내용

유튜브 채널 페이지 실습

전체 코드 : 💾

상단 영역 & 왼쪽 영역

유튜브 메인 페이지와 동일한 코드 사용

배너 영역

채널 헤더 영역

실제 YouTube 사이트에서는 input에 해당하는 영역이 button을 누르면 나타나게 되는데, 이는 자바스크립트 기능이 필요한 부분으로 border가 나타나는 형식으로만 변경했다.
```
#channel-nav .search-wrap input:focus {
  border-bottom: solid 2px #ffffff;
  color: #ffffff;
}
```

최근 영상 영역

강의 화면과의 차이가 많아 실제 사이트와 유사하게 개인적으로 작업했다. 오른쪽의 텍스트 영역이 전체적으로 봤을 때, 윗쪽을 기준으로 맞춰져 있어서 align-items: flex-start;를 적용했다.

유튜브 탐색 페이지 실습

상단 영역 & 왼쪽 영역

유튜브 메인 페이지와 동일한 코드 사용

메인 상단 네비게이션 영역

화면 비율이 강사님의 노트북과 차이가 나,
의 width 값을 다르게 적용했다. 때문에 상단 네비게이션 영역을 실제 Youtube 페이지와 동일하게 (자바스크립트 기능을 제외하고) 한 줄이 내려오도록 작업했다.

플레이 리스트 1

강의 내용에는 없었지만, 채널 페이지의 플레이리스트와 동일한 형식이어서 코드를 재활용 했다. 하지만 채널 페이지의 플레이리스트는border-top을 이용해 위쪽에 구분선을 넣어주었기 때문에, 변수명의 일부를 바꿔 css를 완전히 동일하게는 작성할 수 없었다.

플레이 리스트 2

📌 학습내용 중 어려웠던 점

📌 해결방법

📌 학습소감

Youtube 카피캣이 오늘로 끝이 났다. 자주 사용하지 않았던 transition 속성을 넣어주는 것 이외에는 특별히 어려웠던 점은 없었다. 또한 강의에 없는 내용도 스스로 만들어, 보람있는 작업기간이었다. 이제는 오류가 나더라도 당황하지 않고 즐기며 찾을 수 있는 단계까지 온 것 같다. (물론 JS는 아직이지만!) 완성도 높은 페이지를 작업할 수 있어서 레벨업한 기분이다. 😝

210819 개발일지

Thu, 19 Aug 2021 13:43:50 GMT

📌 학습한 내용

유튜브 실습

전체 코드 : 💾

상단 영역

상세 작업 전 큰 틀 작업을 우선적으로 함

브라우저 확대시, 레이아웃이 틀어지는 것을 방지하기 위해 min-width: 1380px; 적용

#youtube-top-nav {
  position: fixed;

  width: 100%;
  min-width: 1380px;
  height: 56px;
  background-color: #212121;

  padding: 0 16px;

  z-index: 999999;

}

#youtube-left-nav { overflow-y: scroll; overflow-x: hidden; position: fixed;

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

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

}

#youtube-left-content { position: absolute; width: 225px; height: 100%; }

#youtube-main { position: absolute;

left: 240px;
top: 56px;
right: 0;
bottom: 0;

}


### 왼쪽 영역
![](https://images.velog.io/images/jiyoon_jeong2005/post/bb61663e-516e-4860-aaa4-3aabdafdc820/youtube%20left.gif)

* 왼쪽 스크롤을 생성할 것을 전제로 작업. `#youtube-left-nav`를 스크롤을 포함한 넓이로 잡고, 그 안쪽으로 `#youtube-left-content` 영역을 잡아주어  스크롤의 영향을 받지 않게 한다.
```css
#youtube-left-nav {
    position: fixed;

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

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

#youtube-left-content {
    position: absolute;
    width: 225px;
    height: 100%;
}

overflow-y: scroll; : 항상 스크롤을 보이게 함 overflow-y: auto; : 컨텐츠가 영역을 넘어 갔을 때, 스크롤을 생성

영역을 제외하고는 전부 으로 묶어 작업

/* 디폴트 값 */
#youtube-left-content .nav-section {
  padding: 8px 0;
  border-bottom: solid 1px rgba(255, 255, 255, .1);
}

#youtube-left-content .nav-section .nav-title-wrap { padding: 8px 24px; }

#youtube-left-content .nav-section .nav-title-wrap h2 { color: #aaaaaa; font-size: 15px; font-weight: bold; }

* 아이콘 영역도 삽입되는 이미지를 제외한 부분은 모두 디폴트 값으로 맞춰 작업
```css
/* 큰 아이콘 */
#youtube-left-content .nav-section .nav-body li a .icon {
    display: inline-block;
    width: 24px;
    height: 24px;

    margin-right: 24px;

    background-position: center;
    background-repeat: no-repeat;
    background-size: 24px;
}

/* 감싸진 아이콘 */
#youtube-left-content .nav-section .nav-body li a .circle-icon {
    display: inline-block;
    width: 24px;
    height: 24px;

    margin-right: 24px;

    background-color: rgb(64, 64, 64);
    border-radius: 50%;
    background-size: 16px;
    background-position: center;
    background-repeat: no-repeat;
}

word-break: keep-all; : 단어를 기준으로 줄바꿈을 함 (단어가 잘리지 않도록)

컨텐츠 영역

태그 영역

tag-wrap 영역도 상단 영역과 동일하게 min-width값을 주고, 브라우저 확대시 레이아웃 틀어짐을 방지

#youtube-main .tag-wrap {
  height: 56px;
  width: 100%;
  min-width: 1165px;
  background-color: #212121;

  border-top: solid 1px rgba(255, 255, 255, .1);
  border-bottom: solid 1px rgba(255, 255, 255, .1);

  z-index: 2000;
}

👉 width: 100%; 속성값을 지정할 때는 min-width 속성이 필요한지 확인 필요

배너 영역

메인 영역 안에서 배너 영역을 잡아주고, 안쪽으로 banner-container를 잡아 각 요소의 배치작업을 해준 뒤, margin: 0 auto;로 중앙정렬 해주었다.
```
#youtube-main .youtube-banner {
  position: relative;
  width: 100%;
  height: 260px;
  background-color: #000000;

  margin-bottom: 32px;
}
```

#youtube-main .youtube-banner .banner-container { position: relative; max-width: 2256px; height: 100%; margin: 0 auto; }

* 닫기 버튼은 `banner-container` 바깥쪽으로 빼, 브라우저 비율 축소 시, 컨테이너 영역과는 다르게 전체 배너를 기준으로 오른쪽에 위치시켰다. 

#### 영상 영역

* `` 안에 `` 사용할 수 없음

* 일정 부분부터 배경 컬러가 비는 원인
![](https://images.velog.io/images/jiyoon_jeong2005/post/2b48f2d7-99fa-481d-8e7c-651f2f8c1d8e/content%20error.gif)
-> `background-color: #000000;`이 적용된 부분은 `#youtube-main` 영역이다. 반면 스크롤은 브라우저 기준으로 생성되었기 때문에 아래 빈 부분은 `` 영역이 보이게 된 것이다. 따라서 `` 영역에도 `background-color: #000000;`을 적용해주어야 한다.

# 📌 학습내용 중 어려웠던 점
---

1. 컨텐츠 부분 위쪽에 `.tag-wrap`을 추가해 줬는데, `flex-align-between`을 적용했더니 태그들 간의 간격이 원본 페이지 보다 더 컸다. 
![](https://images.velog.io/images/jiyoon_jeong2005/post/79b1e27f-a023-4276-bfee-2d7add754300/image.png)

2. `.tag-wrap`의 ``에 `:hover`가상 선택자를 넣어 색상 변화를 자연스럽게 하려 했다.

    2-2. 첫 번째 ``인 'All'에는 마우스 오버시 아무 변화가 일어나지 않도록 하려 했다.

# 📌 해결방법
---
1. `.tag-wrap`의 ``에 `justify-content: center;` 속성값을 적용했다.
![](https://images.velog.io/images/jiyoon_jeong2005/post/30050753-96e9-4991-9b7e-c334e693cac6/image.png)

2. 원래 존재하는 `` 요소에 `transition`을 추가, `easy-out` 속성값 사용 (참고 사이트: https://skydoor2019.tistory.com/6)
```css
#youtube-main .tag-wrap li {
    height: 32px;
    min-width: 12px;
    padding: 4px 12px;
    margin: 12px;
    margin-left: 0;

    background-color: rgba(255, 255, 255, .1);
    border: solid 1px rgba(255, 255, 255, .1);
    border-radius: 16px;

    transition: background-color 0.3s ease-out;
}

#youtube-main .tag-wrap li:hover {
    background-color: rgba(136, 136, 136, .6);
}

2-2. 방법은 두 가지로 hover 시키고 싶지 않은 영역을 따로 빼 다른 영역으로 작업, 또는 해당 영역에 hover시 본래의 속성들을 그대로 적용하는 방법이 이다. 첫 번째 방법은 코드 수정이 조금 복잡해질 것 같고, 시간이 더 소요될 것 같아 두 번째 방법으로 적용했다.

📌 학습소감

강의에서는 왼쪽 영역의 아이콘들을 모두 흰색으로 넣어주는 것으로 대체했지만, 좀 더 실제와 비슷하게 작업하고 싶어 아이콘 이미지를 하나씩 찾았다. 비슷한 이미지를 찾지 못해 고생한게 더 힘들었던 것 같다. (무료 아이콘 : https://icons8.com/) 또한 강의 내용에는 다루지 않았던 위쪽의 태그와 배너 영역도 만들어 주었다. 태그 영역이 상단, 왼쪽 영역과 같이 고정되어 있다는 것을 작업이 모두 끝난 후 알아서 position: fixed;로 수정해보려 했지만 자바스크립트 기능과 연동된 부분이 있어 가운데 정렬작업이 제대로 되지 않았다. 이번에는 레이아웃을 중점적으로 하자는 마음으로 아쉽지만 접어 두었다. 🤔

210818 개발일지

Wed, 18 Aug 2021 14:13:46 GMT

📌 학습한 내용

트위치 실습 2

전체 코드 : 💾

컨텐츠 영역

.content-container로 컨텐츠 영역을 중앙 정렬
상단 영역과 왼쪽 영역이 3차원 속성을 가지고 있으면서 고정되어 있는 상태

position: absolute; 속성을 줘서 공간을 늘려준다.

.content {
   position: absolute;
   top: 50px;
   left: 240px;

   bottom: 0;
   right: 0;
}

여전히 새로 스크롤이 상단영역까지 걸쳐있음.
overflow-y: auto 적용 : y축 기준으로만 필요한 상황에 스크롤 발생

👉 `background 속성`

background : 관련 속성을 한 줄로 작성 가능 (속성값의 순서는 관계 x)
```
background: url(../img/game.jpg) no-repeat center; 
```
background-size: cover; : 만들어 둔 영역 안에 이미지를 다 채울 수 있도록, 자동으로 이미지를 확대/축소 (단, 이미지의 가로, 세로 비율은 유지된다), 일반적으로 이미지의 센터에 컨텐츠가 몰리게 제작,
background-position: center
min-width: 1340px;을 적용했는데도, 내부 컨텐츠가 줄어듦
왼쪽 영역과 컨텐츠 영역이 각각 3차원적 특징을 갖고 있기 때문에 자식들의 width를 부모가 제대로 인식하지 못함 => .main-container에 position: relative;와 height: 100% 적용

하단 영역

.footer-bottom은 영역 내의 요소들을 가운데로 정렬하기 위한 박스

CSS 추가 설명

reset.css

: 기존의 (html 태그가 갖고 있는) 모든 css 속성들을 초기화 시켜주는 코드, 모든 태그들이 갖고 있는 속성값들은 브라우저 마다 조금씩 차이가 있음 -> 'reset.css'는 이러한 차이나는 속성값들을 모두 초기화 시켜줌 (캐스케이딩의 원리가 html에서 css파일을 불러 올 때도 동일하게 적용됨) (참고 사이트 : https://meyerweb.com/eric/tools/css/reset/)

normalize.css

: 기존의 디자인을 조금씩 가공한 코드 (reset.css와 다르게 완전 초기화는 아님), 브라우저 마다 기본적으로 들어가는 css 디자인에 차이가 나는데, normalize.css는 그 오차를 줄이고, 버그를 줄이는 방향으로 스타일을 재정의 (참고 사이트 : https://necolas.github.io/normalize.css/8.0.1/normalize.css)

=> 개발자의 취향에 따라 사용함

css 변수

: 일괄적인 코드 수정작업에 편리, 직관적인 코드 작업 가능 단, 익스플로러에서는 제약이 크다. (지원x), (Twitch에서는 css변수 사용이 빈번) (⬆ Twitch 예시)




    
    CSS 추가 설명

    
    
    


    Hellow World

/* 변수 설정 
:root -> 모든 가져다 쓸 수 있는 변수 */
:root {
    --black: #18181a;
    --purple:  #9147ff;
    --font-size-40: 40px;
}

h1 {
    background-color: var(--black);
    font-size: var(--font-size-40);
    color: var(--purple);
}

/* 특정 영역 내에서만 사용 가능한 변수
-> css의 선택자를 활용해, 변수의 영향력이 발휘될 수 있는 범위를 지정 가능*/
#intro {
    --font-color: blue;
    --font-size: 50px;
}

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

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

📌 학습내용 중 어려웠던 점

컨텐츠 영역의 img에 :hover 선택자를 지정해 이미지를 움직이는 작업에서, image-wrap으로 감싸준 영역이 함께 움직이지 않고 img만 움직이는 현상 발생
컨텐츠 영역 각 섹션에 border-bottom으로 만들어준 구분선에 겹치게 '더보기' 버튼을 만들어 주었다. 해당 버튼의 배경색은 컨텐츠 영역의 배경색과 동일하게 해 마치 구분선이 반으로 나눠진 듯한 효과를 주었다. 하지만 추가적으로 :hover 선택자를 이용해 배경색을 rgba를 이용해 적용했더니, 마우스 오버시에는 배경 선이 그대로 비춰져 나타났다.

📌 해결방법

기존의 html 태그들만으로 설정해주고 싶었지만, 잘 작동되지 않아서 image-wrap을 image-wrap-sub으로 한 번 더 감싸주었다. 생각보다 간단하게 해결되었다.
실제 Twitch 사이트에서는 'show more' 버튼을 기준으로 좌우에 각각 구분선이 배치되어 있었다. 마우스 오버시에 색상을 투명하지 않게 다른 색으로 설정하는 방법도 있었지만 여전히 부자연스러웠다.

📌 학습소감

python과 R 을 공부할 때만 사용했던 '변수명'을 css에서도 사용할 수 있다는 것은 처음 알아서 감회가 새로웠다. 특히 Twitch 를 카피캣 하면서 '이런식으로 속성값을 숨기는 건 어떻게 하는건가?'하는 의문을 계속해서 가졌는데, 페이지를 완성하면서 알게 되어 속이 후련하다. 😊

210817 개발일지

Tue, 17 Aug 2021 06:20:16 GMT

📌 학습한 내용

트위치 실습

전체 코드 : 💾

상단 영역

--color-text-base : 최신 브라우저에 등장하는 코드
nav .nav-wrap .nav-left ul li:first-child a:after에 margin-top속성을 주면 도 함께 내려온다.

position: relative; 적용해서 top 사용

px <-> em 변환 사이트 : http://pxtoem.com/
사이에 동일한 공백을 주는 flex-between을 이용해 배치해준 nav-center 영역이 각기다른 nav요소의 width 값으로 인해 정중앙에 배치되지 않는 현상 발생
nav-center 부분을 flex의 영향에서 벗어나게 한 후, position: absolute;로 3차원으로 만들어 x축 중앙정렬 공식을 사용
```
nav .nav-wrap .nav-center {
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
}
```
postion; fixed;(3차원적인 특징을 가진 position) 적용시 적절한 width 값을 지정해주지 않으면 아래와 같이 레이아웃이 모두 틀어지게 된다.

왼쪽 영역

👉 실무 tip 1) 항상 해당 영역을 브라우저 크기에 관계 없이 full height로 유지하는 법

position: fixed;상태에서 top, right, bottom, left를 사용하게 되면 항상 브라우저를 기준으로 좌표 기준점 생성

-> 여기서 bottom: 0;을 적용하면 짧았던 영역의 길이가 브라우저의 세로 끝까지 채워지게 된다. (순수 3차원적인 특징을 가진 position에서만 발생)

=> height를 사용하지 않고 top, bottom을 이용해 전체 full size를 만들 수 있다. 해당 박스의 높이값은 브라우저의 높이에 따라 가변적으로 변화한다.

👉 실무 tip 2) 해당 영역에서만 스크롤을 생성하는 법

overflow-y: auto; 적용

📌 학습내용 중 어려웠던 점

📌 해결방법

📌 학습소감

꽤 긴 시간 동안 네이버 카피캣 작업을 했는데, 이제는 트위치라는 해외 사이트를 카피캣하니까 생각보다 더 새로웠다. 네이버 페이지 작업시에는 대부분

로 큰 구역을 나눠 주었는데, 트위치 카피캣에서는

와

를 이용해 작업중이다. 또한 개발자 도구를 이용해 간단히 레이아웃의 형태나 속성값 등을 알아냈던 국내 사이트와 달리 해외 사이트는 카피캣 자체가 어렵도록 이루어져있어서 조금 고생을 했다. 하지만 그만큼 육안으로 체크해야할 부분이 많아 좀 더 수치같은 것을 눈에 익힐 수 있었다. 😗

210813 개발일지

Fri, 13 Aug 2021 08:26:22 GMT

📌 학습한 내용

네이버 오디오 실습 2

전체 실습 : 💾

메인 오른쪽

1) '인기 채널을 소개합니다.'

2) '오늘의 발견 요즘 많이 듣는 채널👍'

!important : 나중에 설정한 값이 적용되지 않게 하려면 속성값 뒤에 !important를 붙임. (속성 강제 적용) (참고 사이트 : https://www.w3schools.com/css/css_important.asp )

하단 영역

👉 html 특수문자

(참고 사이트 : http://kor.pe.kr/util/4/charmap2.htm )

네이버 오디오-카테고리 실습

👉 `flex-between` 의 단점

: 사전에 정해 놓은 요소의 갯수가 라인마다 맞지 않으면 아래와 같이 공백이 나타나게 된다.

.audio-category .audio-category-lists {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    align-content: stretch;
    margin-top: 22px;
}

-> 해결방법) justify-content: flex-start 를 적용 후, 각각의

에 margin-right와 margin-bottom을 적용 후, 6번째 자리에 해당하는 margin 값을 없애주기 위해 아래 코드를 적용한다.

.audio-category .audio-category-lists .category-list:nth-child(6n) {
    margin-right: 0;
}

:nth-child(6n) : 6의 배수마다
:nth-child(odd) : 홀수 번째에 있는 요소 :nth-child(even) : 짝수 번째에 있는 요소 (참고 사이트 : https://lalacode.tistory.com/6 )

📌 학습내용 중 어려웠던 점

📌 해결방법

실험1) display: block; 속성을 주지 않고 (inline-block 요소인 채로) margin 속성값 적용 -> 상하/좌우 배치가 가능

실험2) display: block; 속성을 주지 않고 (inline-block 요소인 채로) margin: auto 속성값 적용 -> margin 속성이 적용되지 x

실험3) display: block; 속성을 주고, margin: auto 속성값 적용 -> 정상적으로 적용됨 👉 결론) margin: auto 속성값 (중앙정렬 공식)을 사용하기 위해서는 block 요소로 바꾸어 주어야 함

📌 학습소감

길고 길었던 네이버 카피캣이 오늘로 끝이 났다. 같은 사이트에서도 여러 레이아웃, 디자인을 사용한다는 것과 생각보다 실제 사용되는 코드는 더 복잡하다는 것을 새삼 깨달았다. 제작 과정에서 항상 자바스크립트 부분은 스킵했기 때문에 그부분이 항상 궁금하고 찝찝했는데, 조금만 더 하면 배울 수 있다는 사실이 너무 기대된다. 😆

210812 개발일지

Fri, 13 Aug 2021 03:45:07 GMT

📌 학습한 내용

네이버 오디오 실습

전체 코드 : 💾

상단 영역

👉 3차원 position 속성을 이용해 공간을 만드는 방법

div {
    position: absolute
    background-color: yellow

    left: 0;
    right: 0;
    bottom: 0;
    top; 0;
}

-> 공간을 늘린다고 생각

메인 왼쪽

1) '오늘의 오디오클립'

letter-spacing : 텍스트 좌우 간격
#audio-main-left, #audio-main-right (자식들)의 float: left/right;가 부모의 높이값에 영향을 주게하기 위해, #audio-main .audio-container { overflow: hidden; }을 적용
```
#audio-main {
  width: 100%;
  height: 2000px;
  background-color: #f6f8fa;

  padding-top: 61px;
}
```

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

.audio-main-left { float: left; width: 660px; }

.audio-main-right { float: right; width: 330px; }

-> 후에 `btn-left`에 영향을 미쳐 `oveflow: hidden;` 속성을 삭제, 아래와 같이 `align-items: flex-start`를 넣어줌
```css
#audio-main .audio-container {
    /*overflow: hidden;*/
    align-items: flex-start;
}

#audio-today .audio-silde .btn의 좌표값을 #audio-today .audio-slide-wrap에 기준점을 두기 위해 각각 position: absolute;,position: relative; 적용

2) '오디오클립 추천 오리지널'

3) '나를 위한 플레이리스트'

image.wrap을 기준으로 img,icon-like와 icon-play버튼의 좌표값을 잡기 위해 각각 position: relative;와 position: absolute를 적용
```
#audio-playlist .audio-body li .image-wrap {
  position: relative;
}
```

#audio-playlist .audio-body .image-wrap img { position: absolute } #audio-playlist .audio-body .image-wrap .icon-like { position: absolute;
} #audio-playlist .audio-body .image-wrap .icon-play { position: absolute;
}


#### 4) '라이브 ON'
![](https://images.velog.io/images/jiyoon_jeong2005/post/b996fe7f-537a-4faa-85b7-c72d3ca7e047/image.png)
* x축 중앙정렬 효과
```css
left: 50%;
transform: translateX(-50%);

5) '셀럽들의 목소리로 듣는 베스트셀러'

time 클래스에 bottom 속성값이 제대로 적용되지 않은 이유
time의 좌표 기준점이 되는 image-wrap의 높이가 잡혀있기 않기 때문
img의 높이를 기준으로 image-wrap에 높이를 만들어 주려 함(부모가 높이값을 가지고 있지 않을 때, 자식의 높이값이 부모에게 영향을 준다는 원리 이용)
그러나 현재 자식은 3차원적특성(position: absolute;)을 가지고 있고, 부모는 2차원적 특성(position: relative;)을 가지고 있기 때문에 높이를 만들 수가 없음
해결방법) img의 position: absolute;를 제거하면 2차원이 됨 => 2차원은 부모의 높이값에 영향을 준다.

6) '새로 나온 채널'

'오디오클립 추천 오리지널' 영역 코드 재활용

📌 학습내용 중 어려웠던 점

네이버 오디오의
영역이 오른쪽으로 밀리는 현상

📌 해결방법

이전 '네이버 게임' 페이지를 만들며 적용한 전체 의 min-width: 1300px로 인해, (브라우저 크기 100% 기준으로) width: 1080px;을 가진 '네이버 오디오'의 영역의 레이아웃이 틀어지는 현상이 발생한 것이다. '네이버 게임'의
의 클래스를 이용해, 해당 페이지에만 따로 min-width: 1300px값을 적용하고, '네이버 오디오'의 min-width값은 해제시켜 주었다.
📌 학습소감

앞으로는 페이지 전체를 우선적으로 살피고 카피캣을 해야겠다. 페이지에 생각보다 유사한 레이아웃이 많이 쓰이는데, 나중에서야 깨닫고 코드를 수정하니 코드의 가독성이 많이 떨어지는것 같다. 버튼 부분에 hover 가상 선택자를 이용해 버튼이 없었다 나타나는 효과를 주려 했는데, 그리 어려운 작업은 아니었지만 다시 해당 코드를 찾아 효과를 나눠서 넣어주느라 조금 복잡했다. 해당 페이지의 레이아웃이 간단한 것도 한 몫 했지만, 꽤 완성도가 높게 만들어 진 것 같아 뿌듯하다. 😊

210811 개발일지

Wed, 11 Aug 2021 10:03:16 GMT

📌 학습한 내용

네이버 e스포츠 실습 2

전체 코드 : 💾

메인 왼쪽

1) article 영역

float을 이용해 영역 배치 작업

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

#esport-main-article .article.full { height: 100%; background-color: green; }

#esport-main-article .article.two { background-color: blue; }

#esport-main-article .article.three { background-color: pink; }

```

👉 여러 줄 말줄임 표시 넣기

(참고 사이트 1 : https://nalrarydesigner.tistory.com/entry/CSS3-displaybox-%EC%97%90-%EB%8C%80%ED%95%B4-%EA%B3%B5%EB%B6%80%ED%95%B4-%EB%B3%B4%EC%9E%90 참고 사이트 2 : https://developer.mozilla.org/ko/docs/Web/CSS/-webkit-line-clamp)

box-orient : vertical; : 박스를 수직방향으로 배치 box-orient : horizontal; : 박스를 수평방향으로 배치 (기본값) box-orient : inherit; : body가 갖는 기본 속성을 상속받음
-webkit-line-clamp : 블록 컨테이너의 콘텐츠를 지정한 줄 수만큼으로 제한 (단, display 속성을 -webkit-box 또는 -webkit-inline-box로, 그리고 -webkit-box-orient : vertical;로 설정한 경우에만 동작)
max-height : 속성의 최대 높이

2) '경기 다시보기'

3) '추천 뉴스'

:before 가상 선택자 적용시 레이아웃이 뒤틀리는 현상 발생
solution_step 1. 가상 선택자 부분에 position: absolute;를 적용해 레이어를 겹치게 만든다.
#esport-news .article-wrap .right-lists li 에는 position: relative; 적용
solution_step 2. #esport-news .article-wrap .right-lists a에 pdding-right 속성 적용
가상 선택자에 top 속성으로 적당한 위치 찾아주기

4) '많이 본 영상'

'경기 다시보기' 영역 재활용

5) '전문가 칼럼'

6) '한국e스포츠협회'

메인 오른쪽

1) '많이 본 뉴스'

에 display: block을 적용하면 flex가 깨질 수 있음

1) 'e스포츠 경기 일정/결과'

하단 영역

👉 웹 폰트 적용하는 방법

사이트 전체 디자인에 사용되는 폰트가 동일한 경우 font-family 속성을 사용해 폰트 명시 font-family : 사용할 폰트를 나열, 입력한 순서대로 우선순위가 적용됨

구글 웹 폰트 적용 (참고 사이트 : https://fonts.google.com/) 위의 사이트를 통해, 사용할 폰트에 대한 정보를 를 이용해 가져올 수 있음 💥 단, 적용시 폰트를 먼저 불러온 다음에, css파일을 연동시켜야 함 (위의 사진과 같은 순서)
가져온 파일이 없는데, 폰트를 먼저 적용한다는 것은 말이 되지 x

📌 학습내용 중 어려웠던 점

'경기 다시보기'의 코드를 재활용해 '많이 본 영상' 영역에 재활용

📌 해결방법

앞서 작성한 '경기 다시보기'의 코드를 재활용하기 위해 class 명을 추가해 css에 class 명만 바꾸어 사용하려 했지만, 생각한 대로 되지 않았다. 아마 id가 class보다 우선한다는 캐스케이딩에 의해 오류가 생긴듯 하다. 캐스케이딩에 대해 재복습하고 코드 재활용을 다시 시도해 봐야겠다.

📌 학습소감

강의에는 실제 페이지와는 다르게 스킵한 부분이 많았다. 하지만 복습을 위해서, 그리고 실제 페이지와 최대한 비슷하게 작업하기 위해 현 시점의 네이버 e스포츠 페이지를 참고해 강의에서 넘어간 부분을 전부 작업해 주었다. 때문에 시간은 평소보다 많이 걸렸지만 조금 지난 기억들을 되살릴 수 있었다. id는 하나의 파일에 중복되지 않아야 한다는 규칙을 어겼다는 것이 오늘 가장 마음에 걸리는 오류이지만, 혼자만의 힘으로 작성할 수 있게 된 영역이 늘어난 것에 대해 성장을 느낄 수 있는 하루였다. 🙂

210810 개발일지

Tue, 10 Aug 2021 06:42:05 GMT

📌 학습한 내용

네이버 e스포츠 실습

전체 코드 : 💾

상단 영역

최상단에 고정되어 있는
는 좌우로 100%를 차지하고 있으므로 'game-container'를 감싸는 형태로 작성

메인 영역

1) 메인 상단

position: fixed를 적용함으로써 3차원 적인 특징을 가진
영역 -> 먼저 나오는 형제가 3차원이라면, 그 다음에 나온 형제가 2차원인지, 3차원인지에 관계 없이 레이어가 겹치게 된다.
영역에 padding-top 속성을 이용해,
의 높이값(+border) 만큼 아래로 내려준다.

👉 브라우저 내부 영역의 컬러를 뽑아내고 싶을 때

📌 학습내용 중 어려웠던 점

가상 선택자는 가장 안쪽에 지정되어 있는 태그에서만 작동을 하는 건가? #esport-header #esport-nav .center li a:hover { color: darkgray; } 과 같이 a태그에 :hover을 걸어줬을 때는 아래와 같이 적용이 잘 되었으나, #esport-header #esport-nav .center li:hover { color: darkgray; } 처럼 li 태그에 :hover을 걸어줬을 때는 작동하지 않다.

📌 해결방법

강사님께 질문했을 때, hover가 작동되는 범위와 관련 있을 것 같다고 하셨다. hover시에 해당 이벤트가 에 걸리는지
에 걸리는지 여부에 따라 작동이 되는 것이다.

📌 학습소감

메인 상단영역의 코드를 작성할 때, 가상선택자 hover에 transition 속성과 transform 속성을 사용해 이미지에 애니메이션을 지정할 때 우왕좌왕했다. 인터넷 서칭과 이전에 애니메이션을 중심으로 작업한 파일을 찾아보며 해당 코드를 작성했다. 최근 강의에서 애니메이션 효과를 거의 제외하는 편이라 개인적으로 넣어주고 있다. 대부분이 단순히 hover시에 text-decoration을 넣어주는 것이었는데, 이래서 개발에는 꾸준한 공부가 필요하구나 생각했다. 고려해야할 것도, 알아야 할 것도 너무 많지만 그만큼 배우는 것도 많고 꽤 흥미로워서 즐겁다. 😁