■ CSS 속성
- 좌우배치
제목 | 속성 | 값 |
그림 등 | float | left(그림을 왼쪽에 배치) right(그림을 오른쪽에 배치) none(좌우배치와 삽입이 실행되지 않는다) |
배치 해제 | clear | left(왼쪽 요소에 대한 삽입 해제) |
- Display
제목 | 속성 | 값 |
출력형태 | display | block(줄 바꿈이 일어남) Inline(줄 바꿈이 일어나지 않음) none(보이지 않음) |
- 커서모양 변경
제목 | 속성 | 값 |
커서모양 | cursor | auto(자동) crosshair(십자형) default(표준-화살표) pointer(링크위에 있을 때 모양) move(이동 가능을 나타내는 모양) text(텍스트 선택용 모양) wait(처리중임을 나타내는 모양) help(도움말을 나타내는 모양) n-resize(크기 재설정 가능 : 위 방향) s-resize(크기 재설정 가능 : 아래 방향) w-resize(크기 재설정 가능 : 왼쪽 방향) e-resize(크기 재설정 가능 : 오른쪽 방향) ne-resize(크기 재설정 가능 : 오른쪽위 방향) nw-resize(크기 재설정 가능 : 왼쪽 위 방향) se_resize(크기 재설정 가능 : 오른쪽아래 방향) sw_resize(크기 재설정 가능 : 왼쪽 아래 방향) |
- 문단의 위치와 폭,높이 지정하기
제목 | 속성 | 값 |
위치지정속성 | position | static(자유로운 문단 배치에 사용할 수 없다 이동성이 없기 때문에 top,left속성을 적용할 수 없다) |
문단의 위치와 | top,left/bottom,right width,height | 값 |
| 예) .p1 {position:<x>absolute;top:150px;left:200px;width:500px;height:300px}</x> | ||
겹친 순서지정 | z-index | 수치(값이 클수록 위쪽에 위치) |
visible 여부 | visibility | visible(보임) hidden(보이지 않음) |
범위 벗어나는 | overflow | scroll(내용의 크기에 관계없이 항상 스크롤바가 나타난다) visible(범위를 벗어나는 내용을 보여준다) auto(자동조정) hidden(범위를 벗어나는 내용을 감춘다) |
절라서 출력 | clip | top(위에서 거리) right(왼쪽에서 거리) bottom(위쪽에서 거리) left(왼쪽에서 거리) |
- 여백결정 스타일시트
제목 | 속성 | 값 |
바깥여백지정 | margin-방향 margin ☞방향 top,right, bottom,left | 값 1개 지정 : 상하좌우 값 2개 지정 : 상하,좌우 값 3개 지정 : 상, 좌우, 하 값 4개 지정 : 상,우,하,좌 값 |
안쪽여백지정 | padding-방향 padding | 값 1개 지정 : 상하좌우 값 2개 지정 : 상하,좌우 값 3개 지정 : 상, 좌우, 하 값 4개 지정 : 상,우,하,좌 값 |
- 테두리를 꾸미는 스타일시트
제목 | 속성 | 값 |
테두리의 형태 | border-방향-style | none(테두리를 지정하지 않는다) |
테두리색상 | border-방향-color border-color | 색상 1개 지정 : 상하좌우 같은 색 2개 지정 : 상하,좌우 지정 3개 지정 : 상,좌우,하 지정 4개 지정 : 상,우,하,좌 지정 |
테두리 두깨 | border-방향-width border-width | 값 1개 지정 : 상하좌우 값 2개 지정 : 상하,좌우 값 3개 지정 : 상,좌우,하 값 4개 지정 : 상,우,하,좌 값 |
단축속성 | border border-방향 | border-width border-style border-color |
- 목록속성 설정
제목 | 속성 | 값 |
목록기호나 | list-style-type | none(지정하지않음) disc(검은원형) circle(원형) square(사각형) upper-alpha(대문자 알파벳) lower-alpha(소문자 알파벳) decimal(1부터 시작하는 10진수) upper-roman(대문자 로마자) lower-roman(소문자 로마자) |
그림으로 목록기호 | list-style-image | url(이미지파일) |
목록의 들여쓰기 | list-style-position | inside(들여쓰기) outside(내어쓰기) |
- 배경색상 배경그림
제목 | 속성 | 값 |
배경색상 | background-color | 색 |
배경이미지 | background-image | 이미지파일 |
배경그림 | background-repeat | repeat(배경그림이 가로세로 반복) |
배경그림 | background-position | 가로위치 세로위치 가로방향 : left,center,right,% 세로방향 : top,center,bottom,% |
| 예)body {background-image:no-repeat;background-position:70% 30%} body {background-image:no-repeat;background-position:right center} | ||
배경그림 | background-attachment | scroll(문서의 내용이 스크롤 되면 배경그림도 같이 스크롤된다) fixed(문서의 내용이 스크롤 되더라도 배경그림은 스크롤되지 않는다) |
- 글자제어
제목 | 속성 | 값 | 설명 |
글꼴지정 | font-family | 글꼴 | 글꼴을 지정할 때 여러 개의 글꼴지정(사용자의 컴퓨터에 해당 글꼴이 없을 수 있기 때문에) |
글자형태지정 | font-style | normal(정상글씨) | 글자형태 |
글자굵기지정 | font-weight | normal(400) bold(700) 100-900 | 글자굵기 지정 숫자가 클수록 두껍다 |
글자크기지정 | font-size | 크기 | 글자크기 |
글자색 | color | 색 | 글자색지정 |
- 문장과 문단을 제어
제목 | 속성 | 값 | 설명 |
자간 | letter-spacing | 간격 | 문자와 문자사이의 간격을 지정 |
단어간격 | word-spacing | 간격 | 단어와 단어사이의 간격지정 |
줄간격 | line-height | 간격 | 줄사이의 간격지정 |
공백과 줄바꿈 | white-space | normal(여러개의 공백이 하나의 공백) | |
좌우정렬 | text-align | left,center,right,justify(좌우정렬) | |
세로방향정렬 | vertical-align | top(위에 정렬) | |
글자에 선 긋기 | text-decoration | underline(텍스트에 밑줄을 긋는다) none(밑줄을 긋지 않는다) overline(텍스트위에 선을 긋는다) lline-throuth(텍스트 가운데 선을 긋는다) | |
■ 스타일시트의 기본
- 여러태그에 같은 스타일 지정하기
태그1,태그2,태그3 {property : value; property:value;...}
예)td,p,h1 {font-size:10pt;color:blue}
- 하위태그에 스타일 지정하기
b u {font-size:12pt; color:red}
- 클래스 이용하기
같은 태그라도 상황에 따라 각각 다른 스타일을 지정하고자 할 때 이용
[정의]
태그.class이름 {property:value;property:value;...}
[적용]
<태그 class="class이름">
- ID이용하기
id는 클래스와 비슷하지만 한 페이지에서 하나만 부여한다(JavaScript에서 제어)
[정의]
#id이름 {property:value;property:value;..}
[적용]
<태그 id="id이름">
■ 스타일시트를 사용하는 방법
- 문서 내부에 정의하기(Embedded Style)
h1 {font-size:80;color:red}
h2 {color:blue}
- 태그에 직접 정의하기(Inline Style)
- 외부 문서에서 연결하기(Linked Style)
mystyle.css란 스타일시트문서를 만든다.
- 스타일시트에서 사용하는 단위
구분 | 단위 | 설명 |
절대단위 | in | 인치(1인치=2.54cm) |
cm | 센티미터 | |
mm | 미리미터 | |
pt | 포인트(1포인트 = 1/72인치) | |
pc | 파이카(1파이카 = 12포인트) | |
상대단위 | % | 기준이 되는 크기에 대한 비율 |
px | 1픽셀을 1로하는 단위(화면의 해상도에 따라 상대적임) | |
ex | 그 범위에서 유효한 폰트의 소문자 x높이를 1로하는 단위 | |
em | 그 범위에서 유효한 폰트의 높이를 1로하는 단위 |
댓글 없음:
댓글 쓰기