heo_jeongmin.log

웹 프로그래밍(자바스크립트2)

Sun, 12 Sep 2021 14:20:14 GMT

💻 학습 내용

typeof : 데이터의 타입이 뭔지 사용자에게 알려주는 역할 -> 변수명을 입력 가능

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

null, undefined

🖤 공통점 : 둘다 값이 없는 상태

🖤 차이점(가끔 면접 질문에서 물어보니까 기억해두자)

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

console.log(typeof null); console.log(typeof undefined); null이 object로 출력되는 것은 버그이다. null은 null임

console.log(null == undefined); console.log(null === undefined); : 데이터 타입이 다르기 때문에 False로 출력

! (부정)

console.log(!true); console.log(!false); console.log(!null); ➜ true console.log(!!null); ➜ !true(=false) console.log(!undefined); ➜ true console.log(!!undefined); ➜ false

console.log(10 + null); ➜ 10 (null -> 0) console.log(10 + undefined); ➜NaN(=Not a Number) (오류)

참조타입

함수 (function)

• 임의 숫자 두 개를 전달받아서 덧셈을 하는 기능인 함수를 만들고 싶다

console.log(10 + 10); console.log(20 + 30); console.log(5 + 10);

함수 선언

• sum() : 함수명

function sum() {

    console.log("Hello");
    console.log(10 + 10);

}

함수 호출

sum();

Parameter (매개변수), Argument (인수)

• 매개변수 : num1, num2

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

• 인수 : 호출시 전달되는 값

sum(10, 20); ➜ 30 sum(100, 50); ➜ 150

function fullName(firstName, lastName){
     console.log(firstName + " " + lastName)
}

fullName("Jeongmin", "Heo")

function area(width, height) {
    console.log(width);
    console.log(height);

    var result = width * height;
    console.log(result);
}

area(10);

• 누락된 매개변수가 있으면 undefined가 default 값으로 들어가게 됨 • 매개변수와 인수가 쌍을 이룬 상태로 작성되어야 한다

• 매개변수 안에 들어갈 수 있는 데이터 타입은 모든 데이터 타입이 들어갈 수 있다.

function test(a){
    console.log(a);
}

test(10);
test("Hello");
test(true);
test(null);

return

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

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

➜ 함수 호출 = 30, result = 30

function area(hor, ver) {
    return hor * var;
}

var volume = area(10, 20) * 100;
console.log(volume);
➜ 20000

배열 (Array)

• 하나의 데이터 안에 다 담을 수 있다 일종의 바구니 역할

var banana = "바나나";
var apple = "사과";
var melon = "멜론";

var fruit = ["바나나", "사과", "멜론"];
console.log(fruit);

인덱스 (index)

console.log(fruit[2]);
console.log(fruit[0]);

fruit[2] = "수박";
console.log(fruit);

var arr = [10, "Hello", true, null, undefined, fuction a() {}, [10,20,30], {name:"kim"}];

❌ 주의점 var num = [10,20,30, "Hello World"]; ❌ ➜ 배열안에 있는 데이터는 동일한 데이터 타입을 가지고 있는게 좋다 var fruit = ["사과", "배", "바나나", "양상추"]; 🙆‍♂️ ➜ 동일한 성격을 갖고 있는 데이터로 배열안을 채우면 좋다

➡️ 공통된 데이터 타입, 성격으로 배열을 만들기

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

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

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

객체 (object)

• 이름, 나이, 스킬, 성별 • key + value = property

var student = {
    name : "jeno",
    age    : 22,
    skills: ["자바스크립트", "HTML", "CSS"]
};

console.log(student);

• 객체안의 데이터에 접근하는 방법 2가지 - 둘 다 기억해놓기

console.log(student.name);
console.log(student['name']);

• 객체안에있는 배열 타입의 데이터에 접근하는 방법 console.log(student.skills[1]);

• 새로운 property 작성법 : 객체명 키를 작성하고 벨류 값을 작성해주면 된다

student.age = 100;
console.log(student);

student.gender = "남자";

console.log(student);

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

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

    // method (객체 안에 만들어진 함수)
    sum : function (num1, num2){
        return num1 + num2;
    }

};

*• 객체 밖에 만들어진 함수는 그냥 함수 * function a() {};

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

student.sum(100, 200);
//자바스크립트가 이미 갖고 있는 객체가 console인 거임
console.log("Hello Future");

원시 타입과 참조 타입 차이점

원시 타입

var str1 = "Hello World";
var str2 = str1;

➡️ 복사본에는 영향을 줄 수 없다 이게 원시타입의 특징이다

str1 = "Nice";
str2 = "Nice";

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

참조 타입

var obj1 = {name : "jeno"};
var obj2 = obj1;

obj2.name = "Park";

console.log(obj1);
console.log(obj2);

➡️ 참조 타입 특정 주소(메모리)에 저장된 데이터를 지정하는거라서 데이터가 같이 변한다

버튼을 클릭했을 때 배경색깔이 변하는 기능

yellow, green, pink #dc143c ,rgba(123,123,123,0.5);

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

document

➜ html에 반응하는 객체 - 클라이언트 측 자바스크립트

• getElementById - method

var bg = document.getElementById('color_bg'); var btn = document.getElementById('btn');

• 익명함수 : 이름이 없는 함수 • 콜백 함수 : 호출 기호 없이 특정 조건 하에 호출 되는 함수

• btn - 객체로 인식

btn.addEventListener('click', function(){
    var random = Math.floor(Math.random() * 5);
    // console.log(random);
    // console.log(colors[random]);
    //background-color, border-radius, margin-top | 자바스크립트는 캐멀케이스로 적용해야함
    bg.style.backgroundColor = colors[random];
})

1 ~ 6 숫자를 랜덤하게 가져오는 게임

