부모와 자식 관계, 젠코딩

부모와 자식 관계의 태그를 만드는 손쉬운 방법 젠코딩이라고 한다.
div>section
->

div>section+nav
->

개수를 늘리고싶으면 간단한 수식을 사용하면 된다.
div>section*5
->

형제 관계에 있는 태그는 +를 사용하면 된다. table태그를 인용하면
table>thead+tbody
->

안에 있는 내용은 {}로 속성은[]로 표현한다.
table[border="1"]>(thead>tr>th{no. $}10)+(tbody>tr>td{no. $}10)
->

no.1	no.2	no.3	no.4	no.5	no.6	no.7	no.8	no.9	no.10
no. 1	no. 2	no. 3	no. 4	no. 5	no. 6	no. 7	no. 8	no. 9	no. 10

젠코딩은 css에도 동일하게 적용되는데 만약에
수많은 a태그들중에서 nav태그의 자식인 a태그에게만 효과를 적용시키고 싶다면
nav>a {~
}
이렇게 사용하면 된다.

이것을 이용해서 각각의 크기와 색상이 다른 링크 버튼 3개를 만들면
div>a[href="http://www.naver.com"]{네이버}
nav>a[href="http://www.google.com"]{구글}
section>a[href="http://www.daum.net"]{다음}

display와 text-align

내가 만약 text-align을 이용해서

를 웹의 가운데에 정렬하고 싶다.

그렇다면 text-align이라는 css속성을 사용하면 되는데
이 text-align은 대상의 엘리먼트 그 자체를 이동시키는것이 아니라 그것의 텍스트를 정렬한다.
그 의미는 위의 코딩 화면에서 바로 a태그에게 text-align:center;를 적용한다고 해도 "네이버"는 가운데로 정렬되지 않을것이다.
이유는 a태그의 display 속성이 inline이기 때문이다.
이는 text와 같은 속성이며 높이와 폭은 가능한 최솟값을 가진다. 텍스트와 크기가 같은 박스안에서 가운데로 옮긴다는 것은 불가능하다. 곧 그 텍스트가 그 엘리먼트의 전체이자 가운데이기 때문이다.

따라서 a의 기본 display속성을 block으로 만든 후에 text-align:center;를 적용하면 네이버가 가운데로 오게 된다.

css:hover

hover는 마우스를 요소 위에 올렸을 때에 적용되는 스타일을 정의한다.