dasol-jeong.log

생성자 함수 vs 클래스

Tue, 07 Dec 2021 14:35:17 GMT

자바스크립트에서 객체를 생성하는 방법으로는 객체 리터럴, Object 생성자 함수, 생성자 함수, Object.create 메서드, 클래스가 있다. 그 중 인스턴스를 생성하는 방식이 비슷한 생성자 함수와 클래스를 비교하려고 한다.

클래스는 ES6에서 도입된 객체 생성 메커니즘이다.

1. 객체 생성 방법

둘 다 new 연산자를 사용하여 객체를 생성해야한다. 만약 new 연산자를 생략하게 되면, 생성자 함수는 일반 함수로 호출되고 클래스는 타입 에러가 발생한다.

2. 상속

둘 다 상속이란 개념이 존재한다. 생성자 함수는 프로토타입의 체인에서 인스턴스가 프로토타입의 프로퍼티를 상속받는거고 클래스는 extends 키워드를 통해 클래스 상속에 의해 확장되는 개념이다.

3. 호이스팅

둘 다 호이스팅이 된다. 하지만 클래스는 let, const 키워드처럼 호이스팅이 발생하지 않는 것처럼 동작한다. 생성자 함수는 함수 선언문으로 정의 했을 때는 함수 호이스팅이, 함수 표현식으로 정의 했을 때는 변수 호이스팅이 된다.

4. strict mode

생성자 함수는 암묵적 strict mode가 지정되지 않지만, 클래스는 클래스 내의 모든 코드에 암묵적 strict mode가 지정되어 실행되며 해제할 수 없다.

5. 정의

클래스의 경우는 class 키워드 뒤에 클래스명을 넣어 클래스를 정의한다. 생성자 함수는 보통 function 함수명 하여 정의한다.

6. 내부에 정의 할 수 있는

생성자 함수에는 인스턴스 프로퍼티, 프로토타입 메서드, 정적 메서드를 정의할 수 있고, 클래스는 클래스 안에 안에 오직 메서드만 올 수 있다. 메서드 종류로는 constructor, 프로토타입 메서드, 정적 메서드가 있으며 인스터스 프로퍼티값들은 constructor 안에 꼭 선언해줘야한다.

7. 선언 방식

둘 다 선언문, 표현식을 사용할 수 있다. 생성자함수는 선언 방식에 따라 호이스팅이 달라지는 것을 기억하자.

8. constructor

생성자 함수에서 constructor은 생성자 함수의 프로토타입이 가지고 있는 프로퍼티이고, 클래스에서는 인스턴스를 생성하고 초기화하기 위한 특수한 메서드이다. 특수한 메서드라서 이름을 임의로 바꿀 수 없다. 클래스안에서 constructor은 꼭 한 개만 존재 가능하며, 2개 이상이되면 문법에러가 발생한다.

9. 프로토타입 메서드

생성자 함수에서의 프로토타입 메서드를 만드려면 명시적으로 추가해줘야한다. 클래스에서는 클래스 몸체에 메서드로 정의하면 자바스크립트 엔진이 자동으로 프로토타입 메서드로 만들어준다.

10. 정적 메서드

생성자 함수에서 정적 메서드를 만드려면 생성자 함수 몸체에 명시적으로 추가해줘야한다. 클래스에서는 몸체에 static 키워드를 사용하여 메서드를 정의하면 정적 메서드로 생성된다.

11. 정적 메서드 호출

생성자 함수에서 정적 메서드를 호출하려면 생성자 함수 자체에서 호출하면된다. 클래스에서는 클래스로 호출해주면된다. ex) 생성자함수명.정적메서드명 / 클래스명.정적메서드명

타입변환

Mon, 29 Nov 2021 11:58:58 GMT

💥 자바스크립트의 모든 값에는 타입이 존재한다. 값들의 타입을 변환시키는 방법에는 두 가지가 있다.

명시적 타입변환과 암묵적 타입변환이다.

두 방법 모두 기존 원시 값을 직접 변경하는 것이 아닌, 기존 원시 값을 사용해 다른 타입의 새로운 원시값을 생성한다. 그리고 모두 문자열, 숫자, 불리언 타입으로의 변환이 있다.

먼저! 명시적 타입 변환부터 봐보자!

방법1. 명시적 타입 변환(타입 캐스팅)

명시적 타입변환이란?

개발자가 의도적으로 값의 타입을 변환

하는 것이다.

개발자가 의도에 따라 명시적으로 타입을 변경하는 방법으로는 자바스크립트에서 기본 제공하는 생성자 함수(String, Number, Boolean)를 new 연산자 없이 호출하거나, 자바스크립트에서 기본 제공하는 빌트인 객체의 메서드를 사용, 암묵적 타입 변환 하는 방법이 있다.

1.1 문자열 타입으로 변환

문자열 타입이 아닌 값을 문자열 타입으로 변환한다

String 생성자 함수 사용 ex) String(1); // "1" ➡ String 생성자 함수가 숫자타입 1을 문자 1로 변경해준다.
Object.prototype.toString 메서드 사용 ex) (NaN).toString(); // "NaN" ➡ 빌트인 객체의 toString 메서드가 숫자타입인 NaN을 문자열로 변환해준다.
문자열 연결 연산자 사용 ex) true + ' '; // "true" ➡ boolean 타입인 true와 문자열 ' ' 피연산자 사이에 +연산자가 오게되면, +는 산술연사자가 아닌 문자 연결 연산자로 인식되어 true는 문자열로 변환된다.

1.2 숫자 타입으로 변환

숫자 타입이 아닌 값을 숫자 타입으로 변환한다.

Number 생성자 함수 사용 ex) Number('0'); // 0 ➡ Number 생성자 함수가 문자 타입인 0을 숫자 0으로 변환해준다.
parseInt, parseFloat 함수를 사용(문자열만 숫자 타입으로 변환 가능) ex) parseInt('-1'); // -1 ➡ parseInt란 함수가 문자 타입인 -1을 숫자 -1로 변환해준다.
+인 단항 산술 연산자 사용 ex) +'0'; // 0 ➡ 문자앞에 +단항 산술 연산자가 붙으면 문자 타입인 0을 숫자 0으로 변환해준다.
*인 산술 연산자 사용 ex) '1' * 1; // 1 ➡ 문자타입과 숫자타입의 피연산자 사이에 *산술 연산자가 오면 문자를 숫자로 변환하여 숫자 1이 나온다.

1.3 불리언 타입으로 변환

불리언 타입이 아닌 값을 불리언 타입으로 변환한다.