Math.random() : 0 ~ 0.99999~ Math.random() * 6 : 0 ~ 0.599999~ Math.floor(random() * 6) : 0~5 내림 Math.floor(random() * 6) + 1 : 1~6

console.log(Math.random());
console.log(Math.random() * 6);
console.log(Math.floor(Math.random() * 6));
console.log(Math.floor(Math.random() * 6) + 1);

1 ~ n 숫자를 랜덤하게 가져오는 게임

console.log(Math.floor(Math.random() * n) + 1);

예약어

➜ 예약어를 변수로 사용하면 안된다

사용 ❌

var ,typeof ,fuction, null, undefined, false, true, console var var; var function;

그외 알아둘 것

두개의 자바스크립트 파일을 연동시켜도 위에서 아래로 순차적으로 인식된다
먼저 존재하는 파일을 연동시키고 그 다음 써먹을 파일을 연동시켜야 한다
서로 다른 파일에 변수가 있고 함수가 있으면 이전에 작성된 변수와 함수를 사용할 수 있음

웹 프로그래밍(자바스크립트1)

Fri, 03 Sep 2021 08:21:58 GMT

💻 학습 내용

자바스크립트란?

🖤 자바스크립트는 인간에게 친숙한 언어라고 볼 수 있다. high level language 중 하나가 자바스크립트 언어이다. 입문하는 단계에서 빠르게 습득할 수 있는 언어이다.

자바스크립트 사용 분야

🖤 하이브리드 앱 자바스크립트 css 익히게 되면 안드로이드 앱, 앱스토어 앱을 출시할 수 있게 됐다.
🖤 node.js 자바스크립트 언어를 기반으로 node.js 툴을 이용해서 개발할 수 있다. Node.js는 확장성 있는 네트워크 애플리케이션(특히 서버 사이드) 개발에 사용되는 소프트웨어 플랫폼 작성 언어로 자바스크립트를 활용하며 논블로킹(Non-blocking) I/O와 단일 스레드 이벤트 루프를 통한 높은 처리 성능
🖤 자바스크립트 iot 웹사이트의 주요기능을 제작하는 것 뿐만 아니라 굉장히 다양하게 사용될 수 있따.

자바스크립트 3분야

🖤 자바스크립트 코어 : 개발언어의 문법적인 내용을 다루는 영역 🖤 클라이언트 측 자바스크립트 : 브라우저를 제어할 때 사용하는 자바스크립트 🖤 서버 측 자바스크립트 : node.js 영역

자바스크립트 연동 방법

🖤 js 파일 안에서 자바스크립트 언어를 작성하고 script태그에 src를 활용해서 파일을 연동시킬 수 있다. 위에서부터 순차적으로 실행된다는 것을 기억해두자
🖤 연동을 할 때 src로 하고 script 태그 안에 또 script태그 를 작성하면 적용이 되지 않는다.

🖤 src로 연동하거나 script하나만 해야지 두가지를 혼용해서 사용하면 안된다.
🖤 console.log(“Hello"); 콘솔탭에 특정 언어를 출력할 때 사용되는 명령어
🖤 자바스크립트가 작성된 것을 확인하고 싶으면 console 버튼을 누르면 된다.

자바스크립트 코어

-자바스크립트 변수 : 데이터를 저장하는 공간 이삿짐 박스가 변수 (이삿짐 박스에 들어갈)물품이 데이터이다. 이삿짐 박스는 겉에다가 어떠한 내용물이 들어갈지 겉에 표기를 해줘야 한다. 예) 이삿짐 박스 = 만화책 박스->(변수명)

데이터 타입=데이터의 종류

(공부할 때 영어 표기도 같이 기억하면 좋다)
•문자열 (String) •숫자(Number) •논리(Boolean) : true or false •undefined •null ——————————————————————————> 원시 타입 •배열 (Array) •함수 (Function) •객체 (Object) ——————————————————————————> 참조 타입

변수 입력 방법

🖤 comic 박스를 생성한 상태

//변수 선언 var comic;

🖤 comic 박스 안에 원피스 데이터를 할당한 상태

// 변수 초기화 comic = "원피스";

console.log(comic);

🖤 변수를 선언함과 동시에 초기화를 진행해준 상태

var apple = "사과";

🖤 변수 동시 선언 2가지 방법

var a;
var b;
var c;

줄 바꿈 없이 var a, b, c;

줄 바꿈 있음

var     a,
 b,
 c;

🖤 변수 동시 초기화

var d = 10;
var e = 20;
var f = 30;

줄 바꿈 없이

var d = 10, e = 20, f = 30;

줄 바꿈 있음
```
var    d = 10, 
 e = 20, 
 f = 30;
```

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

var house;
cosole.log(house);

undefined -> 집

var house;
house = "집";
console.log(house);

집 -> 아파트

house = "아파트";

console.log(house);

변수명 작성 방법

🖤 캐멀 케이스

var mathScoreStudent = 10;

🖤 스네이크 케이스

var math_score = 10;

🖤 이렇게 작성하면 안됨

var math-score-student=100; var _math; var $math;

var apple10; var 10apple; 숫자가 먼저 나와서는 안된다

var w; 다른 개발자가 알 수 있게 자세하게 작성해주어야 한다. 의미가 불분명한 단어 작성 x

데이터 타입

🖤 문자열 (String)

"" 사용 var msg1 = "Hello Future";
'' 사용 var msg2 = 'Welcome';

console.log(msg1); console.log(msg2);

var msg3 = "Nice to meet you'

var msg4 = "She's girl";

var msg5 = 'She\'s girl'; 역 슬래쉬로 작은 따옴표를 넣어주면 인식이 된다.

🖤 숫자 (number) - 파란 글씨로 나타난다

var num1 = 10;
var num2 = -10;
var num3 = 3.14;
var num4 = -3.14;

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

** 계산이 가능하다 **

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

