본문 바로가기

전체 글

 (108)
[CSS] position - static / relative / absolute postion 태그들의 위치를 결정하는 속성 top, bottom, left , right로 위치를 결정할 수있다. 주의할 점은 예를들어 top : 5px을 준다고 하면 위로 5px이동하는것이 아니라 아래로 5px이동하게된다. left : 5px 또한 오른쪽 방향으로 5px이동한다. 각각의 방향을 기준으로 태그 안쪽 방향으로 이동하기 때문..! 바깥쪽으로 이동하게 하고 싶다면 -값을 써주면 된다. 1. position : static 기본값 모든 태그들은 처음에 static 상태이다. 위치를 지정하지 않을 때 사용한다. 2. position : relative 원래있던 자리를 기준으로 지정해준 top과 left만큼 이동한다. 원래있던 자리를 유지하면서 그 자리에서 상대적으로 지정한것만큼 이동하였기 때문에..
[CSS] box-sizing 1. box-sizing : content-box 기본값..! width와 height 속성이 콘텐츠 영역만 포함한다. width와 height의 값을 100씩 줬을때, 박스 사이즈는 항상 100 X 100을 유지한다. padding과 border를 얼마를 넣든 박스 사이즈는 변하지 않는다. 2. box-sizing : border-box width와 height 속성이 테두리 영역을 포함한다. width와 height의 값을 100씩 줬을때, padding과 border를 포함하여 100 X 100을 유지한다. padding과 border를 넣은 만큼 content가 줄어든다. 통상적으로 padding을 넣는다는 것은 박스안에 여백을 만든다는 것이기 때문에 대부분은 border-box를 사용하게 될 것..
[CSS] Box Model content : 텍스트와 이미지등의 컨텐츠 내용이 표시되는 영역. with와 height로 크기를 지정할 수 있다. background 속성을 지정하는 경우 content영역과 padding영역에 표시된다. padding: content 영역과 border사이의 여백. border: padding과 margin의 경계에 있는 테두리선. 박스의 외각이 되는부분이다. margin: border와 다른 태그 영역 사이. 배경은 표시되지 않는다.
[GIT] github에서 clone으로 소스 내려받기 github에서 처음으로 소스를 내려받으려 할 때 clone을 이용하면 된다. 내려받을 소스의 URL을 복사하고 터미널창에 git clone 하고 붙여넣기 해준다. git log를 통해 잘 내려받아졌는지 확인!
npm과 yarn 자바스크립트에서 모듈을 설치할 수 있는 패키지 관리자 툴이다 대표적인 패키지 관리 툴로 npm 과 yarn이 있다. Npm npm은 node packaged manager의 약자로 node.js에서 주로 사용했던 패키지 관리 툴이다. 온라인 데이터 베이스로 이루어져 있으며 클라이언트를 통해 접근이 가능하다. 수많은 개발자들이 제작한 패키지를 자유롭게 공유하는 세 Yarn yarn 은 face book에서 개발한 자바스크립트의 새로운 패키지 매니저로써 npm을 보완하고 속도를 빠르게 한 패키지 매니저 툴이다. 더욱 빠르게 패키지를 인스톨하는 방법과 의존성 관리를 다양한 디바이스에서 일관성있게 할 수 있다. 다운받은 패키지 데이터를 캐시에 저장하여 중복된 데이터는 다운로드 하지 않는다. npm을 보완하고 속..
[오류 해결] change 이벤트 에러...?? 게시판 글작성을 하는 부분에서 사진이 들어오는부분을 change 이벤트로 처리해주었는데 두번째 사진을 첨부하려니까 두번째 사진이 두번들어오고 세번째 사진을 첨부하려니까 세번째 사진이 세번 들어오고 네번째 사진 첨부하려니까 네번째 사진 네번씩이나,,,,,,,,,,ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 문제가 생긴 코드 사진 첨부를 할때마다 input 태그를 생성하여 change이벤트를 처리할 수 있도록 하였다. 해결! 사진 한장씩 잘 나온다~~~
[ JavaScript ] 실행 컨텍스트와 스코프 체인 1. 실행 컨텍스트 ( Execution Context) 실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체를 말한다. 실행 컨텍스트는 두가지 종류를 가진다. 전역 실행 컨텍스트 함수 실행 컨텍스트 실행 컨텍스트는 객체의 형태로 3가지의 프로퍼티를 소유한다. 변수 객체 ( arguments , variable ) scope chain this 처음 코드를 실행하는 순간 모든것을 포함하는 전역 컨텍스트가 생기고 전역 컨텍스트는 페이지가 종료 될때까지 유지된다. 함수 컨텍스트는 함수를 호출할 때 마다 함수 컨텍스트가 하나씩 생기고 함수 실행이 끝나면 해당 함수 컨텍스트는 사라진다. ( 클로저 제외! ) 페이지가 종료되면 전역 컨텍스트도 사라진다. 전역 컨텍스트 '전역 컨텍스트': { 변수객체 ..
[ JavaScript ] Scope란?! 자바스크립트에서 스코프란 어떤 변수들에 접근할 수 있는지, 변수에 접근할 수 있는 범위이다. 스코프는 총 2가지로 나누어져 있다. 전역 스코프 ( Global Scope ) 지역 스코프 ( Local Scope ) - 함수 스코프 / 블록 스코프 1. 전역 스코프 ( Global Scope) 코드의 어느곳에서든 변수를 참조할 수 있는 범위이다. 중괄호 밖을 전역 스코프라고 하고, 전역 스코프에서 선언된 변수들을 전역 변수라고 한다. [ 전역 스코프의 문제점 ] 2. 지역 스코프 ( Local Scope ) 함수내에서의 범위이며, 자기 자신과 하위 범위에서만 참조 할 수 있다. 중괄호 안을 지역 스코프라고 하고 지역 스코프에서 선언된 변수들을 지역 변수라고 한다. 지역 스코프에는 함수 스코프와 블록 스코프..

티스토리툴바