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

CSS(Cascading Style Sheets) 기본 스타일 시트 언어입니다. SASS(Syntactically Awesome StyleSheets) 보다 쉽게 CSS문법을 사용할 수 있게 해 주는 전처리기로 재활용성, 가독성을 높여 유지 보수를 쉽게 해줍니다. SASS에서는 .scss와 .sass 두 가지 확장자를 지원합니다. .sass 확장자에서는 CSS에서 사용하던 중괄호 {} 와 세미콜론 ; 을 사용하지 않습니다. // .sass $black: #000000; body color: $black .scss 확장자는 기존 CSS 작성 방식과 크게 다르지 않습니다. // .scss $black: #000000; body { color: $black; } .scss의 사용하기 위해서 먼저 디렉토리에서 ..

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