List

• ul태그는 머리말이 없는 리스트입니다. (unorderlist)
• ol태그는 머리말이 있는 리스트입니다. (orderlist)
  • list-style 속성을 통해 머리말을 바꿀 수 있습니다.

Selector 표기방법

selector:first-child {    /*첫번째 자식*/
}

selector:last-child {    /*마지막 자식*/
}

selector:nth-child(odd) {  /*홀수 자식*/
}

selector:nth-child(even) { /*짝수 자식*/
}

Assignment

위의 수업내용을 잘 따라 오셨나요? 아래 과제를 수행하기 위해서는 위의 내용을 잘 따라오셔야 합니다.

1. 이제 css property는 바꾸고 결과화면은 그대로 나오도록 수정하려고 합니다.
   • <li> 태그인 리스트 아이템에 padding-bottom: 10px; 는 삭제하고, padding-top: 10px; 으로 여백을 주세요.
   • (hint: 윗쪽으로 선이 튀어나오지 않으려면 li:first-child 필요)

li:first-child {
   padding-top: 0;
}

2. 홀수번째 목록은 글씨 색을 gray 으로 바꿔주세요.

li:nth-child(odd) {
  color: gray;
}

해당 문제가 브라우저에 따라서, 혹은 화면의 크기에 따라서 Replit 오류가 계속 발생하고 있습니다. 위의 그림과 모양이 같고 홀수번째 목록의 글씨 색이 gray 색으로 잘 나온다면 통과입니다.