CSS3 단위
글자 크기는 px, %, em 단위가 있다.
- %는 100%가 디폴트.. (100%보다 크면 글자 크기 커진다.)
- 1em 이 디폴트값 (16px 정도)
- 2em -> 2배
여기는 간단하게 정리할 부분만 정리하고 넘어가겠다!
#content1 p span {
display:block;
color:#00ff21;
font-weight:normal;
font-size:50%;
}
span은 원래 라인 구조지만 dispaly : block 으로 지정하면 아래로 글자가 이동한다.
font-size: 50% 는 원래 크기보다 반으로 줄어들게 만드는 속성이다.
url()
background-image 속성의 속성값으로 많이 사용된다. 이 경우 배경 이미지의 경로를 나타낸다.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
#wrap {
width:800px;
height:500px;
margin:0 auto; /* 가운데 정렬하기 */
border: 1px solid #cccccc;
}
#content {
width:80%;
height:100%;
margin:0 auto;
background-image:url('image/mumin1.gif');
font-size:2em;
color:#ffffff;
font-weight:bold;
text-align:center;
}
</style>
</head>
<body>
<div id="wrap">
<div id="content">
해당 이미지는 저작권 보호를 받습니다.
</div>
</div>
</body>
</html>
width: 80% 는 wrap 사이즈의 80%를 의미한다.
↓
백분율이 있는 것은 항상 다른 값에 상대적으로 설정된다는 것이다. 예를 들어, 요소의 font-size 를 백분율로 설정하면 부모 요소의 글꼴 크기에 대한 백분율이 된다. width 값에 백분율을 사용하면, 부모 너비의 백분율이 된다.
실제로 저 코드에서 width: 640px 라고 적었을때 똑같은 결과가 나왔다!
display 속성
화면에 어떻게 보이는지를 설정하는 속성이다. 다양한 속성값이 있지만, 주로 몇 가지만 많이 사용된다.
- block
- inline
- inline-block
body div:nth-child(4) { /* 1~3은 4랑 모두 같은 코드라서 따로 안적음 */
width: 100px;
height: 100px;
background-color: #ff0000;
color: #ffffff;
font-weight: bold;
text-align: center;
}
body div:nth-child(5) {
width: 100px;
height: 100px;
background-color: #00ff00;
color: #ffffff;
font-weight: bold;
text-align: center;
display: inline; /* 인라인 속성이라 너비, 높이 속성이 적용 안됨 */
margin: 10px 10px 10px 10px; /* margin은 좌우의 여백만 적용된다. */
}
body div:nth-child(6) {
width: 100px;
height: 100px;
background-color: #0000ff;
color: #ffffff;
font-weight: bold;
text-align: center;
display: inline;
}
body div:nth-child(7) {
width: 100px;
height: 100px;
background-color: #ff0000;
color: #ffffff;
font-weight: bold;
text-align: center;
display: none; /* 화면에서 사라진다. */
}
body div:nth-child(8) {
width: 100px;
height: 100px;
background-color: #00ff00;
color: #ffffff;
font-weight: bold;
text-align: center;
display: inline;
}
body div:nth-child(9) {
width: 100px;
height: 100px;
background-color: #0000ff;
color: #ffffff;
font-weight: bold;
text-align: center;
display: inline-block; /* inline-block 이라 너비, 높이 속성이 적용됨 */
}
inline 으로 속성을 해서 width와 height 를 지정해도 적용되지 않는다. 또한 margin 값도 상하는 적용되지 않으며 좌우만 적용된다.
display : none
아예 화면에서 사라져버린다. 어떤 상황에서는 메뉴가 보이고 어떤 상황에서는 메뉴가 안보이게 할때 사용한다. 즉, 메뉴를 가릴 때 등.. 사용한다.
↕
visiblity: hidden
사라지긴 하지만 공간은 남아있다.
display: inline-block 은 주로 메뉴 구성할 때 많이 쓰일 것
+ ) 추가
투명도를 조절하는 속성
opacity: 0.7;
opacity 는 1이 기본값 (0~1)
'🧚🏻♂️ HTML , CSS' 카테고리의 다른 글
| CSS - 수직 가운데 정렬, position 속성 (0) | 2021.09.21 |
|---|---|
| CSS - magin과 padding, box-sizing, background-image (0) | 2021.09.20 |
| CSS - 문자 선택자, 링크 선택자, 부정 선택자 (0) | 2021.09.19 |
| CSS - 반응 선택자, 상태 선택자, 구조 선택자 (0) | 2021.09.19 |
| CSS - tag, id, class 선택자, 속성 선택자, 후손 및 자손 선택자 등 (0) | 2021.09.19 |