flex란? 일반적인 웹페이지의 레이아웃을 구성하기 위해서는 display, float, position등을 사용하여 레이아웃을 구축해 왔지만 이와 같은 속성을 사용하면 구현 방법이 복잡하고 레이아웃을 표현하는 데 한계에 부딪히곤 했습니다. 이런 문제점을 해결하기 위해 flex가 나타난 것이며 사용 방법은 display: flex;로 해당 요소에 flex를 지정하면 됩니다. 부모 요소에 display: flex; 를 설정하게 되면 그 부모 요소는 플렉스 컨테이너가 되고 자식 요소는 플렉스 아이템으로 인식하게 되므로 flexbox 레이아웃 모듈을 구성할 때는 콘텐츠(플렉스 항목)를 감싸는 부모 요소에 이 속성을 지정해야 합니다. justify-content flex요소들을 가로 선에서 정렬 flex-sta..

CSS animation, @keyframes 을 활용해 위아래로 움직이는 것처럼 보이는 이미지를 만들어보겠습니다. 저는 font awesome의 무료 아이콘을 사용했고 정적인 이미지 파일인 jpg, png 등이나 다른 태그 요소를 활용해도 무관합니다. 아이콘은 아래 링크에서 확인하실 수 있습니다. fontawesome.com Font Awesome The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options. fontawesome.com 먼저 원하는 태그에 class를 생성해줍니다(저는 class명을 icon으로 주었고 뒤에 fas fa-bomb은 아이콘을 불러오기..

z-index란? 객체를 원하는 순서대로 배치할 수 있는 기능으로 몇 가지 특성을 가집니다. position 속성이 relatuve 거나 absolute 일 때 동작합니다. 기본값은 auto이며 음수, 양수의 숫자를 사용할 수 있습니다. z-index 의 값인 숫자가 높을 수록 가장 상단(보이는 화면에서 가깝게)에 배치되며 낮을 수록(보이는 화면에서 멀게) 배치됩니다. z-index는 같은 선상에 있는 태그값부터 확인하지만 부모 태그의 z-index가 우선이기 때문에 자식 태그가 z-index 숫자가 크더라도 부모 태그의 값을 우선시합니다. 활용 예제를 알아보기 위해 아래와 같이 3개의 div 에 style 을 부여했습니다. 이 중 두번째, div_2 를 가장 앞으로 나오게 하고 싶을 때 z-index ..

position 이란? 요소의 배치를 지정할 때 사용하는 속성으로 static, relative, absolute, fixed 대표적으로 4가지가 주로 사용됩니다. static 기본값(default)으로 position을 따로 설정하지 않을 때 갖는 설정값으로 상단, 왼쪽으로 배치됩니다. top, right, bottom, left 와 같은 속성을 사용할 수 없습니다. relative static(기본값)의 값을 기준으로 위치를 잡습니다. 아래와 같은 속성값을 3개의 div 에 정의하고 div_3 클래스에만 left 속성을 부여하겠습니다. left 속성을 부여했지만 다른 점이 없는 이유는 position 속성이 부여되지 않아 기본값인 static 으로 설정 돼 left값을 사용할 수 없던 것입니다. 아래..