Boolean 생성자 함수 사용 ex) Boolean('false'); // true ➡ Boolean 생성자 함수가 문자열 false를 불리언타입인 true로 변환해준다.
부정 논리연산자(!) 두 번 사용 ex) !!NaN; // false ➡ 부정 논리연산자인 !을 두번 사용하게되면 숫자타입인 NaN을 불리언타입으로 변환해주어 false가된다.

방법2. 암묵적 타입 변환(타입 강제 변환)

자바스크립트 엔진이 표현식을 평가하는 도중 에러를 발생시키지 않도록 하기 위해 암묵적으로 타입을 변환. 즉, 개발자의 의도와는 상관 없다.

2.1 문자열 타입으로 변환

숫자, 불리언, null, undefined, 심벌, 객체 타입도 변환 가능

ex) ({}) + '' // "[object Object]" ➡ 객체와 문자사이에 +산술 연산자가 오면, +는 산술 연산자가 아닌 문자 연결 연산자가 되어 객체를 문자열로 변환한다.

2.2 숫자 타입으로 변환

피연산자를 숫자 타입으로 변환할 수 없는 경우 평가 결과는 NaN이다.

ex) 1 - '1' // 0 ➡ -산술 연산자를 하기 위해 문자 1을 숫자 1로 변환하였다. '1' > 0 // true ➡ 비교연산자(>)는 불리언 값을 만든다. 숫자 0과 비교하기 위해 문자타입 1을 숫자 1로 변환하여 값을 비교한다. +'0' // 0 ➡ +단항 연산자 뒤에 숫자타입이 아닌 피연산자가 오면 암묵적으로 숫자타입으로 변환해주어 평가결과가 0이다.

2.3 불리언 타입으로 변환

if문, for문과 같은 제어문의 조건식 또는 삼항 조건 연산자의 조건식은 불리언 값으로 평가되어야한다. 이런 조건식을 평가할 때 암묵적으로 불리언 값으로 변환한다.

ex) if('') console.log('1'); // ➡ if문의 조건식은 빈 문자열로 false로 평가되어 아무것도 출력되지 않았다.

🛑 알아가기 🛑

자바스크립트에서는 true는 1, false는 0으로 변환된다.
빈 문자열, 빈 배열, null는 숫자 타입으로 0으로 변환되고 객체, 비어있지않은 배열, undefined는 숫자타입으로 변환되지 않아 평가결과가 NaN이 나온다.
자바스크립트에서 불리언 타입이 아닌 값을 false로 구분하는 값들

false
undefined
null
0, -0
NaN
''빈문자열

타입을 변환하는 방법으로 명시적 타입 변환과 암묵적 타입 변환을 알아보았지만, 암묵적 타입변환은 최대한 사용하지 않는 것이 좋다.

why❓ 암묵적 타입 변환이 되게 되면, 개발자가 의도한 것이 아닌 자바스크립트 엔진이 암묵적으로 타입을 변환시켜 예상치 못한 결과가 나올 수도 있다. 그렇게 되면 가독성이 좋지 않다. 가독성이 좋지 않은 코드는 좋은코드라고 할 수 없다.

❗❗❗ 암묵적 타입 변환되지 않게 하기 ❗❗❗

aria-role : tab

Tue, 02 Nov 2021 01:46:04 GMT

✅ tablist

aria 역할 중 tablist이 있다. tablsit는 tab과 tabpanel들을 하나의 틀로 묶어 그룹이라 명시해주는것이다.

✅ tab

aria 역할 중 tab이 있다.

👍 aria-controls

그 tab버튼을 누르면 어떠한 tabpanel이 클릭되어지는
aria-controls="패널아이디"를 주어 tab과 tabpanel을 연결합니다.

👍 aria-selected

웹사이트에서 tablist는 대부분 기본값으로 어떤 tab이 선택되어, 그에 대응되는 tabpanel을 보여주고있다. aria-selected는 눌려진 상태를 보여주는 boolean status이다. 상태값은 true, false가 있다.

👍 button태그

버튼 태그는 키보드로 접근이 가능하다.

tab : 포커스가 탭리스트로 이동하면 tab에 포커스 된다.

✅ tabpanel

aria 역할 중 tabpanel이 있다. tab과 tabpanel은 1:1 대응이 되어야 한다

✅ 기본예제


  
    
    
    
  
  
    
      Nils Frahm is a German musician, composer and record producer based in Berlin. He is known for combining classical and electronic music and for an unconventional approach to the piano in which he mixes a grand piano, upright piano, Roland Juno-60, Rhodes piano, drum machine, and Moog Taurus.
    
  
  
    
      Agnes Caroline Thaarup Obel is a Danish singer/songwriter. Her first album, Philharmonics, was released by PIAS Recordings on 4 October 2010 in Europe. Philharmonics was certified gold in June 2011 by the Belgian Entertainment Association (BEA) for sales of 10,000 Copies.
    
  
  
    
      Fear of complicated buildings:
    
    
      A complex complex complex.

HTML코드 출처

프론트엔드스쿨 - 시맨틱태그

Mon, 25 Oct 2021 18:07:46 GMT

✅ 시맨틱 태그란?

Semantic Tag : 의미를 가지는 태그

시맨틱 태그에 의해 컴퓨터가 HTML 요소의 의미를 보다 명확히 해석하고 그 데이터를 활용할 수 있는 시맨틱 웹이 실현될 수 있다.

✅ 시맨틱 웹이란?

웹이 존재하는 수 많은 웹페이지들에 메타데이터를 부여하여 기존의 잡다한 데이터 집합이었던 웹페이지를 의미와 관련성을 가지는 거대한 데이터 베이스로 구축하고자 하는 발상

✅ 사용이유

📌 웹 접근성(Web Accessibility)

웹 접근성이란 웹서비스에 장애/비장애(환경적 요소 포함)를 아울러 모든 사람들이 접근 가능하게 하고 이해와 사용가능하게 하는 것이다. 시맨틱 태그는 웹 페이지의 구조를 의미있게 만든 태그로, 스크린리더 등 보조기기를 사용하는 웹 서비스 사용자들이 시맨틱 태그를 통해 어느 부분이 제목이고, 내용인지 구별할 수 있으므로 정확히 정보를 전달받을 수 있기때문이다.

📌 SEO(Search Engine Optimization) : 검색엔진최적화

웹 문서를 작성할 때, 시맨틱 태그를 사용하지 않아도 아무 문제가 없다. 그러나 검색엔진에서 웹문서가 잘 검색되도록 하기 위해 사용한다. 검색엔진은 저마다의 로봇이 웹사이트들을 돌아다니면서 웹문서를 읽어들인다. 이렇게 웹문서를 읽은 다음 자기 검색엔진에 검색어가 입력되면 그에 맞게 웹사이트를 노출시킨다. 시맨틱 태그는 이런 검색엔진최적화가 보다 효율적이고 잘 되도록 도와주는 역할을 한다.

