친절한 답변, 정말 감사드립니다. (__)
죄송하지만,
몇가지 의문점가, 여쩌볼것이 더 있는데...
말씀하신대로 코드를 적용하면.
ㅁㅁㅁ
ㅁㅁ
ㅁ
이게 맞는건가요..?
아니면
ㅁㅁㅁㅁ
ㅁ
ㅁ
이게 맞는건가요....?
위의것은 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;" />
는 clear가 적용이 안되어야지 정상이 아닌가요...?
,
아래는, 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>
그리고, 아래는 float:right로 하고 cleear들을 다르게 한 것입니다.
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상에서는
hyeonseok wrote:clear: right는 float: right를, clear: both는 float: left, float: right 둘다를 clear 합니다.
이렇게 적용이 되지만, FF상에서는 clear적용된 모습이 모두 똑같이 되어버립니다.
(이해가 잘 안가시면, 직접 이미지 돌려보시면 이해하기 쉬우실꺼에요)
하지만, float:right를 정의하고, clear를 각각 다른 값들로 했을때, 결과물은
hyeonseok wrote:clear: right는 float: right를, clear: both는 float: left, float: right 둘다를 clear 합니다.
에 딱 들어맞죠, IE, FF모두 말씀하신것에 맞게 나옵니다.
float:right 는 제대로 되었는데, 왜 float:left는 clear에 어떤 속성을 주든 똑같은 결과같이 FF에서 나온다는 거죠..
전, 이게 궁금한것이고요, ㅎㅎ
