YJ의 새벽
CSS ( 레이아웃 ( float )) 본문
**float : 가로배치속성. ( 블록단위 )
left , right
--레이아웃 배치를 위한 CSS 포지셔닝을 가로로 배치하는 float
( 한줄, 여러줄에 걸쳐 이미지와 텍스트랄 함께 출력 )
-- float 을 사용하지 않으면 기본적으로 세로로 배치.
-- 블록 개념을 갖고있는 div 태그와 , 인라인개념을 갖고있는 span 태그를 함께 사용
--float 요소 뒤에 따라오는 형제 요소는
float 요소의 존재를 인지못하고 무시하여 배치.
즉, 형제요소끼리 float 요소의 영향을 받으므로
모든 형제 요소에게 float 속성을 적용해야함.
***float 의 문제점
--float을 사용한 요소들은 둥둥띄어져있기 때문에 다른 요소들과 겹칠수 잇다.
--> 해결방법 : overflow : hidden 명령어 추가 .
--overflow 속성값으로는 visible , hidden , scroll , auto 등 사용.
--자식 요소가 부모 요소의 범위를 초과할 때.
어떻게 처리할지 결정하기때문에 부모요소에 overflow속성을 지정해 주어야 함.
overflow : vesible = 특정요소가 부모의 범위를 넘어가더라도, 그대로 보여준다.
overflow : hidden = 부모요소의 범위를 넘어가는 자식요소의 부분은 보이지않도록 처리.
overflow : scroll = 범위를 넘어가는 자식요소부분은 보이지않지만
확인할수있도록 스크롤바를 표시해줌.
overflow : auto = 부모요소의 범위를 넘어가는 자식요소 부분이 있을경우
해당부분은 보이지 않도록 처리하고
확인할수 있도록 스크롤 바 표시.
EX ))) float 기본예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
img {
float: left;
margin-right: 20px ;
width: 200px ;
height: 150px;
}
</style>
</head>
<body>
<h3> float속성 예제 </h3>
<p> <img src="gorilla.jpg"> 눈이귀엽네<br>고릴라주제</p>
</body>
</html>
EX )))) float 속성 기본예제2
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
img {
float: left;
margin-right: 0px ;
width: 200px ;
height: 150px;
}
</style>
</head>
<body>
<h3> float속성 예제 </h3>
<p> <img src="gorilla.jpg" alt="이미지가없음"></p>
<P> <img src="bug.jpg" alt="이미지가없음"></P>
<p> <img src="dog.jpg" alt="이미지가없음"></p>
</body>
</html>
EX )))) float 의 문제점을 overflow 로 해결.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>float 속성의 해결예제</title>
<style>
.box {
border: 3px solid black;
width: 400px;
height: 200px;
}
.float-wrap {
overflow: hidden; /* hidden 추가 */
}
.hello {
font-size: 30px;
font-weight: bold;
float: left;
}
.world {
font-size: 30px;
font-weight: bold;
float: right;
}
.name {
font-size: 30px;
color: blue;
}
</style>
</head>
<body>
<h1>float 속성의 해결 예제</h1>
<div class="box">
<div class="float-wrap">
<div class="hello">Hello</div>
<div class="world">World</div>
</div>
<div class="name">My name is 홍길동</div>
</div>
</body>
</html>
EX )))) overflow 예제들..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>overflow 속성 사용 예제</title>
<style>
div {
background-color: coral;
width: 200px;
height: 65px;
border: 1px solid;
overflow: visible;
}
</style>
</head>
<body>
<h2>Overflow: visible</h2>
<p>By default, the overflow is visible, meaning that it is not clipped and it renders outside the element's box:</p>
<div>You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.</div>
</body>
</html>
EX ))) clear 속성 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>clear 속성 예제</title>
<style>
img {
float: left;
}
p.clear {
clear: left;
}
</style>
</head>
<body>
<h1>The clear 속성 예제</h1>
<img src="squirrel.jpg" width="100" height="132">
<p>This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</p>
<p>
<strong>Remove the "clear" class to see the effect.</strong>
</p>
</body>
</html>
'WebFront_ > HTML,CSS' 카테고리의 다른 글
| CSS ( 레이아웃, flex , grid ) (0) | 2023.02.08 |
|---|---|
| CSS ( 레이아웃 ( position )) (0) | 2023.02.07 |
| CSS ( 폼 (input,로그인,회원가입)) (0) | 2023.02.06 |
| CSS ( 테이블 ) (0) | 2023.02.03 |
| CSS ( display ) (0) | 2023.02.03 |
