[210706 TIL - (4)] HTML & CSS
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, ...)인 요소를 나타낸다.
- odd
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를 사용한다.
<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>
<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 | 내용 | 내용 |
<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를 설정하면 된다.<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를 사용한다.
<참고>
Author And Source
이 문제에 관하여([210706 TIL - (4)] HTML & CSS), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@rimi0108/210706-TIL-HTML-CSS저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)