ul li 도형 겹치기
css를 이용해서 페이지 구성을 하다 보면 여러가지 상황에 직면하게 된다.
혼자 습작을 하는 경우라면 머리가 아프면 그만둬도 되지만 클라이언트 요구나 일적으로 css 디자인을 해야 할 경우는 반듯이 해결을 해야 한다.
오늘은 ul li로 도형 겹치는 방법을 알아보자 결과적으로 구현을 할 모양은 아래와 같다.
- 리스트 메뉴입니다
- 리스트 메뉴
- 리스트 마지막 메뉴
자 그럼 css를 단계적으로 풀어보자.
전체 css 코드이다.
.list { list-style:none;}
.list li {
text-align:center;
display:inline-block;
border-radius:30px;
padding:15px;
color:white;
font-weight:bold;
background:rgba(138,43,226,0.6);
}
.list li div {
opacity:1;
}
.list li:nth-child(2) {
margin:0 -20px;
}
설명이다.
ul.list { list-style:none; } // 리스트 기본 값인 앞에 dot이 표현되는거 제거
.list li {
display:inline-block; //인라인 블록으로 하면 세로로 정렬되던 기본값 ul이 한줄로 된다.
text-align:center; //li 안의 글자 가운데 정렬
border-radius:30px; //둥근 버튼 표현위해
padding:15px; //알맞은 패딩
color:white; // 글자색
font-weight:bold;
background:rgba(138,43,226,0.6); //보라색의 배경 제일 마지막 0.6 투명도를 조절해 준다 1은 불투명이다.
}
//참고로 투명하게 하기 위해서 background rgba 대신 opacity:0.6;을 줘도 된다.
하지만 이것의 문제점은 li의 모든 엘리먼트나 요소들이 0.6만큼의 투명해 진다. 즉 흐려진다.
여기엔 당연히 글자까지 흐려진다. 그러니 li의 배경만 불투명하게 주고 글자는 선명하게 정상적으로 나오게 할려면 background rgba를 쓰는것이 좋다.
- 리스트 메뉴입니다
- 리스트 메뉴
- 리스트 마지막 메뉴
nth-child(숫자)는 목록에서의 순서이다. 즉 두번째 순서에 좌우 마진을 -20px준다는 의미로 이것을 하게 되면 li가 비로소 겹치게 된다. 마이너스 마진을 주게되면 각 li 요소들이 겹치게 된다.
.list li:nth-child(2) {
margin:0 -20px;
}
css에는 똑같은 모양을 구현하기 위해서 하나의 방법만 있는것이 아니고 여러가지를 사용할 수 있다. 정답은 없지만 효율적인것은 있다.
다양하게 익혀두면 언젠가 도움이 된다.