오늘도 CSS의 고급 활용에 더 밀접한 것들을 한번 더 해보려 합니다.

리스트

데이터를 나열해서 보여주고 목차나 매뉴를 작성할 때 하는 리스트를 css3로 꾸밀 수 있습니다.

배경

배경도 속성으로 바꿀 수 있습니다.

ul { 
    background : blue; 
}

li { 
    background : red; 
}

이렇게 하면 큰 영역에 파란색이 나오고, 각각의 리스트 항목에는 빨간색이 나옵니다.

아이템 마커가 li 태그의 색상안에 있고 싶다면,

ul { 
    background : blue; 
    list-style-position : inside 
}

list-style-position 속성을 inside로 설정하면 됩니다.

list-style-type 속성으로 마커의 종류도 바꿀 수 있습니다.

list-style-image 속성으로 마커에 이미지를 넣을 수도 있습니다.

표

표 테두리를 제어하려면 border 속성을 이용합니다.

table,td, th { 
    border : 1px solid black; 
}

위와 같이 작성하면 각각의 태그마다 블럭에 1px 검은줄이 생기므로, 전체적으로는 이중선이 생깁니다.

table,td, th { 
    border : 1px solid black; 
    border-collapse : collapse;
}

중복된 테두리를 제거할 수 있습니다.

셀들의 크기를 제어할 때는 width와 height 속성으로 폭과 높이를 조절합니다.

셀들의 여백 및 정렬을 지정할 때는 padding과 text-align로 조절합니다.

무늬 만들 때

표의 행에 번갈아 배경색을 주어 줄무늬를 만드려면 가상 클래스 셀렉터를 이용합니다.

짝수번의 표의 행을 지정하고 싶다면

:nth-child(even) 

홀수번의 표의 행을 지정하고 싶으면

:nth-child(odd)

이렇게 작성하면 됩니다.

폼

폼은 주로 input 태그에 스타일을 추가합니다.

input[type=text] { 
    color : blue; 
}

위와 같이 입력되는 글자의 스타일을 바꿀 수 있으며,

input[type=text] { 
    border : 5px solid blue; 
    border-radius : 10px; }

위와 같이 폼 테두리의 스타일도 바꿀 수 있습니다.

가상 클래스 셀렉터를 이용하여 :hover와 같이 마우스가 올라올 때 효과도 줄 수 있습니다.