#dva{float:left; margin-right:-1px; width:50px; height:50px; border:1px solid red; border-top-left-radius:100%; text-align:center; padding-top:12px; background:rgb(230,100,0);}
위의 스타일 선언문을 분석 해 보면
div 영역 넓이 50px 높이 50px에 1px 의 빨간 테두리를 가진 사각형에 배경색 rgb(230,100,0) 값을 가지며 border-top-left-radius:100% 이 선언은 사각형의 상단부 왼쪽 모서리 부분 전체 를 둥글게 해 주라는 스타일 선언 입니다.
float:left 이 속성 float 은 block 엘리먼트 태그의 영역 위치를 결정 해 주는 속성 이며 값으로는left와 right를 가집니다.
margin-right이 속성 선언문으로 영역 오른쪽 외부 간격을 -1px을 주어 테두리 두개가 겹쳐 나타 나는 것을 하나로 만들어 주었습니다.
text-align:center사실 이 속성과 값을 주게 되면 div 영역안의 내용 여기서는 1이라는 숫자의 위치를 결정 해 주는 속성 으로 영역 중간에 위치 하도록 해 주는 것인데 스타일이 먹지 않고 상부쪽에 붙어서
위치 합니다.
padding-top:12px; 그래서 padding-top 속성으로 숫자 1의 위치를 아래로 12픽셀 내려 센터를 맞추어 준 것입니다.
이렇게 코딩된 1번 원의 조각을 때내어서 보면 이렇게 될것입니다.
1
<div id="dvb">2</div>
2번 div 역시 태그에 id네임 dvb 를 주어 코딩을 해준 모습 입니다.
스타일 선언문은 아래와 같습니다.
#dvb{float:left;width:50px; height:50px; border:1px solid red; border-top-right-radius:100%; text-align:center; padding-top:12px; background:rgb(230,0,200);}
1번과 다른 것은 border-top-right-radius:100% 상단부의 오른쪽 모서리를 둥글게 하는 속성과 값을 준 모습 이며 배경색은 rgb(230,0,200)을 가집니다.
아래는 따로 쪼개어 본 모습 입니다.
2
<div id="dvc">3</div>
3번 div 역시 태그에 id네임 dvc 를 주어 코딩을 해준 모습 입니다.
스타일 선언문은 아래와 같습니다.
#dvc{float:left; margin-right:-1px; margin-top:-1px; width:50px; height:50px; border:1px solid red; border-bottom-left-radius:100%; text-align:center; clear:both; padding-top:12px; background:rgb(30,200,200);}
여기서 한가지 중요한 요소가 들어 가야만 됩니다.
만약 그렇지 않을 경우 float 속성에 의해 모두 가로로 한줄에 다닥 다닥 붙게 됩니다.
만약 body부 전체 넓이 보다 넘치는 블록이 있을 경우 한칸 아래로 내려 붙어 나타 나게 됩니다.
아래는 border-bottom-left-radius:100% 속성이 주어진 3번의 분할된 모양 입니다.
3
<div id="dvd">4</div>
4번 div 역시 태그에 id네임 dvd 를 주어 코딩을 해준 모습 입니다.스타일 선언문은 아래와 같습니다.
#dvd{float:left; margin-top:-1px;width:50px; height:50px; border:1px solid red;
border-bottom-right-radius:100%; text-align:center; padding-top:12px; background:rgb(0,100,230);}
위의 스타일 과 같이 선언 해 주도록 하면서
border-bottom-right-radius:100% 여기서 bottom-right 이부분만 달라 집니다.
아래는 4번의 조각 모습 입니다.
4
만약 영역을 더크게 잡게 되면
현재의 50픽셀에서와 크기를 150픽셀로 주었을때의 모습은 이런 두가지의 모습이 될수도 있습니다.
1
2
3
4
1
2
3
4
코딩의 의도는 1번과2번은 위쪽에 위치 하고 3번과 4번 영역은 위 1번과 2번 아래 붙혀서 코딩을 해야 원하는 4등분의 원을 만들수 있는 것인데 만약 위와 같은 모양으로 나타 나게 된다면 의도 와는 전혀 딴판이 되겠죠
그럼 왜 이런 모습으로 나타 나게 될까요?
그것은 상위 태그에 주어진 float속성 때문 입니다.
그래서 상위에 주어진 float속성을 해제 해 주는 요소를 3번 선언문에 입력 해 주어 상위에서 벗어 나도록 해 주어야 하는데 이때 사용 하는 요소 엘리먼트
clear속성 입니다.
clear속성의 값에는float:left를 해제 해주는
left와 float:right 를 해제 해 주는
right 그리고 상위에 주어진 float 속성값 전체를 해제 시켜 주는
both 이렇게 3가지의 값을 가지게 됩니다.
그럼 위의 모양을 제대로 잡아 주기 위한 스타일 정의와 코딩을 다시 만들어 보겠습니다.
<style>
#dva{float:left; margin-right:-1px; width:150px; height:150px; border:1px solid red; border-top-left-radius:100%; text-align:center; padding-top:60px; background:rgb(230,100,0);}
#dvb{float:left;width:150px; height:150px; border:1px solid red; border-top-right-radius:100%; text-align:center; padding-top:60px; background:rgb(230,0,200);}
#dvc{float:left; margin-right:-1px; margin-top:-1px; width:150px; height:150px; border:1px solid red; border-bottom-left-radius:100%; text-align:center; clear:both; padding-top:60px; background:rgb(30,200,200);clear:both;}
#dvd{float:left; margin-top:-1px;width:150px; height:150px; border:1px solid red; border-bottom-right-radius:100%; text-align:center; padding-top:60px; background:rgb(0,100,230);}
</style>
<div id="dva">1</div>
<div id="dvb">2</div>
<div id="dvc">3</div>
<div id="dvd">4</div>
1
2
3
4