[CSS] Style 정리

 

 

공부했던 자료 정리하는 용도입니다.

재배포, 수정하지 마세요.

 

 

 

 

텍스트 관련 스타일

 

    스타일 종류 

• 글꼴 스타일
• 텍스트 스타일
• 텍스트 간격 조절 스타일

 

  ■ 글꼴 스타일

  1. font-family

    : 글꼴

 

  2. font-size

    : 글자 크기  

      크기로는 상대크기와 크기 값, 백분율(%)을 사용할 수 있다.

 

    * 상대크기

xx-small < x-small < small < medium(기본값) < large < x-large < xx-large

 

    * 크기 값 (음수는 안됨)

단위	설명
em	해당 글꼴의 대문자 M의 너비가 기준
ex	x-height, 해당 글꼴의 소문자 x의 높이가 기준
px	픽셀, 모니터에 따라 상대적인 크기가 된다.
pt	포인트, 문서에서 많이 사용하는 단위

 

  3. font-style

    : 이탤릭체

    normal은 기본 글꼴, italic을 선택하면 이탤릭체로 표시한다.

 

  4. font-variant

    : 작은 대문자

    영문 소문자를 작은 대문자로 표시한다. 원래 대문자와는 크기가 더 작고 비율이 다르다.

    normal이 기본 글꼴, small-caps하면 작은 대문자로 표시한다.

 

  5. font-weight

    : 글자 굵기

 

    * font-weight 속성

normal	기본 글꼴
bold	진하게
lighter	원래 굵기보다 연하게
bolder	원래 굵기보다 진하게
100~900 사이 값	400은 보통, 700은 진하게가 기준

 

  # font

    : 글꼴 속성을 합쳐서 한꺼번에  표시

    일일이 속성을 쓸 필요 없이 띄어쓰기로 구분해서 나열해도 된다.

    font-size와 line-height만 12pt/14px처럼  / (대시)로 연결해서 표현하면 된다.

 

 

 

  ■ 텍스트 스타일

  1. direction

    : 쓰기 방향

    기본값은 ltr(left-to-right)로 왼쪽에서 오른쪽으로 표시한다. rtl은 반대. 

    한글이나 영어는 속성을 바꿔도 표시순서가 바뀌지 X, 오른쪽 정렬만 된다.

 

  2. text-align

    : 텍스트 정렬

    left, right, center, justify(양쪽 정렬)가 있다. 기본값은 left이고 부모 요소의 값을 상속받는다.

 

  3. text-decoration

    : 텍스트에 줄 긋기

    텍스트 위에 줄을 그을 수 있다. 원래 있던 선들도 설정을 이용해서 없앨 수 있다.

 

    * text-decoration 속성

none	밑줄을 표시하지 않는다.
underline	밑줄을 표시
overline	영역 위에 선
line-through	영역을 가로지르는 선

 

  4. text-overflow

    : 영역을 넘어가는 텍스트 표기하기

    박스 모델 요소 안에 텍스트를 표시할 때 줄을 바꾸지 못하도록 지정하고 넘치는 텍스트는 화면에 보이지 않게 처리하는 경우가 있다. 이때 잘려버린 텍스트가 있다는 것을 표시할 것인지 지정하는 속성이다.

    clip은 넘치는 텍스트를 잘라버리고, ellipsis는 텍스트가 잘리면 말줄임표로 표시한다.

 

  5. text-indent

    : 들여 쓰기

    문단의 첫 글자를 얼마나 들여 쓸지 정할 수 있다. 크기 값이나 백분율(%)을 사용할 수 있다.

 

  6. text-transform

    : 대/소문자 변환

    한글에는 영향을 주지 않고 영문자에만 적용된다.

 

    * text-transform 속성

capitalize	첫 번째 글자를 대문자로 변환
uppercase	모든 글자를 대문자로 변환
lowercase	모든 글자를 소문자로 변환
none	변환하지 X

 

  7. text-shadow

    : 그림자 효과

 

 

 

  ■ 텍스트 간격 조절 스타일

  1. letter-spacing / word-spacing

    : 텍스트 간격

    letter-spacing은 글자와 글자 사이 간격, word-spacing은 단어와 단어 사이 간격을 조절한다. normal과 크기 값을 조절.

 

  2. line-height

    : 줄 간격

    숫자나 단위가 붙은 크기 값, 백분율(%)을 사용할 수 있다. 숫자와 크기 값의 경우 글자 크기를 기준으로 줄 간격을 계산한다.

 

  3. white-space

    : 공백 처리

 

    * white-space 속성

normal(기본값)	여러개의 공백을 하나로 처리
nowrap	여러개의 공백을 하나로 처리하고 줄바꿈을 하지 X
pre	공백을 원본 그대로 표시
pre-line	여러 개의 공백을 하나로 처리하고 줄바꿈 O
pre-wrap	여러 개의 공백을 원본 그대로 표시하고 줄바꿈 O

 

 

 

 

'

리스트 스타일

  1. list-style-type

    : list의 불릿과 번호 스타일

    <ol>과<ul>을 통틀어서 지정할 수 있다.

 

    * <ol>에서 사용하는 불릿 유형 

