HTML/CSS

ul li 도형 겹치기

2022. 7. 16. 14:37

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에는 똑같은 모양을 구현하기 위해서 하나의 방법만 있는것이 아니고 여러가지를 사용할 수 있다. 정답은 없지만 효율적인것은 있다.

 

다양하게 익혀두면 언젠가 도움이 된다.