-
적용할 태그를 선택하는 방법
=> 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 : 밀리미터를 기준으로 크기를 설정합니다.
'자료 정리' 카테고리의 다른 글
React-Native 와 React의 차이 (0) 2020.05.12 Cookie와 Storage 이란? (0) 2020.05.11 axios 와 fetch의 다른 점 (0) 2020.02.29 Sequelize 1 : N 관계 설정, Cascade 적용 (0) 2020.02.26 socket.io ( node.js ) (0) 2020.02.25