웹 표준 퍼블리싱 바이블 책 정리(2)

가상선택자(익스플로러6에서는 :link, :visited, :hover, :active만 지원)

1)링크 가상 클래스

링크가 지정되어있다면 :link

해당 링크를 방문했다면 :visited

2)동적 가상 클래스

동작에 따른 변화를 렌더링하는 방법으로 클릭하는 경우 :active

마우스를 올릴경우 :hover

키보드의 tab키로 접근하는 경우 :focus

3)의사 요소 선택자(익스플로러 6, 7 에서는 지원안됨)

어떤 태그를 선택하는 경우 

그 태그의 시작지점(:before)이나 

끝 지점(:after)를 선택하거나 

첫 번째 자식태그(:first-child)

마지막 자식태그(:last-child)

첫번째 글자(:first-letter)

첫번째 라인(:first-line)

등 지정가능

-> 이미 원하는 태그를 선택하기 위해 클래스 명이나 아이디 명을 지정하지 않아도 아주 구체적으로 선택할 수 있는 다양한 방법이 예전부터 있었고 또 새롭게 추가되기도 한것

선택자의 우선순위(값이 클수록 우선순위가 높다)

-공통 선택자(*로 시작하는 선택자): 0

-태그 선택자: 1

-클래스 선택자: 10

-아이디 선택자: 100

**우선순위에 관계없이 적용되는 css

!important을 {}의 가장 마지막에 넣어주면 됨

서체에는 저작권이 있다

저작권에서 자유로운 서체는 많지 않으므로 주의해야 합니다

한글 서체중에는 네이버에서 지원하는 나눔서체가 있다

**각 브라우저마다 지원하는 폰트의 확장자가 다르다

익스플로러 6,7,8 .eot를 지원

익스플로러 9  .woff를 지원

크롬, 사파리, 파이어폭스, 오페라 등은 .ttf, .otf, .woff를 지원

무료로 구글 웹폰트 적용도 가능하다(익스플로러 9이상)

vertical-align(수직정렬 인라인 요소끼리의 위 아래 간격 맞출수 있음)

-baseline

-sub(부모태그의 아래첨자)

-super(부모태그의 윗첨자)

-top(부모태그의 상단)

-text-top(부모태그의 글꼴 요소의 상단)

-middle, bottom, text-bottom

**img태그고 블록태그안에 있을경우 공백이 있을경우 vertical-align:top으로 공백을 제거할 수 있다

글의 줄바꿈 

1)word-break

2)white-space - 줄바꿈 금지하거나 <pre>태그의 특성을 부여

-nowrap(줄바꿈 금지)

-pre(작성한 그대로 표현)

-pre-wrap(pre비슷하지만 지정한 영역을 넘어가지 않습니다)

-pre-line(pre-wrap과 비슷하지만 띄어쓰기 한 공백은 한칸만 표현됩니다)

목록(list) 스타일 - list-style-type으로 목록 타입 지정하기

목록에는 ul과 ol이 있습니다

비순차적인 <ul>은  앞에 disc, circle, square 형태로 블릿 표시가 생깁니다

순차적인 <ol>은 각 항목 별로 숫자가 붙는데, 알파벳이나 로마숫자로 변경할 수도 있음

<ul>태그관련

list-style-type:disc;

list-style-type:circle;

list-style-type:square;

<ol>태그관련

list-style-type:decimal;

list-style-type:decimal-leading-zero;

list-style-type:lower-roman;

list-style-type:upper-roman;

https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type

**블릿을 안쪽과 바깥쪽 표시

list-style-position:inside

list-style-position:outside

list-style-image 많이 안 쓴다

display속성은 css의 많은 속성중에서도 아주 중요

display 속성을 통해서 block과 inline을 지정할 수 있다

div:블락 span:인라인

서로가 인라인과 블락이 될수 있다

width속성은 블락요소에만 적용됨

display:none의 의미

해당 태그가 없었던 것으로 간주함

display:inline-block

게시판 하단의 페이징(1,2,3,4….) 부분을 꾸미는데 아주 유용합니다

인라인 요소는 크기를 가질수 없고,

블록요소는 텍스트 정렬이 적용되지 않습니다

display:list-item

display:table,table-caption, table-cell, table-column, table-column-group, table-footer-group, table-header-group, table-row, table-row-group 등 값 활용 가능

테이블 관련

visibility:hidden 은 보이지는 않지만 공간은 차지

display:none은 보이지도 않고 공간도 차지 하지 않음

background

배경에 관련된 여러가지 속성을 포함

background-color(색상)

background-image(이미지 경로)

background-repeat(이미지 반복)

background-attachment(이미지 고정)

background-postion(이미지의 위치)

-값은 기본으로 2가지를 작성합니다

이중에서 앞에 작성하는 값은 영역의 가로를 기준으로 작성하고 뒤에 지정하는 값은 세로를 기준으로 작성합니다

-값을 하나만 지정하는 경우, 숫자로 작성하면 그값은 가로기준이 됩니다.

이경우 세로 기준의 값은 중앙으로 설정되어 있습니다

그러나 값으로 상단이나, 하단을 지정하면, 이값은 세로 기준의 값이 되고 생략된 가로 값은 역시 좌우 중앙이 설정 됩니다

즉, 정리하면 background-position:top은 background-position:center top과 같고

backgorund-position:20px은 background-position:20px center와 같다

background:red 와 background-color:red는 서로 다른 표현

background와 background-color를 동시에 써야할경우

background를 먼저 쓰고 나중에 background-color를 써야함

opacity 투명하게 하는 효과

배경뿐아니라 글자에도 적용 태그전체에도 적용

background-size

한 태그에 여러개의 배경 이미지 적용하기

background:

url() no repeat  0 0,

url() no repeat  100% 0,

url() no repeat  0 100%,

url() no repeat  100% 100%,

url() no repeat  40px 40px;

background-clip

backgorund-orgin

min-height:100px;

_height:100px

_height와 같이 속성 앞에 _를 붙이면 익스플로러6에서만 적용되는 CSS를 말합니다

이런것을 Hack이라고 하는데 이렇듯 브라우저 호환성을 위해 불가피하게 핵을 지정하는 경우가 있습니다

max-height : 최대 높이 지정, min-width:최소 너비 지정, max-width : 최대 너비 지정

테두리의 모서리 둥글게 표현하기

-border-radius:10px; -> 네 방향 모두 10px의 둥근 모서리를 가집니다

-border-radius:10px 5px 0 8px; -> 좌측 상단부터 시계방향으로 적용됩니다

-타원형으로 만들기 

/이전은 모서리의 width(네개 모서리 지정가능) 

/이후는 모서리의 height지정(네개 모서리 지정가능)

margin:auto 는 margin을 활용한 중앙정렬

대신 width가 지정되어야 함

값을 표현하는 경우

%와 px로 지정하는 것은 큰 차이가 있다

%로 값을 지정하면 해당 영역의 %지점에 배경 이미지의 %지점이 위치하게 됩니다

그러나 px로 값을 지정하면 해당 영역의 px값 위치가 배경 이미지의 시작 지점이 된다는 점입니다