Dog foot print

모든 html의 요소는 사각형의 박스 모델을 가지고 있다. 이는 해당 요소가 동그랗게 생겨도 삼각형의 이미지를 가지고 있더라도 사각형의 박스를 가지고 있다. 이유는 html요소는 내부에 contents 이외에 padding , border, margin 으로 이루어져있기 때문이다. padding padding 속성은 border 윤곽선과 컨텐츠 사이의 여백이다. padding-top : border의 상단 부분과 컨텐츠의 여백 padding-right : border의 오른쪽 부분과 컨텐츠의 여백 padding-bottom : border의 아래 부분과 컨텐츠의 여백 padding-left : border의 왼쪽 부분과 컨텐츠의 여백 padding : 1px 1px 1px 1px 맨 처음 부터 위, 오른..

자바스크립트를 조금 씩 더 공부하다보면 동적으로 html 요소들과 서로 상호작용을 하며 페이지를 만들고 싶어 할 것이다. 예를 들면 버튼을 누르면 달력 api를 통해 새로운 달력을 그리고 싶은데 html에서는 이를 해결할 방법이 없고 새로운 달력을 만들기 위해서는 document 객체라는 것을 사용해서 웹페이지에 새로운 형태의 태그들을 구성해야 한다. Document 객체란 브라우저에서 문서를 읽으면 특변한 객체를 만든다. 바로 window객체 이다. 이 window객체는 최상위 객체로써 6개의 프로퍼티를 가지고 있는데 그 중 html의 코드들이 파싱되어 javascript 정보로 가지고 있는 것이 document 객체입니다. Dom 객체의 사용 dom객체를 사용하는 이유는 html 태그에 이벤트를 설정..

html 에 css를 연결하는 적용 방법으로는 3가지가 있다. 어트리뷰트를 사용하기 html 에 style 태그 작성하기 태그에 일일히 어트리뷰트를 작성하여 스타일을 적용시키는 것은 굉장히 불편하다. 그렇기에 html은 style태그를 제공하여 html 내부에 css문법을 사용할 수 있게 한다. head 내부에 style 태그를 작성하고 태그 내부에 css 문법에 맞게 작성하면 된다. 외부 css 파일을 링크 시키기 html에 style태그를 열고 css를 작성하면 html의 코드가 굉장히 길어지고 한 곳에 css가 몰려있어 굉장히 보기 불편하다. 그렇기에 외부에서 css파일을 작성한 후 html에 링크태그를 사용하여 사용할 수 있다. div{ color: gray; width: 100px; height..

width 와 height 는 처음 css를 배울 때 색상을 변경하는 단계를 넘어서 각 태그가 가지고 있는 box를 옮기며 사용 해볼 것이다. 그래서 내 경험상 width와 height를 쓸때 경험이적다면 pixel 단위를 사용하거나 단순히 % 단위를 사용하고 또한 내가 원하는 대로 사이즈가 나오지 않는 상황이 올 때가 있다. 이번 포스팅에서는 각 단위별로 width와 height가 어떻게 동작하는지 알아보겠다. 기본적용된 width와 height div의 경우 width와 height 를 명시 해 주지 않다면 div의 내부에 있는 콘텐츠의 높이만큼 height가 할당되고 화면의 끝까지 넓이가 증가한다.. a ㅈ % 단위 이 % 단위는 부모의 크기를 100%로 잡고 값을 할당한다. a b c px 단위 ..

콜백 이후로 포스팅 난이도가 상승했다. 그렇지만 매일 2개씩 뭐든지 포스팅하겠다고 약속한 이상 꾸준히 공부해서 해야한다. 동기와 비동기 우리는 코드를 짤때 위에서 아래로 짜면서 먼저 해야할 연산과 작업을 위에 작성하고 흐름에 맞게 작성하였다. 그러나 다음과 같은 상황에서는 어떨까 ? console.log("hello ? ") setTimeout(function(){console.log("i'm fine")},3000); //setTimeout 함수는 첫번째 인자로 콜백함수를 받고 2번째 인자로 ms(밀리 세컨즈)를 받아 시간이 경과하면 함수를 실행 시킨다. console.log("and you ? "); 우리가 여지것 작성했던 코드를 생각하면 위의 코드는 hello -> 3초뒤 i'm fine-> and..

프로그래밍언어를 공부하다보면 필연적으로 등장하는 개념인 콜백 함수를 만나게 된다. 나 또한 콜백함수에 대한 개념이 제대로 정리되지 않은 채 그저 동기와 비동기처리를 위해 사용되는 기법이라고만 단순히 알고 있었다. 그렇기에 이참에 콜백함수에 대해서 정리해보려 한다. 콜백함수란 ? 콜백함수는 한 줄로 요약해서 "함수의 인자로 전달되는 함수입니다. " 라고 할 수 있겠다. 무슨 말인가 함은 우리가 함수를 더욱 잘게 쪼개어 함수가 이 기능도 저 기능도 되는 복잡한 괴물이 될 수 있는 것을 방지 할 수 있고 함수의 로직 실행시기를 조정 할 수 있다는 것이다. 콜백함수가 될 수 있는 조건 1. 변수나 데이터 구조 안에 담을 수 있어야 한다. //자바스크립트는 변수나 구조체 , 객체등에 함수를 담을 수 있다. 2. ..

div 는 주로 레이아웃을 구성하기 위해서 틀을 구역의 틀을 잡는 용도로 사용한다. 콘솔창을 눌러서 보면 우리가 보는 많은 페이지들이 div로 구성된 것을 볼 수 있다. 이 div를 html에 선언하면 처음에는 아무것도 보이지 않는다. 그러나 div에 무언가를 작성하고 div를 여러개 적어보면 뭐가 달라지는지 볼 수 있다. 안녕하세요 div입니다. div로 텍스트를 작성하니 각 div의 구역이 나눠졌다. 이와 같은 속성을 display : block 속성이라고 하는데 이 div의 구역 만큼 화면의 넓이를 차지하여 작성된 다음 태그가 아래로 내려가게 된다. div에 style 적용시키기 html에서 div태그를 꾸미기 위해서는 태그에 style어트리뷰트를 추가해야한다. style어트리뷰트에 원하는 스타일을..

수업시간에 객체지향프로그래밍의 특징으로 다형성과 은닉성에 대해서 배운적이 있다. 클래스를 정의할 때 클래스의 내부 변수들을 숨기고 싶거나 함수를 숨기고 싶어 private나 protected를 사용 한다. 그런데 이러한 기능들은 자바스크립트에서 제공 해주지 않는다. 그래서 특정한 방법으로 객체안에 있는 값을 숨길 수 있어야 한다. 캡슐화란 ? 클래스내부에 있는 값들을 외부에서 참조하지 못하도록 숨기는 것 ! function Dog(name){ var name = name; // 접근 불가능 return { hello : 10,//접근 가능 getName(){ return name; }, setName(newName){ name = newName } } } var huge = new Dog("huge");..