css selector 표현방법
p.item vs p .item
- p.item (class가 item인 p 태그)
p.item {color : black;} - p .item (p 태그 안에 있는 class가 item인 태그)
자식 태그는 띄어쓰기로 구분한다.
p .item {color: black;}하나의 class에 여러값 넣기
<div class="main content">
</div>위에 코드 처럼 띄어쓰기로 구분하여 여러개의 값을 class에 부여할 수 있다.
같은 여러 선택자의 구분
selector:first-child // 첫번째 선택자
selector:last-child // 마지막 선택자
selector:nth-child(odd) // 홀수번째 선택자
selector:nth-child(even) // 짝수번째 선택자
selector:nth-child(3) // 3번째 선택자div에 있는 img 크기 조절
<div>
<img src="link">
</div>div {
width: 300px;
height: 300px;
}
img {
width: 100%
}div안에 있는 이미지의 크기는 div의 크기만큼 보인다.
div의 사이즈를 정해준뒤(width,height) img의 width값을 100%로하면
div의 가로사이즈 만큼 꽉채워 이미지 크기가 정해진다.
테이블
Table 기본형태
<table>
<tr>
<th></th>
<th>이름</th>
<th>나이</th>
</tr>
<tr>
<th>1</th>
<td>김코딩</td>
<td>20</td>
</tr>
<tr>
<th>2</th>
<td>위코드</td>
<td>10</td>
</tr>
</table>
이름 나이 1 김코딩 20 2 위코드 10
테이블은 table 태그 안에서 작성한다.
tr 태그는 테이블의 행을 정의해준다.
td 태그는 tr태그 안에서 데이터값을 정의해주고 열의 개수에 영향을 끼친다.
rowspan, colspan
td 태그의 속성중
rowspan 속성은 행끼리 병합(세로병합)
colspan 속성은 열끼리 병합(가로 병합) 이다.
<table>
<tr>
<td colspan="2">이름</td>
<td>나이</td>
</tr>
<tr>
<td></td>
<td>김코딩</td>
<td rowspan="2">20</td>
</tr>
<tr>
<td></td>
<td>위코드</td>
</tr>
</table>
이름 나이 김코딩 20 위코드
input 태그
input 태그의 속성
- text
- password
- number
- placeholder
- value
이외에도 많은 속성들이 있다.
위에 text input 상자를 보면 글자의 색이 다를 것이다.
<input type="text" placeholder="text input">
<input type="text" value="text input">
<input type="password" placeholder="password input">
<input type="number" placeholder="number input">
첫번째는 placeholder 속성 적용 >> 실제 입력된 텍스트가 아닌 도움말(디폴트값 회색)
두번째는 value 속성 적용 >> 실제로 입력된 텍스트
input 태그의 속성(attribute)를 선택자로 만드는 법
input::placeholder { color:black;}
input[type="text"] { color:black;}위의 코드처럼 속성을 선택자로 만들어 사용할 수 있다.
의사클래스
html 요소의 특별한 상태를 명시할때 사용
:hover
마우스 커서가 위치되었을때를 나타내는 의사 클래스
p { color: white;} // 글자색 : 하얀색
p:hover { color: black;} // 커서를 올리면 글자색이 검정색으로 적용