<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>
/* 초기 설정 */
*{ marign:0; padding:0; }
li{ list-style:none; }

ul{
  display:flex;
  flex-direction: column;
  justify-content: center; 
  align-item:center;
  padding:0 20%;
}

li{
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  
  background:#E4DCCF;
  color:#7D9D9C;
  margin:4px 0;
  height:40px;
}

/* 짝수번째 li 색 변경 홀수는 odd */
li:nth-child(even){
  background:#7D9D9C;
  color:#E4DCCF;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.