🖤 연산자

숫자 사칙연산

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

문자열 사칙연산

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

var fistName = "Jeno";
var lastName = "Lee";

console.log(fistName + "      " + lastName);

var str11 = "현재 시간은";
var time = 10;
var str12 = "시 입니다.";

console.log(str11 + time + str12); //문자열 데이터 타입으로 출력된다 (검정색 글씨)

++, -- 연산자

var num10 = 10;

num10 = num10 -1;

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

console.log(++num10);
console.log(++num10);

console.log(num10--); num10값을 출력시키고 그 다음에 -1을 하겠다는 의미 (한텀 쉬고 다음 num10에서 결과값이 출력됨)
console.log(num10);

+=, -=, *=, /= ,%= 본인의 값을 업데이트 하고 싶을 때

var num20 = 20;

num20 = num20 + 10;
num20 += 10;

console.log(num20);

** 비교 연산자 >, <, ==, ===, !=, !==, <=, >=**

var a = 10;
var b = 20;
var c = 30;

console.log(a > b);
console.log(a < b);
console.log(a >= b);
console.log(a <= b);

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

console.log(a != b);
console.log(a !== b);

var num10 = 10;
var num20 = 20;

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

console.log(num10 == str10); 
console.log(num10 === str10); //데이터 타입 까지 비교하기 때문에 false가 나옴 
-> 주료 사용

console.log(num20 != str20); //데이터 타입을 떠나서 내용물은 같기 때문에 false
console.log(num20 !== str20); //데이터 타입이 다르기 때문에 true -> 주로 사용

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

var num30 = 30;
var num40 = 40;
var num50 = 30;

console.log(num30 === num40 && num30 === num50 && num40 !== num50);
console.log(num30 === num40 || num30 === num50 || num40 > num50);

** 불리언(Boolean) : true , false **

console.log(true);
console.log(false);
console.log(1 === 2);
console.log(10 < 20);
console.log(10 === 10 || 20 ===30);

var bool = true;
bool = false;

마무리

자바스크립트를 처음 배웠다. 개념 부분이 컴활이랑 비슷한 부분이 있었다. 오늘은 기본적인 개념을 배웠는데 주말동안 남은 자바스크립트 강의를 다 들어야 겠다.

웹 프로그래밍 (모바일 네이버 2)

Thu, 02 Sep 2021 08:01:14 GMT

💻 학습 내용

🛫 GIT-HUB

HTML | naver_mobile_2 CSS | naver_mobile_2

모바일 네이버 2

🖤 footer에서 before를 이용하여 만든 | 를 로그인, 이용약관 앞에서는 삭제하기 위하여 nth-child(1),nth-child(4)를 활용하여 삭제하려고 하였다. 하지만 html 코드에서 줄 바 꿈을 하기 위하여을 작성했는데 그러면서 연속성이 깨져버렸다. 연속성이 깨지면 nth-child를 사용하지 못한다. 그래서 div로 윗 줄과 아랫줄로 공간을 나눠서 작성해주었다. 이때 class를 동일하게 작성해주었다.

.link:first-child{
content:'';
}

로 작성하여 | 를 지워주었다.

📝 마무리

💛 네이버 모바일을 오늘 카피캣 하면서 float을 쓰면서 overflow:hidden;을 사용하는게 이해가 되지 않아 인터넷으로 검색을 했다. overflow:hidden;과 float 설명
💛 설명을 보는데도 너무 어려운 설명이라서 자식태그에 float를 사용하면 부모태그에 oveflow:hideen;을 작성하는걸 공식으로 생각하는게 편할 것 같다.

웹 프로그래밍(모바일 네이버 1)

Wed, 01 Sep 2021 08:27:57 GMT

💻 학습 내용

🛫GIT-HUB

HTML | naver_mobile_1 CSS | naver_mobile_1

모바일 네이버 1

🖤 vh : 기기 화면의 높이값으로 100% 맞추겠다는 뜻이다. vh = viewport height 약자임 vh는 화면의 기준으로 하기 때문에 반응형 웹사이트 제작 시에 유용하게 사용 꼭 width height에서만 사용되는 게 아니라 폰트에서도 사용이 가능합니다. ⭐️ vh 설명
🖤 white-space : nowrap ** width 100px에 맞춰 내용이 줄바꿈이 자동으로 되어있는 거는 white-space:wrap; 이 기본값이기 때문 풀이하자면 여백을 띄워 줄바꿈을 하게 하라 이런 느낌이다. 이때 한 줄로 바꿀려면 줄바꿈이 없어진 **white-space:nowrap; 사용
🖤 스크롤바 사라지는 코드

#main_nav ul {
    -ms-overflow-style: none; /* IE and Edge */
    scroll-width: none; /* Firefox */
}
#main_nav ul:-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera*/
}

🖤 margin-left:20px; ➜ 컨텐츠 바깥쪽에 여백을 주기 때문에 wrap 부분과 딱 일치하게 됨
🖤 padding-left:20px; ➜ 컨텐츠 안쪽에 여백을 주기 때문에 이미지가 wrap 부분에서 여유공간이 생김 ❤️‍🔥 레이아웃의 디자인에 따라 padding, margin 구분해서 사용해야 함

📝 마무리

💛 네이버 모바일 버전을 카피캣해보았는데 스크롤을 숨기게 하는 코드도 배웠다
💛 flex가 통일되는 부분이 적어서 태그에 flex를 각자 작성해주어야 했다. class로 작성해서 주는 방법이 훨씬 수월하고 시간이 절약된다는 것을 깨달았다.
💛 flex_wrap:nowrap; 으로 컨텐츠가 지정된 크기를 벗어나도 줄 바꿈 현상이 일어나지 않게 해주었다. overflow-y:auto;로 스크롤도 자동으로 생기게 해주었다.
💛 now_wrap 부분에서 before로 | 를 작성했는데 now_wrap 부분에 position:relative;를 주지 않아서 위치가 제대로 잡히지 않았었다. 코드를 수정해서 올바른 위치에 작성해 주었다.

