호이스팅(Hoisting)

함수 선언부가 유효범위 최상단으로 끌어올려지는 현상

const a = 7

double() //error 발생


const double = function () {
console.log(a*2)
}


Ex) hoisting 

const a = 7

double() //14

function double () {
console.log(a*2)

git에서 프로젝트를 복제해오려면 다음과 같이 따라하면 된다.

우선, 원하는 프로젝트의 주소를 복사한다.

그 다음 VSC의 터미널에서 dir를 입력한다.

dir를 입력하면 현재 위치한 곳의 파일 정보들이 출력된다.

dir를 입력한 후 파일리스트에 본인이 원하는 파일에 위치하고 있다면

다음과 같이 입력하여 원하는 파일에 프로젝트를 넣으면 된다.

ex)

code .

만약 원하는 파일위치가 아니라면 'cd 파일이름' 을 입력하여 해당 파일이름으로 들어가면 된다.

그 다음에 위 예시와 똑같이 입력해주면 된다.

그런데 문제가 하나 있다. 위 예시와 같이 입력하면 새창에서 프로젝트가 열리는 데

이같은 현상이 싫다면 다음과 같이 입력하자.

ex)

code . -r 

그러면 새창에서 프로젝트가 오픈이 안되고 현재 보고 있는 창에서 화면이 바뀐다.

ㅁcover

박스의 가로,세로길이가 이미지의 가로,세로와 다를 때

이미지가 찌그러지지 않는 내에서 빈 공간이 생기지 않도록 

여백을 채우는 역할을 함.

https://developer.mozilla.org/ko/docs/Web/CSS/background-size

ㅁ금일 학습내용:

'user strict';

// Make navbar
const navbar = document.querySelector('#navbar');
const navbarHeight = navbar.getBoundingClientRect().height;
const navbarLogo = document.querySelector('.navbar__logo');
const navbarA = document.querySelector('.problem');
console.log(`높이: ${navbarHeight}`);
console.log(navbarA);


document.addEventListener('scroll', function () {

    // 1.스크롤 시 작동할 클래스를 추가함.
    
    if(window.scrollY > navbarHeight) {
        
        navbar.classList.add('navbar--dark');
        navbarLogo.classList.add('navbar--dark2');
        
        
    } else {
        navbar.classList.remove('navbar--dark');
        navbarLogo.classList.remove('navbar--dark2');
    }

})

ㅁ getBoundingClientRect

element의 크기 및 좌표 등을 반환한다.

x , y, width, height , top, right , bottom, left  

ㅁwindow.scrollY

https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll

ㅁquerySelectAll

CSS에 존재하는 selector를 한 가지 또는 여러 개를 선택하여 Nodelist를 반환한다.

https://developer.mozilla.org/ko/docs/Web/API/Document/querySelectorAll

position

요소의 위치 지정 기준을 나타낸다.

default는 static(기준없음)이며

relative 는 요소 자신을 기준으로 삼는다.

absolute는 위치 상 부모요소를 기준으로 삼는다.( 구조 상 X)

fixed는 뷰포트(브라우저)를 기준으로 삼는다.

relative

다음은 relative를 설정한 예시이다.

relative를 2번 스스로에게 적용하여 자신의 기준으로 top 20px, left 20px를 이동한 것을 확인할 수 있다.

absolute

absolute는 relative와 같이 사용하는 요소이다.

위치 상 부모 요소를 기준으로 배치를 진행하는 데 다음 그림을 보자.

코드입력예시를 보면 1번 박스에 relative를 걸고 absolute를 2번박스에 걸었다.

이 경우 2번박스는 1번 박스를 부모로 삼는다.

이렇게 되면 2번 박스는 3번박스와의 상호작용이 이뤄지지 않는다.

오직 1번 박스와 상호작용을 이룬다.

그러므로 1번 박스를 기준으로 top 20px, left 20px 이동한다.

static

static은 기준이 없다는 걸 의미한다.

