1️⃣ map() 와 forEach()의 공통점: 모든 요소에 콜백함수를 호출 각 요소를 순회하며 요소에 무언가를 할 수 있음 JavaScript .forEach() and .map(): These are the methods that are used to iterate on an array, more technically they invoke the provided callback function for every element of an array. Syntax: forEach((currentElement, indexOfElement, array) => { ... } map((currentElement, indexOfElement, array) => { ... } ) Parameters: curren..
working directory - 도화지 commit - snapshot(스냅샷) git repository - 사진첩 checkout - 이전 상태의 특정 commit으로 돌아가는 것 branch - 특정 commit을 가리키는 포인터 untracked file - working directory 안에서 새로 생성된 파일상태 add - on stage(commit을 준비하는 공간) HEAD - reference인데, master가 가리키고 있음 예) Hash value
자바스크립트에서 this란? this의 값은 함수를 호출하는 방법에 의해 결정 참고) 자바스크립트에선 함수를 호출할때 결정되는 값과 함수를 선언할 때 결정되는 값이 존재 실행하는 동안 할당에 의해 설정될수 없고, 함수가 호출될 때마다 다를 수 있음 bind() - 함수 호출방법과 무관하게 this값을 설정할수 있는 메소드 [ES5] [ES6]에서는 bind()제공하지 않는 화살표함수 추가 Reference https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/this this - JavaScript | MDN JavaScript에서 함수의 this 키워드는 다른 언어와 조금 다르게 동작합니다. 또한 엄격 모드와 비엄격 모드에서도..
flex-flow: flex-direction flex-wrap ; Q20. The two properties flex-direction and flex-wrap are used so often together that the shorthand property flex-flow was created to combine them. This shorthand property accepts the value of the two properties separated by a space. For example, you can use flex-flow: row wrap to set rows and wrap them. Try using flex-flow to repeat the previous level. #pond..
경로(Path) 문서에서 다른 문서로 연결하거나 문서 내에 이미지 및 음악 파일을 넣을 때, 해당 파일의 위치를 브라우저에게 알려주어야 한다. 는 href 속성을 이용해서, 는 src 속성을 이용해서 명시한다. 이 때, 해당 파일의 위치를 경로(path)라고 한다. 경로를 표기할 때 두가지 방법이 있는데 절대경로와 상대경로가 있다. 절대경로(Absolute path, Absolute pathname, Full path) 루트 디렉토리를 포함한 주소를 갖는 경로 컴퓨터 상의 디렉토리에서 C:\를 항상 포함 URL에서는 http://를 항상 포함 항상 기준은 루트가 됨 언제 쓰는가: 일반적으로 다른 사람이 만든 문서나 파일을 연결할 때, 그 외 다른 사이트를 연결할 때 장점: 루트 디렉토리를 항상 포함하기 ..
IE(Internet Explorer) 하위버전(10이하, 특히 8,9)에서 보여지는 화면은 현재 가장 일반적으로 우리가 이용하고 있는 모던 브라우저(예를 들어 크롬)과 다르게 동작한다. 크로스브라우징 이슈 해결방법: 1. 하위 IE 웹 브라우저를 사용 할 때 발생할수 있는 CSS스타일 적용 issue를 해결하기 위해 특정 CSS 파일을 만든다. 2. 해당 IE 버전에서의 웹 화면만 컨트롤 할 수 있도록 head태그 영역 맨 하단에 첨부 CSS폴더 내 ie8.css 파일은 IE9 미만에서만 적용 IE8에서만 적용되고 다른 브라우저에선 동작하지 않음 태그 첨부순서는 가장 마지막에
head태그 안에, 미디어쿼리(media query) @media screen and (max-width : 1200px) { .box { font-size : 40px; } } @media screen and (max-width : 768px) { .box { font-size : 30px; } } media query를 작성할 때는 CSS파일 최하단에 작성한다 이유: css파일도 한줄씩 읽고 적용되므로 중복된 스타일조정은 캐스케이딩 되서 중복되더라도 가장 마지막 줄을 읽고 그걸로 수정해줌 권장되는 Breakpoint media query 문법에서 max-width안에 넣는 브라우저 폭을 breakpoint라고 한다 breakpoint는 원하는 만큼 여러개 넣을 수 있지만 권장되는 폭의 경우의 수는 대..
HTML 문서에는 기본적으로 상대경로 vs. 절대경로 1. css/style.css ➡︎ 상대경로 2. /css/style.css ➡︎ 절대경로 - 1번은 현재 HTML 파일과 같은 경로에 있는 css폴더 내의 style.css 파일을 의미 - 2번은 현재 사이트의 메인경로(예를들어, www.tistory.com)부터 시작해서 www.tistory.com/css/style.css 파일을 첨부하라는 뜻 - 즉, 슬래시( / )기호가 처음부터 붙어있으면 사이트 메인경로부터 시작하라는 의미 2. - 스타일 일반적으로 .css파일을 통해 .html 파일과 분리하지만 그렇지 않고 html document에 같이 쓰고 싶다면 3. - 사이트 제목 - 사이트에 제목을 넣는다. - 브라우저 탭에 뜨는 이름이다. 4. ..
Code 편집 Command + x 한줄 삭제 Command + c 코드복사 Command + v 코드 붙여넣기 현재 커서 기준으로, Command + Enter 밑에 한줄 추가 Command + Shift + Enter 위에 한줄 추가 Option + Down(▼) 그 줄 전체를 밑으로 이동 Option + Up(▲) 그 줄 전체를 위로 이동 Shift + Option + Down(▼) 그 줄 전체를 아랫줄에도 복사넣기 Shift + Option + Up(▲) 그 줄 전체를 윗줄에도 복사넣기 Command + d 커서가 위치한 해당 단어와 동일한 단어 선택 후 각 단어 마지막에 커서가 이동함 Command + Option + Down(▼) 커서를 아래에 추가 Command + Option + Up(▲)..
/* I found it should be written my post what I learned for fully understanding so I am going to talk about the box model of CSS in Korean. Hope you can also get my point. 😎 */ HTML웹페이지 문서의 골격을 만들고, CSS로 스타일링을 줄 때 우리는 박스모델이라는 개념을 접하게 된다. 하나의 콘텐츠가 웹 페이지 내부에 위치하게 될때, 하나의 콘텐츠는 박스모델을 갖는다. 박스모델은 4개의 박스로 구성이 되어있는데, 콘텐츠박스 > 패딩박스 > 보더박스 > 마진박스로 감싸진다. 박스를 만들 때 주의점이 하나 있다면, 원래 div박스에 width 값을 주면 패딩과 보더를 고려..
