CSS3 속성 2탄.
글자 속성
- font-size
- font-family
- 공백이 있을 경우에 '' 로 반드시 묶기!
- 여러 개 지정해놓기 가능, 첫번째 글꼴이 없을 경우에 그 다음 걸로 지정
- 웹 폰트 많이 사용
- font-style
- 글자 스타일
- italic
- normal
- oblique
- inherit
- initial
- font-weight
- 글자 굵기
- text-align
- left
- right
- start
- end
- <span> 태그는 중앙이라는 개념이 없으므로 이 속성을 적용할 수 없음!
- inline-block에서만 적용됩니다~~
- text-decoration
- none
위치 속성
- position
- 좌측 상단 모서리: default!!
- abolute: 절대 위치 좌표 설정
- 부모 영역을 벗어나는 경우 → overflow 처리
- overflow: hidden / scroll
- 실습 꼭 해보기!
- fixed: 화면을 기준으로 절대 위치 좌표
- relative: 원래 위치(default)를 기준으로 상화좌우 위치 이동
- static:원래 위치! default
💥 absolute vs. fixed
- 부모의 포지션에 따라 달라짐
- 자식이 absolute인 경우
- 부모가 기본값 static이면 부모 영역은 부모의 형제와 나란히 하고, 자식은 부모 영역을 무시하고 body의 시작점을 0으로 계산
- 부모가 relative면, 부모영역은 부모의 형제와 나란히 하고, 자식은 부모영역의 시작점을 0으로 계산
- 부모가 absolute면, 부모영역은 body의 시작점을 0으로 하고, 자식은 부모영역의 시작점을 0으로 계산
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
width: 100px;
height: 100px;
/* position: absolute; */
}
.box:nth-child(1) {
background-color: red;
/* left: 10px;
top: 10px; */
}
.box:nth-child(2) {
background-color: green;
/* left: 50px;
top: 50px; */
}
.box:nth-child(3) {
background-color: blue;
/* left: 90px;
top: 90px; */
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
width: 100px;
height: 100px;
position: absolute;
}
.box:nth-child(1) {
background-color: red;
/* left: 10px;
top: 10px; */
}
.box:nth-child(2) {
background-color: green;
/* left: 50px;
top: 50px; */
}
.box:nth-child(3) {
background-color: blue;
/* left: 90px;
top: 90px; */
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
width: 100px;
height: 100px;
position: absolute;
}
.box:nth-child(1) {
background-color: red;
left: 10px; top: 10px;
}
.box:nth-child(2) {
background-color: green;
left: 50px; top: 50px;
}
.box:nth-child(3) {
background-color: blue;
left: 90px; top: 90px;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
</html>
유동 속성
- float
- 레이어 겹치기!
- right
- left
- none
- 정렬과 다름, body에서 앞에 있는 게 먼저~
요놈은 나도 아직 헷갈려서 따로 정리 예정..
그림자 속성
- text-shadow: 글자에 그림자 부여
- box-shadow: 박스에 그림자 부여
- { 오른쪽 아래 흐림도 색상 }
- 그림자 여러 개 부여 가능
- 양수는 오른쪽 방향 그림자, 음수는 왼쪽 방향 그림자
그레이디언트 속성
- linear-gradient( 각도, 색상 위치, 색상 위치 ... )
'Web > css' 카테고리의 다른 글
| [WEB][CSS3] overflow: hidden이 뭔데.. (2) | 2025.03.21 |
|---|---|
| [WEB][CSS3] 속성 (1) (2) | 2025.03.06 |
| [WEB][CSS3] 기초 (0) | 2025.03.06 |