예제 5-5. 유동 배치 - float : left 혹은 float : right
WEB/CSS3-CONCEPT 2017. 12. 15. 18:23 |5. 유동 배치 - float : left 혹은 float : right
float 프로퍼티를 지정하면 태그를 오른편이나 왼편에 항상 배치시킬 수 있다.
float는 항상 같은 위치에 출력할 광고나 공지 등에 적합하다.
ex)
img{ float : right;}
예제 5-5. 유동 배치 - float : left 혹은 float : right
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 28 29 30 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>float 배치</title> <style> #float { float : right; /* 뷰포트의 오른쪽에 붙여 */ border : 1px dotted black; width : 7em; /* 7개의 글자 크기 */ padding : 0.25em; margin : 1em; } </style></head> <body> <h3>학기말 공지</h3> <hr> <div> <p id="float"> 24일은 피아니스트 조성진의 크리스마스 특별 연주가 있습니다.</p> <p> 이제 곧 겨울 방학이 시작됩니다. 학기 중 못다한 Java, C++ 프로그래밍 열심히 하기 바랍니다. 인턴을 준비하는 학생들은 프로젝트 개발에 더욱 힘쓰세요. 그럼 다음 학기에 만나요.</p> </div> </body> </html> | cs |
'WEB > CSS3-CONCEPT' 카테고리의 다른 글
| 예제 5-12. 애니메이션 만들기 연습. 예제 5-13. font-size에 대한 전환 효과 만들기. 예제 5-14. 다양한 변환 사례. 5. CSS3 스타일로 태그에 동적 변화 만들기 (0) | 2017.11.06 |
|---|---|
| 예제 5-11. CSS3 스타일로 폼 꾸미기. 4. 폼 꾸미기 (0) | 2017.11.06 |
| 예제 5-10. 마우스가 올라오면 행의 배경색이 변하는 표 만들기. 3. 표 꾸미기 (0) | 2017.11.06 |
| 예제 5-9. CSS3 스타일을 응용하여 리스트로 메뉴 만들기 (0) | 2017.11.06 |
| 예제 4-21. 마우스 커서 제어, cursor (0) | 2017.11.04 |