처음으로 적는 자바스크립트 정리입니다. 가장 먼저 다른 프로그래밍 언어와 차별화가 되는 변수형과 데이터 타입에 대해서 정리해보겠습니다! 1. let vs var - let과 var은 모두 자바스크립트 변수 선언 방식이다. - 원래는 var만 썻었음 - 이번에 ES6로 넘어오면서 추가된 것이 let 근데 이 var가 굉장히 위험한 놈이다.... *다른 프로그래밍 언어를 배우고 오면 이해가 안 되는 var에서만 되는 것* 선언하기 전에 값을 할당하는 것이 가능하다 num = 1; var num; //아니 이게 에러가 아니라고??? 이것을 var hoisting(호이스팅)이라고 한다 hoisting(끌어올리다)이란 어디에 선언했는지 상관없이 선언한 것을 모두 다 제일 위로 올려주는 것 => 근데 let은 안됨..

✍ 오랜만에 인사 안녕하세요! 이렇게 공부한 내용이나 개념 정리가 아닌 개인적인 글은 두 번째네요. 저번 주까지 시험이어서 포스팅을 꾸준히 못했었는데 시험 끝나고 다시 시작을 했습니다. 블로그를 시작한 지도 한 달이 넘었네요 ㅎㅎ. 이렇게 글을 적게 된 계기는 이번 글이 20번째 글이라 나름 감회도 새롭고 앞으로 더 열심히 해야겠다는 다짐이 들어 적어봅니다!! 🚀 학교, 졸업만 남았다.... 이제 진짜 학교와는 졸업밖에 남지 않았습니다. 뭔가 후련하기도 하고 조금 겁나기도 하네요. 다들 이런 기분이셨으려나요?? 요즘 들어 유튜브 영상도 계속 취업과 개발자 관련된 콘텐츠만 소모하고 있고 현실이 눈앞에 닥치기 시작하니 실감이 나기 시작하더라고요. 여러 성공사례들도 접하고 개발자 생태계와 현실 등도 보면서 한..

오늘은 간단하고 기본적이지만 굉장히 중요한 인터넷 지식인 DNS와 도메인에 대해서 정리해보려 합니다. 1. 도메인(Domain)이란? 원래 지정된 인터넷 접속 주소를 다른 이름으로 바꾸어 준 주소 예를 들어, http://192.168.1.1/ 이렇게 생긴 주소를 www.이름.com 이런 식으로 바꾸어 주는 것 참고 : www(호스팅 주소) + 이름.com(도메인) -> 뒷부분을 도메인이라고 함 간단하게 말해서 원래의 ip주소를 기억하기 쉬운 닉네임으로 바꾸는 개념 2. DNS(Domain Name System)이란? 위에서 말한 원래의 IP주소를 기억하기 쉬운 도메인으로 바꾸거나 도메인을 다시 IP주소로 바꾸어주는 데이터베이스 시스템 연결되어있는 IP주소와 도메인이 저장된 곳이 DNS 각 도메인들마다 ..

이번에는 flexbox에 대해서 정리를 해보려 합니다. 구현이 쉽지 않은 유연하고 동적인 레이아웃을 간단하게 구현할 수 있도록 도와주는 것이 flexbox인데요 박스들의 크기나 방향, 정렬 등을 유연하게 정리할 수 있어 굉장히 유용한 방식입니다. 보기 편하고 간단하게 자주 쓰는 것 위주로 한번 정리해보겠습니다! 제가 자주 보는 유튜버가 있는데요 많은 사용방법 중 이 분이 강의해주신 영상을 참고로 만들었습니다! 출처 : 유튜브 - 드림코딩 by 엘리 https://youtu.be/7neASrWEFEM 1. flexbox 설정 방법 - 설정하고 싶은 요소들이 들어있는 박스 태그에 display : flex;를 선언한다 .container { display: flex; } - flexbox는 기본축과 반대 축..

이번에는 웹페이지의 전체적인 틀을 짜는 데에 필수적인 position 속성에 대해서 한번 정리해보겠습니다. 1. position 속성 값 정리(static, relative, absolute, fixed, sticky) 위치 변경 가능 여부 위치 기준 간단한 설명 static X 원래 있어야 할 위치 태그가 있어야 할 위치에 변경 없이 위치 relative O 원래 있어야 할 위치 태그가 있어야 할 위치 기준으로 상하좌우를 변경 absolute O 담겨있는 박스 이 태그가 포함된 박스의 원점을 기준으로 변경 fixed O 웹페이지 전체 박스 상관없이 웹페이지 전체 기준으로 변경 sticky O 원래 있어야 할 위치 스크롤을 위치 밖으로 옮겨도 화면에 보이도록 위치 2. 예시 See the Pen Unti..

