목록css (4)
coding etude
1. margin이란? 정의된 테두리의 외부 여백을 설정에 사용. 2. 설정 방법 px, pt, cm, % , auto, inherit 등으로 설정 가능. 상하좌우 모두 설정이 가능하고, 값의 수에 따라 지정 방향이 결정 된다. margin: 10px (상하좌우) margin: 10px, 20px (상하, 좌우) margin: 5px 10px 5px 12px (상, 우 ,하, 좌) // 위쪽으로 부터 시계방향!! 또는, margin-top, margin-right, margin-bottom, margin-left 를 사용하여 개별적으로 지정해줄 수 있다. 3. auto & 0 margin의 값을 0으로 한다면 외부의 여백을 0으로 지정하는것. auto는 브라우져가 값을 자동으로 계산하여 지정하는 것으로 ..
1. background-color 배경의 생상을 정의 할 수 있다. 기본적으로 제공되는 색상을 사용하거나 헥사코트(ex. #000000 ) 또는 RGB or RGBA 를 사용하여 생상 및 opacity값을 수정 할 수있다. div { background-color: #fff; // 동일한 코드가 6개라면 3개로 축약 할 수 있다. } div { background-color: rgb(125, 125, 125); } div { background-color: red; //다양한 기본 값이 존재한다. } // rgba를 사용하영 opacity 제어 div { background-color: black; opacity: .6; } div{ background-color: rgba(0, 0, 0, .6); }..
우선 리스트의 구조는 메인 메뉴 리스트에 각 메뉴의 서브 메뉴가 들어있는 구조로 진행 하려고 한다. 우선 HTML을 살펴보자 메인1 //여기서 부터 서브메뉴 서브1 서브2 서브3 뭐 요딴 구조로 되어 있다고 가정을 해보자. 그럼 저 메인1을 :hover 했을 때 아래 서브메뉴가 뿅 하고 나오게 하는것이 주기능이다. 1. 우선 메인 메뉴가 하나가 아니라 하나 이상일 경우 가로 or 세로로 정렬을 해주는것이 보기도 사용하기도 편할 것이다. .main { display:flex; flex-direction: row } 요렇게 하면 main에 속해있는 들이 가로로 정렬을 한다. 2. 메인 메뉴와 서브메뉴를 동일 선상으로 정렬한다. 간단하게 말해서 메인메뉴 아래 쪽으로 서브 메뉴의 위치를 고정하는것이다. .mai..