decimal	1로 시작하는 십진수 ex) 1, 2, 3 …
decimal-leading-zero	0이 붙는 십진수 ex) 01, 02, 03 …
upper-roman	대문자 로마 숫자 ex) I, II, III, IV …
lower-roman	소문자 로마 숫자 ex) i, ii, iii, iv …
lower-greek	소문자 그리수 문자 ex) α, β, γ, δ …
upper-alpha / upper-latin	대문자 알파벳 ex) A, B, C, D …
lower-alpha / lower-latin	소문자 알파벳 ex) a, b, c, d …
hiragana	히라가나 ex) a, i, u, e, o, ka, ki …
hiragana-iroha	히라가나 번호 붙이기 ex) i, ro, han, ni, ho, he …
katakana	가타가나 ex) A, I, U, E, O, KA, KI …
katakana-iroha	가타가나 번호 붙이기 ex) I, RO, HAN, NI, HO, HE …

 

    * <ul>에서 사용하는 불릿 유형

disc ( ● )	까만 원
circle ( ○ )	빈 원
square ( ■ )	까만 사각형

 

  2. list-style-position

    : 목록에 들여 쓰는 효과

    outside와 inside 속성이 있다. 속성을 따로 지정하지 않은 경우(outside)에는 불릿이나 번호가 실제 내용 바깥쪽에 표시되는 반면, inside속성은 실제 내용이 시작되는 위치에 불릿이나 번호를 표시하기 때문에 결과적으로 들여 써진 효과가 난다.

 

  3. list-style-image

    : 불릿에 이미지 삽입

 

  # list-style

    : 리스트 속성을 합쳐서 한꺼번에 표시하기

 

 

 

색상 관련 스타일

  ■ 색상 표기 방법

  1) RGB

    : R(Red). G(Green), B(blue)를 의미한다.

    색이 없으면 0, 최대면 255(16진수에서 ff는 십진수로 255)

    ex) rgb(0,0,0) : 검은색 / rgb(255,255,255) : 흰색

 

  2) 16진수 ( #RRGGBB )

    : 색이 없으면 0, 최대면 ff

    ex) 000000 : 검은색 / ffffff : 흰색

 

  3) HSL

    : H(Hue, 색상), S(Saturation 채도). L(light, 밝기)을 의미한다.

    색상은 각도로 표시(0,360도 : red, 120도 : green, 240도 : blue 등)

    채도는 %로 표시(0%면 회색, 100%면 순색)

    밝기도 %로 표시(0%가 가장 어둡고 100%가 가장 밝음)

 

  4) rgba / hsla

    :  a (alpha)값을 추가해서 투명도 값을 조절해 줄 수 있다. 0 ~ 1 사이의 값으로 조절 가능한다.

    1(가장 불투명), 0(가장 투명)

 

  5) 색이름 표기법

    : 잘 알려진 색상은 이름으로 표시

    ex) red, yellow, black 등

 

 

 

  ■ 색상/배경 관련 스타일

  1. color

    : 글자색

 

  2. background-color

    : 배경색

 

  3. background-image

    : 배경 이미지 삽입

    배경 이미지가 요소의 크기보다 작을 경우 이미지가 가로와 세로로 반복되며 채워지게 된다.
    반복하고 싶지 않다면 background-repeat 속성을 이용하여 제어하면 된다.

    background-image:url(파일경로);

 

  4. background-size

    : 배경 이미지 크기

  

    * background-size 속성

auto	이미지의 원래 크기만큼 표시
크기 값	너비와 높이를 지정. (너비만 지정할 경우 너비에 맞게 높이 자동계산)
백분율	원래 이미지를 기준으로 확대/축소
contain	이미지의 너비/높이 비율을 유지하면서 확대/축소 너비나 높이 중 큰 값을 배경 이미지가 삽입되는 요소에 맞춘다.
cover	이미지의 너비/높이 비율을 유지하면서 확대/축소 너비나 높이 중 작은 값을 배경 이미지가 삽입되는 요소에 맞춘다.

 

  5. background-position

    : 배경 이미지 위치 조절, 여러 가지 방법으로 표시한다.

 

     background-position 표시 방법 

1. 백분율(%) 표시
   : 왼쪽 위부터 너비와 높이값을 넣어주면 된다.
   background-position:위치(%) 위치(%)
2. 길이(px) 표시
   background-position:길이(px) 길이(px);
3. 키워드 표시
   수평 위치 : left. right, center
   수직 위치 : top. bottom. center
   background-position:키워드 키워드;

 

  6. background-repeat

    : 배경 이미지 반복

 

    * background-repeat 속성

repeat	브라우저 화면에 가득 찰 때까지 가로와 세로로 반복
repeat-x	브라우저 창의 가로 너비까지 가로로 반복
repeat-y	브라우저 창의 높이까지 세로로 반복
no-repeat	반복 X (한 번만 표시함)

 

  7. background-attachment

    : 배경 이미지 고정, fixed나 scroll을 사용한다.

 

  8. background-clip / background-origin

• background-clip :  배경 적용 범위
• background-origin : 배경 이미지 위치 기준 조절
  둘이 기능은 다르지만 사용하는 속성이 같아서 묶어놨다.  

 

    * background-clip / background-origin 속성

border-box	박스 모델의 가장 외곽인 테두리(border) 까지 적용 / 기준
padding-box	박스 모델에서 테두리를 뺀 패딩(padding)까지 적용 / 기준
centent-box	박스 모델에서 내용(content) 부분에만 적용 / 기준

 

  9. background-origin

    : 배경 이미지 위치 기준 조절

 

  # background 속성

    : 배경 속성을 합쳐서 한꺼번에 사용하기