[210618금] float, hover, relative, absolute, fixed

개발자로 가는 길(국비지원과정)/3.HTML,CSS,JavaScript, jQuery

[210618금] float, hover, relative, absolute, fixed

레아Leah 2021. 6. 18. 10:06

html1

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.container{
border : 1px solid #aaa;
padding : 10px;
width: 400px;
}

.container div{
width : 100px;
height : 100px;
border : 1px solid red;
background-color : pink;
}
</style>
</head>
<body>
<h1>Float-1</h1>
<div class="container">
<div style ="float:Left;">Left</div>
<div style ="float:Left;">Right</div>
</div>

<h1>Float-2</h1>
<div class="container">
<div style ="float:left;">This</div>
<div style ="float:right;">That</div>
<p>I got my peaches out in Georgia (oh, yeah, shit)
I get my weed from California (that's that shit)
I took my chick up to the North, yeah (badass bitch)
I get my light right from the source, yeah (yeah, that's it)
</p>
</div>

</body>
</html>

CSS 추가

.container div

→ 자식을 의미

직접 style을 주는 것은 좋지않지만 test이기 때문에

Left는 공중으로 뜸

Right도 같이 설정해주면 자식이 있는지 인지하지 못함

아래처럼 하면 This라는 자식을 알아보지 못한다.

새로운 html 파일 생성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
/* li태그가 가지는 기본 스타일을 지우는 역할*/
li{
margin : 0;
padding: 0;
text-indent : none;
list-style : none;
text-decoration: none;
}
div.container{
width : 1100px;
margin : 0 auto;
}
a{
display : inline-block;
width: 200px;
height: 50px;
}
li{
width: 200px;
height: 50px;
background-color: silver;
float : left;
text-align: center;
}
/*가상 클래스 : hover*/
li:hover{
background-color: navy;
color : white;
}
</style>
</head>
<body>
<h1>Float Menu</h1>
<div class="container">
<ul>
<li><a href="http://www.naver.com">One</a></li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
</div>
</body>
</html>

수정한 부분

a 부분 display : inline-block;

마우스르 가져다대면 변화

/*가상 클래스 : hover*/

Position

속성을 이용하면 요소를 겹치게 할 수 있다. 이때 요소들의 수직위치를 z-index 속성으로 정한다. 값은 정수이며, 숫자가 클수록 위로 올라오고, 숫자가 작을 수록 아래로 내려간다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.container{
width: 1000px;
padding : 10px;
border : 1px dotted black;
margin : 0 auto;
position : relative;
}
.parent{
border : 1px dashed gray;
padding : 10px;
}
.sibling{
padding : 5px;
background-color: #9f8ee8;
text-align: center;
}
.child{
width: 100px;
height: 60px;
padding: 15px;
background-color: #89549f;
text-align : center;
font-weight: bold;
}
.relative{
position : relative;
left : 20px;
top : 10px;
}
.absolute{
position: absolute;
left: 50px;
top : 50px;
}
/*기준은 브라이고이고, offset을 지정하지 않으면 화면을 벗어남*/
.fixed{
position :fixed;
bottom : 5px;
right : 10px;
}
</style>
</head>
<body>
<div class = "container">
<h1>Position</h1>
<h2>Static</h2>
<div class= "parent">
<div class="sibling">Item 4</div>
<div class="child static">Item 2</div>
<div class="sibling">Item 3</div>
</div>

<h2>Relative</h2>
<div class= "parent">
<div class="sibling">Item 4</div>
<div class="child relative">Item 5</div>
<div class="sibling">Item 6</div>
</div>

<h2>Absolute</h2>
<div class= "parent">
<div class="sibling">Item 7</div>
<div class="child absolute">Item 8</div>
<div class="sibling">Item 9</div>
</div>

<h2>Fixed</h2>
<div class= "parent">
<div class="sibling">Item 10</div>
<div class="child fixed">Item 11</div>
<div class="sibling">Item 12</div>
</div>
</div>
</body>
</html>

html 파일 생성

같은 부모를 가지고 있는 형제

relative

다른 요소에 영향을 주지 않고 원래 자신의 위치를 기준으로 이동한다. left, right, top, bottom

Absolute는 Relative와 다르게 다른 요소에 영향을 미친다.

레이어링되어 뜨는 부분이 fixed와 유사하다.

Item 8을 제자리에 오고 싶다면 부모 태그인 div에 relative를 줘야 한다.

FIXED

/*기준은 브라이고이고, offset을 지정하지 않으면 화면을 벗어남*/

배너광고시 많이 사용한다.

visibility html 생성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.wrapper .box{
width: 100px;
height: 100px;
border: 1px solid gray;
position : relative;
}
</style>
</head>
<body>
<div class ="wrapper">
<div class ="box" style="background-color:yellow; top:30px; left:30px; z-index:5; visibility:hidden">one</div>
<div class ="box" style="background-color:red; top:-30px; left:50px; z-index:7;">two</div>
<div class ="box" style="background-color:blue; top:-30px; left:50px; z-index:7;">three</div>
</div>
</body>
</html>