이번에는 css에서 자주 헷갈리는 display 속성을 한눈에 알아볼 수 있도록 정리해보겠습니다. 인라인 태그와 블록 태그의 특징을 살펴보고 css에서 display를 변경했을 때 어떻게 나타나는지 알아보겠습니다. 블록 태그와 인라인 태그에 대한 것과 어떤 것이 있는지는 아래 링크를 참조하시면 됩니다! https://nack1400.tistory.com/17 [HTML] #9 Block 태그, Inline 태그 비교 정리(블록vs인라인 태그 정리) 이번에 정리를 해볼 것은 block형 태그와 Inline형 태그입니다. 태그를 사용할 때 이 점을 유의해서 사용하면 훨씬 수월하게 페이지를 구성할 수 있다고 하더군요. 한번 정리해보고 공부해보겠습니 nack1400.tistory.com 1. inline, bl..

이번에 정리를 해볼 것은 block형 태그와 Inline형 태그입니다. 태그를 사용할 때 이 점을 유의해서 사용하면 훨씬 수월하게 페이지를 구성할 수 있다고 하더군요. 한번 정리해보고 공부해보겠습니다! 1. Block 태그? Inline 태그? 1) Block 태그 Block 태그는 box를 치는 태그들이라고 생각하면 편하다. 전체적인 틀을 짠다던지 구조를 만들 때 사용하는 태그들은 Block 태그들이다. 특징은 아래와 같다. 항상 새로운 줄에 태그가 생성 좌우 너비가 100%라서 한 줄을 독차지 오른쪽에 공간이 남아있더라도 새로운 태그는 다음 줄에 생성된다. 2) Inline 태그 Inline 태그는 위에 block 태그와는 다르게 내용을 적는 태그라 생각하면 된다. 블록 태그로 짜여진 틀 안에 내용을..

앞서 포스팅한 git에 대한 것에 이어 실전에서 사용하는 명령어를 정리해보겠습니다. 먼저 간단한 커맨드 명령어부터 정리를 해보겠습니다. 1. Command 명령어(터미널 명령어) 분류 기능 명령어 관리자 권한 관리자 권한으로 실행 $ sudo 명령어 디렉토리 위치 이동 홈 디렉토리로 이동 $ cd ~ 디렉토리로 이동 $ cd 디렉토리이름 상위(부모) 디렉토리로 이동 $ cd .. 디렉토리 정보 출력 현재 위치 출력 $ pwd 디렉토리 안의 파일 출력 $ ls 상세정보까지 출력 $ ls -l 숨김파일까지 출력 $ ls -a 숨김파일/상세정보까지 출력 $ ls -al 생성 및 옮기기/삭제 디렉토리 생성 $ mkdir 디렉토리이름 파일 생성 $ touch 파일이름 파일 생성 및 수정 $ echo 파일내용 > ..

드디어 시험이 끝났습니다 ㅠㅠ 이제 진짜 졸업이네요... 다시 블로그 포스팅 시작해보려 합니다. 시험 준비를 하면서 취업 준비 계획을 짜다 보니 공부해야 될게 정말 많다는 생각이 계속 듭니다! 기본적인 거부터 계속해서 정리해보려 하는데 오늘은 개발자라면 누구나 알아야 하는 git을 한번 공부하고 정리해보려 합니다! *Git 공식 홈페이지* https://git-scm.com/ Git git-scm.com 1. Git이란? - 형상 관리 도구로써 버전 관리 시스템이라고도 한다. - 소스코드 변경에 따른 버전을 효과적으로 관리하게 해주는 무료 툴 2. Git의 장점 - 여러 명이 개발하기에 용이 - 인터넷이 연결되지 않아도 개발 가능, 서버에 장애가 생겨도 로컬 저장소에 커밋할 수 있음 - 팀뿐만이 아니라 ..

제가 블로그 포스팅을 시작하면서 여러 블로그를 돌아다니다 보니 이런 형태의 코드 에디터가 보이더라고요! 그래서 어떻게 하는 거지 찾아보다가 실시간 에디터 CodePen을 알게 되었습니다. 처음 본 경험해본 codepen의 느낌은 가히 신세계.....! 아니 코드를 올릴 때도 가독성도 좋고 자리 차지도 많이 하지 않아서 너무 좋더라고요 ㅠㅠ 아무튼 ^^;;; 이번에 실시간 코드 에디터인 codepen을 소개하고 html, css, js를 효율적으로 보여주는 방법을 소개해보려 합니다!! CodePen 사용법 https://codepen.io/ CodePen An online code editor, learning environment, and community for front-end web developm..