[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 20회차 미션
overflow
- 요소의 크기 이상으로 내용 (자식요소)이 넘쳤을 때, 내용의 보여짐을 제어
- 속성 값
- visible : 넘친 부분을 자르지 않고, 그래도 보여줌 (기본값)
- hidden : 넘친 부분을 잘라내고, 보이지 않도록 함
- scroll : 넘친 부분을 잘라내고, 스크롤바를 이용하여 볼 수 있도록 함 (무조건 스크롤바를 생성)
- auto : 넘친 부분이 있는 경우만 잘라내고, 스크롤바를 이용하여 볼 수 있도록 함
div {
overflow: hidden;
}
opacity
-
요소의 투명도를 지정
-
속성 값
- 숫자 : 0 부터 1 사이의 소수점 숫자
- 기본값 : 1
- 숫자 : 0 부터 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-style : 글자 기울기 지정
- 사용법
font: 기울기 두께 크기 / 줄높이 글꼴;
.box {
font: italic bold 20px / 1.5 "Arial", sans-serif;
}
단축 속성을 사용하려면
font-size
와font-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
Author And Source
이 문제에 관하여([패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 20회차 미션), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ji-yeong/패스트캠퍼스-수강-후기-프론트엔드-인강-100-환급-챌린지-20회차-미션저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)