유형
실습문서
주제
css기본문법
순번
2
태그
설명
리소스파일
img.zip7036.1KB
문자관련스타일
01. font
단위
👁🗨 상대단위들
단위 | 기준 | |
em | 부모 요소 기준 | |
rem | :root(html) 기준 (루트→최상위) | |
vh | 브라우저 화면 높이기준 (viewportHeight→vh) | (폰트크기 x 브라우저높이) / 100 |
vw | 브라우저 화면 너비기준(viewportWidth→vw) | (폰트크기 x 브라우저너비) / 100 |
% | 부모요소 기준 |
121p
글꼴지정속성
font-family: "Times New Roman",sans-serif;- sans-serif=> 앞에 정의한 글꼴이 없으면 시스템 기본 글꼴 중 고딕체 아무거나
- 여러 단어 이거나 한글 글꼴 인 경우 따옴표로 감쌈
- 여러개의 글꼴은 쉼표로 구분
- "Times New Roman" , arial, ”돋움” ⇒ 지정된 글꼴이 없을경우 다음 글꼴로 지정됨
‣
‣
02. font-face, font-size
121p
font-size 글씨크기
‣
‣
03. font-weight, font-style, font-variant, line-height
126p
font-weight : 글씨 두께
font-style : 기울기
font-variant : 대소문자
line-height : 행간
‣
‣
👁🗨 포토샵과 css의 line-height 차이
https://slowalk.com/2194 참조블로그
04. font
128p
축약속성
font: [ font-weight, font-style, font-variant ] [ font-size/line-heignt ] [ font-family ]
‣
‣
05. 웹폰트
‣
‣
👸폰트페이스
- 예제파일
- 폰트 파일 확장자별 특징
- 문법 🔗MDN
- 선언순서 : 파일의 크기 순으로 추천
fonts.zip7843.2KB
@font-face {
font-family: <a-remote-font-name>;
src: <source> [,<source>]*;
[font-weight: <weight>];
[font-style: <style>];
}.eot, .woff, ttf, .svg06. 쌤한테 파비콘만들자고하기
07. color
134p
다양한 색상표현들
표기법 | 설명 | 속성값 작성예시 | 불투명도추가 |
관용색명 | 색상명사 | red, pink … | |
hex | rgb 색상의 16진수 표기법 | #ffffff, #000000 … | #ff00009c |
rgb | red,green,blue 채널의 10진수 표기
0~255 | rgb(255,255,255) | rgba(255,255,255,0.8) |
hsl | hue, saturation, lightness 값
0~360, 0~100, 1~100 | hsl(0,100%,100%) | hsla(0,100%,100%,0.8) |
‣
‣
08. letter-spacing, word-spacing
포토샵의 자간 : 문자 크기에 상대적인 측정 단위인 1/1000em
포토샵의 1000이 CSS의 1em(현재 폰트크기)과 일치
letter-spacing : 글자간의 간격
word-spacing : 단어간의 간격
‣
‣
09. text-decoration, text-transform
text-decoration ⇒밑줄속성
- underline
- overline
- line-through
- none
text-transform⇒ 대소문자
- uppercase
- lowercase
- capitalize
‣
‣
10. text-shadow
글자의 그림자 지정
- 작성예시
text-shadow: 1px 1px 2px pink;- 속성값 순서 →
x y blur color - 여러개 적용시
text-shadow: 1px 1px 2px red, 0 0 1em blue, 0 0 0.2em blue;
‣
‣
형성퀴즈1
주어진 리소스 파일을 이용하여 아래와 같은 화면을 구현하시오
완성화면
‣
리소스파일
형성퀴즈2
주어진 리소스 파일을 이용하여 아래와 같은 화면을 구현하시오
완성화면
‣