yeeed_log

변수의 종류(var, const, let) 자바스크립트에서의 변수는 아래와 같이 정의할 수 있다. var a; 위는 a라는 변수를 선언한 상태. 변수를 선언하고 아무 값도 할당하지 않으면 기본적으로 undefined라는 초기값을 가진다. null - 변수에만 할당할 수 있는 값이며 비어있음을 뜻한다. '비어있음' 이라는 값이 들어있는 상태. undefined - 변수에 값을 주지 않은 상태. const a; let b; const는 변하지 않는 값을 할당할 때 사용한다. 반면 let은 변할 수 있는 값을 할당한다. ✔️ 변수 var 을 잘 사용하지 않는 이유는 매개변수가 const 인지 let 인지 알기 위해서다. 또한 자동으로 호이스팅이 되기 때문이기도 하다. 변수에 값 할당하기 일반적으로 변수를 선언..

(스압 예상) 나는 성장하고 있는가? 빈틈없는 한 주였다. 하루에 8시간 이상 컴퓨터 앞에 앉아있는 건 일상이 됐고, 영웅님이 초기에 말씀해주셨던 30분씩 운동을 하면 좋다는 것도 나름대로 잘 해내고 있는 중이다. 멋사에 들어오기 전 나의 학습 수준을 간단히 돌아보자면, 일을 관두기 전에 두 달 정도 공부를 했었다. 내가 할 수 있는지, 다시 무언가를 도전해볼 만큼의 의지력이 있는지 나 자신을 확인해보고 싶었다. 한 달 동안은 퇴근하고 집에 와서 강의를 듣고 코딩을 했다. 아무것도 모르는 정말 노베이스 상태에서 강의를 들었었고 그곳에서 제공해준 챌린지 프로그램이 도움이 정말 많이 됐다. (강의는 노마드코더에서 들었다) 한 달간은 챌린지를 진행했고, 나머지 한 달간은 내가 해보고 싶은 공부를 했다. 일단 ..

