|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 06</title>
<style type="text/css">
div.float, div.color {background-color:#f9ff8a; border:5px solid #8aff90; font-weight:900}
/*float - 해당 요소와 다음에 오는 요소를 자연스럽게 정리배치 */
img[title="none"] {float:none; width:100px; height:100px} /*none - float 속성을 적용하지 않는다*/
img[title="right"] {float:right; width:100px; height:100px} /*right - 대상 요소를 오른쪽에 배치 한다.*/
img[title="left"] {float:left; width:100px; height:100px} /*left - 대상 요소를 왼쪽에 배치 한다.*/
/*아래 처럼 블록 성격 요소를 한줄에 배치도 가능하다.*/
div.red {background-color:red; color:white; float:left}
div.blue {background-color:blue; color:white; float:left}
div.green {background-color:green; color:white; float:left}
/*clear - 3색 모두 float를 적용시킨경우 다음에 오는 요소가 무조건 float옆에 붙는다. 이를 해제하는 속성*/
/*속성값 (float 속성이 마지막으로 적용된 다음 요소에 사용)*/
/*right - float 속성의 right 값을 제거*/
/*left - float 속성의 left 값을 제거*/
/*both - float 속성의 모든 값을 제거*/
.box {width:200px; height:200px}
.red-box {background-color: red} /*TEST용 red-box*/
.blue-box {background-color:blue} /*TEST용 blue-box*/
.green-box {background-color:green} /*TEST용 green-box*/
.red-box1 {background-color: red; float:left} /*red-box에 float속성을 적용*/
.blue-box1 {background-color:blue; float:left} /*blue-box에 float속성을 적용*/
.green-box1 {background-color:green} /*green-box가 정상적으로 표현되질 않는다.*/
.red-box2 {background-color: red; float:left} /*red-box에 float속성을 적용*/
.blue-box2 {background-color:blue; float:left} /*blue-box에 float속성을 적용*/
.green-box2 {background-color:green; clear:left} /*green-box에 clear속성을 적용*/
.부모{width:300px; background-color:#ccc; padding:1rem;}
.부모::after{display:block; content:""; clear:both} /*이처럼 부모의 닫히는 태그에 속성값을 추가할 수도 있다.*/
.자식1{background-color:red; float:left; width:100px; height:100px}
.자식2{background-color:blue; float:left; width:100px; height:100px}
</style>
</head>
<body>
<div class="float"> 속성값 : none
<img src="https://blog.kakaocdn.net/dn/dHHZux/btr114UueVX/kySYSbfnk0opEYYqtKIAu0/TTT.png?attach=1&knm=img.png" title="none" alt="그림없음">
<p>동해물과 백두산이 마르고 닳도록
하느님이 보우하사 우리나라 만세
무궁화 삼천리 화려강산
대한사람 대한으로 길이 보전하세
남산위에 저 소나무 철갑을 두른듯
바람서리 불변함은 우리 기상일세
무궁화 삼천리 화려강산
대한사람 대한으로 길이 보전하세 </p>
</div> <br>
<div class="float"> 속성값 : right
<img src="https://blog.kakaocdn.net/dn/dHHZux/btr114UueVX/kySYSbfnk0opEYYqtKIAu0/TTT.png?attach=1&knm=img.png" title="right" alt="그림없음">
<p>동해물과 백두산이 마르고 닳도록
하느님이 보우하사 우리나라 만세
무궁화 삼천리 화려강산
대한사람 대한으로 길이 보전하세
남산위에 저 소나무 철갑을 두른듯
바람서리 불변함은 우리 기상일세
무궁화 삼천리 화려강산
대한사람 대한으로 길이 보전하세 </p>
</div> <br>
<div class="float">속성값 : left
<img src="https://blog.kakaocdn.net/dn/dHHZux/btr114UueVX/kySYSbfnk0opEYYqtKIAu0/TTT.png?attach=1&knm=img.png" title="left" alt="그림없음">
<p>동해물과 백두산이 마르고 닳도록
하느님이 보우하사 우리나라 만세
무궁화 삼천리 화려강산
대한사람 대한으로 길이 보전하세
남산위에 저 소나무 철갑을 두른듯
바람서리 불변함은 우리 기상일세
무궁화 삼천리 화려강산
대한사람 대한으로 길이 보전하세 </p>
</div> <br>
<div>
<div class="color red">red</div>
<div class="color blue">blue</div>
<div class="color">red, blue색만 float를 적용</div> <br>
<div class="color red">red</div>
<div class="color blue">blue</div>
<div class="color green">green - 3색 모두 float를 적용</div>
</div>
<div>지금처럼 옆으로 붙는다.</div>
-----------------------------------------------------
<div class="box red-box">여기에 float를 적용하면 정상적으로 적용이 되질 않는다.</div>
<div class="box blue-box"></div>
<div class="box green-box"></div><br>
<div class="box red-box1">red-box, blue-box에 float 속성을 적용<br>float속성이 적용된 요소는 자신의 원래 위치를 보장 받기 못하기 때문에 초록색이 빨강 뒤로 숨어있다</div>
<div class="box blue-box1"></div>
<div class="box green-box1"></div> <br>
<div class="box red-box2"></div>
<div class="box blue-box2"></div>
<div class="box green-box2">clear을 적용하여 원하는 위치에 초록색이 적용되었다.</div> <br>
<div class="부모">
<div class="자식1">예제 샘플</div>
<div class="자식2"></div>
</div>
</body>
</html>
|
속성값 : none
동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세 남산위에 저 소나무 철갑을 두른듯 바람서리 불변함은 우리 기상일세 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세 속성값 : right
동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세 남산위에 저 소나무 철갑을 두른듯 바람서리 불변함은 우리 기상일세 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세 속성값 : left
동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세 남산위에 저 소나무 철갑을 두른듯 바람서리 불변함은 우리 기상일세 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세 red
blue
red, blue색만 float를 적용 red
blue
green - 3색 모두 float를 적용
지금처럼 옆으로 붙는다.
-----------------------------------------------------
여기에 float를 적용하면 정상적으로 적용이 되질 않는다.
red-box, blue-box에 float 속성을 적용
float속성이 적용된 요소는 자신의 원래 위치를 보장 받기 못하기 때문에 초록색이 빨강 뒤로 숨어있다 clear을 적용하여 원하는 위치에 초록색이 적용되었다. 예제 샘플
|
'CSS' 카테고리의 다른 글
| CSS animation - name, duration, timing-function, delay, iteration-count, direction, fill-mode (0) | 2023.04.05 |
|---|---|
| CSS - transition (0) | 2023.04.04 |
| CSS position - relative, absolute, fixed, sticky, z-index (0) | 2023.04.04 |
| CSS box관련 - margin, border, padding, content (0) | 2023.04.02 |
| CSS 텍스트 스타일 (0) | 2023.04.01 |