들어가기 전에
글자색, 배경색, 글꼴은 어떻게 바꾸는 것일까요?
이번 시간에는 텍스트 속성 및 옵션값을 변경하는 방법에 대해서 배워보도록 하겠습니다.
학습 목표
- CSS 없이 먼저 HTML구조를 설계할 수 있다.
핵심 개념
- font-size
- background-color
- font-family
학습하기
4) CSS 기본 Style 변경하기
- CSS 기본 스타일 변경하기
- 영상 우측 하단에 자막 스크립트 ON 설정을 한 후 강의를 시청하시면 학습에 도움이 됩니다.
CSS style 적용은 글자색, 배경색 등이 가장 자주 사용되는 것들입니다.
이런 속성은 위치 값과 크기를 지정하는 것과 달리, 색상 위주로 값을 부여합니다.
색상 관련 값은 다양한 색을 일관된 방법으로 표현하기 위해 주로 16진수 표기법을 사용합니다.
font 색상 변경
- color : red;
- color : rgba(255, 0, 0, 0.5);
- color : #ff0000; //16진수 표기법으로 가장 많이 사용되는 방법이죠.
font 사이즈 변경
- font-size : 16px;
- font-size : 1em;
배경색
- background-color : #ff0;
- background-image, position, repeat 등의 속성이 있습니다.
- background : #0000ff url(“.../gif”) no-repeat center top; //한 줄로 정의도 가능
글씨체/글꼴
- font-family:"Gulim";
- font-family : monospace;
실습 코드
강의에서 진행한 실습용 코드입니다.
여러분들도 비슷한 방식으로 한번 따라 해보면 좋겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
body > div {
font-size:16px;
background-color: #ff0;
font-family:"Gulim";
}
.myspan {
color : #f00;
font-size:2em;
}
</style>
</head>
<body>
<div>
<span class="myspan">my text is upper!</span>
</div>
</body>
</html>
웹 폰트
웹폰트는 브라우저에서 기본으로 지원하지 않는 폰트를 웹으로부터 다운로드 받아 사용할 수 있는 방법입니다.
다양하고 예쁜 폰트들을 웹폰트로 사용할 수 있긴 하지만 다운로드를 받아야 한다는 단점이 있습니다.
다운로드 시간이 오래 걸리게 되면 화면에 노출되는 시간이 느려져 오히려 사용자에게 불편함을 느끼게 할 수 있는 것 입니다.
또한 다양한 해상도에서 깨지는 문제도 발생할 수 있습니다.
웹폰트는 수많은 종류가 있습니다.
대표적으로 구글 웹폰트가 있으며 최근에는 다양한 크기에서 품질을 유지하는 벡터 방식의 아이콘 웹폰트도 등장했습니다.
(unicode영역 중 Private Use Area (PUA) 영역을 활용해서 제작)
또한 웹폰트 방식말고, 기본 unicode를 사용해서 간단한 아이콘을 표현하는 것도 가능합니다.
아래 unicode를 사용한 HTML 코드를 참고하세요.
<div> 안녕하세요 ☺</div> //☺ 웹 화면에는 웃음 표시가 표현되는 코드입니다.
참고 자료
- [참고링크] bootstrap
http://getbootstrap.com
comment
24.03.29.
▶font색상변경
color:red;
color:rgba(255,0,0,0.5);--> r,g,b,alpha값
color:#FF0000; 또는 #F00;
▶폰트크기
font-size=1em;
em은 몇배를 표현하는 것이다. 기본적으로 폰트 크기는 16px로 정해져 있는데 2em을 하게 되면 2배가 되므로 32px로 보여진다. 부모 css를 상속 받아 나오는 px에 배수를 곱해 나올 수 있다.
▶font 모양
font-family: monospace;
폰트의 모양을 정해진 모양으로 나타낸다 굴림,궁서 등등
font-family: monospace,Gulim,sans-serif; --> 이렇게 여러개의 폰트를 나열할때도 있는데 브라우저에서 지원하는 것이 다르기 때문에 없으면 이거 없으면 이거를 선택하게 만드는 것이다.
22.08.15
2022.07.28
'22.05.17
2022.03.15
html상에서 css를 이용해 폰트의 크기와 색상 글꼴 등을 바꿀 수 있다.
폰트 크기는 16px이 디폴트이지만 디폴트 값을 변경할 수도 있다.
폰트의 픽셀 값을 지정해줘서 절대적인 크기를 설정할 수도 있고 em을 이용하여 상대적인 크기를 설정할 수도 있다.
그 밖에도 배경색이나 글꼴을 설정할 수도 있다.
폰트 색상은 color : red처럼 이름으로 설정할 수도 있고 rgb컬러를 조합한 16진수 코드로 보다 세세하게 설정할 수도 있다.
220126
220115
220114
20220106
22.1.4
210726
21.05.09
21.5.3
21.04.30
21.04.24
21.04.25
font-size: 'n'em;의 경우
부모노드에서 상속받은 기본폰트사이즈 값에 n배 해준 값 출력된다
:)