html에 이어 css 스타일 시트의 속성을 정리해 보려고 한다.
<css 선언>
- 내부 스타일 시트 선언 : <head>의 <style>태그에서 선언
ex) <style type = "text/css">
- 외부 스타일 시트 선언 : <head>에서 <link>태그를 이용
ex) <link rel = "stylesheet" type = "text.css" href = "파일이름.css"/>
-인라인 삽입 : 모든 태그에 style 속성을 지정하여 삽입 가능 (해당 태그에 특정 스타일 적용 시 사용)
<css 속성 선언>
- 기본 문법 : 선택자 { 속성: 값; ...}
> 선택자(selector) : css 적용 대상 태그
> 속성, 속성 값 : ':' 으로 속성, 속성값 구분, ';' 으로 속성 선언 구분
<css 선택자>
1. 태그 선택자
- 다중 태그는 ' , '로 구분
- 태그 나열 -> 태그 중첩
- 다중 속성은 ' ; '로 구분
- 다중 속성값은 ' , '로 나열 (순서대로 나열)
2. ID 선택자 - <태그 id = " ">...</태그>
- 각 태그당 아이디는 고유.
- '#아이디이름' 으로 해당 아이디 태그 선택 후 css 속성 지정
ex) 태그 id 가 blue일 경우 --> #blue { color:blue}
3. calss 선택자 - <태그 class = " " > ... </태그>
여러 개의 태그에 중복하여 클래스 이름 부여.
- '.클래스이름' 으로 해당 복수개의 태그에 css 속성 지정
ex) 클래스 이름이 blue일 경우 --> .blue { color: blue}
- 태그 안에서 클래스 이름에 해당하는 태그 선택의 경우 : '태그.클래스이름' 으로 지정
<그룹 지정> - 그룹핑 태그 내에 style 지정으로 css 적용
- <div> : 줄 단위의 블록 지정
- <span> : 글자 단위의 인라인 그룹핑 태그
<가상 클래스(pseudo class) 선택자>
1. 하이퍼링크 관련 가상 클래스
- :link : 하이퍼링크 요소를 선택한다
- :visitied : 사용자가 방문한 링크를 선택한다.
2. 마우스 관련 가상 클래스
- :active : 마우스로 클릭한 요소를 선택한다.
- :hover : 마우스 커서가 위치한 요소를 선택한다.
- :focus : 포커스를 가진 요소 선택
3. 콘텐츠 삽입 관련 가상 클래스
- :before : 선택 요소 앞에 지정한 콘텐츠 삽입 (content 속성으로 콘텐츠 지정)
- :after : 선택 요소 뒤에 지정한 콘텐츠 삽입 ( " )
<폰트 지정>
- font-family : 글꼴 지정 (글꼴 이름 값)
- font-size : 글자 크기 (길이 값(pt, px) or 영문표시)--- ex) small, large, medium...
- font-weight : 글자 굵기 (수치 값 or 영문 표시)--- ex) bolder, normal, lighter...
- font-style : 글자 모양 변환 (normal, italic, oblique(기울임))
- font-variant : 소문자 표기법 (normal, small-caps(작은 크기 대문자))
<text 지정>
- text-align : 문장 정렬 (left, right, center, justify)
- letter-spacing : 문자 사이 간격 (길이 값 or 백분율)
- word-spacing : 단어 사이 간격 ( " )
- vertical-align : 문장 세로 정렬 (baseline, sub, super, text-top, text-bottom, top, bottom)
- line-height : 문장 사이 줄 간격 (normal, 길이 값 or 백분율)
- text-indent : 들여쓰기, 내어쓰기 (길이 값 or 백분율)
- text-decoration : 문장 장식 효과
> none : 기본 값
> underline : 밑줄
> overline : 글자 위에 선
> line-throughout : 글자 중간에 선
> blink : 글자 반짝임
- text-trasform : 영어 대소문자 변경
> capitalize : 문장 첫 글자만 대문자
> uppercase : 모두 대문자
> lowercase : 모두 소문자
- text-shadow (x offset y offset blur-size color) : 문자에 그림자 (속성 값 4개, 생략 가능)
*문자 관련 단위 값
길이 값 : cm, mm, in
글자 단위 : pc, pt (1pc = 12pt)
대문자 높이 : em (약 12pt, 16px)
소문자 높이 : ex (em의 절반 정도)
화면 : px
백분율 : % (기준 글꼴에 대한 퍼센트, 전체 공간 대비 비율)
*색상 값 표현
1) 16진수 리터럴 표현 : ex) red : #FF0000
2) 10진수 함수 표현 : rgb(R, G, B) --- ex) red : rgb(255,0,0)
3) 백분율 함수 표현 : rgb(R%, G%, B%)
4) 키워드 표현 : 색상 이름
<배경 관련 속성>
- background-color : 배경색
- background-image : 배경 이미지 파일 (URL)
- background-repeat : 배경 이미지의 반복 사용
> repeat : 디폴트 값
> repeat-x : 가로 반복
> repeat-y : 세로 반복
> no-repeat : 반복 x
> space : 사각형 틀로 반복
> round :원형 틀로 반복
- background-attachment : 스크롤에 따라 이동 or 고정 (scroll, fixed)
- background-position : 배경의 가로, 세로의 시작 위치(길이 값, 백분율 or 키워드) --- ex) left, center, right, top, bottom
- background : 배경 속성 한번에 지정
<목록 스타일>
- list-style-type 속성
1) 순서 없는 목록 (ul)에 사용 시
> disc : ●
> circle : ○
> square : ■
2) 순서 있는 목록 (ol)에 사용 시
> decimal : 숫자 표현
> lower-roman : 로마 숫자 표기 (소)
> upper-roman : 로마 숫자 표기 (대)
> lower-alpha : 영어 (소)
> upper-alpha : 영어 (대)
- list-style-image 속성 : 글머리 기호에 이미지를 사용 (URL)
- list-style-position 속성 : 글머리 기호의 위치 지정 (outside(기본 값), inside)
<표 스타일>
- table-layout 속성 : 표 or 셀 폭 지정
> auto : 기본 값. (셀 간 크기 다름)
> fixed : 고정 , width 속성(표나 셀의 가로 길이) 지정 시 사용 가능 (셀의 가로 크기 동일)
- border-spacing 속성 : 셀들간 간격 (테두리 굵기)
- border-collapse 속성 : 테두리 분리 (collapse(기본 값), separate)
- empty-cells 속성 : 빈 셀 테두리 표시 유무 (show(기본 값), hide, initial)
- caption-side 속성 : 캡션 위치 지정 (top(기본 값), bottom)
'컴퓨터 > HTML,CSS,JS,JQUERY' 카테고리의 다른 글
| [html,css] <form> 요소 정리 (0) | 2021.07.05 |
|---|---|
| [내가 보려고 만든] css 속성 정리 2 (0) | 2021.07.05 |
| [내가 보려고 만든] html 요소 2 (0) | 2021.07.05 |
| [내가 보려고 만든] html 요소 정리 (0) | 2021.07.05 |
| html을 이용한 예약 페이지 만들기-<form> (0) | 2021.07.05 |