웹 프로그래밍(유튜브_5)

Tue, 31 Aug 2021 07:18:15 GMT

💻 학습 내용

🛫 GIT-HUB

HTML | youtube_channel CSS | youtube_channel HTML | youtube_explore CSS | youtube_explore

📝 마무리

💛 평소에 많이 사용하는 유튜브 사이트 카피캣을 마무리 하였다. 카피캣을 여러번 진행하면서 position의 편리함을 깨닫는 중이다. 이미지 위에 글자를 올릴 때 너무 편하다.

💛 글자나 이미지가 레이아웃의 변형이 발생하면 크기를 적당히 조절해주면 된다.

💛 생각보다 많은 코드들을 배웠고 효과들을 적용시킬 수 있지만 과연 내가 이걸 창의적으로 적용할 수 있는지에 대한 많은 의문점이 든다. 배운 코드들을 꾸준히 복습해 나가야 겠다.

웹 프로그래밍(유튜브_4)

Mon, 30 Aug 2021 09:36:23 GMT

💻 학습내용

🛫GIT-HUB

HTML | youtube_left_nav CSS | youtube_left_nav HTML | youtube_main CSS | youtube_main

left_nav_footer

⭐️ word-break 설명

#youtube_left_content #youtube_footer .txt_wrap a{
    margin-right: 8px;
    color: #aaaaaa;
    font-size: 12px;
    font-weight: 500;
    word-break: keep-all;
}

🖤 단어별로 줄바꿈을 하고 싶을 때 keep-all을 입력 🖤 글자 단위로 줄바꿈을 하고 싶을 때 break-all

main_content

#youtube_main_content ul {
    width: 100%;
    height: 100%;
    align-items: flex-start;
}
#youtube_main_content ul li {
    width: 24%;
    background-color: #212121;
    margin-bottom: 40px;
}
#youtube_main_content ul  li .video_thumbnail {
    width: 100%;
}
#youtube_main_content ul  li .video_thumbnail a {
    position: relative;
    display: block;
    width: 100%;
}
#youtube_main_content ul  li .video_thumbnail img {
    width: 100%;
}