CSS의 기본 중앙 정렬의 여러 가지 방법을 알아보자 1. position , transform div { position: absolute; left:50%; top:50%; } position: absolute를 사용하면 부모 요소를 기준으로 절대적인 위치 값을 지정할 수 있게 된다. 🚫 주의사항) 기준으로 잡고 싶은 부모 요소가 있다면 position: relative를 지정해주어야만 한다. 안 그러면 최상위 요소 body를 기준점으로 잡는다. 이렇게 포지션 값을 지정해주면 div박스의 좌상단이 가운데로 정렬된다. 우리가 원하는 것은 div박스의 정중앙이 가운데로 오는 것이기 때문에 transform을 사용해 대상 엘리먼트를 절반씩 이동시켜야 한다. div { position: absolute; l..

이 글은 코딩을 하다 문득 A(anchor) 태그에 #, #none, #javascript:void(0); 의 의미가 궁금해 찾다가 작성한 글입니다. 태그의 속성은 크게 세 가지 간단하게 설명해보자면, href : 연결하고 싶은 주소를 적는다. target : 링크 클릭 시, 윈도우를 어떻게 오픈할 건지 정한다. (blank, self, top, bottom) title: 링크에 대한 설명을 넣는다. href href = Hypertext Reference의 약자 원하는 주소로 가버렷 href 안에 주소를 넣으면 원하는 경로로 이동 가능하다. 또한 href는 어떤 값이라도 있으면 해당 값을 새 페이지로 읽으려 하기 때문에 그걸 방지하기 위해 다른 속성 값들을 부여한다 다른 것은 무얼 넣을 수 있는지 확인..

과제의 연속 본격 과제 폭탄의 주였다. 캐릭터도 만들고, 밴딩 머신도 만들고... 로그인, 모달 창 구현까지. 사실 그렇게 과제 폭탄이라고 표할 것 까진 아니긴 하다. 블로깅과 복습을 병행하려 하니 시간이 조금 부족했다 정도? ㅎㅎ 블로깅은 과감히 포기했고(이론 정리하는 것도 중요하지만 지금은 구현에 집중하는 게 맞다고 생각했다.) 과제를 더 집중적으로 했다. 하면서 이게 정말 HTML/CSS로 구현할 수 있는 건가? 싶은 부분들이 많았는데 반은 맞고 반은 틀렸다. 현재 구현은 완성했으나 주말 동안 JS를 추가해보려고 한다. 금요일에는 줌 수업은 없고, 코드 라이언 수업이 진행됐다. 본격적으로 자바스크립트를 들어가기 전에 일단 만드는 자바스크립트 강의를 들었다. 강의에서 바닐라 자바스크립트를 사용할 줄 ..

사건의 발단 여느 때와 같이 코딩을 하려고 vsc를 열었는데 갑자기 이상한 숫자가 눈에 띔 나니고레...? 이게 뭐시당가...? 평소 같으면 10~20 정도의 숫자만 나오는데... 난 커밋할게 저렇게 많지 않은데...!? 알고 보니 파일이 많은 곳에 .git 파일이 생성된 것이었다. 예를 들면 바탕화면 아마도 터미널로 이것저것 해보느라 잘못 생성된 듯싶었다. 해결방법 해결방법은 너~무 쉽다. 잘못 생성된 .git 파일을 제거해주면 된다. 명령어로 확인하기 git rev-parse --show-toplevel cd /해당 경로 ls -a rm -r -f .git 명령어 순서대로 설명하자면 현재 git repository root 경로를 확인 경로 확인 후 잘못 생성된 .git 파일을 삭제하기 위해 확인한 ..

CSS를 사용하면서 가상 요소들을 다루기 시작하니 헷갈리는 부분이 많이 생겼다. 가상 요소와 가상 클래스.. 이름부터 비슷한 두 녀석을 비교해 보기로 했다. 가상 클래스(Pseudo-class) , 너는 무엇이냐? 가상 클래스는 실제로 존재하는 요소에 특정 이벤트 발생 시 가상으로 클래스를 주어 CSS를 제어하는 것. 그렇다고 아무 클래스를 주는 건 아니고 특정 이벤트가 따로 정해져 있다. 문법은 세미콜론 ' : ' 하나를 사용한다. 선택자:가상클래스 { property: value; } button:hover { color: red; } 예를 들어서 버튼에 마우스를 올렸을 때 글씨 색을 바꾸고 싶다면? 아래 예제를 보자 - See the Pen 가상클래스 by kim-Yeji (@yeeed711) on..

CSS 속성 중 요소를 숨기고 싶을 때 사용하는 속성은 대표적으로 세 가지가 있다. 첫 번째. overflow : hidden 두 번째. display : none 세 번째. visibility : hidden 차근차근 세 가지의 차이가 뭔지 알아보자 📣 첫번째. overflow 오버플로우는 요소의 컨텐츠가 요소의 크기보다 넘칠 경우, 컨텐츠의 보여짐을 제어한다. 다시 말해 하위 자식들이 부모의 영역을 침범했을 때 가시성을 제어할 수 있는 속성이다. 속성 값은 총 세 가지, 이는 모두 컨텐츠를 담고 있는 부모 요소에게 속성을 부여한다. hidden : 넘치는 콘텐츠를 부모의 영역만큼 숨김. scroll : 상, 하, 좌, 우, 스크롤 영역이 생김. ( 스크롤 할 영역이 없더라도 ! ) auto : 스크롤..

CSS 로 디자인을 하다 보면 내가 입력한 마진 값과 결과물이 다를 때가 종종 나타난다. 알고 보니 CSS에는 마진 병합 현상이라는 것이 존재했다! 마진 병합 현상? 그게 뭔데? 블록 레벨끼리의 부모 자식 관계에서 마진을 주었을 경우 상하단 마진이 상쇄되는 현상이다. 마진의 크기는 병합되는 마진 중에서 큰 값을 가진 마진의 값으로 병합된다. 마진 병합의 조건 인접한 블록 레벨의 요소의 마진을 주었을 경우 상하단의 여백만 병합 현상이 일어난다 좌우 여백의 병합은 일어나지 않는다 See the Pen margin1 by kim-Yeji (@yeeed711) on CodePen. 인접하는 두 블록 요소에 마진을 30px씩 줬을 때 section 1의 하단과 section 2의 상단 부분의 마진이 겹쳐지는 것을..

css를 쓰다 보면 종종 마주하는 initial 과 inherit 이 둘의 속성에 대해 알아보자 상속이란? 상속(inherit)은 하위 요소가 상위 요소의 스타일 속성 값을 물려받는 것이다. 대표적인 부모자식 사이의 ul 과 li 로 예를 들면 HTML CSS JavaScript ul { color: tomato; } 이렇게 했을 경우에 ul의 자식 요소인 li는 ul의 스타일을 상속받는다. 다만 상속받지 않는 요소들도 존재하는데 상속 요소를 사용할 때 찾아보면서 많은 공부가 됐다! 상속 공용 키워드에는 총 세 가지가 있다. 이를 전역 속성이라고 부른다. 1. inherit 2. initial 3. unset 1. inherit 해당 속성을 상위 요소로부터 상속받는다. 모든 요소가 상속이 되는 것은 아니..