소상공인 감자네

CSS 속성 중 하나인 position 을 사용하다보면 요소들을 겹칠 수 있는 기술을 활용 할 수 있다.요소들이 겹치게 되면 요소의 순서가 중요한 상황이 생기게 되는데,그때 활용할 수 있는 속성이 바로 z-index 속성이다. 팝업창, 드롭다운, 고정된 헤더등 z-index 를 이용해 순서를 조정하는 것이다. 1. z-index 필요성우리가 만드는 웹페이지들은 기본적으로 가로축(X), 세로축(Y)이 존재하는 평면이다.하지만 CSS 속성인 position 을 사용하게 되면 요소들이 서로 겹칠 수 있는 상황이 생기고,그렇게 되면서 깊이(Z축)의 개념이 생겨나게 된다. 이 상황에서 어떤 요소가 위로 오고 아래로 갈지 결정해주는 것이 바로 z-index이다. z-index 의 값이 클수록 사용자가 보이는 쪽에 ..

웹페이지를 만들면 요소들의 색상이나 배경을 넣는 작업이 필요할 때가 있다.보통 요소들은 눈에 보이지않는 투명한 영역들을 가지고 있는데 그 배경을 꾸며 주는 CSS의 속성이 바로 background 이다. 배경 속성은 여러 개의 개별 속성으로 이루어져 있고, 우선 가장 많이 쓰이는 5가지를 알아보자. 1. background-color가장 흔하게 쓰이고 많이 쓰이는 기본 속성이다.요소의 뒷면에 원하는 색상을 채워 넣을 때 사용한다..background-color{ background-color: 색상값;} 색상값으로는 키워드, HEX(16진수), RGB/RGBA 를 이용해 작성을 할 수 있다. 키워드 : 미리 정의된 이름의 색을 지정한다. 예를 들어 red, blue, green 등 HEX(16진수) :..

웹페이지를 좀 더 다채롭게 꾸며주는 CSS.CSS에서 가장 기초가 되는 속성 중 하나인 Position 에 대해서 알아보자. Position은 웹페이지의 요소들을 원하는 위치에 정확하게 배치하고 싶을때 사용한다.마치 물건을 옴기듯이 요소를 이동하여 다른 요소와 겹치거나 혹은 화면의 특정 위치에 고정시킬 수도 있다. 그 중 가장 많이 사용되는 3가지 값들을 알아보자. 1. relative (상대적 위치)div { position : relative;} relative는 요소의 원래 위치를 기준으로 위치를 이동시키는 속성이다.이 속성을 사용하면 세부 속성인 top, bottom, left, right 들이 작동하기 시작한다.예를 들어div { position : relative; top : 30px;}..