✅ 시맨틱 태그의 종류

참조 (세연아빠의 개발과 일상의 모습)

: 사이트에 대한 소개 정보나 메인메뉴, 사이트 로고 등이 포함

: 사이트의 메뉴나 링크 같은 네비케이션 요소들

: 문서의 주요 콘텐츠 부분으로 main안에 header,nav,aside,footer를 포함시켜서는 안됨(한 페이지에 한번만 사용 가능)

: 제목을 갖고 있으면서 문서 전체와 관련이 있는 콘텐츠의 집합(article 아래에도 section 올 수 있음) - 문서에서 독립적인 특정 영역

: 실질적인 내용을 넣음(뉴스 기사) - 영역속에서 독립적인 콘텐츠

프론트엔드스쿨 - WAI ARIA

Mon, 25 Oct 2021 12:46:18 GMT

✅ WAI-ARIA란?

Web Accessibility Initiative – Accessible Rich Internet Applications

WAI는 W3C에서 웹 접근성을 담당하는 기관으로 ARIA는 RIA환경의 웹 접근성에 대한 표준 기술 규격을 의미

쉽게, 스크린리더와 같은 보조기술들에 웹 접근성을 향상 시켜주는 HTML에 추가할 수 있는 속성

✅ 등장 배경

● RIA(Rich Internet Application)의 동적인 웹 애플리케이션 접근성 보장을 위한 지침이 부족

● 대부분의 웹 사이트들은 Ajax를 통해 실시간으로 콘텐츠들을 갱신하는데, 스크린리더를 사용하는 사용자들은 실시간으로 갱신되는 정보를 알 수 없음

● 페이지 콘텐츠 중 일부만 변경되었을 때, 스크린리더를 사용하는 사용자들은 동일한 내용을 계속 듣게되는 문제에 부딪힘

● 저시력자가 화면을 확대하였을 경우, 확대된 화면밖의 콘텐츠가 변경되어도 이를 인지하기 어려움

✅ 사용 목적

마우스, 키보드와 같은 입력 하드웨어를 사용하기 힘든 환경 또는 스크린 리더를 사용하는 사용자들에게 웹서비스에 대한 접근성 및 상호 운용성을 향상시키기 위해 마크업에 역할(Role), 속성(Property), 상태(State) 정보를 추가할 수 있도록 지원하여 보다 나은 사용자 경험(UX)을 제공하기 위한 목적을 가짐

✅ 구조

📌 역할(Role) : UI에 특정 컴포넌트의 역할을 정의

탭

aria 구조 중 역할을 명시해주면 단지 링크 태그로서의 의미만을 전달해주는것이 아닌, 버튼의 역할이 Tab이라고 명시해준다.

📌 속성(Property) : 해당 컴포넌트의 특징이나 상황을 정의 해당 컴포넌트에 속성명으로 aria-xx라는 접두사 사용

검색이라는 안내 텍스트 없이 버튼을 나타낼 때, 시각 정보를 이용할 수 없는 사용자는 어떤 버튼인지 알 수 없다. aria-label을 이용하여 버튼 요소에 검색이라는 설명을 추가하여 정보를 전달할 수 있다.

[다양한 속성]

● aria-required : form 요소의 입력 필수 속성 ● aria-label : text없이 이미지로 표현될 때 정보 설명 ● aria-live : 업데이트된 정보의 상황에 대한 설명 ● aria-controls(속성에 제어대상) : 제어대상

📌 상태(State) : 해당 컴포넌트의 상태 정보를 정의 메뉴의 활성 여부를 보여주는 aria-expanded, aria-selected와 같이 현재 상태 또는 변화된 값을 알려준다.

아코디언 메뉴의 활성 상태 값인 aria-expanded를 명시하면 스크린 리더기가 상태정보(확장 또는 축소)를 읽어줄 수 있다.

[다양한 상태]

● aria-checked(true,false,undefined) : 선택 상태 ● aria-hidden(true,false,undefined) : 숨김 상태 ● aria-disabled(true,false) : 사용 불가능/가능 상태 ● aria-pressed(true,false,대상) : 눌림 상태

더 많은 ARIA의 역할, 속성, 상태는 (MDN-ARIA) 참고

✅ 주의사항

● HTML5에서 추가된 의미 있는 태그를 먼저 사용하고 의미를 부가적으로 설명해주고자 할 때 WAI-ARIA의 role을 추가해주기

● 의미를 가진 HTML 요소를 함부로 바꾸지 말기

● 키보드를 사용하여 접근할 수 있게 하기

● 사용자의 브라우저와 보조기기가 WAI-ARIA를 지원하는지 확인하기(Can I Use)

프론트엔드스쿨 js - boolean

Sun, 10 Oct 2021 09:25:40 GMT

✅ boolean

속성값으로는 true 와 false 가 있음
if(조건문)문에서 조건문이 true이면 실행
📌 undefined 📌 null 📌 0 📌 -0 📌 NaN 📌 ""(빈문자열)
!== 와 != 의 차이 null 과 undefined 는 ==로 비교할 때 true null 과 undefined 는 ===로 비교할 때 false

프론트엔드스쿨 js - Number

Fri, 08 Oct 2021 11:42:51 GMT

💕 Number

Number 객체는 숫자 값으로 작업할 수 있게 해주는 객체

속성

✅ Number.MAX_SAFE_INTEGER

: JS에서 안전한 최대 정수(2^53 - 1)

✅ Number.MIN_SAFE_INTEGER

: JS에서 안전한 최소 정수(-(2^53 -1))

✅ Number.NaN

: 숫자가 아님을 나타내는 특별한 값

메소드

✅ Number.isNaN()

: 주어진 값이 NaN인지 확인

✅ Number.isInteger()

: 주어진 값이 정수인지 확인

✅ Number.parseInt(string)

