" ✓ CSS3 기능 "
- 선택자 (selectors)
- 박스 모델 (Box Model)
- 배경 및 경계선 (Backgrounds and Borders)
- 텍스트 효과 (Text Effects)
- 2차원 및 3차원 변환 (2D/3D Transformations)
- 애니메이션 (Animations)
- 다중 컬럼 레이아웃 (Multiple Column Layout)
- 사용자 인터페이스 (User Interface)
" ✓ 외부 style 시트 "
- link를 통해 외부 css 파일을 연결한다 (type, rel, href 형식 지켜야 한다)
- css 파일 형식 : 선택자 { 속성 : 값; }
※ 선택자를 콤마로 분리하여 나열할 수 있다 (h1, h2, h3)
p { background-color : yello; }- html 파일에 link 형식
<head>
<link type="text/css" rel="stylesheet" href="css파일 url.css">
</head>" ✓ 내부 style 시트 "
- 형식 : 선택자 { 속성 : 값; }
※ 선택자를 콤마로 분리하여 나열할 수 있다 (h1, h2, h3)
<head>
<style>
p { background-color : yello; }
</style>
</head>
- 주석 : /* ... */
" ✓ 인라인 style 시트 "
- <태그이름 style="속성:값">
- 두가지 이상의 선언이 있는 경우 ;로 구별
<body>
<p style="color:red; background-color:blue;">빨간색 글씨 배경 파란색</p>
</body>" ✓ 우선순위 "
- 인라인 style 시트
- 내부 style 시트
- 외부 style 시트
- 웹 브라우저 디폴트 값
" ✓ 선택자 종류 "
- 타입 선택자 (type selector) : html의 태그 (h1)
- 전체 선택자 (universal selector) : *, 페이지 안의 모든 요소
- 클래스 선택자 (class selector) : .클래스명
- 아이디 선택자 (ID selector) : #아이디
- 속성 선택자 (attribute selector) : 특정한 속성 지닌 요소
- 의사 선택자 (prseudo-class) : 클래스가 정의된 것처럼 간주 (a:link, a:visited, a:hover)
- 자손 선택자 : 태그 태그자손 (내부 태그)
" ✓ 블록 요소 "
- 한줄을 다 차지
- <div>
- <p>
- <h1>
- <ul>
- <table>
- <pre>
- <form>
" ✓ 인라인 요소 "
- 블록요소 내 개별적으로 적용
- <a>
- <img>
- <strong>
- <em>
- <br>
- <input>
- <span>
" ✓ display 스타일 "
- 블록, 인라인 요소설정이 가능하다
- display:block : 블록 설정
- display:inline : 인라인 설정
- display:none : 없는것
- display:hidden : 감추기
" ✓ CSS 속성들 "
- background-color : 배경 색, ""
- color : 글자 색, "", #
- border : 두께 (solid 등 같이 특성지정 필요), "px"
- font-weight : 볼트체 설정, "bold"
- padding : 내부 여백, "px"
- font-style : 이탤릭체, "itelic"
- background-image : 배경 이미지, ""
- text-align : 텍스트 정렬, ""
- list-style : 리스트 스타일, ""
- margin : 외부 여백, "px"
- width : 가로폭 (px)
- height : 높이 (px)
- min-width : 요소의 최소 폭
- max-width : 요소의 최대 폭
- min-height : 요소의 최소 높이
- max-height : 요소의 최대 높이
- position : 위치 설정
- float : 좌,우 흐름 설정
- z-index : 스택 순서 지정 (숫자가 높으면 화면 맨 위, -1 : 다른요소 뒤에 위치)
- opacity : 투명도 조절, (1.0 ~ 0.0)
- visibility : 보이기 숨기기 조절 (hidden, visible)
- transition : 전환 시간설정
" ✓ color 색상 "
- - 이름 : "red"
- - 16진수 : #92C2D0
- - 10진수 : rgb(156,193,206)
- - 퍼센트로 표현 : rgb(100%, 0%, 0%)
" ✓ font 글씨체 "
- font-family : 글씨체
- font-size : 폰트 크기
- font-style : 스타일
- font-weight : 볼드체 여부
※ 웹폰트 : 따로 파일없이 폰트적용 가능
<style>
@font-face {
font-family: "Vera Serif Bold";
src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
}
body {
font-family: "Vera Serif Bold", serif
}
</style>>
- 폰트 크기
- pt : 포인트
- px : 픽셀
- % : 퍼센트
- em : 배수 (1.0em)
" ✓ text 글자특성 "
- directoin : 작성방향
- letter-spacing : 자간
- line-height : 줄의 높이
- text-align : 수평 정렬 (center, right, left, justify)
- text-decoration : 텍스트 장식(라인 위치) : (overline, line-through, underline)
- text-indent : 들여쓰기 지정
- text-shadow : 그림자 효과 지정 : (x y 흐림 색) (5px 5px 5px #FF000000)
- text-transform : 대소문자 변환 (uppercase, lowercase, capitalize)
- word-wrap : 긴단어 자동 개행 (break-word)
- column-count : 컬럼수
" ✓ border 테두리 "
- 문법 : border: 1px solid red;
- 선 스타일
- none : 없음
- dotted : 점선
- dashed : 긴 점선
- solid : 선
- double : 두줄
- groove
- ridge
- inset
- outset
- 두께 : px단위가 보편적
- 색상 : border-color 지정
- 둥근모서리 : border-radius 지정 (px)
- 그림자 : box-shadow 지정 (x y 흐림 색)
- 이미지 선 : border-image 지정 (url(이름.png) 30 30 round; )
" ✓ margin 외부 여백 "
- margin: 10px : 상하좌우 10px
- margin: 10px 20px 30px 40px : 상,하,좌,우 각각 지정
- margin-top : 상
- margin-bottom : 하
- margin-left : 좌
- margin-right : 우
※ padding 같은문법으로 사용
" ✓ background 배경 "
- background-color : 배경색
- background-image : 배경 이미지 (url'이미지 url.jpg')
- background-position : 배경 이미지 시작위치
- background-repeat : 배경 이미지 반복여부 (no-repeat)
- background-attachment : 이미지 고정, 스크롤 여부 설정 (fixed)
- background-size : 배경 이미지 크기 (가로px 세로px)
" ✓ a 링크 스타일 "
- a:link - 방문전 링크
- a:visited - 방문된 링크
- a:hover - 링크에 마우스 올림
- a:active - 링크에 마우스 클릭
" ✓ list 스타일 "
- list-style-image : 리스트 마커를 이미지로 지정
- list-style-position : 안쪽, 바깥쪽 설정
- list-style-type
- circle : 빈 원
- disc : 채운 원
- square : 채워진 네모
- upper-roman : I, II, III
- lower-alpha : a,b,c
※ display:inline : list를 수평으로 정렬
" ✓ table 스타일 "
- border-collapse : 이웃 셀 경계선 합침여부 (collapse, separate)
- width
- height
- table-align : 셀 정렬 설정
- border
- caption-side : caption 위치 설정 (top, bottom)
" ✓ position 위치 설정 "
- static : 정적 위치 (정상)
- absolute : 절대 위치 (겹치게 가능)
- relative : 상대 위치(정상 + 상대)
- fixed : 고정 위치 (화면에 고정)
" ✓ float 속성 "
- 다른 요소간의 위치설정
- left : 왼쪽에 위치, 다른요소들 오른쪽 위치
- right : 오른쪽에 위치, 다른요소들 왼쪽 위치
※ clear : both - float 속성을 중단시 사용
" ✓ transition 전환효과 "
- 위치 : 변하기 전 기본설정 내용에 transition을 추가한다
- width 5s : width 5초동안 변화
- height 5s : height 5초동안 변화
- border 5s : border 5초동안 변화
예시
<style>
p {
width: 100px;
height: 50px;
border: 1px solid black;
transition: width 5s height 5s border 5s;
}
p:hover {
width: 200px;
height: 100px;
border: 10px solid red;
}
</style>
" ✓ transform 속성 "
- translate(10px, 10px) : 평행이동
- rotate(45deg) : 회전
- scale(2, 1.2) : 크기변환
- skew(20deg, 10deg) : 비틀기 변환
- matrix() : 일반 변환
'인터넷프로그래밍' 카테고리의 다른 글
| 중간고사 핵심키워드 정리 (0) | 2020.10.14 |
|---|---|
| JavaScript 요약 (0) | 2020.10.05 |
| HTML 요약 (0) | 2020.10.05 |