글꼴 관련 스타일 : 글자의 모양새, 글꼴, 크기, 굵기 등
font-family 속성 : 글꼴 지정
p{ font-family : "맑은 고딕", 굴림, 돋움 }
~텍스트를 사용하는 요소에서 사용 - <body>,<p>,<h1> 등
~지정한 글꼴이 없을 경우 대비, 2번째, 3번째 글꼴까지 지정
~두단어 이상으로 된 글꼴이름은 ""로 묶어준다
~기본 글꼴, 스타일 속성을 이용해 다른 글꼴 정의 가능
@font-face 속성 : 웹 폰트 사용
~웹 문서를 작성할 때 웹 문서 안에 글꼴 정보도 함께 저장했다가 사용자가 웹 문서에 접속하면 글꼴을 사용자 시스템으로 다운로드 시키는 방식
*구글 웹 폰트 사용
~https://fonts.google.com 에 접속해서 글꼴 선택 > [Select this style] 클릭 > [Embed] 클릭 >@import로 시작하는 소스 복사 > style태그 안에 붙여넣는다
<style>
@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic~~')
.ng-font {
font-family: 'Nanum Gothic', 돋움;
}
</style>
...
<p class="ng-font">나눔고딕 웹 폰트</p>
*직접 웹 폰트 업로드해서 사용 (책 참조)
font-size 속성 : 글자 크기 조절
p{ font-size: 3em }
*절대 크기 - small | medium | large
*상대 크기 - 부모 글자 크기를 기준으로 larger | smaller
*백분율 - 부모 글자 크기를 기준으로 %를 계산해 표시한다
*크기 - 직접 지정
~크기 값 종류 : em, ex, px, pt
px 단위 속성값
~폰트 크기 고정된다. 작은 모바일 기기 등에서 작게 표시된다 (상대적 크기)
em 단위 속성값
~모바일 기기 고려하면 em 단위 많이 사용한다
~대문자 M의 너비를 1em으로 놓고 상대적 값을 계산해 다른 글자 크기를 조절한다
font-weight 속성 : 글자 굵기 지정
h1{ font weight: bold }
noraml : 기본값
bold | lighter | bolder : 굵게 | 원래보다 더 가늘게 | 더 굵게
100~900 : 400은 노멀, 700은 볼드
font-variant 속성 : 작은 대문자로 표시
p{ font-variant : small-caps }
~대문자를 소문자 크기에 맞추어 작게 표시
~영어만 된다
font-style 속성 : 글자 스타일 지정
p.txt{ font-style: italic }
italic : 이탤릭체로 표시
font 속성 : 글꼴 속성을 한꺼번에 묶기
*순서*
p{ font: <font-style> <font-variant> <font-weight> <font-size/line-height> <font-family> }
p{ font: italic small-caps bold 12px/24px 돋움 }
특정 키워드에 어울리는 글꼴 스타일
caption : 대문자
icon : 아이콘
menu : 드롭다운 메뉴
message-box : 대화 상자
small-caption : 작은 대문자
status-bar : 상태 표시줄
텍스트 스타일 : 글자, 단어, 문단에 사용하는 스타일
color 속성 : 글자색 지정
h2{ color: #ff0000; }
16진수(#ff0000), rgb((0,200,0)),이름(blue)
text-decoration 속성 : 텍스트에 줄 표시하기/없애기
p{ text-decoration: none }
~텍스트 링크의 밑줄 없앨 때, 취소선을 그을 때
none : 밑줄 표시하지 않는다
underline : 밑줄 표시한다
overline : 영역 위로 선을 그린다
line-through : 취소선
text-tansform 속성 : 텍스트 대소문자 변환
p{ text-transform: uppercase }
none : 변환 안 한다
capitalize : 첫번째 글자를 대문자로
uppercase : 모든 글자를 대문자로
lowercase : 모든 글자를 소문자로
full-width : 모든 문자를 전각 문자로
text-shadow 속성 : 텍스트에 그림자 효과
h1{ text-shadow: <가로거리> <세로거리> <번짐정도> <색상> }
h1{ text-shadow: 5px -5px 3px #000; }
가로 거리 : 양수(오른쪽), 음수(왼쪽), 필수 속성
세로 거리 : 양수(아래), 음수(위쪽), 필수 속성
번짐 정도 : 양수(퍼저나감), 음수(축소된다), 기본값은 0
색상 : 그림자 색상, 기본값은 글자색
~그림자 값을 쉼표로 구분해 나열하면 중복할 수 있다.
white-space 속성 : 공백 처리
p{ white-space: nowrap }
~텍스트와 함께 연속해 입력된 여러개의 공백을 어떻게 처리할지 지정
normal : 여러 공백을 하나로 표시
nowrap : 공백 하나로, 영역 넘어가는 것도 계속 한줄로 표시
pre : 공백 그대로, 영역 넘어가는 것도 계속 한줄로 표시
pre-line : 공백 하나로, 자동으로 줄바꿈
pre-wrap : 공백 그대로, 자동으로 줄바꿈
letter-spacing : 텍스트 간격 조절
h1{ letter-spacing: 0.2em }
~낱 글자 사이의 간격을 조절한다.
문단 스타일 : 텍스트 정렬, 들여쓰기, 줄 간격
direction 속성 : 글자 쓰기 방향
p{ direction: ltr }
ltr : 왼쪽에서 오른쪽으로
rtl : 오른쪽에서 왼쪽으로
text-align 속성 : 텍스트 정렬
start : 시작 위치에 맞추어 문단 정렬
end : 끝 위치에
left : 왼쪽
right : 오른쪽
center : 가운데
justify : 양쪽에 맞추어
match-parent : 부모 요소를 따라
text-justify 속성 : 정렬시 공백 조절
p{ text-justify: auto }
~justify인 경우 양쪽 끝에 맞춘다, 글자와 단어 사이 간격 조절
auto : 자동으로 지정
none : 정렬 안한다
inter-word : 단어 사이 공백
distribute : 인접한 글자 사이의 공백 똑같이 맞춘다
text-indent 속성 : 텍스트 들여 쓰기
.indent{ text-indent: 5% }
~문단의 첫 글자를 들여쓰는 정도
크기 : 들여쓸 크기 지정
백분율 : 부모 요소의 너비를 기준으로
line-height 속성 : 줄 간격 조정
p{ font-size: 15px, line-height: 2.0 }
~글자 크기를 기준으로 지정하거나, 직접 지정한다 (보통 2배)
숫자 : n배
크기 : 30px
백분율 : 200%
text-overflow 속성 : 넘치는 텍스트 표기
.content{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
~white-space: nowrap으로 지정해 줄 바꿈을 하지 않을 때 텍스트가 기준선을 벗어나 넘칠 수 있다
clip : 넘치는 텍스트를 자른다
ellipsis : 말줄임표(...)로 잘린 텍스트가 있다고 표시
목록 스타일
list-style-type 속성 : 목록의 불릿과 번호 스타일 지정하기
ul{ list-style-type: none }
*순서없는 목록 - 불릿 모양 바꾸기
disc : ●
circle : ○
square : ■
*순서없는 목록 - 불릿 없애기
none
*순서 목록 - 숫자 바꾸기
decimal : 1로 시작하는 십진수
decimal-leading-zero : 앞에 0이 붙는 십진수
lower-roman : 소문자 로마
upper-roman : 대문자 로마
lower-alpha : 소문자 알파벳
upper-alpha : 대무자 알파벳
list-style-image 속성 : 불릿 대신 이미지 넣기
ul{ list-style-image: url('dot.png') }
none
url(이미지파일)
list-style-position 속성 : 목록에 들여쓰는 효과 내기
.inside{ list-style-position : inside }
inside : 불릿이나 숫자를 안쪽으로
outside : 기본값. 숫자를 밖으로 내어쓴다
list-style 속성 : 목록 속성 한꺼번에 표시
ol{ list-style: <list-style-type> <list-style-position> <list-style-image> }
ol{ list-style: lower-alpha, inside }
~쉼표로 구분한다
'CSS' 카테고리의 다른 글
| Do it : CSS -9.레이아웃 (0) | 2020.09.15 |
|---|---|
| Do it : CSS - 8.박스 모델 (0) | 2020.09.11 |
| Do it : CSS -5. 기초 (0) | 2020.09.08 |
| 드림코딩 엘리 : CSS 레이아웃 정리 (0) | 2020.09.01 |
| 드림코딩 엘리 : CSS 셀렉터, 기초이론 정리. (0) | 2020.08.31 |