``` 🖤 이미지를 자연스럽게 리사이즈 하기 위해서 정확한 픽셀값을 입력하지 않고 퍼센테이지로 입력한다. 🖤 이미지 한쪽에만 위드 100%르를 지정하면 비율은 유지하고 높이값은 자동으로 맞춰지게 된다 🖤 우리가 만들어놓은 li 24%에 맞춰서 비율은 유지하지만 크기가 바뀌게 된다.

📝 마무리

💛 이미지 크기를 정확하게 지정하지 않고 비율로 설정하는 걸 처음 해봤는데 화면이 줄어들면 자연스럽게 이미지의 크기도 조정되어서 신기했다 💛 left_nav 부분은 반복되는 디자인이어서 코드를 작성하는데 수월했다. 비슷한 구조의 코드들은 따로 저장해서 필요할 때 바로바로 쓸 수 있도록 하면 좋을 것 같다. 💛 공간의 크기를 잘 설정해주어야 레이아웃이 깨지지 않는다. 수치를 항상 신경쓰고 작성해야 한다는 것을 깨달았다.

웹 프로그래밍 (유튜브_3)

Fri, 27 Aug 2021 10:09:16 GMT

youtub_left_nav

📝 마무리

오늘은 유튜브 레프트 부분과 메인 부분을 수업하였는데 트위치와 했던 방식이 비슷해서 따라하는데 큰 어려움은 없었다.

웹 프로그래밍(유튜브_2)

Thu, 26 Aug 2021 08:18:47 GMT

💻 학습 내용

🛫 GIT-HUB

HTML | youtube_top_nav CSS | youtube_top_nav

youtub_top_nav

🖤 youtube_top_nav 부분을 left / center / right 3 군데로 나누었다. 그 중 center 부분에 input 태그와 button 태그가 x축으로 정렬 되지 않고 button 태그 부분(grey 색깔)이 밑으로 내려가 버렸다. flex를 줄때 center 부분으로 한 번 주고 그 다음 input과 button태그가 묶여 있는 search_wrap 부분에도 flex를 작성해 주어야 했던 것 이다. flex로 제대로 된 정렬을 입력해 주자 사진과 같이 x축 정렬이 되었다.
🖤 center 부분을 x축 중앙정렬을 해주었다.

#youtube_top_nav .nav_center{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

📝 마무리

저번 수업 시간에는 큰 틀만 작성하였는데 오늘 세세한 디자인 작업 까지 진행 하였다. 유튜브의 메인 헤더 부분을 만들어 보았는데, 맨날 보던 창을 내가 직접 만들어 보니 느낌이 색달랐고 생각보다 만드는 방법이 지금까지 연습했던 카피캣 만으로도 유사하게 만들어 낼 수 있어서 신기했다.

웹 프로그래밍(유튜브_1)

Wed, 25 Aug 2021 05:37:08 GMT

💻 학습 내용

HTML




    
    유튜브 튜토리얼

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
}

ol, ul {
    list-style: none;
}

a{
    text-decoration: none;
}

img    {
    vertical-align: top;
}

button {
    background-color: transparent;
    border: none;
}

input {
    outline: none;
    border: none;
}

input:focus{
    outline: none;
}

#wrapper{
    position: relative;
    width: 100%;
    height: 100%;
    min-width: 1320px;
}

/*유튜브 상단 메뉴*/
#youtube_top_nav{
    position: fixed;
    width: 100%;
    height: 56px;
    background-color: #212121;
}

#youtube_left_nav {
    overflow-y: auto;
    overflow-x: hidden;
    position: fixed;
    width: 240px;
    top: 56px;
    bottom: 0;
    left: 0;
    background-color: #212121;
}
/*왼쪽 사이드 메뉴*/
#youtube_left_content{
    position: absolute;
    width: 225px;
    height: 100%;
    background-color: grey;
}


/*유튜브 메인*/
#youtube_main {
    position: absolute;
    left: 240px;
    top: 56px;
    right: 0;
    bottom: 0;
    background-color: grey;
}

📝 마무리

💛 유튜브 카피캣을 오늘 시작하였다. 메인 페이지를 카피캣 하는데 오늘은 대충 큰 틀만 작성하는 부분이었다. 큰 틀만 대충 작성하는 부분이라서 크게 어려운 부분은 없었다. position을 이용하여 공간의 크기를 설정했다.

웹 프로그래밍 (reset, noramilze css , css 변수)

Tue, 24 Aug 2021 02:23:27 GMT

💻 학습 내용

reset.css

⭐️ reset.css

사이트 카피캣을 진행할 때 초기화 작업을 해줬는데 이게 미리 작성된 코드가 있는데 그게 바로 reset.css 라고 한다

기존의 html태그가 갖고 있는 모든 걸 다 초기화 해준다.
브라우저마다 고유의 css를 갖고 있는데 그걸 전부 다 초기화
커스텀 작업은 style.css에서 다이렉트로 진행하면 된다.
브라우저 고유의 css -> reset.css ->style.css (나중에 작성된게 브라우저에 적용이 된다) 즉 style.css에서 작성한게 브라우저에 최종적으로 적용이 되는 것이다.

normalize.css

⭐️ normalize.css

디자인을 입힌 형태로 재 정의 해주고 있다 기존의 디자인을 조금씩 가공한 상태라고 할 수 있다 오차를 줄이고 버그를 줄이는 방향으로 사용되고 있다 디자인은 적용되어 있고 단 여러 브라우저에서 디자인간의 오차를 줄일 수 있도록 적용되어 있다 🖤 다운로드 버튼에서 오른쪽 버튼을 눌러 '다른이름으로 링크저장'을 클릭하고 css폴더에 normalize.css로 저장해주면 된다

css 변수

🖤 변수란? 어떤 박스가 있다 박스안에 a내용물을 넣는다고 할 때 박스를 변수라고 하고 a내용물을 값(밸류)라고 한다.
🖤 변수의 장점 변수는 원하는 이름으로 바꿀 수 있다. 변수를 사용하는 이유는 변수로 지정한 이름에서 값만 변화하면 일괄적으로 모두 수정이 가능하다 직관적인 코드 명으로 아주 유용하다

🖤 변수의 단점 익스플로러에서는 사용을 못한다.
🖤 변수 작성법

:root {
    --black: #18181a;
    --purple :#9147ff;
    --font-size-40: 40px;
}

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

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

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

root에다가 변수를 입력하면 어디에서든 전부 다 사용이 가능한 변수가 된다 내가 사용한 변수가 영향력을 발휘하는 범위를 css선택자를 활용해서 지정을 할 수 있다 #intro같은 경우는 intro안에 있는 태그에만 디자인 적용이 가능해진다.

📝 마무리

💛 카피캣 수업을 진행할 때는 놓쳤던 부분들을 하나하나 설명해주시는 시간이었다. 새로운 카피캣 수업을 할 때 마다 초기화 작업을 매번 작성해야 해서 번거롭게 느껴졌는데 reset.css를 알게되서 좋았다.
💛 트위치 수업을 할 때 보기 어렵게 되어 있어서 왜 이렇게 어렵게 했는지 이해가 되지 않았다. 그런데 오늘 수업에서 css 변수를 알게 되면서 트위치가 왜 그렇게 작업을 했는지 알게 되었다. 하나의 코드만 변경하면 굳이 다른 코드들을 수정할 필요가 없고 변수의 이름도 직관적으로 변경하면 다른 개발자가 보았을 때 쉽게 내용 파악이 가능할 것 같았다. 하지만 아직 익스플로러에는 사용되지 않는 다고 하여 아쉬웠다. 또 변수는 자바스크립트에서 많이 사용되는 개념이라고 하였다.

웹 프로그래밍(트위치_3)

Mon, 23 Aug 2021 10:38:39 GMT

💻 학습 내용

🛫GIT-HUB

HTML | twitch_content_2_footer CSS | twitch_content_2_footer

content

🖤 *이미지가 이동하는 효과 주는 방법 *

.video_section .video_wrap .image_wrap  img {
    width: 100%;
    height: 100%;
    transition: transform 0.15s linear ;
}
.video_section .video_wrap .image_wrap:hover img {
    transform: translate(10px, -10px);
}

⭐️ transition 태그 설명 ⭐️transform 태그 설명

📝 마무리

💛 트위치 카피캣이 모두 끝이 났다. 트위치를 카피캣 하면서 사이트를 통하여 알아낼 수 있는 코드가 별로 없어서 너무 어렵고 힘들게 느껴졌다. 선생님의 수업을 천천히 따라하면서 코드를 작성해 나가고 기존에 알던 태그와 가성선택자를 통하여 코드를 작성해 나갔다. 클래스 명을 미리 지정하여 스타일 효과를 준다는 것이 편하다라는 것을 또 알았다. 💛 오랜만에 transition과 transform을 통하여 애니메이션 효과를 주었다. 간단해 보이지만 사이트에 적용된 효과는 항상 멋있는 것 같다.

웹 프로그래밍 (트위치_2)

Fri, 20 Aug 2021 11:20:16 GMT

💻 학습 내용

🛫GIT-HUB

HTML | twitch_content CSS | twitch_content

content

🖤 트위치는 header영역을 제외하고 content 내부 에서만 스크롤이 만들어진다. 이럴 때는 overflow-y: auto; 코드를 작성해 주면 된다. ➜ overflow-y: auto; : scroll과 비슷하며 content에서 넘치는 부분이 생겼을 때 자동으로 스크롤이 생긴다. ⭐️overflow 정리
🖤 background도 한 줄로 코드를 정리할 수 있다.

background: url(../img/notebook.jpg) no-repeat center;
background-size: cover;

➜background-size: cover;는 우리가 사용하는 이미지를 만들어진 공간에 다 채울 수 있도록 자동으로 축소 확대 해주면서 가로세로 비율은 유지된다. 웹사이트를 줄이거나 키울때 자동으로 이미지를 줄였다 커졌다 해준다. 백그라운드 포지션으로 센터를 맞춰주면 이미지의 중심부를 중앙에 넣어주게 된다. 그렇기 때문에 이미지를 제작할 때 센터에 주요 컨텐츠가 다 몰리도록 만들어 준다. ⭐️ background정리

📝 마무리

💛 오늘은 background를 통하여 이미지를 배경으로 삽입 하였다. 그리고 위에 layer를 만들어 덮어씌워주는 것을 하였는데 background 이미지에 position:relative; 작성을 실수로 빼먹었다. 그렇게 되니까 layer 부분이 content 전체 부분을 채우게 되어버렸다. 실수한 부분을 찾기 위해 선생님이 작성하신 코드와 내가 작성한 코드를 비교하면서 찾아 갔다. background이미지를 부모태그로 정해주지 않아서 content 부분 전체를 부모로 인식하고 layer가 적용되었던 것 이다. 앞으로는 부모태그를 확실하게 작성했는지 확인하는 작업이 필요할 것으로 보인다.

웹 프로그래밍 (트위치_1)

Thu, 19 Aug 2021 08:46:38 GMT

💻 학습 내용

🛫 GIT-HUB

HTML | twitch_header CSS | twitch_header
HTML | twitch_left CSS | twitch_left

CSS 기본값

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
}

body {
    background-color: #0e0e10;
}

ol, ul {
    list-style: none;
}

a{
    text-decoration: none;
}

img {
    vertical-align: top;
}

input {
    outline: none;
    border: none;
}

button {
    outline: none;
    border: none;
    background-color: transparent;
}

h1, h2, h3, h4, h5, h6, p, span, input, button, a {
    color: #ffffff;
}

.btn_purple {
    background-color: #9147ff;
    color: #fff;
}

.font_purple {
    color: #9147ff;
}

트위치_1

header 🖤상단 nav 영역에 fixed(3차원 영역)를 적용하고 width 값을 작성해줘야 한다. 그게 안되면 안에 작성된 크기가 width 값이 되기 때문에 레이아웃이 망가진다.
🖤min-width 값을 주는데 브라우저의 크기를 줄여도 특정 지점이 되면 더 이상 줄어들게 하지 않게 하기 위해서이다.
left 🖤position fixed는 브라우저를 기준으로 좌표가 적용 된다. bottom 0을 주면 공간을 강제로 늘리게 된다. 순수 3차원에서만 적용된다 탑 바텀을 이용해서 전체로 채울수 있다 height 없이 높이 값은 브라우저의 크기에 따라 가변적으로 변하게 된다.
🖤브라우저를 올렸을 때 왼쪽 영역에 대해서만 스크롤이 생겨야 하는데 overflow-y:auto;를 넣어주면 된다 오토를 하면 스크롤이 필요한 상황에 대해서만 반응한다

📝 마무리

💛 외국 사이트를 처음으로 카피캣하였는데 되게 어렵게 작성되어 있어서 카피캣하기 너무나도 힘들었다.
⭐️ jquery.scrollbar 사이트를 활용해서 트위치와 비슷한 스크롤 유형을 만들어 낼 수 있다.

웹 프로그래밍 (네이버 오디오_3)

Wed, 18 Aug 2021 09:25:27 GMT

💻 학습 내용

🛫 GIT-HUB

main_right

🖤 더 많이 발견하기 1 / 5 색을 다르게 지정하기 위해 으로 다른 색 끼리 지정해 주었다.

🖤 중앙정렬을 하기 위해서 vertical-align: top; margin: 9px 7px 0; 값을 준다. 중간에 주석 처리한 /*margin: 4px 7px;*/ 은 네이버에서 실현한 중앙 정렬 방법이다.

#audio_footer .footer_nav li a:after {
    display: inline-block;
    content: "";
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background-color: #959595;
    /*margin: 4px 7px;*/
    vertical-align: top;
    margin: 9px 7px 0;
}

audio_category

🖤 flex box에서 justify-content: space-between; 사용시 단점 ** ➜ 윗쪽과 아랫쪽 갯수가 맞지 않을때 공백이 어그러지게 된다. 그렇기 때문에 이럴때 justify-content: flex-start;로 왼쪽으로 정렬 시킨 후에 공백을 준다
🖤 *nth-child 가상선택자 지정하는 법 * 홀수 값 : nth-child(odd) 짝수 값 : nth-child(even) 2배수 : nth-child(2n)
🖤이미지를 살짝 돌리는 법**

.audio_category .audio_category_lists .category_list a img {
    position: absolute;
    width: 78px;
    height: 78px;
    transform: rotate(25deg);
    right: -13px;
    bottom: 0;
}

➜ transform : rotate(); 를 활용하면 해결된다.

📝 마무리

⭐️ 오디오클립
⭐️ 카테고리:오디오클립
💛 실제로 오디오클립 : 카테고리 부분과 비슷하게 연출하고 싶어서 각 칸 마다 컬러를 다른 값으로 주었다. html 코드에서 style="background-color: #032609;" 작성하였다.
💛 flex-box가 모든 경우에 적용되지 않는 다는 것을 깨닫고 그럴 경우는 어떻게 해결해 나가야 하는지에 대한 방안을 위에 정리하였다.

웹 프로그래밍 (네이버 오디오_2)

Tue, 17 Aug 2021 11:15:40 GMT

💻 학습 내용

🛫 GIT-HUB

HTML | naver_audio_main_left CSS | naver_audio_main_left

main_left

🖤 .main_container{overflow:hidden;} 코드를 작성할 경우 float 기능을 사용하지 못한다.
🖤 position: relative; ,posititon:absolute; 를 활용하여 레이아웃을 겹쳐지도록 하였다.
🖤 #audio_channel .audio_body ul{align-items: flex-start;} flex box를 이용하여 공간을 배치하였는데 제일 위에서부터 정렬 될 수 있도록 {align-items: flex-start;}를 추가적으로 작성해 주었다.

📝 마무리

💛 반복적으로 적용되는 디자인은 동일한 클래스로 묶어서 작성하는것이 훨씬 더 편하다는 것을 알았다.
💛 수업을 들으면서 저번 보다 div 태그를 작성하는데 덜 헷갈리게 되었다. div 태그를 먼저 작성하고 div태그 안에 들어갈 내용들만을 들여씌기 한 후에 닫힌 div태그를 작성해 주면 된다.

웹 프로그래밍 (네이버 오디오_1)

Fri, 13 Aug 2021 06:01:22 GMT

💻

🛫 GIT-HUB

HTML | naver_audio_header CSS | naver_audio_header

CSS | audio_기본값

.audio_container{
    width: 1080px;
    margin: 0 auto;
}

.audio_flex_between {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    align-content: stretch;
}

.audio_flex_start {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    align-content: stretch;
}

.audio_flex_center {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: stretch;
}

.audio_flex_end {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    align-content: stretch;
}

audio_header

🖤 position 3차원 특성을 활용해서 디자인의 위치를 직접 조정하였다.

#audio_header .audio_nav_left li a.active span:after{
    display: block;
    position: absolute;
    content: "";
    border-bottom: solid 3px #222;
    border-radius: 1.5px;
    z-index: 1;
    left: -4.5px;
    right: -5.5px;
    bottom: -17px;
}

position 3차원을 활용해서 left,top,right,bottom을 전부 0으로 만들어주면 공간을 여백 없이 가득 채울 수 있다. 이 때 값을 직접 입력하여 수동으로 움직임을 줄 수 있게 된다.

📝 마무리

💛 flex를 이용해서 공간 배치 작업을 하는데 flex를 class가 아닌 id에 입력하여 적용이 안됐었다. class를 추가하고 제대로 입력을 해주었다.
💛 위에 실수한 부분을 제외하고는 크게 어려운 부분은 없었다. 본문에 작성한대로 새로운 공간 위치 작업하는 법을 배워서 뿌듯했다.

웹 프로그래밍(네이버 e스포츠_3)

Thu, 12 Aug 2021 05:35:25 GMT

💻 학습내용

🛫GIT-HUB

HTML | naver_esports_main_right CSS | naver_esports_main_right

main_right

#esports_news_view li a .image_wrap {
    position: relative;
    overflow: hidden;
    width: 84px;
    height: 48px;
    border: solid 1px rgba(0, 0, 0, .04);
    border-radius: 4px;
}
#esports_news_view .image_wrap img {
    position: absolute;
    width: 100%;
    height: 100%;
}

🖤 이미지위에 레이아웃을 겹칠 때 image_wrap을 img사이즈와 동일하게 맞춰주고 position을 relative로 설정해준다.
img는 width 100%, height 100%를 입력해주고 position을 absolute를 주면서 겹칠 수 있도록 해준다.
🖤 overflow hidden을 주는 이유는 border-radius값을 설정해줬는데 이미지의 크기 때문에 적용되지 않은 것 처럼 보여서 넘치는 부분은 숨겨주면서 border-radius가 적용되도록 해주는 것이다.

#esports_schedule .schedule_wrap .schedule_header span{ position: relative; font-size: 18px; font-weight: 800; top: 3px; }

🖤 날짜 부분이 x축으로 올바르게 정렬이 되지 않았는데 그 이유는 span 태그는 고유로 가지고 있는 공간이 있기 때문이다. 이럴 때는 직접 위치 조율을 해줘야 한다.
position relative를 주고 top값을 이용해서 위치를 조정해주었다.


## 구글 웹폰트
⭐️ [구글 웹폰트](https://fonts.google.com/)

>```

