Float란?
float란 이름의 속성이 있는데 기존의 출력정책을 깨고 혼자 자신의 위치에서 벗어나서 현재 라인의 좌측(우측) 끝으로 이동한다.
<!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>float</title>
<style>
img {
float: right;
margin: 10px;
}
</style>
</head>
<body>
<h2>Float</h2>
<p>
In this example, the image will float to the right in the paragraph, and
the text in the paragraph will wrap around the image.
</p>
<p>
<img src="../images/다운로드.png" alt="없습니다" />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae
scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec
congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet.
Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent
convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis
dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc
venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida
venenatis. Integer fringilla congue eros non fermentum. Sed dapibus
pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
</p>
</body>
</html>이미지를 삽입하고 본문에 글을 작성하였다.
글은 블록 형태이니 그 줄에는 글이 없지만 float를 사용하면 다음과 같다.
그림인 img에 float를 선언하고 right로 위치하게 만들었기 때문에 이렇게 출력된다.
<!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>Document</title>
<style>
body {
height: 65535px;
}
* {
box-sizing: border-box;
margin: 0px;
/* 테두리 크기까지 고려해서 요소 크기 지정 */
}
#container1 {
border: 5px solid red;
}
#container2 {
border: 5px solid green;
}
#container3 {
border: 5px solid blue;
}
div {
width: 100px;
height: 100px;
float: left;
}
</style>
</head>
<body>
<div id="container1">div1</div>
<div id="container2">div2</div>
<div id="container3">div3</div>
</body>
</html>div로 각 객체마다 float 성질을 주었다.
원래라면 세로로 위치해야 되는데 float로 설정하니 가로로 쭉 이어지게 되었다.
하지만 div3 만 아랫줄로 이동시키고 싶을 경우
<!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>Document</title>
<style>
body {
height: 65535px;
}
* {
box-sizing: border-box;
margin: 0px;
/* 테두리 크기까지 고려해서 요소 크기 지정 */
}
#container1 {
border: 5px solid red;
}
#container2 {
border: 5px solid green;
}
#container3 {
border: 5px solid blue;
}
div {
width: 100px;
height: 100px;
float: left;
}
/* float 속성 해제 후 다시 적용할 때 */
.sec1::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<section class="sec1">
<div id="container1">div1</div>
<div id="container2">div2</div>
</section>
<section class="sec2">
<div id="container3">div3</div>
</section>
</body>
</html> .sec1::after {
content: "";
clear: both;
display: table;
}이것은 공식인데 float 속성을 해제 후 다시 적용할 때 사용한다.
그러므로 sec1인 객체가 다시 적용되어서 아래같이 출력된다.
이것을 이용해서 메뉴를 만들어 볼 수 있다.
<!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>float menu</title>
<style>
ul {
/* 기호 없애기 */
list-style-type: none;
/* 자식요소들에게 float가 적용되어 있을 때는 부모 높이가
사라지는 현상이 생김 이럴때는 아래와 같이 속성을 줌 */
overflow: hidden;
background-color: dodgerblue;
}
li {
/* li 요소를 한줄로 */
float: left;
}
li a {
/* 한줄에 표현도하고 블록요소 특징도 사용가능
블록요소로 지정해야 높이 너비 지정 가능 */
display: inline-block;
padding: 15px 15px;
text-align: center;
/* 태그에 적용된 밑줄 없애기 */
text-decoration: none;
color: white;
}
li a:hover {
background-color: orange;
color: lime;
}
.active {
background-color: black;
}
</style>
</head>
<body>
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#" class="active">저는요</a>
</li>
<li>
<a href="#">Portfolio</a>
</li>
<li>
<a href="#">Contact Me</a>
</li>
</ul>
</body>
</html>
'Visual Studio Code > Visual Studio Code icia 32일차' 카테고리의 다른 글
| Visual Studio Code Position에 대해서 (0) | 2023.04.06 |
|---|---|
| Visual Studio Code 여백 ( padding , margin ) (0) | 2023.04.06 |
| Visual Studio Code table , list 만들기 (0) | 2023.04.06 |
| Visual Studio Code 가상 선택자에 대해서 (0) | 2023.04.06 |
| Visual Studio Code 선택자에 대해서 (0) | 2023.04.06 |
