반응형
Display
HTML
<!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>CSS
div, span {
width: 80px;
height: 80px;
margin: 20px;
}
/*한 줄에 하나씩 나옴*/
div{
background: red;
display: inline-block;
/*
inline: 한 줄에 여러개가 진열될 수 있는 상자
span과 같이 한 줄에 여러개씩 나옴.
사용자가 정의한 박스 크기대로 화면에 표시
*/
/*
display: inline;
inline: 물건
span과 같이 아무런 내용이 없으면 화면상에 표시되지 않음.
사용자가 정의해 놓은 사이즈는 무시하고 컨텐츠 크기에 따라 달라짐.
*/
}
/*한 줄에 여러개씩 나옴.*/
span{
background: blue;
display: block;
/*div와 같이 한 줄에 여러씩 나옴*/
}
Position
HTML
<!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>
</article>
</body>
</html>CSS
div {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: red;
}
.container{
background: yellow;
left: 20px;
top: 20px;
position: relative;
}
.box{
background: blue;
left: 20px;
top: 20px;
position: fixed;
}Position 정리
-
static: (기본)
-
relative: 원래 있어야 할 자리에서 상대적으로 20px씩 이동
-
absolute: 내가 담겨있는 아이템과 가장 가까운 박스(여기에서는 container) 안에서 위치 변경이 일어남
-
fixed: 상자 안에서 벗어나 윈도우 내에서 위치 정렬
-
sticky: 스크롤링해도 원래 자리에 그대로 있음
CanIUse:
Display
https://developer.mozilla.org/en-US/docs/Web/CSS/display
display - CSS: Cascading Style Sheets | MDN
The display CSS property sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex.
developer.mozilla.org
Position
https://developer.mozilla.org/en-US/docs/Web/CSS/position
position - CSS: Cascading Style Sheets | MDN
The position CSS property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements.
developer.mozilla.org
반응형
'웹 프로그래밍 > HTML | CSS' 카테고리의 다른 글
| [오류해결] 반응형 웹 적용되지 않는 오류 (0) | 2023.03.24 |
|---|---|
| CSS Flex Box (0) | 2022.07.04 |
| CSS 선택자 (0) | 2022.07.04 |
| HTML/CSS 참고 블로그 및 사이트 (0) | 2021.11.26 |