🖤 폰트 적용 링크를 먼저 작성하고 css와 연동하는 링크를 작성해줘야 오류가 발생하지 않는다.

font-family: sans-serif;

🖤 css에는 font-family를 이용하여 폰트 이름을 복사해서 붙여넣어주며 된다. 마지막 sans-serif는 필수로 작성해 줘야 한다. 모든 웹브라우저에 적용되는 폰트이기 때문이다.

📝 마무리

💛 어제 내가 혼자 복습했던 이미지 위에 레이아웃이 겹치도록 하는걸 수업 시간에 또 해볼 수 있어서 좋았다. image_wrap 크기를 img 크기로 설정해야 absolute 적용된 것들이 위치를 제대로 잡을 수 있다는 것을 알았다.
💛 폰트 적용하는 법을 다시 한번 배웠다. link 순서를 제대로 입력해주어야 한다는 것을 알았다.
💛 어려운 부분은 크게 없었다.. 다만 저번에 작성해둔 나의 sublimetext가 사라져서...그 부분을 다시 작성하고 수정하는데 시간이 오래 걸렸다...^^ 저장을 꾸준히 하자 제발

웹 프로그래밍 (네이버 e스포츠_2)

Wed, 11 Aug 2021 09:07:25 GMT

💻 학습 내용

