CSS 용어 및 기본 정리

*우선순위
1. 위에서부터 아래로 훑고 내려오기 때문에 아래가 중요하다.
2. 경로가 있는 것이 경로가 없는 것보다 우선 순위가 높다. (ex:h1안에 span.. 다 써주기)
3. 인라인>내부스타일>외부스타일 (인라인이 최고 높음)
4. 아이디>클래스>태그 (아이디가 최고 높음) (ex: #1 >.2 >h1 //순서가바뀌어도 아이디가 높음)

 

---

#font 스타일

*font-family: 글꼴 지정

-font-family:<굴림>[,<돋움>, <궁서>]

→[,]은 옵션인데 대괄호안에 있는 항목은 사용할 수도 있고, 사용하지 않을 수도 있음

-ex) p{font-family:굴림;}

-p{font-family:"맑은 고딕", 돋움, 굴림}

→""두 단어 이상으로 된 글꼴 이름이면 따옴표로 묶어 표시.

 

 

*font-size : 글자 크기
-글꼴 크기 안정하면 기본 16px임.
-em, rem,%, vh, vw, ex, px, pt

-모바일 기기 사용고려하면 px보다 em단위 사용

-em:해당 글꼴의 대문자 M너비 기준으로 크기 조절/지정한 크기가 없다면 body요소의 크기 16px이 기본값1em으로 지정

-px을 em단위로 변환할 때 http://pxtoem.com/ 사이트 참고

*font-weight
: normal 400 인데 폰트마다 달라서 다를수있음.

-normal, bold, lighter, bolder, 100~900사이의 수치(700은 bold)

 

*font-variant : 작은 대문자로 표시

-소문자 크기에 맞춰서 작게 대문자로 표시됨.

-normal, small-caps

 

*font-style: 글씨 스타일

ex) <style>.txt3{font-style:italic;}</style> = html에서 <i></i> 

 

#텍스트 스타일

*color: 글자 색
-blue 이런거처럼 색상명으로만하면 각 기기마다 색이 다르게 나올수있어 정확하지x,
  색상값인 rgb나 16진수로 대부분 사용
-ex:{color:rgba(82,166,0,.5);}  >>0.5=.5 로 사용가능
-hsl(0,100%,80%) 이런것도 사용가능하긴한데 rbg,16진수를 많이 사용
h:색상, s:채도, l:명도

 

*text-decoration: 밑줄

-none, underline, overline(영역 위로 선), line-through(취소선,가끔사용)

 

*text-transform: 텍스트 대소문자 변환

-none

-capitalize: 시작하는 첫번째 글자를 대문자로 변환

-uppercase: 모든 글자를 대문자로 변환

-lowercase: 모든 글자를 소문자로 변환

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

 

*text-shadow: 그림자 효과

-none

-x축 y축 번짐 color 순으로 작성

ex) text-shadow:-3px 3px 2px black; →왼쪽3px에 아래3px로 2px번진 검정 그림자

 

*letter-spacing: 글자 간격 조절

-normal

-숫자 ex) letter-spacing:0.2em​; 

-자간은 가능하면 em단위로 지정해야 좋음, 바뀌는 글꼴에 맞추어 자간이 유지되기 때문

 

*word-spacing: 단어와 단어 사이 간격 조절 (잘 사용X)

*word-break: 글자 단어별로 끊기
- word-break:keep-all;  →​단어별로 끊어짐 /단어별 영문 기본값
- word-break:break-all;  →​철자별로 끊어짐 /철자별 한글 기본값

 

*white-space: 공백 처리하기

-공백을 하나의 원칙으로 처리해 깔끔하게 할 때 사용

-normal(여러 개 공백을 하나로 표시, 기본값)

-nowrap(여러 개 공백을 하나로 표시하고, 영역너비 넘어가는 내용은 줄 안 바꾸고 계속 한 줄로 표시)

-pre(여러 개 공백을 그대로 표시, 영역너비 넘어가면 줄 안 바꾸고 계속 한줄로 표시)

-pre-line(여러개 공백을 하나로 표시하고, 영역 너비 넘어가는 내용은 자동으로 줄 바꿔 표시)

-pre-wrap(여러개 공백을 그대로 표시, 영역너비 넘어가는 내용은 자동으로 줄 바꿔 표시)

 

#문단 스타일
*direction: 글자쓰기 방향 지정
-아랍어 처럼 오른쪽에서 왼쪽으로 쓰는 언어에 사용

-ltr 왼쪽에서 오른쪽으로(left-to-right) 텍스트 표시

-rtl 오른쪽에서 왼쪽으로

 

*text-align: 텍스트 정렬

-start: 현재 텍스트 줄의 시작 위치에 맞춤

-end: 현재 텍스트 줄의 끝 위치에 맞춤

-left: 왼쪽에 맞추어 문단 정렬

-right: 오른쪽

-center: 가운데

-justify: 양쪽에 맞춤

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

 

*text-justify: 정렬 시 공백 조절

-간격을 어떻게 조절해 정렬할 건지 지정, text-align:justify일 경우 양쪽에 맞추면 글자와 단어 사이 간격이 어색하게 벌어질 수 있어서 이때 사용

-auto, none, inter-word(단어 사이 공백을 조절해 정렬), distribute(인접한 글자 사이의 공백을 똑같이 맞춰 정렬)

 

*text-indent: 텍스트 들여 쓰기

-px, %(부모요소를 따름)

 

*앞에 들여쓰기효과
padding-left:50px; 
/*text-indent:50px;이거 줘도 상관없고 위에 padding-left도 상관없음, 패딩이 더 많이 사용하긴 함*/

 

*line-height: 줄간격 조절

-normal, px, 숫자(배), %, inherit(부모요소를 따름)

-normal:기본 120%(1.2배)

-0.7(글자크기의 0.7배의 줄간격)

-font에 한꺼번에 묶어 표현할때 font-size/line-height /로 함께 연결해 표현가능
ex) p{font:italic 16px/20px 돋움} →16px사이즈에 line-height는 20px

-본문 사용에 1.5를 많이 사용

-높이 50px영역가운데로 글씨맞출때 line-height:50px ;/*많이쓰임*/

 

*text-overflow: 영역을 넘치는 텍스트를 어떻게 처리할지 지정

-해당 요소에서 overflow속성값이 hidden이거나 scroll, auto이면서 width-space:nowrap을 함께 사용했을 경우에만 적용됨.

-clip(넘치는 텍스트를 자름), ellipsis(말 줄임표...로 잘린 텍스트가 있다고 표시)

-hover되면 말줄임표했던거를 보여주게 한다던가 할때 사용

 

 

#목록 스타일

*bullet 블릿 :li 앞에 점 모양있는거
-기본적으로 앞에 패딩이 있음

>패딩 간격좁히고 싶을때:
.list3{padding:0;} x >>이렇게하면 점모양이 아예사라짐
.list3{padding:10;} o>>이런식으로 기본패딩보다 숫자 낮추면 됨.
-사실 블릿은 잘 안쓰고 before나 after로 많이 사용함 

 

*기본 dl의 dd앞에 마진있는거 없앨때:
.list4 dd{margin-left: 0; }

​