// 유저로부터 키보드로 입력되는 키가 무엇인지 콘솔로 출력하는 예제 document.addEventListener("keydown", printKey); function printKey(event) { console.log(event.key); } High order function(고차함수) : 다른 함수를 인풋으로 받아들이는 함수. ex) addEventListener() Call back function : High order function에서 인풋으로 쓰이는 함수. ex) printKey() * 이 call back function이 먼저 실행되고 나서 실행 또는 반환되는 값을, high order function이 2차적으로 이용한다. 즉 call back function은 유저가 직접 실행..

.oneParent { text-align: center; } container, body 등 부모요소가 class="oneParent" 속성을 가지면, 하위 태그들을 가운데 정렬시킴 단, 하위 태그들은 width 속성이 없는 h, a, p, 등 .itsChild { margin: auto; } 위의 text-align: center;를 적용해도 안먹는 하위 태그들이 있다. 이는 하위 태그가 display: block이면서 그 width 속성을 건드린 경우에 해당한다(ex. h1 태그에 width: 10%; 적용) 이럴 때는 하위 태그에 margin을 0 또는 auto로 적용하면 된다.

.something { position: static; } 브라우저 상 기본 세팅되어 있는 값으로, 쓸 필요 없는 값. .something { position: relative; left: 100px; } 위의 static(기본) 상태였다면 존재했어야 할 위치 기준으로 좌표값을 계산하여 이동시킴(top/bottom/left/right) 해당 태그의 부모에도 relative가 할당되어있어야 하며, 그렇지 않을 경우에는 body 기준으로 움직임. 여기서는 왼쪽으로부터 100px만큼 더 떨어뜨림으로써 margin-left: 100px와 동일한 효과를 준다. 만약 이동하면서 다른 구성요소와 겹친다 해도 그걸 밀어내지 않고 그 위로 가려버림. .something { position: absolute; left: ..

Inline Block Inline-Block None 이 속성을 가진 태그들을 줄바꿈 없이 연이어 표시한다. 이 속성을 가진 태그들마다 줄바꿈을 적용한다. 이 속성을 가진 태그들을 줄바꿈 없이 연이어 표시한다. 해당 태그를 안보이게 한다. width 속성 무의미 width 속성 적용 가능 width 속성 적용 가능 JavaScript를 사용하여 사용자 반응에 맞춰 나중에는 보이게 하도록 응용 가능 .something { display: inline; } display: none; visibility: hidden; 해당 태그는 흔적도 없이 사라짐 해당 태그가 투명할 뿐

CSS 적용에는 3가지 방법이 있다. 1. inline 2. internal 3. external inline은 html 태그안에 style=""속성을 부여하는 것으로 가장 우선순위가 높고 그 태그만을 공략한다는 특징이 있지만, 그래서 다른 태그가 반복될 때는 일일이 복붙을 해야 하는 단점이 있다. internal은 위 inline의 단점을 극복하였다. 적용할 스타일을 html 태그에서 종합세트로 준비해놓는다. 하지만 internal은 그 스타일이 해당 .html파일에만 적용된다는 단점이 있다. external은 위 internal의 단점을 극복하였다. 적용할 스타일을 별도의 .css 파일에 묶어서 관리하고, 그것들을 사용할 html파일에서는 태그 안에 를 건다. link의 href 경로를 설정할 때, ..

Stored Property : 가장 일반적으로 사용하는 형태로, 선언과 동시에 그 형태가 변하지 않음. var는 변수, let은 상수. Computed Property : 변수에 값을 할당할 때 값이 상황에 맞게 알아서 바뀌어 주길 바랄 때 유용. 이름 그대로 값 할당 전에 연산이 필요한데, 그렇다고 함수를 생성하기엔 번거로운 경우 사용. Stored Property는 선언한 후로 형태를 변경할 수 없기 때문에 등장. 조건 1) let이 아닌 var로 지정할 것(전달되는 값에 따라 다른 값을 출력하므로) 조건 2) 자료형을 명시할 것 Computed Property는 2가지 형태가 있다. Getter : 미리 계획한 함수(연산)는 그대로이며, 그것으로부터 return된 값이 필요한 경우 사용. Sett..