2022-10-19 강의 내용
- 키워드 단위
- 크기단위
- 색상단위
- url 단위
- font-size 속성
- font-family 속성
- 기타속성
크기단위
| 단위 | 적용되는 기준 |
| % | 16px 기준 |
| em | 해당태그의 부모를 기준으로 배수로 커진다 (예시 1-1) |
| rem ( root) | 16 px 기준 |
예시 1-1
<style>
.container {font-size: 16px;}
/*test02 font-size = 부모인 .container 16px*2em=36px이다.*/
.container > .test02 { font-size: 2em;}
/*test03 font-size = 부모인 .container 16px*3em=48px이다.*/
.container > .test03 { font-size: 3em;}
</style>
</head>
<body>
<div class="container">
<div class="test01">
<p>안녕하세요01</p>
</div>
<div class="test02">안녕하세요02</div>
<div class="test03">안녕하세요03</div>
</div>
</body>
px, %, em, rem 모든 폰드 사이즈는 자식요소에 상속되어 적용 된다
%,em,rem은 가변성을 가지고 있지만 그 기준이 "부모" 이기때문에 화면에 따라 크기가 변하진 않는다.
1. px: 픽셀단위의 절대값 고정된 크기 장치에 따라 크기 조절 불가
2. %: 부모요소의 상대적 크기 부모의 크기가 상속되어 커진다 (em도 마찬가지)
100% = 1em, 80%=0.8em 150%=1.5em
/* %단위 예시*/
<div class="parents"> <!--120%-->
<div class="child01"> <!--parents의 120%-->
<div class="child02"></div> <!-- child01의 120%-->
</div>
</div>
3. rem: 보모의 크기에 비례해서 동일하게 자식들도 크기 조정된다
%와는 다르게 크기는 상속되지않음으로 크기가 전부 동일하다
4. pt (쓸일 거의없음): 웹사이트를 프린트할 컨텐츠에 사용됨
색상단위
name
rad, orange, blue 같은 원초적인 이름
rgb
r(red)g(green)b(blue)
(어둡)min0~255max(밝)
p {color: red;}rgba
r(red)g(green)b(blue)a(alpha)←불투명도
(어둡)min0~255max(밝)
p {color: rgba(red, green, blue, alpha);}
p {color: rgba(255, 140, 100, 0.1);}hex
16진법(0123456789ABCDEF)
(어둡)min0~Fmax(밝)
/*ff(r)00(g)00(b)*/
/*해당색은 빨강색 ff가 제일 높은 숫자가 됨*/
p {color: #ff0000}hsl
색상, 채도, 명도값 그리고 알파값을 조합하여 색을 나타냅니다.
text-shdow
- text-shdow 속성은 한번에 여러가지의 h, v, a, c 속성을 넣을 수 있고 , (콤마)를 사용하여 쭉 입력한다.
div div:nth-child(7) {
color: yellow;
text-shadow: 2px 2px 2px black,
0 0 10px purple,
0 0 5px pink;
}
font-family
- 글꼴을 정해주는 속성값
이처럼 폰트종류를 여러가지 넣는 이유는 사용자의 컴퓨터에 첫번째 폰트, 첫번째폰트가 없다면 세번째 폰트
개발자가 정해준 모든 폰트가 없다면 sans-serif로 출력되게 설정된다.
body {
font-family: AppleSDGothicNeo-Regular,'Malgun Gothic','맑은 고딕',dotum,'돋움',sans-serif;
}CSS 폰트의 한계
- 사용자의 컴퓨터에 있는 폰트만 실질 적용 가능
- 맥 사용자, 윈도우 사용자간 설치된 폰트 차이
- 일관성 유지 어려움
web-font 웹 폰트
-css 폰트의 한계를 해결하기 위해서 웹폰트를 사용하게 된다.
웹 폰트 사이트
web-font 웹 폰트 적용방법 2가지
1. 웹폰트 제공 서비스의 서버에서 그대로 가져와 사용
- 사용자가 굳이 다운로드 받지않아도 구글웹폰트에서 url을 가져와 적용 하는 방법
단점
자체 웹서버를 운영하여 리소스를 끌어오는게 아니라 타 사이트의 url을 가져오기때문에
구글웹폰트 사이트가 다운되거나 내가 만든 사이트의 트래픽보다 구글 웹 폰트 사이트의 트래픽이 현저히
늦어서 폰트가 빨리 로딩되지않을 가능성이 있고 혹은 내가 사용하고자 하는 폰트가 지원되지않을때
방법2를 사용한다
<style>
@import url('https://fonts.googleapis.com/css2?family=Hi+Melody&display=swap');
body {
font-family: 'Hi Melody', cursive;
}
</style>
2. 서체를 자체 서버에 탑재하여 사용
font 사이트에서 font를 다운로드 하여 작업하고자 하는 폴더에 fonts를 생성하여 넣는다.
참고사항
- font의 이름은 마음대로 정할 수 있다.
- 각각의 font마다 지원하는 굵기가 다르다.
- font-weight를 지정해주지 않으면 Regular다.
<style>
@font-face {
font-family: sua-font;
src: url(./fonts/NotoSansKR-Regular.otf);
}
@font-face {
font-family: sua-font;
font-weight: 100;
src: url(./fonts/NotoSansKR-Thin.otf);
}
@font-face {
font-family: sua-font;
font-weight: 300;
src: url(./fonts/NotoSansKR-Light.otf);
}
@font-face {
font-family: sua-font;
font-weight: 500;
src: url(./fonts//NotoSansKR-Medium.otf);
}
@font-face {
font-family: sua-font;
font-weight: 700;
src: url(./fonts/NotoSansKR-Bold.otf);
}
@font-face {
font-family: sua-font;
font-weight: 900;
src: url(./fonts/NotoSansKR-Black.otf)
}
body{
padding: 8px 24px;
font-size: 1.4rem;
font-family: 'sua-font', 'sans-serif';
}
</style>
<body>
<ul>
<li style="font-weight: 100;">글꼴 굵기 100</li>
<li style="font-weight: 300;">글꼴 굵기 300</li>
<li style="font-weight: 400;">글꼴 굵기 400</li>
<li style="font-weight: 500;">글꼴 굵기 500</li>
<li style="font-weight: 700;">글꼴 굵기 700</li>
<li style="font-weight: 900;">글꼴 굵기 900</li>
</ul>
</body>
font-weight를 단계별로 적용한 값
새싹 DT 기업연계형 프론트엔드 실무 프로젝트 1주차 블로그 포스팅
'CSS' 카테고리의 다른 글
| 2022-10-24 [새싹 프론트엔드] 테이블, CSS 레이아웃 강의정리 (0) | 2022.10.24 |
|---|---|
| 2022-10-21 [새싹 프론트엔드] 강의정리 (0) | 2022.10.21 |
| 2022-10-21 box-sizing[새싹 프론트엔드] (0) | 2022.10.21 |
| 2022-10-20[새싹 프론트엔드] 강의정리 (0) | 2022.10.20 |
| 2022-10-18 [새싹 프론트엔드] 강의정리 (0) | 2022.10.18 |
