연달아 질문만 올리네요
그것도 초보적인 질문만...
다름이 아니라, clear 요놈에 대해서 질문입니다.
clear:left
clear:right
clear:both
clear:none
IE에서는 틀려서 보이는데, FF에서는..결과가 똑같아요..;;
float의 경우, 전부 틀리게 보여주기 때문에, 잘 알겠는데,
clear는 잘 모르겠네요..
일단 float이랑 틀린 차이점은 알겠는데..
파라메터마다 뭐가 틀린건지 모르겠네요..
clear 에 대해서 질문입니다.
-
- 서포터즈
- Posts: 179
- Joined: 2005 02 25 16:03 12
- Location: Heaven
- Contact:
-
- 해커
- Posts: 691
- Joined: 2004 08 11 22:14 59
- Contact:
clear는 이전 코드에서 float된 효과를 없애주는 역할을 합니다.
float: left; 를 사용하면 그 아래의 그림이나 텍스트는 left된 엘리먼트의 좌측에 자리하게 되는데 그 아래의 그림이나 텍스트에 clear: left; 속성을 주게되면 좌측이 아니라 아래에 위치 하게 됩니다.
clear: right는 float: right를, clear: both는 float: left, float: right 둘다를 clear 합니다.
참고코드 입니다.
float: left; 를 사용하면 그 아래의 그림이나 텍스트는 left된 엘리먼트의 좌측에 자리하게 되는데 그 아래의 그림이나 텍스트에 clear: left; 속성을 주게되면 좌측이 아니라 아래에 위치 하게 됩니다.
clear: right는 float: right를, clear: both는 float: left, float: right 둘다를 clear 합니다.
Code: Select all
<p>
<img src="http://hyeonseok.com/hyeonseok.png" alt="hyeonseok.com" style="float: left;" />
<img src="http://hyeonseok.com/hyeonseok.png" alt="hyeonseok.com" style="float: left;" />
<img src="http://hyeonseok.com/hyeonseok.png" alt="hyeonseok.com" style="float: left;" />
<img src="http://hyeonseok.com/hyeonseok.png" alt="hyeonseok.com" style="float: left; clear: left;" />
<img src="http://hyeonseok.com/hyeonseok.png" alt="hyeonseok.com" style="float: left; clear: right;" />
<img src="http://hyeonseok.com/hyeonseok.png" alt="hyeonseok.com" style="float: left; clear: both;" />
</p>
-
- 서포터즈
- Posts: 179
- Joined: 2005 02 25 16:03 12
- Location: Heaven
- Contact:
말씀하신대로라면..
친절한 답변, 정말 감사드립니다. (__)
죄송하지만,
몇가지 의문점가, 여쩌볼것이 더 있는데...
말씀하신대로 코드를 적용하면.
ㅁㅁㅁ
ㅁㅁ
ㅁ
이게 맞는건가요..?
아니면
ㅁㅁㅁㅁ
ㅁ
ㅁ
이게 맞는건가요....?
위의것은 FF에서의 출력이고
아래것은 IE에서의 출력입니다.
,
는 clear가 적용이 안되어야지 정상이 아닌가요...?
,
아래는, float:left 했을때, clear들을 다르게 한 경우입니다.
그리고, 아래는 float:right로 하고 cleear들을 다르게 한 것입니다.
위의 코드로 돌려보시면 아시겠지만.
float:left 로 정의를 하고 나면,
IE상에서는
(이해가 잘 안가시면, 직접 이미지 돌려보시면 이해하기 쉬우실꺼에요)
하지만, float:right를 정의하고, clear를 각각 다른 값들로 했을때, 결과물은
float:right 는 제대로 되었는데, 왜 float:left는 clear에 어떤 속성을 주든 똑같은 결과같이 FF에서 나온다는 거죠..
전, 이게 궁금한것이고요, ㅎㅎ
죄송하지만,
몇가지 의문점가, 여쩌볼것이 더 있는데...
말씀하신대로 코드를 적용하면.
ㅁㅁㅁ
ㅁㅁ
ㅁ
이게 맞는건가요..?
아니면
ㅁㅁㅁㅁ
ㅁ
ㅁ
이게 맞는건가요....?
위의것은 FF에서의 출력이고
아래것은 IE에서의 출력입니다.
,
그렇다면,hyeonseok wrote:clear: right는 float: right를, clear: both는 float: left, float: right 둘다를 clear 합니다.
Code: Select all
<img src="http://hyeonseok.com/hyeonseok.png" alt="hyeonseok.com" style="float: left; clear: right;" />
,
아래는, float:left 했을때, clear들을 다르게 한 경우입니다.
Code: Select all
<div style="width:300px;border:1px solid">
float:left<br />
clear:left - 적용<br />
<div style="float:left;width:130px;border:1px solid gold"><img src="http://hyeonseok.com/hyeonseok.png" style="vertical-align:sub;" alt=""/></div>
<div style="clear:left;color:red;border:1px solid;font-size:10px;width:80px">웹표준화 화이팅!</div>
<div style="color:blue;border:1px solid">가나다라마바사아자차카타파하가나다라마바사아자차카타파하</div>
</div>
<br />
<div style="width:300px;border:1px solid">
float:left<br />
clear:right - Clear가 안되어야 정상<br />
<div style="float:left;width:130px;border:1px solid gold"><img src="http://hyeonseok.com/hyeonseok.png" style="vertical-align:sub;" alt=""/></div>
<div style="clear:right;color:red;border:1px solid;font-size:10px;width:80px">웹표준화 화이팅!</div>
<div style="color:blue;border:1px solid">가나다라마바사아자차카타파하가나다라마바사아자차카타파하</div>
</div>
<br />
<div style="width:300px;border:1px solid">
float:left<br />
clear:both - 적용<br />
<div style="float:left;width:130px;border:1px solid gold"><img src="http://hyeonseok.com/hyeonseok.png" style="vertical-align:sub;" alt=""/></div>
<div style="clear:both;color:red;border:1px solid;font-size:10px;width:80px">웹표준화 화이팅!</div>
<div style="color:blue;border:1px solid">가나다라마바사아자차카타파하가나다라마바사아자차카타파하</div>
</div>
<br />
<div style="width:300px;border:1px solid">
float:left<br />
clear:none - Clear가 안되어야 정상<br />
<div style="float:left;width:130px;border:1px solid gold"><img src="http://hyeonseok.com/hyeonseok.png" style="vertical-align:sub;" alt=""/></div>
<div style="clear:none;color:red;border:1px solid;font-size:10px;width:80px">웹표준화 화이팅!</div>
<div style="color:blue;border:1px solid">가나다라마바사아자차카타파하가나다라마바사아자차카타파하</div>
</div>
Code: Select all
<div style="width:300px;border:1px solid">
float:right<br />
clear:left - Clear 적용 안됨<br />
<div style="float:right;width:130px;border:1px solid gold"><img src="http://hyeonseok.com/hyeonseok.png" style="vertical-align:sub;" alt=""/></div>
<div style="clear:left;color:red;border:1px solid;font-size:10px;width:80px">웹표준화 화이팅!</div>
<div style="color:blue;border:1px solid">가나다라마바사아자차카타파하가나다라마바사아자차카타파하</div>
</div>
<br />
<div style="width:300px;border:1px solid">
float:right<br />
clear:right - 적용<br />
<div style="float:right;width:130px;border:1px solid gold"><img src="http://hyeonseok.com/hyeonseok.png" style="vertical-align:sub;" alt=""/></div>
<div style="clear:right;color:red;border:1px solid;font-size:10px;width:80px">웹표준화 화이팅!</div>
<div style="color:blue;border:1px solid">가나다라마바사아자차카타파하가나다라마바사아자차카타파하</div>
</div>
<br />
<div style="width:300px;border:1px solid">
float:right<br />
clear:both - 적용<br />
<div style="float:right;width:130px;border:1px solid gold"><img src="http://hyeonseok.com/hyeonseok.png" style="vertical-align:sub;" alt=""/></div>
<div style="clear:both;color:red;border:1px solid;font-size:10px;width:80px">웹표준화 화이팅!</div>
<div style="color:blue;border:1px solid">가나다라마바사아자차카타파하가나다라마바사아자차카타파하</div>
</div>
<br />
<div style="width:300px;border:1px solid">
float:right<br />
clear:none - Clear 적용 안됨<br />
<div style="float:right;width:130px;border:1px solid gold"><img src="http://hyeonseok.com/hyeonseok.png" style="vertical-align:sub;" alt=""/></div>
<div style="clear:none;color:red;border:1px solid;font-size:10px;width:80px">웹표준화 화이팅!</div>
<div style="color:blue;border:1px solid">가나다라마바사아자차카타파하가나다라마바사아자차카타파하</div>
</div>
float:left 로 정의를 하고 나면,
IE상에서는
이렇게 적용이 되지만, FF상에서는 clear적용된 모습이 모두 똑같이 되어버립니다.hyeonseok wrote:clear: right는 float: right를, clear: both는 float: left, float: right 둘다를 clear 합니다.
(이해가 잘 안가시면, 직접 이미지 돌려보시면 이해하기 쉬우실꺼에요)
하지만, float:right를 정의하고, clear를 각각 다른 값들로 했을때, 결과물은
에 딱 들어맞죠, IE, FF모두 말씀하신것에 맞게 나옵니다.hyeonseok wrote:clear: right는 float: right를, clear: both는 float: left, float: right 둘다를 clear 합니다.
float:right 는 제대로 되었는데, 왜 float:left는 clear에 어떤 속성을 주든 똑같은 결과같이 FF에서 나온다는 거죠..
전, 이게 궁금한것이고요, ㅎㅎ
-
- 해커
- Posts: 691
- Joined: 2004 08 11 22:14 59
- Contact:
Re: 말씀하신대로라면..
firefox 의 출력이 맞습니다. IE의 float 랜더링 버그 중에 하나가 위에 공백이 있을 경우 이것을 clear가 되었다고 하여도 채워주려고 하는 경향이 있습니다. 그래서 다섯번째 이미지가 위로 올라간 것입니다.hiphapis wrote:
ㅁㅁㅁ
ㅁㅁ
ㅁ
이게 맞는건가요..?
아니면
ㅁㅁㅁㅁ
ㅁ
ㅁ
이게 맞는건가요....?
이것은 width를 지정했기 때문에 그렇습니다. width를 80px로 지정을 했는데 이미지가 80px가 넘어서 텍스트가 이미지의 우측에 붙지 못하고(우측에 공간이 없으므로) 이미지가 다 나온 다음에 아래에 나오는 것입니다. IE의 경우 width 를 지정하면 float를 지정하지 않아도 float가 되어 버리는데 이것은 잘못된 float의 적용입니다. 보다 상세한 것은 스펙을 참조...hiphapis wrote:float:right 는 제대로 되었는데, 왜 float:left는 clear에 어떤 속성을 주든 똑같은 결과같이 FF에서 나온다는 거죠..
전, 이게 궁금한것이고요, ㅎㅎ
http://www.w3.org/TR/CSS21/visuren.html#floats
-
- 서포터즈
- Posts: 179
- Joined: 2005 02 25 16:03 12
- Location: Heaven
- Contact:
Who is online
Users browsing this forum: Ahrefs [Bot] and 0 guests