Day6!!
position, margin, padding 구글링해보고 실습하기
1. position
: 웹 문서 안 요소들을 어떻게 배치할 지를 정하는 속성 (텍스트나 이미지를 원하는 위치로 배치할 수 있다)
: static | relative | absolute | fixed | sticky
static | 요소를 문서 흐름에 맞추어 배치 |
relative | 이전 요소(주로 부모 요소)에 자연스럽게 연결하여 위치를 지정 |
absolute | 원하는 위치에 지정 |
fixed | 지정한 위치에 고정하여 배치 |
sticky | 위치에 따라 동작방식이 달라짐. 임계점 이전에는 relative와 같이 동작/ 그 이후에는 fixed와 같이 동작 |
2. margin
: 테두리(border)와 이웃하는 요소 사이의 간격인 마진 영역의 크기를 설정
3. padding
: 내용(content)과 테두리(border) 사이의 간격인 패딩 영역의 크기를 설정
오늘은 깜빡하고 있다가 해서 급하게 했다ㅠㅠ 추가 보완 예정
<!DOCTYPE html>
<html lang="en">
<head>
<title>나의 웹사이트</title>
<style>
.box1 {
width: 200px;
height: 100px;
color: white;
background: black;
}
.box2 {
width: 200px;
height: 100px;
background-color: palevioletred;
position: relative;
top: 20px;
left: 100px;
}
.box3 {
width: 200px;
height: 100px;
background-color: yellow;
position: absolute;
top: 200px;
left: 300px;
}
.box4 {
width: 200px;
height: 100px;
color: white;
background-color: darkgreen;
position: fixed;
top: 200px;
left: 500px;
}
.mar {
width: 200px;
height: 100px;
background-color: peachpuff;
margin-top: -25px;
margin-right: 10px;
margin-bottom: 30px;
margin-left: 100px;
}
.pad {
width: 200px;
height: 100px;
background-color: yellowgreen;
padding-top: 50px;
padding-right: 10px;
padding-bottom: 30px;
padding-left: 100px;
}
</style>
</head>
<body>
<h1>오늘 배운 내용</h1>
<div>
<h2>1. position</h2>
<p >웹 문서 안 요소들을 어떻게 배치할 지를 정하는 속성 </p>
<div class="box1"> position 속성 static </div>
<div class="box2"> position 속성 relative</div>
<div class="box3"> position 속성 absolute</div>
<div class="box4"> position 속성 fixed</div>
</div>
<div>
<h2 >2. margin</h2>
<p > 테두리와 이웃하는 요소 사이의 간격인 마진 영역의 크기를 설정하는 속성</p>
<div class="mar"> margin을 주었습니다. </div>
</div>
<div>
<h2 >3. padding</h2>
<p>내용과 테두리 사이의 간격인 패딩 영역의 크기를 설정하는 속성</p>
<div class="pad"> padding을 주었습니다. </div>
</div>
</body>
</html>
'WEB' 카테고리의 다른 글
[WEB/CSS] flexbox (0) | 2022.02.27 |
---|---|
[WEB] CSS 기본실습(2) (flex, gird 레이아웃) (0) | 2022.02.27 |
[WEB] CSS 기본실습 (0) | 2022.02.25 |
[WEB] HTML 기본실습(3) (0) | 2022.02.24 |
[WEB] HTML 기본 실습(2) (0) | 2022.02.23 |