1. 이미지와 텍스트의 배치를 위한 float float 은 '뜨다'라는 의미이며, 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성. inherit : 부모 요소에서 상속 left : 왼쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 오른쪽에 위치하며 위에서 아래로 흐름 right : 오른쪽에서 부유하는 블록 박스를 생성. 페이지 내용은 박스 왼쪽에 위치하며 위에서 아래로 흐름. 이후 요소에 clear 속성이 있으면 페이지 흐름이 달라짐. none 이 아니라면 display 속성은 무시된다. none : 요소를 부유시키지 않음 left와 right을 통해 부유 속성을 지정 시 display는 무시된다. (none은 제외) 또한 이후 요소에 clear 속성이 있으면 페이..

content의 높이가 작으면 footer가 맨 아래가 아닌 애매한 중간 위치에 있게 되는 경우가 있다. 관리자 도구를 확인해보면, html 자체의 높이가 작아서 나타나는 문제이다. 컨텐츠만큼 HTML의 height 가 auto로 늘어나있기 때문에 height를 100%로 맞춰준다. 컨텐츠를 감싸고 있는 body에 height: 100% 를 주고 body 자식 요소인 을 min-height: 100% 으로 페이지 최소 높이값을 맞춘다 (wrap이 min-height이 아닌 height을 주면 창의 높이를 낮출 때 footer가 wrap 중간에 오고 만다.) wrap에 position: relative; 를 준다. wrap 안에 담길 footer 자리를 아래에 만든다. -> padding-bottom으로..

position 프로퍼티 HTML 요소(element)를 원하는 위치에 배치하기 위해 사용하는 CSS position 속성에 대해 알아보자. CSS에서 position 속성은 HTML 문서 상에서 요소가 배치되는 방식을 결정한다. static을 제외한 나머지 position 속성은 요소의 정확한 위치 지정을 위해 top, left, bottom, right 속성과 함께 사용된다. 각 값들은 그 방향에서 얼만큼 떨어져 위치시킬 것인지를 나타낸다. position: static; (기본값) position 속성이 static인 요소는 HTML 문서 상 원래 있어야 하는 위치에 배치된다. 즉 HTML에서 작성된 순서 그대로 브라우저 화면에 표시된다는 것을 의미하며, 따라서 top, left, bottom, r..

Flex(플렉스)는 Flexible box, Flexbox라 부르기도 한다. 레이아웃 배치 전용 기능으로 고안되었고 기존 방식(float, inline-block)보다 훨씬 강력하고 편리한 기능이 많다. Flex 레이아웃을 만들기 위한 기본적인 HTML 구조는 다음과 같다. helloflex abc helloflex 부모요소인 div.container를 Flex Container라고 부르고, 자식요소인 div.item들을 Flex Item이라고 부른다. 컨테이너가 Flex의 영향을 받는 공간이고, 설정된 속성에 따라 각각의 아이템들이 설정된 형태로 배치되는 것이다. Flex의 속성들은 컨테이너에 적용하는 속성과 아이템을 적용하는 속성 두가지로 나뉜다. 1. Flex 컨테이너에 적용하는 속성 display..

트랜지션은 CSS 스타일 변경을 부드럽게 표현하기 위해 duration(지속시간)을 부여하여 속도를 조절한다. 애니메이션은 하나의 줄거리(@keyframes)를 구성하여 줄거리 내에서 세부 움직임을 시간 흐름 단위로 제어하여 요소의 움직임을 표현한다. 트랜스폼(Transform)은 요소에 이동(translate), 회전(rotate), 확대축소(scale), 비틀기(skew) 효과를 부여하기 위한 함수를 제공한다. 단 애니메이션 효과를 제공하지는 않기 때문에 정의된 프로퍼티가 바로 적용되어 화면에 표시된다. 트랜스폼은 애니메이션 효과를 위해 사용하여야 하는 것은 아니지만 애니메이션 효과를 부여할 필요가 있다면 트랜지션이나 애니메이션과 함께 사용한다. 1. 2D 트랜스폼 (2D Transform) 2D 트..

그레이디언트(Gradient)는 2가지 이상의 색상을 혼합하여 부드러운 색감의 배경 등을 생성하는 것이다. CSS3가 이 기능을 제공하기 이전에는 포토샵 등의 소프트웨어를 사용하여 그레이디언트 효과의 이미지를 제작하여 사용하였다. 그러나 이러한 방법은 이미지 다운로드에 시간이 소요되는 문제와 이미지를 확대하였을 때 해상도가 나빠지는 문제 등을 내포하고 있었다. 그레이디언트는 2가지 종류가 있다. 선형 그레이디언트 (Linear Gradient: goes down/up/left/right/diagonally) 방사형 그레이디언트 (Radial Gradient: defined by their center) 그레이디언트는 CSS3가 비교적 최근부터 제공하는 기술로서 대부분의 브라우저에 벤더프리픽스를 사용하여야..