레이어 기본
페이지 정보
본문
| 레이어란? ................................................. 레이어(Layer)란 층을 의미한다. 포토샵을 시작한 사람은 레이어의 의미를 잘 알고 있을 것이다. 웹문서에 여러 겹의 층을 만들어 그 위에 올릴 수 있는 것이다. |
■ 레이어 태그 |
| 네비게이터 전용으론 , 태그를 사용하는데 익스플로러에서도 지원하는 태그를 이용하는게 좋다. |
■ ~ 태그의 속성 |
| id | 레이어 이름으로 CSS. 자바스크립트에서 이용함 |
| position | 절대좌표 position:absolute; top:100px; left:150px 브라우저 상에서 100px, 좌에서 150px 떨어짐 곳에서 시작 상대 좌표 position:relative; top:100px; left:150px 상위태그의 오른쪽 상단에서 100px, 좌에서 150px 떨어짐 곳에서 시작 |
| top | X좌표 (상단 기준) |
| left | Y좌표 (좌측 기준) |
| width | 레이어 너비 |
| height | 레이어 높이 |
| overflow | 레이어속의 내용이 레이어보다 클 경우 scroll 은 스크롤바 생성 auto는 내용에 따라 자동으로 스크롤바 생성 visible은 레이어 크기가 변경 hidden은 넘치는 영역을 보여주지 않는다. |
| visibility | 레이어를 보여줄지 말지를 결정하는 속성으로 visible 은 보여주고 hidden 은 보여주지 않는다. inherit 은 레이어 안에 레이어가 있을 경우 부모 레이어의 이 속성을 상속한다. |
| z-index | 레이어가 겹칠 경우 이 값이 큰 경우 더 위(앞)로 |
| background-color | 레이어의 배경색 |
■ 레이어 위치 absolute : 브라우저 기준으로 위치 (레이어 태그 위치와 무관) |
| 절대좌표 레이어 넣은 곳 :
|
■ 레이어 위치 relative : 상위 태그를 기준으로 위치한다 (td,font) |
| 상대좌표 레이어 넣은 곳 :
|
| 레이어 위치를 절대 좌표를 이용할 경우 브라우저 전체 기준으로 위치하며 레이어 태그의 위치와는 관계가 없다 그러나 상대좌표로 하게되면 레이어 태그의 상위 태그(font 나 td 같은 태그)를 기준으로 위치하므로 레이어 태그를 잘 두어야 한다. left와 top으로 상위 태그로부터 간격을 조정할 수 있다. * 상대좌표의 예제 경우는 테이블 속에 있으므로 상위태그로 td 태그임. |
| 레이어 속의 내용은 ~ 사이에 넣으면 되고 실제 이 속에도 테이블 태그를 이용해서 배치나 디자인을 하게된다. |
출처 : http://blog.naver.com/doolyking.do?Redirect=Log&logNo=60004548789
- 이전글다운로드 더이상 해메지 맙시다 21.02.09
- 다음글이미지에 회사마크 삽입 (투명한 회사마크) 21.02.09
댓글목록
등록된 댓글이 없습니다.