CSS Basic Form & List & Table

폼 꾸미기<input[type=text]>

①폼 요소에 스타일 입히기

input[type="text"] {

  color: red;

  border: 2px solid skyblue;

  border-radius: 5px;

}

color : red;  // 입력 창에 입력되는 글자색을 red로 지정
border : 2px solid skyblue;  // 2px 두께의 skyblue색 실선 테두리
border-radius : 5px;  // 둥근 모서리

 

②입력창에 마우스 호버시 스타일 입히기 

input[type="text"]:hover {

  background: blue;

}

마우스가 입력창 위에 올라오면 배경색이 blue로 칠해짐

 

③입력창이 포커스를 받을 때 스타일 입히기

input[type="text"]:focus {

  font-size: 120%;

}

입력창이 포커스를 받을 때, 입력 창의 글자 크기를 120% 증가시킨다
※포커스는 키 입력에 대한 독점권을 뜻하며, 폼 요소 중 오직 하나 만이 포커스를 가진다. 

 

 

 

 

리스트 꾸미기

①마커의 위치

ul {

  list-style-position: outside;

}

outside // 디폴트 값. 마커는 아이템 바깥에 배치됨
inside // 마커는 아이템 안쪽에 배치됨

②마커 종류

ul {

  list-style-type: circle;

}

- 옵션
square, none, upper-roman, lower-alpha, decimal

③이미지 마커

ul {

  list-style-image: url("media/marker.png");

}

모든 아이템에 이미지 마커 적용

④리스트 단축 프로퍼티

ul {

  list-style: circle inside url("media/marker.png");

}

list-style-type, list-style-position, list-style-image 순
marker.png를 마커 이미지로 지정하고, 마커를 아이템 안쪽(inside)에 배치한다. 이미지가 없는 경우에는 circle타입의 마커를 사용한다.

 

 

 

표 꾸미기

①표 테두리 제어

table {

  border: 1px solid blue;

  border-collapse: collapse;

}

1px // x테두리 두께 1픽셀
solid // 실선. 점선은 dotted
blue //  파란색
border-collapse : collapse // 표 전체에 테두리를 주었기에, 이중으로 나타난 테두리를 합치기 위한 옵션

 

②셀 크기 제어

th {

  height: 40px;

  width: 100px;

}

td {

  height: 20px;

  width: 100px;

}

px단위로 직접 입력하는 것 말고도, 표나 셀의 크기를 %단위로 지정할 수도 있다. 100%를 주면 표를 브라우저의 폭과 같은 크기로 출력하게 된다.

 

③셀 여백 및 정렬

td {

  text-align: right;

}

left, center, right 등의 값으로 정렬 방식을 바꿀 수 있다.

④배경색 칠하기

thead {

  background: darkgray;

  color: yellow;

}

td,

tfoot th {

  border-bottom: 1px solid gray;

}

⑤줄무늬 만들기

행에 번갈아 배경색을 주어 줄무늬로 만들기

tr:nth-child(even) {

  background: blue;

}

짝수번째 행만 배경색이 blue가 된다.

 

tr:nth-child(odd) {

  background: red;

}

홀수 번째 행만 배경색이 red가 된다.

⑤마우스가 올라갈 때 행의 배경색이 변하는 표 만들기

tr:hover {

  background: pink;

}

모든 행에 대해 마우스가 올라갈 때 배경색을 pink로 변경 

tbody tr:hover {

  background: pink;

}

tbody에 속한 행에 마우스가 올라갈 때만 배경색을 pink로 변경