button {
background-color: blue; /*배경 색상 지정*/
color: white; /*텍스트 색 지정*/
height: 50px; /*높이 지정*/
width: 200px; /*너비 지정*/
border: 1px solid red; /*테두리 설정*/
border-radius: 20px; /*둥근 모서리*/
cursor: pointer; /*요소 위로 마우스 가져갈때 커서 변경*/
}
색상 표현
- 색 이름: red, blue, white
- RGB 값: rgb(0,150,255)( 0~255까지 표현 가능)
- Hex값: #0096FF (16진수로 색 표현)
- RGBA: rgb(0,150,255,0.5) - 이전 RGB값에서 마지막에 투명도를 결정하는 값을 더 추가했음.
수치 값 표현 방법
-
픽셀: 고정된 절대값(ex. 50px, 100px)
-
퍼센트: 삭대적 측정(ex. 50% 페이지 너비의 50%를 의미)
-
em, rem(가변 단위)
a. em: 같은 엘리먼트에서 지정된 font-size를 기준으로 px로 바뀌어 화면에 표시 . 같은 엘리먼트에 설정된 폰트 크기 값이 없을 경우, 상위 요소의 폰트 사이즈가 기준이 됨 ```html <div style="font-size: 10px"> <span style="font-size: 1em">1em</span><!--10px--> <span style="font-size: 2em">2em</span><!--20px--> </div> ```
b. rem: 최상위 엘리먼트에서 지정된 font-size 값을 기준으로 변환. 별도의 font-size를 설정하지 않은 경우, 각 브라우저에서 기본적으로 설정된 값을 상속 받음. ```html <html lang="en"> <head style="font-size: 20px"> <title>Document</title> <link rel="stylesheet" href="index.css" /> </head> <body> <div style="font-size: 10px"> <span style="font-size: 1rem">1rem</span><!--20px--> <span style="font-size: 2rem">2rem</span><!--40px--> </div> </body> </html> ```
