크기의 단위
- 일반적인 기준은 브라우저에 설정된 기본 폰트의 크기입니다.
% 단위
: 100%, 200%, %단위로 크기를 명시하는 방법
em 단위
: 배수단위로 크기를 명시하는 방법이며, 상위 태그에 영향을 받습니다. (2em = 200%)
rem 단위
: 배수단위로 크기를 명시하는 방법이며, 상위 태그에 영향을 받지 않고 최상위 태그 html 태그에 영향만 받습니다.
px 단위
: 절대적인 크기를 명시하는 방법
색상의 단위
##RRGGBB 형식
: (16진수로 표현)
<style>
h1 {
color : #000000; <!-- 검은색 -->
}
h2 {
color : #FFFFFF; <!-- 흰색 -->
}
</style>rgb(r, g, b) 형식
<style>
h1 {
color : rgb(0, 0, 0); <!-- 검은색 -->
}
h2 {
color : rgb(255, 255, 255); <!-- 흰색 -->
}
</style>url의 단위
url("link")의 형식
가시 속성
- 눈에 보이는 방식을 지정하는 방식을 의미합니다.
display 속성
- 속성 값으로는 none, inline, block, inline-block, ..등이 있습니다.
- none : 보이지 않게 설정, 아예 영역이 사라집니다.
- inline : inline 형식으로 변경
- block : block 형식으로 변경
- inline-block : inline-block 형식으로 변경
<style>
h1 {
display: none;
}
</style>
<body>
<h1>Hello, World !</h1> <!-- 아예 영역이 사라져서 보이지 않습니다. -->
</body>visibility 속성
- 속성 값으로는 hidden, visible, ...등이 있습니다.
- hidden : 영역은 차지하나, 보이지 않습니다.
- visible : 영역도 차지하고, 보이게 되며 기본값입니다.
<style>
h1 {
visibility: hidden;
}
</style>
<body>
<h1>Hello, World !</h1> <!-- 영역은 남아있으나 보이지만 않습니다. -->
</body>opacity 속성
- 속성값으로는 0 ~ 1.0으로 가지며, 0이 투명, 1로 갈수록 불투명도를 의미합니다.
<style>
h1 {
optacity: 0.8;
}
</style>
<body>
<h1>Hello, World !</h1> <!-- 투명도가 조절됩니다 -->
</body>
Java, Python, JavaScript Lover