[CSS] 색상 / 텍스트 / 목록 / 표 스타일 지정

색상 스타일

∙ 형식 div { color : ___; }

∙ 사용

     color : 글자색

    background-color : 배경색

    border-color : 테두리 색

1. 이미 지정된 색상 이름 사용

예) red, violet

 

2. 색상 코드 사용

- 16진수 색상 코드 #ff0000

예) #RRGGBB

 

3. RGB코드 사용

rgb(000,000,000) / rgba(000,000,000,000)

- 지정된 이름 사용 div { color : 색 이름; } 

(a : 투명도 값 추가 0~1/ 반투명 0.5/0에 가까울수록 투명)

 

4. hsl(a) 사용

: h색상 s채도 l명도 a불투명도를 순서대로 %로 표시

 

5. 그레이디언트 사용 (그라데이션)

background: linear-gradient(방향/각도 , 색상1, 색상2) ;

- 방향 생략시) 위에서 아래방향으로 진행

- 방향사용시 : to top, to bottom

- 각도사용시 : 70deg

 

---

텍스트 스타일

1. text-indent 들여쓰기

- <length> 고정된 길이로 들여쓰기

- <percentage> 텍스트 블록 전체 폭에 대한 비율로 들여쓰기

 

2. text-align 정렬

- left 왼쪽 정렬 / right 오른쪽 정렬

- center 중앙 정렬 / justify 양쪽 정렬

- start 현재 텍스트의 시작 위치에 맞춰 정렬 / end 현재 텍스트 끝 위치

- match-parent 부모 요소를 따라 정렬

 

3. text-decoration 텍스트 줄 꾸미기

- none / underline 밑줄 / overline 윗줄(글자위에 선) / line-throuth 중간 줄(취소선)

 

4. line-height 줄간격 조정

- 예) 줄간격 24px인 경우

p{ font-size: 12px; line-height: 24px; }

p{ font-size: 12px; line-height: 2.0; }

p{ font-size: 12px; line-height: 200%; }

 

5. text-shadow 텍스트에 그림자 효과

- text-shadow: none / 가로 거리 / 세로 거리 / 번짐 정도 / 색상

- 가로, 세로 거리는 필수속성 (양수=오른쪽, 위 / 음수=왼쪽, 아래)

- 번짐 정도: 양수= 모든 방향으로 퍼져나감 / 음수=모든 방향으로 축소 (기본 0)

 

6. text-transform 텍스트의 대소문자 변환

- text-transform: capitalize 첫 번째 글자를 대문자로

- uppercase 모든 글자를 대문자로 / lowercase 모든 글자를 소문자로

- full-width 가능한 한 모든 문자를 전각 문자로

 

7. letter-spacing : px, em, % 글자와 글자 사이의 간격 조정

word-spacing: px, em, % 문자와 문자 사이의 간격 조정

 

8. 텍스트가 범위를 넘어가는 경우 설정

: 보통 text-overflow, white-space, overflow 를 한 세트로 지정

1. text-overflow : 텍스트가 범위를 넘어가는 경우

-ellipsis:  ...으로 대체

2. white-space :  범위를 넘어간 텍스트의 처리

 -nowrap : 한줄로 처리

3. overflow : 넘어간 요소의 처리

-hidden : 숨김

-scroll : 스크롤 생성

-auto : 스트롤 오토 생성

예) 범위를 넘어가는 경우 텍스트를 ...으로 처리
p {           
text-overflow: ellipsis;           
white-space: nowrap;           
overflow: hidden;        }

 

---

 

목록 스타일

1. list-style-type

<ol>, <ul> 의 <li> 목록 모양, 번호 넣기

- none 불릿이나 숫자 제거

- disc  circle ○ square □

- decimal 1,2,3

-decimal-leanding-zero 01,02,03

- lower-roman ⅰⅱⅲ

-upper-roman ⅠⅡⅢ

- lower-alpha/ lower-latin   abcd

- upper-alpha/upper-latin   ABCD

 

2. list-style-image 이미지로 목록

list-style-image: url(이미지 주소/ 경로) ;

 

3. list-style-position 목록 들여쓰기

- list-style-position: inside 기본 위치보다 들여쓰기 / outside 기본값

 

4. list-style 목록 속성을 한 번에 표시하기(줄여서 표현)

예) list-style-type: lower-alpha;

list-style-position: inside; (소문자 목록 만들어 들여쓰기)

-> list-style: lower-alpha inside;

 

---

표 스타일

1. caption-side 표 제목 위치 지정

- 표의 제목의 경우 <caption> 태그 이용

- 이때, caption-side: top; 표의 위쪽(기본값)

caption-side: bottom; 표의 아래쪽

 

2. border 테두리 설정

검은색 실선 border: 1px solid black; (기본 사용)

검은색 점선 border: 1px dotted black;

색상 변경 : border-color : violet ; 

 

3. border-spacing 셀 사이의 여백

border-spacing: 수평거리 수직거리

 

4. border-collapse 표의 셀 테두리를 합쳐 하나의 셀로 적용

border-collapse: collapse 테두리를 합쳐 하나로 표시=1줄

border-collapse: separate 테두리를 따로 표시(기본값)=2줄