: 문자열을 숫자로 변환 parseInt("10)"를 하면 문자열 "10"을 정수 10으로 변환

프론트엔드스쿨 js - Math

Wed, 06 Oct 2021 05:02:36 GMT

💕Math

: 수학적인 상수와 함수를 위한 속성과 메서드를 가진 내장 객체

✅ Math.pow(x,y)

: x의 y제곱 반환

const num = 5;
num =  Math.pow(num,2);
console.log("num**num : ",num);

하면 num**num : 25 가 나온다.

✅ Math.sqrt(x)

: 숫자의 제곱근 반환

✅ Math.abs(x)

: 숫자의 절대값 반환

✅ Math.max(x,y,z,...)

: 0개 이상의 인수에서 제일 큰 수 반환

✅ Math.min(x,y,z,...)

: 0개 이상의 인수에서 제일 작은 수 반환

프론트엔드스쿨 - js 배열 10/5

Tue, 05 Oct 2021 12:53:11 GMT

📌배열은 모든 데이터를 다 포함할 수 있어

✅ join() : 배열 -> string으로 변환

join() 가로안에 구분자 넣음(옵션)
구분자를 포함하여 string으로 변환 const fruits = ['apple','banna','orange']; 를 string으로 변환하려면 fruits.join(); 한다.

✅ split() : string -> 배열로 변환

split() 가로안에는 구분자와 리턴받을 배열의 크기를 넣을 수 있음. 구분자로는 string 또는 정규표현식을 사용 할 수 있다.
const fruits ='🍎,🍈,🍒,🍊'; 를 배열로 변환하려면fruits.split(','); 한다. 만약 사과랑 메론만 받고 싶으면, fruits.split(',',2); 하면 된다.
split은 구분자를 꼭 전달해야한다. 그렇지 않으면 문자 전체가 배열하나에 들어오게 된다.
✅ reverse() : 배열의 순서를 거꾸로 변환
const array=[1,2,3,4,5];을 거꾸로 출력하려면, array.reverse(); 해주면 된다. 그러면 [5,4,3,2,1]로 출력된다.
reverse는 배열 자체를 변환 시킴

✅ splice() : 배열에서 선택한 데이터를 삭제하고, 그 데이터 값을 return

const array=[1,2,3,4,5]; 에서 1,2를 삭제하려면 array.splice(0,2);해주면된다. 그러면 [3,4,5]가 남는다. splice(삭제할 첫번째 숫자, 몇개를 삭제할 것인지)
splice는 배열 자체에서 데이터를 삭제함

✅ slice(start index, end index) : 배열에서 선택한 데이터들로 새로운 배열을 생성

const array=[1,2,3,4,5]; 에서 3,4,5로만 이루어진 새로운 배열을 만드려면 const result = array.slice(2,5);하면 된다. result는 [3,4,5]가 되고 array는 그대로 [1,2,3,4,5]이다.

slice(시작인덱스, 뽑아내고싶은 마지막인덱스 +1)

let desc ="abcdefg";
desc.slice(2);
desc.slice(0,5);
desc.slice(2,-2); // index 2부터 뒤에서 2까지

<결과> "cdefg" "abcde" "cde"

✅ concat(arr1,arr2) : 배열 합쳐서 새배열 반환

let arr=[1,2];
arr.concat([3,4]);

<결과> [1,2,3,4]

✅ find() : 배열에서 조건에 맞는 첫번째 요소를 return

true가 return되면 바로 함수 멈춤
predicate
callback함수를 받는다(내가 callback함수를 만들어서 전달해야한다)
callback함수는 blooean type을 return

find(this, value, index, object)=>blooean

class Student{
constructor(name,age,enrolled,score){
  this.name=name;
  this.age=age;
  this.enrolled=enrolled;
  this.score=score;
}
}  
const students=[
new Student('A',29,true,45),
new Student('B',28,false,80),
new Student('C',30,true,90),
new Student('D',40,false,66),
new Student('E',18,true,88),
];

Q. 90점인 학생 찾기

const result = students.find(function(student,index){
    return student.score === 90;
});
console.log(result);

true값을 찾으면 find함수는 멈추고 그 값을 return함 위 코드를 이렇게 축약 할 수 있음

const result = students.find((student) => student.score === 90);
console.log(result);

function을 쓸 필요없고 arrow를 쓰고, arrow일때 한문장이면 중괄호, return, 세미콜론 생략 가능

✅ filter() : return 값이 true인 아이들만 모아서 새로운 배열 생성

Q. 수업에 등록한 학생들 찾기

const result = students.filter(function(student){
    return student.enrolled;
});
console.log(result);

위 코드를 이렇게 축약 할 수 있음

const result = students.filter((student) => student.enrolled);
console.log(result);

✅ map() : 배열안에 있는 요소들을 콜백함수에서 가공되어진 return값들로 대체! 즉 값을 변환

Q. 학생들의 점수만 뽑아내기

const result = students.map((student) => student.score);
console.log(result);

callback 함수에서 value명 의미있게/알아볼 수 있게 작성

✅ some() : 배열의 요소 중 콜백함수가 return해주는 값에서 true가 있는지 없는지 확인. 하나의 값만 true면 그때 함수 종료

학생들 점수 중 50점보다 낮은 학생 찾기

const result = students.some((student) => student.score < 50);
console.log(result);

✅ every() : 배열의 모든 요소들이 조건에 충족해야 true를 반환. 하나라도 아니라면 false

const result2 = !students.every((student) => student.score >= 50);
console.log(result2);

이 결과는 false가 나옴
console.log(!ture) 결과는 false나옴

✅ reduce(prev,curr) :

인자를 함수로 받음
콜백함수가 return하는 값은 누적된 값을 return
return되는 curr값이 prev로 들어가서 연결됨
0부터 시작

학생들의 평균 구하기

const result = student.reduce((prev,curr) =>{
  console.log(prev);
  console.log(curr);
  return prev + curr.score;
},0);

let arr=[1,2,3,4,5];
const result = arr.reduce((pre,curr) => {
    return pre+curr;
},0);
console.log(result);

let result=userList.reduce((pre,curr) => {
    if(cur.age > 19){
        pre.push(cur.name);
    }
    return pre;
},[]);

✅ sort() : 배열 안의 원소를 정렬하는 함수

문자정렬
배열 정렬
배열 자체가 변경
** 숫자는 문자열로 정렬되서 제대로 정렬 안됨. 함수로 비교처리해줘야함**

const fruit=['orange','apple','banana']; 를 오름차순으로 정렬하고 싶다면, fruit.sort();해주면 apple,banana,orange로 정렬된다.

숫자정렬 : 숫자는 아스키 문자 순서로 정렬되어 1,2,3 처럼 정렬되지 않음. const score=[4,11,2,10,3,1];를 오름차순으로 정렬시키려면, score.sort(function(a,b){ return a-b; }); 해주면 된다. score.sort((a,b) => a-b); arrow function을 사용하여 이렇게 쓸 수도 있다. score.sort((a,b) => b-a); 이건 내림차순이다.

let arr=[27, 8, 5, 13];
function fn(a,b){
    return a-b;
}
arr.sort(fn);
consol.log(arr);
/*arr.sort((a,b) => {
    return a-b;
});*/

✅ forEach() :

배열의 모든 수 합치기
for, for of

let arr=[1,2,3,4,5];
let result=0;
arr.forEach((num) =>{
    result+=num;
});
console.log(arr);

✅ substring(n,m) : n과 m 사이 문자열 반환

n과 m 바꿔도 동작함

음수는 허용하지 않음. 0으로 인식

let desc="abcdefg";
desc.substring(2,5); // cde
desc.substring(5,2); //cde
모두 동일한 문자열을 return

✅ substr(n,m) : n부터 시작해서 m개를 가져옴

let desc="abcdefg";
desc.substr(2,4); // cdef
desc.substr(-4,2); // de
모두 동일한 문자열을 return

✅ trim() : 문자열의 앞 뒤 공백 제거

✅ .includes() : 문자가 있으면 true, 없으면 false반환

프론트엔드스쿨 layout - grid 10/5

Tue, 05 Oct 2021 03:46:54 GMT

✅grid layoyt

▲ flexbox에는 교차축에 여러개의 item들이 있으면 안돼 ▲ row - 행 ▲ column - 열 ▲ gutters - 각 행과 열 사이의 공백 ▲ 이 레이아웃은 상품 나열 또는 사진 나열하는 곳에 잘 쓰여 ▲ table은 레이아웃에 사용하면 안돼 ▲ grid layout은 바깥쪽에 container틀을 만들고 내부에 형제 item들을 차례로 넣는 형태로 이루어진다.

✨html code

✨css code

.container{
  margin: 50px 0px;
  border: 5px dashed orange;
  display: inline-grid;
  grid-template-columns: 1fr 1fr 1fr;
  width: 70%;
}
.item{
  background-color: paleturquoise;
  border: 3px solid blue;
  font-size: 30px;
}

✅부모(container)에 쓸 수 있는 속성

▲ gird-template-rows : 몇개의 행을 갖는지 ▲ gird-template-columns : 몇개의 열을 갖는지

3개의 열로 만들고 싶다

.container{
      border: 5px dashed orange;
      display: inline-grid;
      grid-template-columns: 100px 150px 100px;
      width: 70%;
}
.item{
  background-color: paleturquoise;
  border: 3px solid blue;
  font-size: 30px;
}

▲ item들이 하나의 행 하나의 열에만 차지하는 것이 아니라, 여러개의 행과 열을 차지 할 수 있어 ▲ 무조건 item들은 네모 모양이여야 돼!!!!!!!!!! ▲ gird-template-areas를 사용하면 돼

gird-template-areas : 
         "a a a"
         "b c c"
         "b c c";

 gird-template-areas : 
         "b b a"
         "b b c"
         "b b c";

![](https://images.velog.io/images/dasol-jeong/post/c2c4107f-4103-45eb-bfc5-d8cfc76a6f76/image.png)

> ```
gird-template-areas : 
         "a a ."
         "a a ."
         ". b c";

💥grid로 레이아웃 짤 때, class명을 사용하는 것이 아니라 grid-area로 이름 정해서 사용

 .container{
  margin: 50px 20px;
  border: 5px dashed orange;
  width: 70%;
  height: 400px;
  display: grid;
  grid-template-areas: 
    "a a a a"
    "b b . c"
    "d d d d";
}
.a{
  grid-area: a;
  background-color: palevioletred;
}
.b{
  grid-area: b;
  background-color: peru;
}
.c{
  grid-area: c;
  background-color: rebeccapurple;
}
.d{
  grid-area: d;
  background-color: seagreen;
}

✅justify-content, align-content vs justify-items, align-items

▲ justify : main축 ▲ align : 교차축 ▲ content : 안에 있는 요소들 ▲ items : 하나의 틀안에서 하나의 요소에 대해서만 ▲ justify-items : 그 하나하나 요소들의 전체 ▲ justify-self : 여러개중 딱 하나를 정해 그것만 효과줄때

✅ container 안에서 가운데 정렬

html code

css code

.container{
  margin: 50px 20px;
  border: 5px dashed orange;
  width: 100%;
  height: 500px;
  display: grid;
  grid-template-rows: repeat(3,100px);
  grid-template-columns: repeat(3,100px);
  **justify-content: center;**
  **align-content: center;**
}
.item{
  background-color: paleturquoise;
  border: 3px solid blue;
  font-size: 30px;
}

✅item들이 container 끝으로 퍼지는

justify-content: space-between과 align-content: space-between이용!

css code

.container{
  margin: 50px 20px;
  border: 5px dashed orange;
  width: 100%;
  height: 500px;
  display: grid;
  grid-template-rows: repeat(3,100px);
  grid-template-columns: repeat(3,100px);
  **justify-content: space-between;**
  **align-content: space-between;**
}
.item{
  background-color: paleturquoise;
  border: 3px solid blue;
  font-size: 30px;
}

✅ item들이 자기가 차지할 수 있는 틀안에서 가운데 정렬

justify-content: cernter과 align-content: center이용!

css code

 .container{
  margin: 50px 20px;
  border: 5px dashed orange;
  width: 50%;
  height: 500px;
  display: grid;
  grid-template-rows: repeat(3,1fr);
  grid-template-columns: repeat(3,1fr);
  justify-items: center;
  align-items: center;
 }
 .item{
  background-color: paleturquoise;
  border: 3px solid blue;
  font-size: 30px;
  width: 50px;
  height: 50px;
  text-align: center;
 }

✅ grid 단위 - fr, min-content, max-content```

만약 gird-template-rows : 100px 1fr 1fr; 이렇게 사용한다면, 맨 앞 요소는 100px로 잡아 놓고 남은 크기에서 비율로 크기를 가져간다.

📌min-content : 최소로 줄일 수 있을 만큼 사이즈로 줄어드는데, 요소의 원래 크기까지 📌max-content : 최대로 늘릴 수 있을 만큼

✅ auto-fill, auto-fit

📌auto-fill : column의 개수를 유연하게 조절, 만약 브라우저 사이즈를 조절할 때, 남는 공간에 요소가 채워짐(그 반대도 마찬가지) 📌auto-fill과 minmax()를 같이 사용하면 남는 공간 없이 꽉 채워서 사용가능

프론트엔드스쿨 css - 10/1

Fri, 01 Oct 2021 12:43:23 GMT

✅ 상대길이

🍌뷰포트 : 브라우저에서 웹사이트를 볼 수 있는 영역

🍌vw(width) : 가로 단위이며, 디바이스에 맞춰 🍌vh(height) : 디바이스에 따라 반응형으로 만들고 싶을때 사용하는 단위

🍌vmin : vw와 vh중 작은 것 🍌vmax : vw와 vh중 큰 것

주로 웹사이트가 가로모드와 세로모드가 있을 경우 사용

🍌 %(percentage) : 부모를 기준으로 함( 부모의 값에 따라 영향을 받음)

✅ 연산 함수

🍌cal() : 단위가 다른 것들을 사칙연사 해줄 수 있게 하는 함수

+, -, *, / 연산자 앞 뒤로 공백 하나씩 줘야함

숫자를 사용

🍌min(x,y) : x와 y중 작은 값 선택 🍌max(x,y) : x와 y중 큰 값 선택

지원안하는 브라우저도 있으니 확인하고 사용하기

✅ 박스모델

🍌content : html요소 중 실제 컨텐츠의 영역 🍌padding : 요소 안쪽 여백 🍌border : padding과 margin 사이의 테두리 🍌margin : 요소 바깥쪽 여백

✅ min/max-wdith/height

🍌 지정한 값이 되면 브라우저 창에 맞게 요소의 가로/세로가 줄어들거나 늘어나지 않게 하는 속성

✅ margin

🍌initail value

margin-bottom : 0;
margin-left : 0;
margin-right : 0;
margin-top : 0;

🍌자식요소에서 상속되지 않음

🍌마진 상쇄 -블록요소들의 위/아래의 margin이 겹칠 경우에 상쇄되는 현상

마진상쇄가 발생하면 더 큰 값이 적용됨
좌/우에는 발생하지 않음
단 겹치는걸 끊어줄 수 있는 1px이라도 있으면 마진 상쇄는 발생하지 않음 📌 인접형제 : 두 형제 요소의 위/아래 여백이 만날 때 상쇄 📌 부모-자식요소 간 : 부모와 자식을 분리해줄 수 있는 값이 없을 경우 📌 자기 자신의 margin 좌/우와 상쇄 : height이 존재하지 않을 때

🍌px, em, rem, % 단위 사용 가능 / 음수값 사용가능 ** 단, %는 부모의 width(가로)의 %를 따라감*

🍌margin : 10px; (상하좌우 모두 바깥쪽으로 10px 간격 생김) 🍌margin : 20px; (상하) 10px(좌우) 🍌margin : 20px; (상) 10px(우) 15px(하) 5px(좌) -> 시계방향

✅ paddding

🍌initail value

padding-bottom : 0
padding-left : 0
padding-right : 0
padding-top : 0

🍌padding : 10px; (상하좌우 모두 안쪽으로 10px 간격 생김) 🍌padding : 20px; (상하) 10px(좌우) 🍌padding : 20px; (상) 10px(우) 15px(하) 5px(좌) -> 시계방향

🍌상쇄 일어나지 않음

🍌px, em, rem, % 단위 사용 가능 / 음수값 사용 불가능 ** 단, %는 부모의 width(가로)의 %를 따라감*

✅ border

🍌외부 영역과 내부영역 사이의 테두리

🍌border-style

none(defalut)
solid : 직선
상하좌우 모두 다른 선으로 지정할 수 있음 (시계방향)
스타일을 지정하지 않으면 두께와 색깔이 있어도 보이지 않음

🍌border-width : 테두리 두께

thin/medium/thick 키워드 있음
키워드보단 px로 주는게 좋음

🍌border-color : 테두리 색상

상하좌우 모두 다른색상으로 지정할 수 있음 (시계방향)
색깔이 없으면 border에 두께와 스타일을 줘도 보이지 않음

🍌border : 1px solid red; 보통 이렇게 선언

🍌outline : 요소를 강조하기 위한 것으로, border 처럼 디자인적으로 꾸밈을 주는거와는 다름

🍌border-radius : 테두리 곡선을 줄 수 있음

상하좌우 다르게 줄 수 있음
음수 값 불가능

%단위 사용가능

div{
width : 300px;
height : 300px;
border : 5px solid red;
border-radius : 30px
}

✅ box-sizing

🍌요소의 width와 height 계산하는 방법을 지정

🍌box-sizing 값

content-box(defalut) : width와 height이 의미하는 것이 content부분의 width와 height을 의미(padding과 border는 무시)
border-box : width와 height의 값을 border까지 인식하게됨

🍌이런식으로 선언하고 디자인주는 게 좋음

*{
  box-sizing: border-box;
}

프론트엔드스쿨 git - 9/30

Thu, 30 Sep 2021 12:47:42 GMT

💥git💥

▲ 형상관리도구(=버전 관리 시스템) ▲ git과 github은 같지 않음! ▲ 분산형 관리 시스템 : 소스코드를 여러 개발 PC와 저장소에 분산해서 저장 ▲ 인터넷이 연결되지 않은 곳에서도 개발 가능 ▲ Blob : 파일에 대한 변경 사항 전체 ▲ Tree : Blob의 부가적인 정보들(디렉토리 위치, 속성, 이름) ▲ commit = Blob + Tree

✅ bash shall 명령어

▲ mkdir : 디렉토리 생성 ▲ touch : 파일생성 ▲ cp : 시스템내 특정 파일 복사 ▲ mv : 파일이동 ▲ cd : 디렉토리 이동 ▲ cat : 파일의 내용 간단하게 출력 ▲ ls : 현재 디렉토리 안에 파일들 보여줌 (-a옵션 : 숨김파일까지 보여줌) ▲ rm : 파일 삭제 ▲ rmdir : 디렉토리 삭제

✅ vi 명령어

📌명령모드

▲ i : 현재 커서 위치에 삽입 ▲ a : 현재 커서 바로 다음위치에 삽입 ▲ o : 현재 줄 다음 위치에 삽입 ▲ dd(+p) : 커서가 위치한 곳의 한 줄 삭제(바로 p누르면 복구가능) ▲ p : 현재 커서가 있는 줄 바로 아래에 버퍼 붙여넣기 ▲ k : 위 ▲ j : 아래 ▲ l : 오른쪽 ▲ h : 왼쪽 ▲ 0(숫자) : 커서가 있는 줄의 맨 앞으로 감 ▲ $ : 커서가 있는 줄의 맨 뒤로 감 ▲ G : 파일의 끝의로 이동

📌마지막 행 모드(:)

▲ q : vi 저장하지 않고 종료 ▲ q! : vi 저장하지 않고 강제종료 ▲ wq : vi 저장하고 종료 ▲ wq! : vi 저장하고 강제종료

✅ 절대 사용하지 말아야할!

▲ git add . ▲ git commit -m

✅ git init

저장소로 사용할 디렉토리를 만들기

git init 실행

파일을 생성

git add 파일명

git commit (영어로 제목은 40자가 넘어가지 않게, 내용쓰기)

깃헙사이트에서 레파지토리 만들고 주소복사

git remote add origin 주소

git branch -M main

git push -u origin main : 깃헙에 올리기

git status으로 상태 잘 확인하기

✅ git clone

git init보다 좀 더 쉽게 저장소 만들고 사용하는(?)

✅ rm -rf .git

▲ git 저장소 삭제

✅ branch

▲ 독립적으로 어떤 작업을 진행하기 위한 개념 ▲ 협업할 때, 브랜치를 생성하여 각자 만들고 나중에 merge를 통해 하나로 통합할 수 있음 ▲ git branch 브랜치이름 : 새로운 브랜치 생성 ▲ git switch 브랜치이름 : 브랜치 이동 ▲ main : root 브랜치

프론트엔드스쿨 css - 9/30

Thu, 30 Sep 2021 11:20:39 GMT

✅ font(text)

▲ font-size와 font-family는 필수값

▲ font 속성 default 선언법

.default{
  font-size:20px;
  font-family:'Times New Roman', Times, serif;
}

▲ 이렇게도 선언 할 수 있음

.text{
  color:red;
  font: italic bold 20px/1.7 'Times New Roman', Times, serif;
}

이 방식으로 속성을 나열할 땐, 꼭

font-style과 font-weight는 font-size보다 앞에 선언되어야하고,
사이즈 뒤에 / 하고 line-height를 작성해줘야 함.
그리고 맨 뒤에 font-family 작성

▲ font-color/color : 글씨 색깔

▲ font-size : 글씨 크기

▲ font-family : 글꼴 지정하는 속성

▲ line-height : 폰트의 위아래 여백

▲ letter-spacing : 문자와 문자 사이의 간격(한글로치면 한 글자와 글자 사이의 간격)/음수도 사용 가능

▲ word-spacing: 단어와 단어 사이의 간격/음수도 사용 가능

▲ text-align

텍스트의 위치를 지정
text-align : left, center, right 값이 있음
블록요소에 스타일 가능
인라인요소같은 경우 그 요소를 감싸고있는 부모에 text-align을 주면 스타일 적용됨

▲ text-indent : 글 앞부분 들여쓰기 속성(px, %로 값 줌)/블록요소에만 스타일 가능

▲ text-decoration : line, style,

▲ word-break

텍스트가 자신의 콘텐츠 박스 밖으로 오버플로 할 때 줄을 바꿀지 정함
word-break : normal(기본값), break-all, keep-all 속성이 있음
break-all은 주로 영어에서 사용
keep-all은 한중일 텍스트에서 사용

▲ text-transform

한글에는 적용할 수 없는 속성
실제 텍스트가 변하는건 아니고 스타일만 바뀌는 것

✅ 절대길이

▲ 모니터에 보여지는 그 크기로 보여줌(고정값) ▲ 픽셀(px) 사용!! -> css에서는 모든게 px로 계산됨

✅ 상대길이

📌 글꼴 상대길이

▲ em, rem : 주로 font-size에서 사용 ▲ 1em : 부모의 font-size(0.5em은 부모 font-size의 절반) ▲ 1rem : root의 font-size(root == 브라우저 기본 설정값)

📌 뷰포트 백분율 길이

▲ vh : 뷰포트의 초기 컨테이너 블록 높이 1%와 같음

프론트엔드스쿨 css - 9/29

Wed, 29 Sep 2021 08:39:50 GMT

✨MDN 사이트 많이 활용하기✨

✅ CSS(Cascading Style Sheets)

▲ Rule-based의 언어 ▲ css는 module별로 각자의 versioning을 하고 있음 ▲ cascading = 위에서 아래로 -> 위에서 정의된 요소들이 아래에도 전파가된다 ▲ 자식은 부모의 요소를 물려받음 ▲ 규칙 : 요소(selector)를 선택하고 중괄호{} 안에 스타일 선언 이렇게 선언한다.

▲ 개발은 css 외부 스타일로 하기 -> css와 html파일 따로 만들어 html의 안에 를 이용하여 html파일과 csss파일 연결하기

<스타일 우선순위> 💫동일한 스타일이라도 선언된 곳에 따라 우선순위가 정해진다. 브라우저에 의해 정의된 스타일 < 개발자가 선언한 스타일 < 사용자가 구성한 스타일 💫적용 범위가 적을수록 우선시 된다. tag스타일 < class스타일 < id스타일 < 인라인스타일 *소스코드의 순서가 뒤에 있으면 덮어쓴다.

<스타일 상속> 💫부모 요소에 있는 스타일 속성들이 자식 요소로 전달된다. -자식 요소에서 재정의 할 경우, 부모의 스타일을 덮어쓴다. 💫상속 되지 않는 속성도 있다.(예:배경이미지, 배경색 등)

✅ css에서의 주석

h1{
 color:red;
 /* font-size:9px; */
}

▲ /* 스타일 */ 로 주석을 처리함 ▲ 설명뿐만아니라 임시적으로 스타일 적용시키지 않으려고도 사용함

✅ (선택자)Type Selector

▲ 하나의 전체 웹페이지에서 어떤 요소를 일관성있게 스타일을 적용시켜야할 때 사용 ▲ 보통 style 상단에 위치 ▲ Type Selector로는 특정 요소를 선택하면 안돼

h1{
  color:red;
}

✅ (선택자)ID Selector

▲ 전역속성으로 모든 요소에 사용가능 ▲ 고유이름/유일/유니크 ▲ 문법 : # + id{}
#hello{
  color:red;
}  


# ✅ (선택자)Class Selector 
> ▲ 전역속성으로 모든 요소에 사용가능
> ▲ **중복가능**
> ▲ 한 요소는 class를 여러개 가질 수 있음(스페이스로 구분)
> ▲ 문법 : . + class{}

.hi{ color:red; }


# ✅ (속성 선택자)Attribute Selector
> ▲ attribute란 태그외에 추가적인 요소 부분

> ▲ **[attr]** : 요소가 가지고 있는 속성을 선택

a[target]{
    color:red;
}


> ▲ **[attr="value"]** : 그 속성이 특정값을 가지고 있는 것을 선택

input[type="submit"]{
    color:red;
}


> ▲ **[attr^="value"]** : 캐럿(^)문자가 있으면 attr의 value가 value로 시작하는 요소를 선택

a[href^="http"]{
    color:red;
}


> ▲ **[attr$="value"]**  : 달러($)문자가 있으면 attr의 value가 value로 끝나는 요소를 선택

a[href$=".com"]{
    color:red;
}


> ▲ **[attr*="value"]**  : 애스터리스크(*)문자가 있으면 attr의 value가 value를 가지고 있는 요소들 다 선택

a[href*="btn"]{
    color:red;
}


# ✅ (가상 클래스 선택자)Pseudo-Class Selector  

> ▲ 클래스 선택자보다 범위를 좁히는 방법(자식, 순번 등으로)


> ▲ **:first-child** : 같은 요소 중 첫번째 요소를 선택

li:first-child{
    color:red;
      }
.movie:first-child{
    color:blue;
     }

  **class를 가지고 first-child를 선택할 때, class로 고른것 중 첫번째가 아니라 class로 선택된 그 집단의 부모의 자식들 중 첫번째 자식이다. 그래서 class로 고를땐 그 스타일이 다 적용되는 것은 아니다. last-child도 마찬가지임**

> ▲ **:last-child** : 같은 요소 중 마지막 요소를 선택

li:last-child{
    color:red;
      }
.movie:last-child{
    color:blue;
      }


> ▲ **:nth-child()** : 몇번째 요소를 직접 선택할 수 있는 지정 선택

li:nth-child(3){ 
    /*세번째 자식들 선택됨*/
    color:red;
      }

  odd(홀수), even(짝수)도 사용 가능


> ▲ **:first-of-type** : 특정 타입들만 모아서 세고, 그 중에서 첫번째 요소 선택 -> :first-child의 보완


> ▲ **:last-of-type** : 특정 타입들만 모아서 세고, 그 중에서 마지막 요소 선택 -> :last-child의 보완



> ▲ **:not(selector)** : 선택된 요소들 중 ()안에 들어있는 요소들 빼고 선택

input:not(.pw){ 
    /*input들 중 class명이 pw인 요소를 뺀 나머지들만 스타일 적용됨*/
    color:red;
}
  input:not([type=password]){ 
    /*input들 중 type이 password인 요소를 뺀 나머지들만 스타일 적용됨*/
    color:red;
}


> ▲ **:link** : 그 링크에 방문한 적이 없으면 스타일이 적용됨

a:link{ 
    color:red;
}


> ▲ **:visited** : 그 링크에 방문한 적이 있으면 스타일이 적용됨

a:visited{ 
    color:red;
}



> ▲ **:hover** : 그 요소에 마우스를 올리면 스타일이 적용됨

input[type=button]:hover{ 
    color:red;
}


> ▲ **:active** : 그 요소에 마우스로 클릭하고 있을때 스타일이 적용됨
> ▲ :link, :hover, :visited가 active보다 뒤에 선언되면 active는 적용되지 않음. active는 **link-visited-hover-active순서로 배치하는 것이 좋음**

input[type=button]:active{ 
    color:red;
}


> ▲ **:focus** : 그 요소에 Tab키를 사용하여 focus가 되었을 때, input태그를 눌러 입력할 때 스타일이 적용됨

input[type=button]:focus{ 
    color:red;
}


> ▲ **:enabled** : 활성화 되어있는 요소에만 스타일 적용됨

input[type=text]:enabled{ 
    color:red;
}


> ▲ **:disabled **: 비활성화 되어있는 요소에만 스타일 적용됨

input[type=text]:disabled{ 
    color:red;
}


> ▲ **:checked** : checked 되어있는 요소에만 스타일 적용됨

input[type=radio]:checked{ 
    color:red;
}
  input[type=checkbox]:checked{ 
    color:red;
}



# ✅ (가상 요소 선택자)Pseudo-Element Selector 
> ▲ css3 문법에 맞춰 :: 사용하기


> ▲ **::before** : html엔 존재하지 않지만, css가 가상으로 만들어낸 요소 앞에 스타일이 적용됨(**배지나 메뉴사이에 구분하기 위해 사용/내용이 있는것 보단 꾸밈의 목적을 위해 사용**)

.favorite::before{ 
    content:'🎨';
}


> ▲ **::after** : html엔 존재하지 않지만, css가 가상으로 만들어낸 요소 뒤에 스타일이 적용됨

.favorite::after{ 
    content:'🎨';
}


> ▲ **::first-letter** : 선택된 요소에서 첫번째 글자에 스타일 적용됨

.hi::first-letter{ 
    color:red;
}


> ▲ **::first-line** : 선택된 요소에서 첫번째 줄에 스타일이 적용됨(단, 브라우저 사이즈에 맞게 개행이 된 첫번째 줄에만 스타일이 적용됨)

.hi::first-line{ 
    color:red;
}


> ▲ **::selection** : 선택된 요소들 중 드래그 된 부분에만 스타일이 적용됨

.hi::selection{ 
    color:red;
}



# ✅ selector combination(선택자 결합)

> ▲ **하위 선택자 결합( ) **: 두가지 선택자를 스페이싱으로 결합하여 선택된 요소들에 스타일이 적용됨

ul li:last-of-type{ 
    color:red;
}


> ▲ **자식 선택자 결합(>) :** 앞에 선택자의 바로 직속 자식들 중 조건에 만족하는 요소에 스타일이 적용됨. ">"로 앞 선택자의 바로 직속 자식을 의미

ul > li:last-of-type{ 
    color:red;
}


> ▲ **일반 형제 선택자 결합(~)** : ```code```의 형제들 중 ```code```보다 뒤에 선언된 ```p```에만 스타일이 적용됨

code ~ p{ 
    color:red;
}


> ▲ **인접 형제 선택자 결합(+)** : ```code```바로 뒤에 ```p```가 있으면 그 요소들에만 스타일이 적용됨(바로 옆에 있어야해)

code + p{ 
    color:red;
}


> ▲ **그룹화** : 두가지 이상의 요소에 같은 스타일 적용시킬 떄 사용

p, span, code{ 
    color:red;
}



# ✅ Universal Selector(전체 선택자)
> ▲ *를 사용하여 html의 모든 요소를 선택(*은 모든 요소를 의미)
> ▲ css파일 맨 윗부분에 선언

*{ 
    color:red;
}


# ✅ 상속 제어 
> ▲ **initial** : 상속 끊기

.child{ 
    color:initial; /*속성의 기본값으로 돌려짐*/
}


> ▲ **inherit** : 무조건 상속받기

.parent *{ 
    color:inherit; /*주변의 어떤 css값도 다 무시하고 부모의 css를 따르겠다*/
}

```

▲ unset : 부모로부터 상속받을 값이 있을땐 inherit,부모로부터 상속받을 값이 없을 땐 initial

프론트엔드스쿨 html - 9/29

Wed, 29 Sep 2021 02:21:53 GMT

✅ metadata



유니코드로 컴퓨터에서 전세계 언어를 표현할 수 있음

✅ link 태그

▲ 태그는 현재 문서와 외부 리소스의 관계 명시
▲ 주로 css파일,파비콘 연결할 때 사용
▲ 빈요소(싱글태그)


✅ MIME type

▲ 파일경로를 해석하지 못하는 경우를 위해 파일의 타입을 명시해주는 것
▲ 일반적인 구조 type/subtype
▲ type에는 텍스트나 이미지와 같은 카테고리를 나타내며, subtype은 파일의 확장자

✅ style 태그

▲ 안에 작성하는 것보단 외부 스타일 시트에 작성하고 로 연결하는 것이 좋음
▲ 같은 명시도를 가진 경우, 뒤쪽이 앞쪽을 덮어씀

✅ script 태그

▲ 주로 javascript 연결할 때 사용
▲