* 표시와 배치
.myview {
position: relative;
top: -1px;
z-index: auto;
visibility: visible;
display: inline;
}
1) position 프로퍼티
- 배치 방법을 지정함
static : 일반 배치 // 초기값
relative : 일반 배치에 대한 상대 위치로 배치
absolute : 이 요소를 포함하는 블럭 내의 절대 위치로 배치
fixed : 창 안의 절대 위치로 배치
2) top 프로퍼티(상) / bottom 프로퍼티(하) / left 프로퍼티(좌) / right 프로퍼티(우)
- 요소의 위치를 지정함.
auto(자동) // 초기값
또는 %나 px로 지정. (position이나 static인 경우는 무시됨.)
3) z-index 프로퍼티
auto(자동) // 초기값
또는 정수 값을 지정(클수록 앞)
4) display 프로퍼티
- 표시 형식을 지정함.
inlune : 인라인 요소
block : 블럭 요소
inlune-block : 인라인 요소처럼 배치되는 믈럭 요소
list-item : 리스트 항목
none : 표시 안 함.
5) visibility 프로퍼티
- 표시/감춤을 지정함.
- visibility:hidden은 레이아웃에 영향을 주지 않는 데 비해 display:none은 요소가 존재하지 않는 것으로 취급함.
visible : 표시 // 초기값
hidden : 감춤
collapse : 표에서는 행이나 열 단위로 감춤.
* 이미지 둘러싸기
- 이미지 주의에 텍스트를 배치하는 방법에 대한 예시
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <!DOCTYPE html> <html> <head> <title>인터넷이 보이는 그림책</title> <style type="text/css"> img { float: right; } .mybox { width: 600px; background-color: pink; } .float_off { clear: right; } </style> </head> <body> <div class="mybox"> <img src="internet.png"></img> 인터넷이 보이는 그림책에서는 FTH 및 ADSL, 블로그 등 컴퓨터 업계... <p class="float_off"> 대상에 제한 없이... </p> <div> </body> </html> | cs |
내용 출처 : HTML5가 보이는 그림책 (ANK Co., Ltd 저, 성안당)
'Programming > CSS3' 카테고리의 다른 글
| CSS3의 새로운 스타일 2 (0) | 2017.05.19 |
|---|---|
| CSS3의 새로운 스타일 1 (0) | 2017.05.19 |
| 벤더 프리픽스(Vendor Prefix) (0) | 2017.05.19 |
| CSS3란? (0) | 2017.05.19 |
| 배경/리스트 (Background/List) (0) | 2017.05.17 |
| 박스 (Box) (0) | 2017.05.17 |
| 색/텍스트 (Color/Text) (0) | 2017.05.17 |
| CSS란? (0) | 2017.05.17 |