🛫 GIT-HUB

HTML | naver_esports_main_left CSS | naver_esports_main_left

esports_main_left

🖤 header 부분이 main 레이어 뒤로 숨겨지지 않도록 z-index : 999999; 가장 큰 값을 주어서 어느 레이어라도 제일 앞으로 나오도록 했다
🖤 2줄 말줄임표를 만드는 방법

display: -webkit-box;
    overflow: hidden;
    max-height: 38px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;

이 방법은 익스플로어에서는 적용이 안될수도 있다 만약에 3줄로 바꾸고 싶으면 line-clamp``````를 3으로 바꾸고max-height```값을 조정하면 된다

📝 마무리

🖤 오늘 수업 시간에 많이 본 영상 부분은 수업을 진행하지 않았지만, 혼자 복습 차원에서 작성을 해보았다. 생각보다 사이즈를 설정하고 찾는게 쉽지 않았고 absolute를 적용해도 원하는 위치로 가지 않아서 짜증이 났다...🥲 원하는 결과물을 얻기는 했다.. image_wrap 부분의 height를 image 크기와 동일하게 맞추고 display_flex가 적용이 되지 않길래 i,와 .time 부분에 따로 absolute를 적용하고 left, bottom, right를 이용해서 위치를 조정했다. 그냥 위에 있는거 코드 복사 붙여넣기 해서 하면 될 줄 알았는데 생각보다 시간이 오래 걸려서 화딱지가 좀 나긴 했지만 어쨌든 원하는 결과물을 얻어서 뿌듯했다. 직접 코드를 작성한다는 건 생각보다 많은 창의력을 요하는 것 같다

웹프로그래밍 (네이버 e스포츠_1)

Tue, 10 Aug 2021 04:58:09 GMT

💻 학습 내용

🛫 GIT-HUB

HTML | naver_esports_header CSS | naver_esports_header
HTML | naver_esports_main_top CSS | naver_esports_main_top

##esports 기본값

.esports_flex_between {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    align-content: stretch;
}

.esports_flex_start {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
}


.esports_flex_center{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.esports_flex_end{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    align-content: stretch;
}


.esports_container {
    width: 1280px;
    margin: 0 auto;
}

esport_header

#esports_header {
    position: fixed;
    width: 100%;
    background-color: #151618;
    left: 0;
    top: 0;
}

🖤 스크롤이 움직이더라도 헤더부분은 위에 고정이 되어 있게 하기 위해서 **position을 fixed로 설정**하고
Fixed는 위치 값이 브라우저를 기준으로 하기 때문에 ```left:0; top:0;```을 주면서 브라우저 상단에 고정될 수 있는 위치값을 한번 더 설정해주는 것이다.

## esports_main_top

  ![](https://images.velog.io/images/heo_jeongmin/post/9e164565-a2d0-4f34-904a-52d79234ec7a/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202021-08-10%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%201.35.29.png)
  >

#esports_main #esports_main_top .live_wrap ul li a { align-items: flex-start; }

🖤align-items: flex-start;을 설정해줘야 .live_wrap 부분이 제일 윗쪽으로 붙어서 정렬이 가능해진다. 제일 윗쪽으로 붙게되면서 완성본의 레이아웃이 형성된다. ![](https://images.velog.io/images/heo_jeongmin/post/21d1d5f5-4739-475b-a8c5-d7c7007cd62d/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202021-08-10%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%201.49.27.png) ❌align-items: flex-start;```을 적용하지 않았을 때

