List

• CSS Selector를 표기하는 방법중에 해당 태그의 첫 번째 순서인지, 마지막 순서인지, 홀수 or 짝수인지 알 수 있는 selector 표기법이 있다.

• selector는 tag, .class, #id 모두 가능하다.

li:last-child {
   padding-bottom: 0;
}

• 이렇게 selector에 순서를 표시하면, 해당 태그의 마지막 요소에만 css가 적용된다.

예시

/* 목록의 두 번째 <li> 선택 */
li:nth-child(2) {
  color: lime;
}

/* 임의의 그룹에서 네 번째에 위치하는 모든 요소 선택 */
:nth-child(4n) {
  color: lime;
}

li:nth-child(odd) {
  background: pink;
}
 
li:nth-child(even) {
  background: red;
}

• 키워드 값
  • odd
    형제 요소에서 홀수번째(1, 3, 5, ...)인 요소를 나타낸다.
  • even
    형제 요소에서 짝수번째(2, 4, 6, ...)인 요소를 나타낸다.

Table

• 테이블을 표현하기 위해서는 여러 태그들의 조합이 필요하다.
  • <table>, <thead>, <tbody>, <tr>, <th>, <td> 등

<tr>, <td>

• 테이블은 항상 <table> 태그로 감싸져 있다.
  • <table> 태그 내에 열도 만들고, 행도 만든다.
  • 한 행을 시작할 때는 <tr> 로 시작한다. tr은 table row의 줄임말이다.
  • 각각의 셀은 <tr> 태그 내에 <td> 태그를 사용한다. td는 table data의 줄임말이다.

 <table>
    <tr>
      <td>Row 1, column 1</td>
      <td>Row 1, column 2</td>
    </tr>
    <tr>
      <td>Row 2, column 1</td>
      <td>Row 2, column 2</td>
    </tr>
  </table>  

Row 1, column 1	Row 1, column 2
Row 2, column 1	Row 2, column 2

<th>

• 태그를 사용하면 테이블 열의 제목을 추가할 수 있다. th는 table heading의 줄임말입니다.
• 를 사용하면 가운데 정렬이 되고, 글씨 두께 또한 두꺼워진다.
• 물론 <td> 를 사용하여 css 로 글씨 디자인을 바꿀 수 있다.

  <table class="border-table">
    <tr>
      <th></th>
      <th>행1</th>
      <th>행2</th>
    </tr>
    <tr>
      <th>열1</th>
      <td>내용</td>
      <td>내용</td>
    </tr>
    <tr>
      <th>열2</th>
      <td>내용</td>
      <td>내용</td>
    </tr>
  </table>  

	행1	행2
열1	내용	내용
열2	내용	내용

Table 병합

• 병합은 <td> 나 <th> 태그에 colspan, rowspan 이라는 attribute를 추가해서 구현할 수 있다.
  - rowspan은 행 병합, colspan은 열을 병합한다.
  

<th> 태그 기본 속성 없애기

• <th> 태그에는 기본적으로 적용되어 있는 css 속성이 있다.

th {
  font-weight: normal;
  text-align: left;
}
    

• <th> 에는 기본적으로 text-align: center; 과 font-weight: bold; 가 설정되어 있기 때문에 <td> 태그와 같아지게 css를 설정하면 된다.

Input

• <textarea> : <input> 보다 더 긴 내용을 입력하고 싶을 때 사용

  input::placeholder {
  color: #bbb;
}

• attribute는 콜론 두개를 붙여서 selector을 만들어 줄 수 있다.

input[type="text"] {
  
}  

• input 세개 중에서 text 타입인 input만 스타일을 입히고 싶다면, 위와 같이 표현한다.

button:hover {
    cursor: pointer;
}  

• hover라는 표현은 마우스를 올렸다는 의미이다.
• cursor 프로퍼티에 pointer를 주면 손가락 모양으로 변한다.

value

• <textarea> 처럼 <input> 에도 미리 값을 세팅 해놓고 싶을 수가 있다. 그때는 value 라는 attribute를 사용한다.

<참고>

• https://developer.mozilla.org/ko/docs/Web/CSS/:nth-child