Web 4일차 1(display)
2022. 12. 23. 10:00ㆍ코딩배움일지/Web 구현
display 속성
요소의 배치 방법 결정.
<style>
.box{
확인
display: inline-block ;
border: 1px solid black;
width: 300px;
height: 100px;
background-color: brown;
}
</style>
</head>
<body>
<div class="box">
웹 개발 시작하기
</div>
<div class="box">
웹 개발 시작하기
</div>
블록 레벨 요소, 인라인 레벨 요소를 바꿀 때 사용하는 속성 값
float 속성
요소를 왼쪽이나
오른쪽에 떠 있게 만듦
left, right, bottom, top 속성
웹 요소의 위치를 지정하는 속성
position 속성
웹 문서 안에 요소들을 배치하기 위한 속성
.box1{
left: 100px;
border: 1px solid black;
width: 300px;
height: 100px;
background-color: brown;
}이렇게 하면 백날 해도 수정 안됨
.box1{
position: relative;
left: 100px;
border: 1px solid black;
width: 300px;
height: 100px;
background-color: brown;
}
position: relative; 를 주어야 이동이 가능하다. 기본적으로 static 에 맞추어져 있기 때문이다.
Relative
.b1{
position: relative;
left: 50px;
top: 50px;
background-color: blue;
}
.b2{
background-color: red;
}
Absolute
.b1{
position: absolute;
left: 50px;
top: 50px;
background-color: blue;
}
.b2{
background-color: red;
}
상자의 이동 Relative 기준으로 움직인다.
1교시
<!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>
.box-container1{
position: relative;
top: 100px;
left: 100px;
border: 1px solid black;
width: 500px;
height: 500px;
}
.box-container2{
position: relative;
top: 100px;
left: 100px;
border: 1px solid black;
width: 500px;
height: 500px;
}
.box{
width: 100px;
height: 100px;
}
.b1{
position: absolute; /*부모 요소를 기준으로 위치를 배정 : 상우 ㅣ요소에서 position | relative 요소를 가지고 있는 요소*/
right: 50px;
top: -50px;
background-color: blue;
}
.b2{
background-color: red;
}
</style>
</head>
<body>
<div class="box-container1">
<div class="box-container2">
<div class="box b1"></div>
<div class="box b2"></div>
</div>
</div>
</body>
</html>'코딩배움일지 > Web 구현' 카테고리의 다른 글
| Web 4일차 3(background) (0) | 2022.12.23 |
|---|---|
| Web 4일차 2(position, border-radius) (0) | 2022.12.23 |
| Web 3일차 2(css 블록) (1) | 2022.12.22 |
| Web 3일차 1-1(글꼴관련) (0) | 2022.12.22 |
| Web 3일차 1(글꼴관련) (0) | 2022.12.22 |