font-family 속성 - 글꼴 지정
.p{font-family:<글꼴 이름1>, <글꼴 이름2>, <글꼴 이름3>}
.브라우저에서 글꼴 이름1 지원 안 될 경우, 다음 것으로 설정됨
.영문 기본 글꼴 'serif' 'Sans-serif', 한글 기본 글꼴 '굴림' '돋음' '바탕'
@font-face 속성 - 웹 폰트 사용
.@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
.웹 문서 안에 글꼴 정보도 함께 저장 후 접속 시 사용자 시스템으로 다운로드하여 사용
.구글 폰트 https://fonts.google.com내 필요한 폰트 검색하여 @import url 소스 활용
.본인 소유 웹 폰트는 확장자 .eot, .woff로 변환해 사용, Transfonter(https://transfonter.org/)
.@font-face 지정 후 font-family 속성으로 원하는 태그에 적용
font-size 속성 - 텍스트 크기 조절
.절대 크기 속성 : 브라우저에서 지정한 크기 xx-small | x-small | small | medium | large | x- | xx-
.상대 크기 속성 : 부모 요소 글자 크기 기준으로 크거나 작게 표시 larger | smaller
.크기 속성 : 브라우저 상관없이 글자 크기 직접 지정
..em | ex | px | pt
..px 단위는 폰트 크기 고정되어 화면이 바뀌어도 동일함, em단위 사용이 유리
..<body> 요소의 크기 16px = 1em 기본 설정값
.백분율 : 부모 요소의 글자 크기를 기준으로 % 계산하여 표시
font-weight 속성 - 글자 굵기 지정
.normal | bold | lighter | bolder
.100~900, 400 = normal, 700 = bold
font-variant 속성 - 작은 대문자로 표시
.normal | small-caps
font-style 속성 - 글자 스타일 지정
.normal | italic(기울어진 글꼴) | oblique (원래 글꼴을 기울어지게 표시)
font 속성 - 글꼴 속성을 묶어 표현
.font-size와 line-height 는 16px/25px 로 /로 연결하여 함께 표현
.font:16px/25px;
.caption | icon | menu | message-box | small-caption | status-bar
color 속성
.16진수나 rgba, hsla 표기
.color:rgb(0,0,0)
.color:blue;
.color:#ffoooo;
text-decoration 속성 - 줄 표시/없애기
.text-decoration : none | underline(밑줄) | overline(윗줄) | line-through(중간 줄)
text-transform 속성 - 텍스트 대, 소문자 변환
.none | capitalize(첫 글자만 대문자로) | uppercase | lowercase | full-width(전각 문자)
text-shadow 속성 - 그림자 효과 추가
.none | 가로 거리 세로 거리 번짐 정도 색상
.text-shadow: 5px 5px 3px #f00, 0 0 5px #fff
.여러개 그림자 효과 추가 가능
white-space 속성 - 공백 처리
.normal : 여러 개의 공백을 하나로 표시
.nowrap : 여러 개를 하나로 표시, 줄 그대로
.pre : 여러 개를 표시, 줄 그대로
.pre-line : 여러개를 하나로 표시, 자동 줄 변경
.pre-wrap : 여러개 그대로 표시, 자동 줄 변경
letter-spacing과 word-spacing 속성 - 텍스트 간격 조절
.letter-spacing : 낱 글자 사이 간격 조절
.word-spacing : 단어와 단어 사이 간격 조절
문단 스타일
directon 속성 - 글자 쓰기 방향 지정
.direction : ltr(기본값) | rtr (오른쪽에서 왼쪽으로 텍스트 표시)
text-align 속성 - 텍스트 정렬
.text-align : start | end | left | right | center | justify(양쪽에 맞추어 문단 정렬) | match-parent (부모 요소와 동일)
text-justify 속성 - 정렬 시 공백 조절
.text-justify : auto | none | inter-word (단어 사이 공백 조절) | distribute (글자 사이 공백 똑같이 정렬)
text-indent 속성 - 텍스트 들여 쓰기
.text-indent : <크기> | <백분율(부모 요소를 기준으로)>
line-height 속성 - 줄 간격 조절
.line-height : normal | <숫자> | <크기> | <백분율> | inherit
.<숫자><백분율>로 지정했을 때는 글자 크기를 기준으로 지정
text-overflow - 넘치는 텍스트 표기
.white-space: nowrap 지정해 텍스트가 기준선을 벗어나 넘칠 수 있음
.text-overflow : clip(넘치는 텍스트 자름) | ellipsis (...으로 표기)
.overflow : hidden | scroll | auto 인 경우에만 적용
W3C CSS 검사기
httpsL//jigsaw.w3.org/css-validator/
목록스타일
list-style-type : none | <순서없는 목록의 불릿> | <순서 목록의 번호>
.불릿 모양 바꾸기 disc(●) | circle(○) | square(■) | none
.숫자 바꾸기 decimal | decimal-leading-zero | lower/upper-roman | lower/upper-alpha | armenian
list-style-image 속성 - 불릿 대신 이미지 넣기
.list-style-image : url("image.jpg") | none
list-style-position 속성 - 목록에 들여 쓰는 효과
.list-style-position : inside | outside;
list-style 속성 - 목록 속성 한꺼번에 표시
.list-style : lower-alpha, inside ;
.font 속성과 유사함
'소프트웨어 > HTML+CSS' 카테고리의 다른 글
| CSS 4번째 - 레이아웃 스타일 (0) | 2020.01.16 |
|---|---|
| CSS 3번째 - 색상/배경 스타일 (0) | 2020.01.15 |
| CSS 1번째 - 스타일과 스타일 시트 (0) | 2020.01.08 |
| HTML5 5번째 - 멀티미디어 (0) | 2020.01.07 |
| HTML5 4번째 - 시맨틱(semantic) 태그 (0) | 2020.01.03 |
