[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 20회차 미션

overflow

  • 요소의 크기 이상으로 내용 (자식요소)이 넘쳤을 때, 내용의 보여짐을 제어
  • 속성 값
    • visible : 넘친 부분을 자르지 않고, 그래도 보여줌 (기본값)
    • hidden : 넘친 부분을 잘라내고, 보이지 않도록 함
    • scroll : 넘친 부분을 잘라내고, 스크롤바를 이용하여 볼 수 있도록 함 (무조건 스크롤바를 생성)
    • auto : 넘친 부분이 있는 경우만 잘라내고, 스크롤바를 이용하여 볼 수 있도록 함
div {
    overflow: hidden;
}

opacity

  • 요소의 투명도를 지정

  • 속성 값

    • 숫자 : 0 부터 1 사이의 소수점 숫자
      • 기본값 : 1
  • 사용법

opacity: 투명도;
div {
	opacity: 0.5; /* 50% */
}

div {
    opacity: 1; /* 100% */
}

div {
    opacity: .75; /* 75% */
}

글꼴, 문자

font

  • 글자 관련 속성들을 지정

  • 속성 값

    • font-style : 글자 기울기 지정
      • 기본값 : normal
    • font-weight : 글짜 두께 지정
      • 기본값 : normal
    • font-size : 글자 크기 지정
      • 기본값 : medium (16px)
    • line-height : 줄 높이 지정 (normal)
    • font-family : 글꼴 (서체) 지정

  • 사용법
font: 기울기 두께 크기 / 줄높이 글꼴;
.box {
    font: italic bold 20px / 1.5 "Arial", sans-serif;
}

단축 속성을 사용하려면 font-sizefont-family는 필수로 입력해야 함


font-style

  • 글자 스타일 (기울기) 지정

  • 속성 값

    • normal : 스타일 없음 (기본값)
    • italic : 이텔릭체 (활자)
    • oblique : 기울어진 글자
p {
	font-style: italic;
}

font-weight

  • 글자의 두께 (가중치)를 지정

  • 속성 값

    • normal : 기본 글자 두께, 400과 동일 (기본값)
    • bold: 글자 두껍게, 700과 동일
    • border : 부모 (상위) 요소보다 더 두껍게 (bold 보다 두껍다는 개념 X)
    • lighter : 부모 (상위) 요소보다 더 얇게
    • 숫자 : 100 ~ 900 까지의 100 단위의 숫자 9개
p {
    font-weight: 100;
}

프론트엔드 올인원 패키지 바로가기 -> https://bit.ly/3m0t8GM

좋은 웹페이지 즐겨찾기