Html&CSS/html4&css
0212_css_font-size
.Epona.
2020. 2. 12. 22:24
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0035)file:///C:/Users/TJ/Desktop/EX.html -->
<html lang="ko" xml:lang="ko" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>-</title>
<meta name="robots" content="noindex, nofollow">
<meta name="keywords" content="-">
<meta name="description" content="-">
<meta name="author" content="-">
<!-- 주석: crtl + / -->
<!-- 복사 붙여넣기 : ctrl + D -->
<!-- 원하는 영역만 주석: ctrl + shifte + / -->
<style type="text/css">
/* 클래스 선택자 */
p .text {background-color: orange;} /*공백 .클래스 이름: p안에있는 text 라는 클래스를 찾아서 스타일 적용*/
p span.text {background-color: green;} /* 특성도값이 높기 때문에 orange가 아닌 green이 적용됨 */
.text {color: blue;} /* 앞에 요소(태그이름) 없이 .클래스 이름만 써도됨 */
/* 아이디 선택자 css적용 */
p span#text1{background-color: yellow} /*특정도 값 = 102*/
p span#text2{background-color: gray} /*특정도 값 = 102*/
p span#text3{background-color: green} /*특정도 값 = 102*/
#text1{background-color: green} /*x특정도 값 = 100 임으로 적용 안됨*/
/* id 명은 스크립트에서도 공유됨으로 가급적으로 클래스로 작업하는 것이 좋음*/
.child li:first-child{background-color: yellow}/*펄스트차일드 7브라우저부터 크로스브라우징 가능*/
div > p{color:green} /*자식선택자: div 자식 p를 찾아서 그와 같은 구조에 css적용*/
h3 + p{background-color:pink} /* 인접 선택자: h4에 인접한 p태그로 구성된 구조에 css적용*/
a[target="_blank"]{background-color: green}/*속성성택자 : _blank 찾아서 css 적용*/
input[type="text"]{color:red} /*입력창 내 글자 색 바꿈쓰*/
div p{color:yellowgreen} /*하위 선택자: div 요소 안에 있는 모든 p태그안에 있는 건 모두 적용됨*/
h3, dt, dd {color:saddlebrown} /*선택자 그룹화: h2, dt, dd 찾아서 적용*/
/* 전체 선택자 */
/* * {color:blue} /*전체 선택자: 페이지 안에 모든 태그를 다 찾는다 */
div:after{content: "end"; color:lightcoral} /*컨텐츠 이전에 스타일 적용*/
p:before{content: "이전"; color:lightcoral} /*컨텐츠 이후에 스타일 적용*/
/*폰트 사이즈: font-size*/
body{font-size: 14px;}/*이 페이지의 모든 폰트는 14px로 적용*/
.px{font-size: 12px;}/*처음 선언한 14px가 취소 되고 px요소에 12적용 */
.em{font-size: 0.9em;} /*부모 14X0.9 = 12.6으로 적용 */
/*폰트 속성: font-family*/
.family{font-family: '돋움', dotum, sans-serif;}
/*폰트 색상*/
.color1{color:#07c}/*#0077cc* 중복되성,,?*/
.color2{color:rgb(205,0,28)}
.color3{color:rgb(100%,30%,100%)}
.color4{color:red}
/*폰트 굵기*/
.weight strong{font-weight:normal}
.weight span{font-weight: bold}
</style>
</head>
<body>
<h3>font-size</h3>
<!--px, em , rem, %, vh/vw-->
<p class="px"> 부모요소의 크기에 상속받지 않고 적용 </p>
<p class="em"> 부모요소의 크기에 따라 상속받아 적용</p>
<h3> font-family</h3>
<div class="family">
글꼴을 구분할 때는 쉼표로 적용하고 한글 폰트명을 사용할 경우, 영문 폰트 명도 같이 작성하고 , 대표 폰트와 대체 폰트로 구분하여 표현한다.<br/>
'한글폰트명',영문폰트명,대표폰트명, 대체폰트명
시스템 폰트 사용시에는 대표 폰트명 생략
</div>
<h3>color</h3>
<div class="color1">16진수 표현: #000000</div>
<div class="color2">10진수 표현: rgb(255,0,0)</div>
<div class="color3">백분율 표현: rgb(100%,0%,0%)</div>
<div class="color4">색상 명: red, green</div>
<h3>font-weight</h3>
<div class="weight"><!--100~900-->
<strong>폰트 굵기를 normal(100~500</strong>로 표현<br/>
<span>폰트 굵기를 bold(600~900) </span>로 표현<br/>
but 폰트에 따라 값이 다름
</div>
</body></html>