CSS의 display(출력특성)과 opacity(요소(불)투명도), 글꼴에 대해서 알아보자

display

display(출력특성)

요소의 화면 출력(보여짐) 특성

• block : 상자(레이아웃) 요소(div)
• inline : 글자요소(span)
• inline-block : 글자+상자요소(base는 글자, 상자요소가 가지고 있는 특성을 포함)
• flex : 플렉스 박스(1차원 layout)
• grid : 그리드(2차원 layout)
• none : 보여짐 특성 없음. 화면에서 사라짐
• 기타 : table, table-row, table-cell 등..

inline 요소에 가로, 세로값을 지정하려면
diplay : block;

opacity

opacity(요소투명/불투명도)

• 표현
  1. 1 : 완전한 불투명(100%의 불투명) > 기본값
  2. 0~1 : 0부터 1사이의 소수점 숫자
• 예시
  1. opacity : 0.07; > 7%의 불투명도, 93%의 투명도
  2. opacity : 0.5 > 50%의 불투명도, 50%의 투명도

font

font(글꼴)

• font-style : 글자의 기울기
  1. 기본값 : normal
  2. italic : 기울어진 이텔릭체
• font-weight : 글자의 두께(가중치)
  1. normal : 400(기본두께)
  2. bold : 700(두껍게)
  3. 100 ~ 900 : 100단위의 숫자 9개. normal과 bold 이외의 두께
• font-size : 글자의 크기
  1. 기본크기 : 16px
  2. 단위 : px, em, rem 등 단위로 지정
• ling-size : 한 줄의 높이(행간과 유사)
  1. 기본 정의 사용 : normal
  2. 숫자 : 요소의 글꼴 크기의 배수로 지정
  3. 단위 : px, em, rem 등 단위로 지정
  4. 예시 : font-size: 16px;
     line-height: 2; > 의미 : 16px의 두배(200%) 행간을 갖는다
• font-family : 글꼴, 서체
  1. 기본크기 : 16px
  2. 단위 : px, em, rem 등 단위로 지정
  3. 예시 : font-family : 글꼴1, "글꼴2"(띄워쓰기 등 특수문자가 포함된 글꼴 이름은 큰 따옴표로 묶어야 한다), 글꼴3, ... 글꼴 계열; > 의미 : 글꼴1이 적용 안 되면, 글꼴2로 적용. 안 되면 글꼴3...아무것도 안 되면 글꼴 계열로 적용하겠다
  4. font-family 종류 : serif(바탕체 계열), sans-serif(고딕체 계열), monospace(고정너비-가로폭이 동등한 글꼴 계열), cursive(필기체 계열), fantasy(장식글꼴 계열)