코딩/HTML & CSS & JavaScript
CSS 요소
ADWELL
2022. 6. 26. 21:57
| 사용예 | 기타 | |
| CSS파일 링크 | <link href="파일명" rel="stylesheet"> | href : 파일주소 or 경로 rel : 관계 |
| 클래스 | .classname {...} | 우선순위 : ID > class > 요소 |
| ID | #idname {...} | |
| 링크 | a[href*="포함문자열"] {...} | |
| 이미지 | img[src*="포함문자열"] {...} | |
| 커서가 올려지면 동작 | 요소:hover {...} | 우선순위 : link > visited > hover > active |
| 클릭시 동작 | 요소:focus {...} | |
| 방문한 적이 있는 링크 클릭시 동작 | 요소:visited {...} | |
| 클릭중에 동작 | 요소:active {...} | |
| (선택, 클릭, 입력 등의)비활성화 | text:disabled {...} | |
| 자손결합자 | .상위클래스명 하위요소 {...} 상위요소 하위요소 {...} |
|
| 글꼴 | font-family : Georgia; | |
| 웹 글꼴 | @font-face { font-family: '나의 폰트명'; url('폰트경로.woff2') format('woff2'), url('폰트경로.woff') format('woff'), url('폰트경로.ttf') format('truetype'); } |
OTP : 오픈타입 글꼴 TTP : 트루타입 글꼴 WOFF : 웹 오픈 글꼴 형식 WOFF2 : 웹 오픈 글꼴 형식2 |
| 글꼴 스타일 | font-style : italic; | |
| 글자사이즈 | font-size: 20px; font-size: 2em; font-size: 2rem; |
em : 부모요소 글꼴크기 rem : html 글꼴크기 |
| 글자 두께 | font-weight: bold; font-weight: 500; |
bold : 굵은 글꼴 normal : 일반 글꼴 lighter : 상위 요소보다 가벼운 글꼴 bolder : 상위 요소보다 두꺼운 글꼴 |
| 텍스트 변환 | text-transform: uppercase; | |
| 텍스트 라인 | text-decoration: underline; | 밑줄 색상 스타일(dotted, wavy etc) |
| 수평정렬 | font-align: right; text-align: center; |
left, center, right, justify : 부모요소의 오른쪽과 왼쪽에 정렬하기 위해 텍스트에 공백을 둠 |
| 수직정렬 | line-height:박스높이px; | |
| 텍스트 그림자 | text-shadow: 2px 2px 0 red; | text-shadow: 오른쪽 아래 흐림정도 색상; |
| 문자간격 | letter-spacing: 2px; | |
| 단어 간격 | word-spacing: 0.3em; | |
| 라인 높이 | line-height: 1.4 | |
| 글자색 및 배경색 | color: red; background-color: blue; |
|
| 불투명 | opacity: 0.5; | 0(투명) ~ 1(불투명)사이 |
| 배경이미지 | background-image: url("이미지명"); background-repeat: no-repeat; background-position: center; background-size: cover; |
배경이미지 지정 배경이미지 반복표시 배경이미지 배치스타일 배경이미지 크기 |
| 스타일 재정의 | p { color: blue !important; } .main p { color: red; } |
.main p 의 스타일은 무시되고, p 요소 전체의 글자색이 파란색으로 적용됨. |
| 가로 세로 크기지정 | width: 200px; width: 50%; height: 300px; |
% : 상위요소 크기기준 |
| 테두리 | border: 3px solid black; | 테두리: 두께 스타일 색깔 두께 : 픽셀 or thin, medium, thick 스타일: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset |
| 테두리 모서리 | border-radius: 15px; | 픽셀 or 퍼센트 |
| 패딩(text와 border 사이 간격) | padding: 1px; padding: 1px 2px; padding: 1px 2px 3px; padding: 1px 2px 3px 4px; padding-top: 1px; padding-right: 1px; padding-bottom: 1px; padding-left: 1px; |
전체 위아래 - 좌우 위 - 우 - 아래 (시계방향) 위 - 우 - 아래 - 좌 (시계방향) 위 우 아래 좌 |
| 마진 (border 바깥의 여백) | margin: 1px; margin: 0 auto; |
패딩과 같은 패턴으로 사용가능 auto는 중앙정렬 ※ 위아래 인접한 요소의 여백은, 여백이 합산되지 않고, 큰 쪽 여백만 적용됨. 좌우 여백은 합산됨. |
| 최소 최대 너비 | min-width: 300px; max-width: 800px; |
|
| 최소 최대 높이 | min-height: 300px; max-height: 800px; |
|
| 오버플로우 | overflow: scroll; | hidden : 오버플로되는 컨텐츠를 숨김 scroll : 스크롤을 생성함 visible(기본값) : 오버플로되는 컨텐츠를 요소 외부에 표시함. |
| 시계(視界) | visibility: hidden; (데이터 숨김, 공간은 표시) | hidden, visible, collapse display: none; 은 완전삭제 |
| border-box | * { box-sizing: border-box; } |
상자가 지정된 크기로 고정되어, border나 padding의 크기는 상자 내부로 포함됨. |
| 상대 위치 | position: relative; top: 50px; (기본위치에서 50px 아래로 이동) |
top : 위에서 아래로 이동 bottom : 아래에서 위로 이동 right : 오른쪽에서 왼쪽으로 이동 left : 왼쪽에서 오른쪽으로 이동 |
| 절대 위치 | position: absolute; top: 500px; (페이지 상단에서 500px 아래로 이동) |
스크롤시 움직이지 않음. |
| 고정 위치 | position: fixed; top: 0px; (페이지 상단에서 0px 아래로 이동) |
|
| sticky 위치 | position: sticky; top: 250px; (페이지 상단에서 250px 아래로 이동) |
스크롤시 지정된 위치에 도달하면 멈춤. |
| z - 인덱스 (우선순위) | z-index: 10; | 숫자가 높을수록 우선순위가 높음. |
| 디스플레이 | display: inline; | 요소가 왼쪽에서 오른쪽으로 같은 라인에 순차적으로 표시됨. (기본값임) ex) <strong>, <em>, <a> 등 width, height 조절 불가 |
| display: block; | 요소를 블록화하여 표시함. ex) <div>, <h1>~<h6>, <nav> 등 width, height 조절가능 |
|
| display: inline-block; | 요소를 블록화하여 같은 줄에 순차적으로 표시할 수 있음. width, height 조절가능 |
|
| 이동경로스타일 | .classname { display: inline; } .classname li+li::before { content: ">"; } |
list1 > list2 > list3 > ... |
| float | float: right; | right : 요소를 최대한 오른쪽으로 붙임. left : 요소를 최대한 왼쪽으로 붙임. |
| clear | clear: left; | right : 오른쪽에 다른 요소가 없음. left : 왼쪽에 다른 요소가 없음. both : 양쪽에 다른 요소가 없음. none : 양쪽에 다른 요소가 있을 수 있음. |
| 16진수 색상 | #000000 #FFFFFF |
블랙 화이트 |
| 10진수 색상 | rgb(23, 45, 23) | 0~255 rgb(빨강, 녹색, 파랑) |
| 색조, 채도, 밝기 (hue, saturation, lightness) |
hsl(120, 60%, 70%) | |
| 불투명도(alpha) | hsla(34, 100%, 50%, 0.1) rgba( 23, 45, 23, 0.5) |
0(투명) ~1(불투명) |
| 뷰포트 메타 태그 | <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| 미디어쿼리 | @media only screen and (max-width: 480px) { ... } | 범위: max-width, min-width |
| 인치당 도트 수 (DPI) | @media only screen and (min-resolution: 300dpi) { ... } | min-resolution max-resolution |
| 조건 연산자 | @media only screen and 조건 and 조건 { ... } @media only screen and 조건, 조건 { ... } |
and 연산자 : and or 연산자 : , |
| 방향 미디어 | orientation: portrait orientation: landscape |
portrait : 세로 화면 landscape : 가로 화면 |
| 반응시간 | transition: all 0.4s; | |
| 글 색깔, 모양 초기화 | color: inherit; text-decoration: none; |
|
| 특정 행 적용 | 요소명:nth-child(1) { ... } | even: 홀수줄 odd: 짝수줄 |