relative설정없이  absolute만 설정을 한다면 다음과 같이 화면이 출력된다.

absolute는 자신의 relative를 찾으려고 계속해서 상위부모를 탐색한다.

만일 따로 relative를 설정이 되어있지 않다면

뷰포트를 부모로 삼아 뷰포토의 기준에 맞게 이동한다.

fixed

fixed는 뷰포트(브라우저)를 기준으로 삼는다.

fixed를 설정 시 스크롤를 내려도 그 위치에 고정시켜 놓는 성질을 갖게 만든다.

말이 다소 추상적인데... 직접 실행시켜보는 것이 도움이 될 것이다.

flex는 수평정렬을 할 때 사용한다.

아래를 보면

blue는 부모요소이며 이를 flex container라고 부른다.

부모요소 안에 있는 나머지 색상들은 flex item이라고 지칭한다.

flex-direction

주 축(Main-axis)을 설정한다. 즉, 수평정렬 또는 수직정렬을 할 것 인지 결정한다.

default는 row(좌->우)로 설정되어 있으며

row-reverse(우->좌)

column(위->아래)

column-reverse(아래->위)

로 설정이 가능하다.

flex-wrap

Flex items묶음(줄바꿈)여부를 설정한다.

default 는 nowrap(줄바꿈 없음) 이며 wrap으로 설정하여 여러 줄로 묶어 줄바꿈을 할 수 있다.

flex-wrap은 다음 사진이 가장 잘 설명해주는 것 같아 현재 패캠에서 듣고 있는 강의자료를 퍼왔다.

justifyy-content

주 축(Main-axis)의 정렬방법을 설정한다.

default는 flex-start이며 flex items를 시작점으로 정렬한다.

flex-end, center로 정렬방법을 설정할 수 있다.

align-content

교차 축(Cross-axis)의 여러 줄 정렬 방법을 말한다.

(한 줄인 경우는 작동을 안한다)

default는 stretch 이며 flex-start, flex-end, center 로 설정이 가능하다.

만약, 한 줄만 있는 경우는 align-items를 이용하여 정렬을 하면된다.

flex-basis

Item의 기본 너비 설정을 한다. 

default는 auto로 설정되어 있다.

flex-grow

Flex item의 증가 너비 비율을 설정한다.

default는 0로 설정되어있다.

flex-shrink

Flex item의 감소 너비 비율을 설정한다.

default는 1로 설정되어있다.

*주의사항!

auto 값을 가지지 않은 flex-basis와 width(flex-direction: column인 경우 height) 값을 동시에 적용한 경우 flex-basis가 우선합니다. 

Text-align

문자의 정렬방식 중 하나이다.

문자를 left, right, center, jusitfy 정렬시킬 수 있다.

다음 사진과 같은 기능이라고 생각하면 된다.

Text-decoration

문자의 장식(선)의 출력여부를 설정한다.

default 로는 none(장식없음) 이며 underline(밑줄), overline(윗줄),line-through(중앙선) 로 설정할 수 있다.

Text-indent

들여쓰기를 말한다.

default 로는 0(들여쓰기 없음)이다.

text-indent(50px)

반대로 내어쓰기도 가능한다. 이 경우에는 음수를 사용하여 나타내면 된다.

브라우저마다 적용되는 글꼴이 다르다.

그러므로 font-family를 이용하여 여러 글꼴들을 입력하여 상황에 맞게 적용시킬 수 있다.

요소의 투명도를 설정할 수 있다.

default: 1 를 가지며 0~1의 소수점숫자를 이용하여 설정하면 된다.

1에 가까울수록 불투명해지고 0에 가까울수록 투명해진다.

넘친 내용(content)를 제어하는 걸 도와줌.

visible: 넘친 내용을 그대로 보여줌

hidden: 넘친 내용을 잘라냄

auto: 넘친 내용이 있는 경우에만 잘라내고 스크롤바 생성