요소의 그림자 처리(box-shadow)
box-shadow는 주로 블록 요소에 설정한다.
문형 = box-shadow: 수평수치 - 수직수치 - 흐림수치 - 번짐수치 - 색상 - 삽입효과
- 흐림(blur) : 그림자의 테두리가 흐려지게 하는 효과.
- 번짐(spread) : 그림자의 크기 설정.
<head>
<meta charset="UTF-8">
<title>그림자 효과</title>
<style>
.c1 {
background-color: yellow;
border: 5px solid blue;
box-shadow: 10px 10px 5px teal;
}
.c2 {
background-color: silver;
border: 5px solid black;
box-shadow: 20px 20px 30px -20px maroon;
}
.c3 {
background-color: yellow;
border: 5px solid olive;
box-shadow: 5px 5px 2px 5px gray inset;
}
#d1 {
border: 1px solid rgba(102, 186, 255, 0.4);
box-shadow: 0 0 20px 10px rgba(102, 186, 255, 0.4);
}
#d2 {
border: 1px solid black;
box-shadow: 10px 10px #bce55c,
20px 20px #cef279,
30px 30px #e4f7ba;
}
img {
padding: 20px;
padding-bottom: 60px;
margin: 20px;
box-shadow: 5px 5px 10px #000;
}
</style>
</head>요소의 위치 처리(position)
position은 콘텐츠(텍스트, 이미지, 테이블 등) 요소를 문서에 배치할 때 사용하는 속성이다.
- static : 일반적인 위치(기본값)
- relative : static 위치에서의 상대적인 위치로 설정. left, right, top, bottom 속성으로 위치를 지정.
- fixed : 특정 위치에 고정. 창(브라우저)에 고정.
- absolute : 특정 위치에 고정. 문서(페이지)에 고정.
- sticky : 스크롤 될 때, 특정 위치에 고정.
<head>
<meta charset="UTF-8">
<title>요소의 위치</title>
<style>
div {
border: 2px solid green;
width: 300px;
}
.static { position: static; }
.rel {
position: relative;
left: 50px;
top: 20px;
}
.fix {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
.abs {
position: absolute;
right: 10px;
top: 30px;
}
</style>
</head>선택자(Selector) - 가상 선택자와 조합 선택자
선택자는 다음과 같이 네 가지 방식이 있으며, 저마다 다양하게 구사할 수 있다.
1. 의사 클래스 선택자(pseudo-class Selector)
의사 클래스 선택자는 요소의 특수한 상태에 따른 선택자이다.
- :link - 링크가 연결된 요소를 선택.
- :visited - 연결된 페이지가 방문한 페이지인 요소를 선택.
- :active - 클릭된 링크 요소를 선택.
- :hover - 영역에 마우스가 들어가는(위치하는) 요소를 선택.
- :focus - 포커스를 가진 요소를 선택.
- :disabled - 비활성화 된(또는 되는) 요소를 선택.
- :checked - 체크된(또는 되는) 요소를 선택.
2. 구조적 가상 선택자
구조적 가상 선택자는 HTML 요소가 계층 구조를 형성하고 있음을 기반으로 하는 선택자이다.
- :nth-child(n) - 지정된 순서에 따라 요소를 선택. n = 수식이나 특정 키워드를 사용.
even - 짝수번째 요소 / odd - 홀수번째 요소 / 2n, 3n 등 - 2의 배수, 3의 배수 번째에 해당하는 요소 - :first-child - 동일 계층의 첫번째 요소를 선택.
- :last-child - 동일 계층의 마지막 요소를 선택
3. 구조적 조합 선택자
구조적 조합 선택자를 이용해 HTML 요소의 계층 구조에 따라서 선택자를 조합할 수 있다.
- ' '(공백) : 후손 선택자. 요소선택자 + ' ' + 후손요소선택자
- '>' : 자손 선택자. 요소선택자 + '>' + 자손요소선택자
- '+' : 인접 형제 선택자. 요소A + '+' + 요소B
- '~' : 모든 형제 선택자. 요소A + '~' + 요소B(모든 B 선택)
- ',' : 그룹 선택자. A, B(A와 B 모두 선택)
4. 의사 요소 선택자(pseudo-element Selector)
의사 요소 선택자는 요소의 지정된 부분을 스타일링하기 위한 선택자이다.
- ::first-line : 요소의 첫줄만 선택.
- ::first-letter : 요소의 첫 글자만 선택.
- ::before : 요소의 앞에 가상의 요소를 추가.
- ::after : 요소의 뒤에 가상의 요소를 추가.
'CSS' 카테고리의 다른 글
| 6. display의 flex (0) | 2022.08.24 |
|---|---|
| 5. 다양한 요소(element) (0) | 2022.08.24 |
| 3. 배경 및 텍스트 (0) | 2022.08.12 |
| 2. 색상/테두리/요소의 크기/여백 (0) | 2022.08.12 |
| 1. CSS 기초 (0) | 2022.08.12 |
