[CSS] 폰트 스타일, 텍스트 스타일, 목록 스타일

폰트(Font) 스타일

• font-famliy 속성 : 글꼴 지정, 여러 개의 글꼴을 지정할 때는 , 로 구분
  • serif : 명조계열의 글꼴
  • sans-serif : 고딕계열의 글꼴
  • monospace : 글자 폭과 간격이 일정한 글꼴
  • cursive : 필기체 글꼴
  • fantasy : 장식이 있는 글꼴

 

• font-style 속성
  • italic : 이탤릭체
  • oblique : 이탤릭체

 

• font-variant 속성
  • small-caps : 작은 대문자로 변환

 

• font-weight 속성 : 글꼴 두께

 

• font-size 속성 : 글꼴 크기

 

• 폰트 스타일을 그룹으로 묶어 일괄 지정할 수 있다.

/* [형식]
선택자 {
  font : font-style
          font-weight
          font-variant
          font-size/line-height
          font-family
} */

.font {font : italic small-caps 700 30pt/50pt serif}

 

 

텍스트(Text) 스타일

• text-decoration 속성 : 밑줄, 취소선, 윗줄

#t1 {text-decoration: underline;}	/* 밑줄 */
#t2 {text-decoration: overline;}	/* 윗줄 */
#t3 {text-decoration: line-through;}	/* 취소선 */

 

• text-align 속성 : 텍스트 정렬

#t1 {text-align: left;}		/* 왼쪽 정렬 */
#t2 {text-align: right;}	/* 오른쪽 정렬 */
#t3 {text-align: center;}	/* 가운데 정렬 */
#t4 {text-align: justify;}	/* 왼쪽과 오른쪽에 동등하게 정렬 */

 

• text-indent 속성 : 들여쓰기, 내여쓰기

p{
	width: 500px;			/* 넓이 */
	margin: auto;			/* 태그 밖 여백 */
	border: 1px solid black;	/* 테두리 */
}
#t1 {text-indent: 2em;}			/* 들여쓰기 */
#t2 {text-indent: -2em;}		/* 내어쓰기 */

 

• letter-spacing / word-spacing 속성 : 간격

#t1 {letter-spacing: 2em;}	/* 글자 간격 */
#t2 {word-spacing: 2em;}	/* 단어 간격 */

 

• text-transform 속성 : 대소문자 변환

#t1 {text-transform: capitalize;}	/* 단어의 앞글자를 대문자로 표시 */
#t2 {text-transform: uppercase;}	/* 대문자로 표시 */
#t3 {text-transform: lowercase;}	/* 소문자로 표시 */

 

• white-space 속성 : 줄바꿈, 공백 처리

#t1 {white-space: pre;}		/* 공백 인정,	줄바꿈 인정,	디바이스의 넓이 무시 */
#t2 {white-space: pre-line;}	/* 공백 불인정,	줄바꿈 인정,	디바이스의 넓이 고려 */
#t3 {white-space: pre-wrap;}	/* 공백 인정,	줄바꿈 인정,	디바이스의 넓이 고려 */
#t4 {white-space: nowrap;}	/* 공백 불인정,	줄바꿈 불인정,	디바이스의 넓이 무시 */

 

• text-shadow 속성 : 그림자 효과
  • h-shadow : 그림자의 가로 오프셋 거리 (양수는 오른쪽, 음수는 왼쪽)
  • v-shadow : 그림자의 세로 오프셋 거리 (양수는 아래쪽, 음수는 위쪽)
  • blur : 그림자가 번지는 정도 (생략할 경우 그림자가 선명하게 표시)
  • color : 그림자 색상 (16진수 색상값, 색상 이름, RGB 모두 사용 가능)

.text3 {
	color: #06F;
	text-shadow: 3px 3px 5px #000;    /* v-shadow h-shadow blur color */
}
.text4 {
	color: #C30;
	text-shadow: 3px 3px 5px #000;
}

 

• overflow 속성 : 내용이 정해진 크기를 벗어날 때 처리 방법
  • visible : 오버플로우된 항목을 잘라내지 않음 (기본값)
  • hidden : 오버플로우된 부분을 숨김
  • scroll : 오버플로우 속성에 강제로 스크롤바 생성
  • auto : 오버플로우되면 자동적으로 스크롤바 생성

#div01 {
	width: 200px;
	height: 100px;
	background-color: pink;
	overflow: auto;
}
#div02 {
	width: 200px;
	height: 100px;
	background-color: yellow;
	overflow: hidden;
}

 

• text-overflow 속성 : 넘치는 텍스트 표기
  • clip : 넘치는 텍스트를 잘라버림
  • ellipsis : 말줄임표(...) 표시

.div01 {
	overflow: hidden;
	white-space: nowrap;
	width: 100px;
	text-overflow: ellipsis;
}

 

 

목록(List) 스타일

• list-style-type 속성 : 목록의 기호를 지정

ul {
	list-style-type: square;
}

 

• list-style-image 속성 : 목록의 기호를 이미지로 지정

ul {
	list-style-image: url("../list.jpg");	
}

 

• list-style-position 속성 : 목록의 기호 위치를 지정

ul {
	list-style-image: url("../list.jpg"));
	list-style-position: inside;
}

 

• 기타 목록 스타일

ul {
	list-style: none;	/* 목록 아이콘 제거 */
}
ul li {
	display: inline;	/* 목록을 가로로 배치 */
}

 

 

목록 스타일 활용 - 메뉴 만들기

• 목록 스타일을 활용하여 가로 형태의 메뉴 만들기

ul {
	list-style:none;	/* 목록 아이콘 제거 */
}
ul li {
	display: inline;	/* 리스트를 가로로 표시 */
}
ul li a{
	text-decoration: none;
	background: #c00;
	color: #fff;
	display: inline-block;  /* display를 이용하여 넓이와 높이를 적용 */
	width: 100px;
	height: 30px;
	padding-top: 2px;       /* 태그 안의 여백 처리 */
	padding-left: 10px;
}