본문 바로가기
Hello! I'm haein, a junior front-end developer. Welcome to my space.
간단한 자기소개 '◡'
안녕하세요. 정리하는 것이 주특기이고, 인문논술로 대학을 가서 나름 글쓰기에 자부심(?)이 있는 주니어 개발자입니다. 개발 공부를 하면서 좀 더 정돈된 기록을 해보고 싶어서 블로그를 시작하게되었습니다. 게시글 하나하나 정말 정성스럽게 열심히 썼구요. 되도록이면 공식문서를 참고해서 객관적이고 정확한 정보를 작성하려고 노력했습니다. 그리고 제가 이해가 될 정도로 디테일하게 서술해서 웬만한 사람들도 이해가 가능할 것이라는것이 저의 뇌피셜입니다. 아무쪼록 저의 글을 읽는 사람들이 어떤 방향으로든 도움이 되셨으면 좋겠습니다. 참고로 연보라, 연핑크를 좋아하구여, 그라데이션도 좋아합니다. 그래서 내 취향에 맞게 커스텀 했습니다 ㅎㅎㅎ MBTI는 ISTJ입니다. 너무 TMI라서 toggle로 해뒀습니다. 궁금한 사람들은 펼쳐보시겠죠?

전체 글

 (224)
[JavaScript] 전역, 지역, 객체, 변수, 상수, 속성, 매서드, 함수, 매개변수(인자), 인수 개념 정리 자바스크립트 헷갈리는 용어 정리 전역 : 코드가 사용되는 프로그램 전체 또는 파일 전체 전역은 영어로 Global, 우리가 사는 지구 전 지역 지역 : 프로그램이나 파일 안의 특정 함수, 모듈 등과 같이 특정 범위 지역은 영어로 Local, 그 범위를 특정할 수 있는 지역 객체 : 자바스크립트 프로그램에서 인식할 수 있는 모든 대상 key와 value의 집합 { } 웹브라우저, 웹문저 관련된 것 여러 정보를 가지고 있는 복합 자료형 '객체'에 대한 자세한 내용은 https://dev-ini.tistory.com/39 전역 객체 : 전 지역(코드가 사용되는 프로그램 전체 또는 파일 전체)에서 사용할 수 있는 객체 window객체로, 모든 객체가 소속된 객체, 창이나 프레임을 의미 웹브라우저에서는 windo..
[CSS] grid 정복기 목차 1. grid 2. 행과 열의 개념 3. 2행 3열을 grid로 어떻게 표현하는지 알아보기 4. 위의 코드와 같은 표현법 알아보기 (2행 3열) 5. 각 셀의 영역을 지정하는 법 6. grid를 이용해서 시안대로 배치하기 7. grid-template-areas (아주 직관적인 방법) grid grid를 알면 flex나 position보다 훨씬 쉽게 배치가 가능해진다 grid도 파고들면 복잡하긴 하지만... 복잡한 건 싫으니까 최대한 쉽게쉽게 알아보자. 행과 열의 개념 행(가로) row 행거는 가로로 걸고 → → 열(세로) column 열은 세로줄에 맞춘다 ↓ ↓ ↓ 2행 3열을 grid로 어떻게 표현하는지 알아보기 HTML 1 2 3 4 5 6 CSS .container { width: 600px..
[HTML] <input> 정복기 목차 1. 2. 의 유형들 ( text, button, checkbox, color, date, datetime-local, month, email, file, imge, number, password, radio, range, search, submit, tel, url ) 3. 의 속성들 은 웹 기반 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성한다. 사용자 에이전트에 따라서 다양한 종류의 입력 데이터 유형과 컨트롤 위젯이 존재하는데, 입력 유형과 특성의 다양한 조합 가능성으로 인해, 요소는 HTML에서 제일 강력하고 복잡한 요소 중 하나이다. 의 유형들 요소의 동작 방식은 type 특성에 따라 현격히 달라진다. 특성을 지정하지 않은 경우, 기본값은 text이다. 디폴트 값. 한줄의 ..
[CSS] position 정복기 목차 1. position 2. position: static 3. position: relative 4. position: absolute 5. position: fixed 6. position: sticky 7. position을 사용해서 장바구니 예제 만들기 position 문서 상에 요소를 배치하는 방법을 지정한다. 값에는 static, relative, absolute, fixed, sticky가 있다. position: static 기본값이며, 요소를 일반적인 문서 흐름에 따라 배치한다. top, right, left, bottom, z-index 속성이 아무런 영향도 주지 않는다. position: relative static이었을 때 배치되는 위치를 기준으로 상대적 위치를 지정할 수 있는 ..
[CSS] flex 정복기 목차 1. flex 2. flex box의 구성 3. flex로 box 배치하는 법 flex flex 속성은 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성이다. 뷰포트나 요소의 크기가 불명확하거나 동적으로 변할 때에도 효율적으로 요소를 배치, 정렬, 분산할 수 있는 방법을 제공하는 CSS3의 새로운 레이아웃 방식이다. flexbox의 장점을 한 마디로 표현하면 '복잡한 계산 없이 요소의 크기와 순서를 유연하게 배치할 수 있다'라고 할 수 있다. 정렬, 방향, 순서, 크기 등을 유연하게 조절할 수 있기 때문에 별도의 분기 처리를 줄일 수 있고, CSS만으로 다양한 레이아웃을 구현할 수 있다. flex box의 구성 flex box는 복수의..
[HTML] Tag element 총정리 (태그 종류 및 설명) 목차 1. 기본 2. 내용 3. 문서구조 4. 목록 5. 표 6. 이미지 7. 멀티미디어 8. 하이퍼링크 9. 폼 HTML 태그 종류를 알아보자! 1. 기본 : 웹 문서의 유형을 html로 지정한다 : 모든 html 태그들의 최상위 태그, 언어를 지정한다. 자주 사용하는 국가코드는 en(영어), ko(한국어), ja(일본어), zh-cn(중국어)이다. : 문서의 본문 2. 내용 : 6단계의 구획 제목을 의미, 구획 단계는 이 가장 높고 가 가장 낮다. Heading level 1 Heading level 2 Heading level 3 Heading level 4 Heading level 5 Heading level 6 : 문단 : 줄바꿈 : 수평선 3. 문서구조 : 헤더 영역 (소개 및 탐색에 도움을 ..
[CSS] box-sizing (박스 사이징) 목차 1. box-sizing 2. content-box 3. border-box box-sizing box-sizing은 요소의 전체 너비와 높이를 계산하는 방법을 설정한다. box-sizing 속성의 값은 여러가지가 있지만, 대표적인 것은 content-box와 border-box 2가지이다. content-box CSS 표준에서 지정한 초기값으로, box-sizing 속성을 굳이 안써도 콘텐츠에 width나 height를 지정한다면 box-sizing: content-box 를 한 것과 동일하게 적용된다. 요소의 크기= 콘텐츠의 너비 및 높이 (border, padding, 여백은 포함되지않음) 따라서 padding이나 border를 추가할수록 본래의 콘텐츠 크기에 덧대지기 때문에 전체요소의 크기는..
git clone, degit, fork, pull 사용법, 특징, 차이점 Github에서 코드를 가져오기 위한 방법으로는 총 4가지가 있다. (1) git clone 명령 (2) npx degit 명령 (3) fork 해오기 (4) git pull 명령 이 4가지 방식의 사용법과 특징을 알아보자. git clone 1. 복제하려는 Github repository로 가서 를 눌러 주소를 복사 2. git clone 하기 git clone {주소} {파일이름} // {파일이름}은 저장소를 복제할 위치를 지정하는 것(생략가능) // Github에서 저장소를 clone하면 origin remote에 저장소 주소(clone한 저장소)가 저장됨 ls // 복제 잘됐는지 확인 3. .git 폴더 삭제하기 (git 이력 지워야 하는 경우) ls -a // 모든 파일 보기 rm -rf .gi..

티스토리툴바