일상속으로

div 세로 중앙 정렬팁 - 03(transform) "display": "table", "top": "50%", "left": "50%", "transform": "translate(-50%, -50%)"

display 속성값으로 inline 또는 inline-block으로 정하면 요소들이 가로로 배열됩니다. 이 때 요소와 요소 사이에 여백이 생깁니다. 예를 들어 다음과 같이 순서 없는 목록을 가로로 배열해보겠습니다.(여백을 파악하기 위해 테두리를 만들었습니다.) Lorem Ipsum Dolor 박스 오른쪽에 여백이 있는데, li 요소에 margin-right: 0px; 를 추가해도 사라지지 않습니다. 이 여백을 없애는 방법 두 가지를 소개합니다. margin 이용하기 첫번째 방법은 margin 값을 음수로 하는 것입니다. -4px 정도면 여백이 사라집니다. li { display: inline; border: 1px solid #bcbcbc; padding: 10px; margin-right: -4px;..

1) Variables ($)변수선언은 '$'으로 시작.변수의 값으로는 문자, 숫자, 컬러가 올 수 있다.$변수명 : 속성값;$font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; }2) Nesting부모자손 선언 - tree구조, 포함관계, 중첩적 선언꺾쇠 선택자를 통해 직접선택도 가능( ul > a)& : 상위요소(자기자신)을 뜻함 = thisnav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px;..

자바스크립트는 프로토타입 기반 언어라고 불립니다. 자바스크립트 개발을 하면 빠질 수 없는 것이 프로토타입인데요. 프로토타입이 거의 자바스크립트 그 자체이기때문에 이해하는 것이 어렵고 개념도 복잡합니다.하지만 프로토타입이 무엇인지 깨우친 순간 자바스크립트가 재밌어지고, 숙련도가 올라가는 느낌을 팍팍 받을 수 있습니다. 그럼 지금부터 프로토타입을 이해해봅시다.Prototype vs Class클래스(Class)라는 것을 한 번쯤은 들어보셨을겁니다. Java, Python, Ruby등 객체지향언어에서 빠질 수 없는 개념이죠. 그런데 중요한 점은 자바스크립트도 객체지향언어라는 것입니다. 이게 왜 중요하냐구요? 자바스크립트에는 클래스라는 개념이 없거든요. 대신 프로토타입(Prototype)이라는 것이 존재합니다. ..