font// 폰트 정리

https://www.codingfactory.net/10973

CSS / columns / 다단으로 만들기

 

문법 : font-family: font | initial | inherit

• font : family-name 또는 generic-family
• initial : 기본값으로 설정
• inherit : 부모 요소의 속성값을 상속받음

 

 

font

family-name은 글꼴 이름입니다. 글꼴 이름에 띄어쓰기가 있으면 작은 따옴표 또는 큰 따옴표로 감쌉니다.

generic-family는 글꼴 유형입니다.

• serif : 삐침 있는 명조계열의 글꼴
• sans-serif : 삐침 없고 굵기가 일정한 고딕계열의 글꼴
• monospace : 글자 폭과 간격이 일정한 글꼴
• cursive : 손으로 쓴 것 같은 필기계열의 글꼴
• fantasy : 화려한 글꼴

 

굵기 진하게 :

td{font-weight: bold;}

 

 

여러 개의 글꼴 설정

글꼴을 여러 개 설정할 때는 쉼표로 구분합니다. 예를 들어

font-family: Georgia, "Times New Roman", serif;

로 설정했을 때, 제일 먼저 Georgia(첫번째) 글꼴을 찾습니다. 해당 글꼴이 있다면 사용하고, 없다면 Times New Roman 글꼴을 사용합니다. 그 글꼴도 없다면 웹브라우저에서 설정한 명조 계열의 글꼴을 사용합니다.

글꼴은 접속한 기기에 설치되어 있는 글꼴을 사용합니다. 따라서 CSS로 설정한 글꼴이 없을 수도 있으므로, 마직막은 generic-family로 정해두는 것이 좋습니다.

 

 

 

 

 

영어와 한글 글꼴을 다르게 하기

글꼴을 여러 개 설정했을 때, 첫번째 글꼴로 표현할 수 없는 것만 다음 글꼴을 사용합니다. 따라서 한글이 없는 글꼴을 앞에 두고, 한글 글꼴을 뒤에 두면 한글과 영어가 다른 글꼴로 표현됩니다. 예를 들어 다음과 같이 하면

font-family: Georgia, "Malgun Gothic", serif;

한글은 맑은 고딕, 나머지는 Georgia로 표현됩니다.

 

 

 

 

 

 

 

행의 배경색을 번갈아 넣기

홀수번째 행과 짝수번째 행의 배경색을 다르게 하고 싶다면 tr 요소에 nth-child 선택자를 이용하여 배경색을 추가합니다.

  tbody tr:nth-child(2n) {
    background-color: #bbdefb;
  }
  tbody tr:nth-child(2n+1) {
    background-color: #e3f2fd;
  }

 

 

 

 

 

 

열의 배경색을 번갈아 넣기

홀수번째 열과 짝수번째 열의 배경색을 다르게 하고 싶다면 th 또는 td 요소에 nth-child 선택자를 이용하여 배경색을 추가합니다.

  th:nth-child(2n), td:nth-child(2n) {
    background-color: #bbdefb;
  }
  th:nth-child(2n+1), td:nth-child(2n+1) {
    background-color: #e3f2fd;
  }

 

 

 

 

가로스크롤

표의 부모 요소에 overflow-x: auto; 속성을 추가하면 표에서만 가로 스크롤이 생깁니다.

			div {
				overflow-x: auto;
			}

 

 

 

 

 

CSS / list-style-type / 목록 앞의 마커 정하는 속성

• <ul> : disc, circle, square
• <ol> : decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, armenian, georgian, lower-alpha, upper-alpha

 

 

 

***레이아웃 만들기

https://www.codingfactory.net/10530

CSS / 고정형 레이아웃 만들기

 

 

 

***애니메이션

codingfactory.net/11163

CSS / 애니메이션 / animation