[210706 TIL - (4)] HTML & CSS

10526 단어 TILCSShtmlCSS

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를 사용한다.

<참고>

좋은 웹페이지 즐겨찾기