'Study'에 해당되는 글 25건
- 2011.05.15 DIV 사용법
DIV 사용법
Study/Web Programing 2011. 5. 15. 19:15
웹프로그래밍에 대해서 아무것도 모르다가 TISTORY를 꾸미기 위해 하나씩 배워보겠습니다.
첫번째로 DIV라는것을 배워보겠습니다.
html을 한번이라도 접해보신분이라면 Table에 대해 들어보셨을텐데요.
Table은 tr, td, rowspan, cellspan 의 개념만 알고 약간의 지능만 있다면
복잡한 Table을 금방 만들수 있습니다.
DIV는... 좀 다른데요 하지만 개념만 확실히 세우면 더쉽습니다.
일단 무조건 연속적이라는 개념을 세워두세요
첫번째로 DIV라는것을 배워보겠습니다.
html을 한번이라도 접해보신분이라면 Table에 대해 들어보셨을텐데요.
Table은 tr, td, rowspan, cellspan 의 개념만 알고 약간의 지능만 있다면
복잡한 Table을 금방 만들수 있습니다.
DIV는... 좀 다른데요 하지만 개념만 확실히 세우면 더쉽습니다.
일단 무조건 연속적이라는 개념을 세워두세요
DIV는 연속적이다(1)
DIV는 연속적이다(2)
DIV는 연속적이다(3)
- <DIV>DIV는 연속적이다(1)</DIV>
- <DIV style="BACKGROUND: #ff0000">DIV는 연속적이다(2)</DIV>
- <DIV style="BACKGROUND: #ff0000; FLOAT: left">DIV는 연속적이다(3)</DIV>
1번을 보면 가장 기본적인 사용법입니다.
아무런 속성도 주지 않았죠 기본적으로 div를 사용하면 한줄을 모두 차지 합니다.
즉, 라인이 시작되는 부분에서 <DIV>가 켜지고 끝나는 부분에서</DIV>가 사용되어 사이에 쓰이는 모든 글은 한개의 라인을 차지하는 것입니다.
배경이 하얀색이라 보이지는 않지만 "DIV는 연속적이다(1)"이 포함한 줄이 모두 사용된것입니다.
2번은 배경색으로 넣었습니다. 확실히 한개의 라인이라는것을 알수있죠?
3번은 FlOAT:left라는 스타일을 주었습니다. 이 스타일은 내용이 끝난곳에서 </DIV>를 하는 것과 같습니다.
예제로 다음에 것을 한번 해보세요.~
1. 눈건강은포기하지마세요
건강하고아름다운눈빛
촉촉함이더해주고
2. 눈건강은포기하지마세요
건강하고아름다운눈빛
촉촉함이더해주고
3.눈건강은포기하지마세요
건강하고아름다운눈빛
촉촉함이더해주고
4.눈건강은포기하지마세요
건강하고아름다운눈빛
촉촉함이더해주고
5.눈건강은포기하지마세요
건강하고아름다운눈빛
촉촉함이더해주고
