드림코딩 엘리 2강:css레이아웃 완전정리
2021. 7. 18. 14:09ㆍ혼자하는개발공부/CSS
css 2강
study date:2021.07.13
css 기초 강의 2편
block과 inlineblock의 차이
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<!--Block level-->
<div></div>
<div></div>
<div></div>
<!--Inline-level-->
<span>1</span>
<span>2</span>
<span>3</span>
</body>
</html>
div, span{
width: 80px;
height: 80px;
margin: 20px;
}
div{
background: pink;
}
spand{
background:blue;
}
div는 inline- block으로 span은 block으로 변경하였다.
div, span{
width: 80px;
height: 80px;
margin: 20px;
}
div{
background: pink;
display: inline-block;
}
span{
background:blue;
display:block;
}
inline → 안에 들어있는 컨텐츠에 맞춰서 변경된다. 물건
inline-block → 상자인데 한줄에 여러개가 진열될 수 있는 특별한상자
block→상자인데 한줄에 하나가 들어가는 상자
Position!
position의 기본값 static
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<article class="container">
<div></div>
<div class="box">I'm Box</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>div{
width: 50px;
height: 50px;
margin-bottom: 20px;
background: red;
}
.container{
background: yellow;
left: 20px;
top: 20px;
position: static;
}
.box {
background: pink;
}
div{
width: 50px;
height: 50px;
margin-bottom: 20px;
background: red;
}
.container{
background: yellow;
left: 20px;
top: 20px;
position: relative;
}
.box {
background: pink;
}position을 static에서 relative로 변경함.
⇒ left와 top에 마진이 생김
- position의 value들absolute는 아이템이 담겨있는 상자안에서 옮겨가진다.sticky는 원래 있던 자리에 그대로 있지만 대신에 스크롤링 되어도 없어지지않고 원래 있던 자리에 그대로 있는 것을 말한다.
- fixed는 상자안에 벗어나서 웹페이지 안에서 옮겨가진다.
- relative는 원래 있던 자리에서 옮겨가는 것이다.
relative 사용후 변화
absolute 사용후 변화
fixed 사용후 변화
'혼자하는개발공부 > CSS' 카테고리의 다른 글
| display: flex 와 justify-content (0) | 2021.07.22 |
|---|---|
| css-collection (0) | 2021.07.22 |
| 드림코딩 엘리 3강:Flexbox 완전정리 (0) | 2021.07.18 |
| 드림코딩 엘리 1강:css기초, selectors 알아보기 (0) | 2021.04.01 |