CSS 기초 부터
적용할 태그를 선택하는 방법
=> id -> (.idName), className -> (#className) 을 지정하여 선택 : id는 유니크 한 값이여야 하지만 className은 공통 되게 쓸 수 있습니다.
=> span , div, p... 태그로 선택 -> (span{style}) : 선택된 태그를 사용하는 곳에 적용이 됩니다.
=> 다중 선택 -> (div span{style속성}, #{className} span div) : 선택된 것에 스타일을 한꺼번에 적용할 수 있습니다. 띄어쓰기로 구분해줘야 합니다.
=> 다중 조건 선택 -> (div.{idName} , div#{className}) : OR이나 AND(다중 선택 가능)를 조건으로 줄 수 있습니다.
ex ) div.title => div 태그 안에서 title이라는 id를 선택 합니다.
=> 가상 클래스 지정 (:hover, :active, :focus, ...) : 실행되었을 때의 스타일을 지정 할 수 있습니다.
:hover -> 마우스를 롤오버 했을 때의 스타일이 변합니다.
:focus -> input박스와 같은 것에 focus되었을 때 스타일이 변합니다.
CSS 단위
<상대적인 단위>
-> 크기를 px단위로 바꿔서 화면에 출력해 줍니다.
rem : html요소의 사이즈를 기준으로 사이즈 크기를 변화시킵니다. ( html 요소는 기본적으로 16px로 고정되어 있습니다.)
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
html { font-size: 16px; }
body { font-size: 1.0em; }
p { font-size: 4.0rem; }
</style>
</head>
<body>
<p>Viva</p>
</body>
</html>
< - 결과 값
viva의 폰트 크기가 html의 폰트 크기가 16px의 4배인 64px로 변화하였습니다.
em : 상위 요소의 사이즈를 기준으로 사이즈를 px로 변경하고 화면에 적용합니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
html { font-size: 16px; }
body { font-size: 1.0em; }
p { font-size: 2.0em; }
</style>
</head>
<body>
<p>Viva</p>
</body>
</html>
<- 출력 결과
맨 상위에 html 태그의 폰트 사이즈가 16px이라
body는 html의 16 X 1 하여 16px이고
p는 body의 폰트 사이즈 16 X 2하여 32px 입니다.
% : 백분율 단위를 기준으로 요소에 저장되어 있던 정보를 기준으로 사이즈를 지정합니다
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 14px;
}
div {
font-size: 120%;
font-weight: bold;
}
</style>
</head>
<body>
<div>Viva</div>
</body>
</html>
<- 출력 결과
상위의 폰트 크기인 14px의 120%으로 지정하여 16.8px의 크기로 폰트를 설정 합니다
<절대적인 단위>
px (픽셀) : 화소 단위 중 하나로 대부분은 1px = 1/ 96인치의 절대 단위로 인식합니다.
cm : 센치미터를 기준으로 크기를 설정합니다.
mm : 밀리미터를 기준으로 크기를 설정합니다.