📝 마무리

🖤 오늘은 position:fixed를 처음으로 작성해보았다. 매번 relative와 absolute만 사용하다가 fixed를 처음으로 써보니 신기하고 재미있었다. 오늘은 위의 부분만 만들어서 스크롤이 생기지 않아서 fixed의 효과를 확인하지 못했지만, main부분을 다 채워서 header가 고정되어 있는 것을 빨리 확인하고 싶다.
🖤 hover가상선택자를 오랜만에 작성했다. 마우스의 커서가 올라가면 디자인이 변경되는 가상선택자인데 되게 간단한데 그럴듯한 효과를 낼 수 있어서 앞으로도 많이 사용할 수 있을 것 같다.
🖤 크롬의 검사 기능내에서 색깔을 추출해내는 방법을 배웠다.color부분 앞에 있는 색깔이 그려진 네모칸을 누르면 색을 추출해낼 수 있는 스포이트가 나타난다 그걸로 원하는 색이 있는 부분에 갖다 대면 색상값이 추출된다.
🖤 이제는 앞에서 사용했던 코드를 반복적으로 손에 익히는 연습을 하는 거라 크게 어려운 과정이나 개념이 등장하지 않았다!

웹 프로그래밍 (네이버 게임_3)

Mon, 09 Aug 2021 06:44:30 GMT

💻 학습 내용

🛫 GIT-HUB

HTML | naver_game_main_right CSS | naver_game_main_right

main_right

🖤 TOP5로 순위 매기는 두 부분은 스타일 적용값이 똑같았기 때문에 class로 "rank_section"을 동일하게 넣어주고 css값에서도 .rank_section을 작성해서 동일한 스타일이 적용되도록 해주었다.

📝 마무리

🖤 main_left 보다 section도 적었고, 디자인도 비슷해서 공부하는데 훨씬 더 수월하게 느껴졌다. 의미 있는 순위들에 ol과 li를 쓴다는걸 헷갈리지 않고 기억하도록 해야 겠다. last-child와 before, after 가상선택자의 활용도가 많이 높다는 것을 한번 더 배웠다. 오늘로써 게임 페이지 부분의 카피캣이 마무리 되었다. 수업을 다 듣고 최종본을 확인하는데 margin-top이 적용되어 있지 않아서 main_left와 main_right에 margin_top값을 주고 간격을 조정해주었다.