변수란 데이터를 저장할 수 있는 메모리 상의 공간을 말합니다.

Javascript는 웹 페이지에 생동감을 불어 넣을 수 있는 프로그래밍 언어로서 웹 페이지(HTML) 안에 포함되는 형태로 작성되어 웹 페이지가 브라우저에 의해 열릴 때 자동으로 실행됩니다. 웹 브라우저 밖의 환경에서 자바스크립트를 해석할 수 있는 V8 엔진이 등장한 이후 V8이 설치된 모든 장치에서 실행 가능하기 때문에 현재는 웹 프로그래밍 뿐만 ...

flexbox는 float나 inline-block의 단점을 보완하여 레이아웃 배치 전용 기능으로 고안된 CSS의 새로운 display 특성으로 컨테이너에 적용하는 속성과 아이템에 적용하는 속성으로 나누어 집니다. flexbox를 사용하면 레이아웃 구성에 많은 편의성이 보장되지만 IE는 지원하지 않기 때문에 IE를 고려해야 하는 프로젝트에서는 사용해서...

CSS2에서 CSS3로 넘어오면서 포토샵이나 Flash를 활용해야만 했던 효과들이 CSS만으로 구현 가능하게 되었습니다. 이 포스팅에서는 새로 추가된 효과 중에서 널리 사용되는 속성들을 모아봤습니다.

배경 관련 속성은 특정 HTML요소에 배경 색상이나 배경 이미지를 설정하는 속성입니다. 자칫 단순해 보이는 이 기능을 잘 활용하면 웹 페이지의 로딩속도를 향상시키는데 도움이 됩니다.

Position 속성은 요소의 배치 방법을 결정하는 속성으로 `relative`(상대좌표), `absolute`(절대좌표), `fixed`(고정좌표), `sticky(유동좌표)` 방식이 있습니다. 각 방식에 따라 좌표가 설정되는 기준이 달라집니다.

float 속성은 박스를 부모의 왼쪽이나 오른쪽에 고정시키고 문장을 그 옆으로 흐르도록 하기 위한 속성입니다.

display속성은 요소를 어떻게 보여줄지를 결정하는 속성으로 block-level과 inline-level의 특징을 결정짓는 속성이기도 합니다. block-level과 inline-level이 각각 다른 기본값을 갖고 있기 때문에 이를 잘 구별하여 사용해야 합니다.

margin은 바깥 여백을 의미하는 속성입니다. 사람이 벽에 기대어 있는 상태에서 벽을 밀 경우 사람이 밀려나게 되듯이 박스의 바깥에 여백을 형성하면 그 여백의 크기만큼 박스가 밀려나게 됩니다. padding은 박스의 크기에 관여하는 속성이지만 margin은 박스의 위치에 관여하는 속성입니다.

CSS에서 박스라 함은 `<div>`, `<p>`, `<h1>~<h6>`등 문단을 이루는 요소를 말합니다. 문단을 구성하는 요소들은 크기와 여백을 지정할 수 있는데 이와 관련된 CSS 속성들을 박스모델이라고 합니다.