- 레이어(Layer)란, 간단히 말해 층을 의미한다.
- 하나의 웹 페이지에 여러 개의 레이어를 만들어 한 레이어 위에 다른 레이어를 겹쳐 쌓을 수 있다.
- 레이어를 보이거나 감추거나 확대 또는 축소도 가능하고 동적인 애니메이션 구현도 가능하다.
- 레이어 정의
- 고유한 ID를 가져야 하며 레이어 위치와 크기를 속성값으로 지정한다.
<style>
#ID이름 {
position: 속성값(absolute, relative);
위치 속성(left, top): 수(pt, px, in, cm);
크기 속성(width, height): 수(pt, px, in, cm);
}
</style>
- 레이어 생성에 필요한 태그
- <div> 와 <span> 태그 사용
- class 와 id 속성을 추가하여 원하는 부분의 스타일 지정
<div id="id 이름">
<span class="class 이름"> 표현할 내용1 </span>
표현할 내용2
</div>
- 예제
<html>
<head>
<title>Web Programming - Layer</title>
<style>
#layer1 {
position: absolute;
left: 50; top: 20; width: 150; height: 100;
background: green; z-index: 1;
}
#layer2 {
position: absolute;
left: 100; top: 90; width: 150; height: 100;
background: yellow; z-index: 2;
}
.white { background: white; }
</style>
</head>
<body>
<div id="layer1">
<center><br><span class="white"> 초록 색종이 </span></center>
</div>
<div id="layer2">
<center><br> 노란 색종이 </center>
</div>
</body>
</html>
'워크시트' 카테고리의 다른 글
| 파이참 프로젝트 파일 사라져 보일 때 (0) | 2022.06.24 |
|---|---|
| InconsistentMigrationHistory 이슈 발생시 해결방법 (5) | 2022.06.19 |
| [CSS] 구글 폰트 사용하기 (0) | 2022.06.04 |
| [CSS] 기본 스타일과 선택자 (0) | 2022.06.03 |
| [Excel] VLOOKUP 함수 (0) | 2022.05.29 |