[웹 프로그래밍] CSS 정리

Css정리

css 기본 내용

style 에트리뷰트

<td style="border: 1px solid gray;">hi</td>

태그에 style 에트리뷰트를 통해 서식을 지정할 때 사용한다.

글자체, 글자 색, 글자 크기, 배경 색, 여백 등 다양하게 지정이 가능하다.

2.에서 정리에서 보았듯 style태그로도 서식을 지정할 수 있다.

Css selector

style 태그 내용에서 서식을 적용할 태그를 지정하는 부분을 css실렉터라고 한다.

위에 예제에서 css실렉터는 td태그이다.

인라인 서식

태그에 직접 style 애트리뷰트 값으로 서식을 지정하는 것을 말한다.

인라인 서식의 경우 style 태그보다 우선순위가 높다.

css 우선순위

1. 인라인 서식
2. css 실렉터 자식태그중 가장 낮은 것
3. 부모 태그

:nth-child(n) selector

<style> td:nth-child(2){text-align:right;} </style>

css 실렉터 td 뒤에 붙어서 사용하면서 n번째 td태그에 모두 해당된다.

<tr> 
    <td>....</td> td:nth-child(1) 
    <td>....</td> td:nth-child(2) <!-- 적용! -->
    <td>....</td> td:nth-child(3) 
</tr> 
<tr> 
    <td>....</td> td:nth-child(1) 
    <td>....</td> td:nth-child(2) <!-- 적용! -->
    <td>....</td> td:nth-child(3) 
</tr>

:hover selector

마우스 포인터 바로 아래 태그가 있을때 서식을 지정한다.

css실렉터의 공백

<style>
    tbody tr{color:#ffffff}
</style>

위와 같은 경우 tbody아래에 모든 tr태그에 서식을 적용하라는 의미이다.

태그에 class 애트리뷰트와 css 실렉터

<style>span.green{font-size:9pt;color:green;}</style> 
의 서식은
<span class="green">1</span>
에서 적용된다.

div, a {}실렉터는 div와 a모두에 적용

div a{} 실렉터는 div아레 a에 적용

div.a{} 실렉터는 div에서 a class를 사용하는 태그에 적용

서식의 상속

모든 자식 태그에 동일한 서식은 부모태그에 정의하면 자식태그에 상속된다.

-> 모든 자식 태그에 동일하게 서식을 지정하고 싶은경우 부모 태그에 정의하면 자식태그에도 상속이 되어 모든 자식 태그에 서식을 지정할 수 있다.

다양한 css 서식

border

태그의 태두리를 설정하는 서식

width

태그의 가로폭

height

태그의 세로폭

text-align

text 정렬 left, right, center로 default 값은 left이다.

태그 사이 내용이 서식 방향 정렬

vertical-align

태그 내부 문자열을 수직 방향으로 정렬한다.

background-color

배경색 서식

color

태그 내용에 해당하는 글자 색 정의

font-weight

글자 굵기 조정 bold와 normal중 하나를 사용하고 default값은 normal

line-height

글자 줄 간격 지정

border-collapse

table 태그의 여백을 제거하는 서식

border-collapse가 collapse이면 태그 여백 제거

padding

태그 태두리와 내부 내용사이의 여백을 설정

margin

태그 태두리 바깥쪽에서 여백을 지정

margin의 left와 right가 auto이면 웹브라우저 창 가운데에 표시된다.

float

해당 서식을 부여받은 태그는 다른 태그들과 달리 같은 줄에 표시 되는 것이 아니라 left, right등 속성값 방향으로 치우쳐 따로 그려진다.

left, top

left와 top 서식에 좌표를 지정하여 x,y해당 좌표에 띄울 수 있다.

position

absolute값이 지정되면 해당 태그는 다른 태그들 위에 떠있는 듯이 그려진다.