display와 position에 대해 알아보자.
웹사이트를 만들 때 가장 중요한 것은 내가 만든 박스들을 원하는 위치에 원하는 사이즈로 배치하는 것이 중요하다. 그러기 위해서는 display와 postion에 대해 잘 이해하는 것이 너무 중요하다.
display 예제
<!DOCTYPE html>
<html lang="en">
<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>
div, span {
width: 100px;
height: 100px;
margin: 20px;
}
div {
background: red;
}
span {
background: blue;
}
</style>
</head>
<body>
<!-- block level -->
<div></div>
<div></div>
<div></div>
<!-- inline level -->
<span>1</span>
<span>2</span>
<span>3</span>
</body>
</html>display - block 특징
- 항상 새로운 라인에 표시된다. (한 줄에 하나씩 표시된다.)
- 화면 너비 전체를 차지한다. (자동으로
width: 100%, height: auto가 된다.) width, height, margin, padding설정이 가능하다.
display - inline 특징
- 새로운 라인에 표시되지 않고 여러 요소가 한 줄에 표시된다.
- content 너비만큼 가로폭을 차지한다. (content가 없다면 아에 보이지 않는다.)
width, height, margin, padding설정이 불가능하다.- 상, 하 여백은
line-height로 지정할 수 있다.
- 상, 하 여백은
display - inline-block 특징
block과inline을 합쳐 놓은 것이다.- 요소들을 한 줄에 다 표시하지만 content의 내용에 상관없이
width나height에 맞춰서 박스 모양으로 표시된다.
잠깐 🤳
display:none; 과 visibility: hidden; 의 차이점에 대해 알아보자.
둘 다 요소를 숨기는 속성이지만 둘의 차이점은 공간 차지다.
display:none; 은 공간을 차지하지 않기 때문에 다음 요소가 그 공간을 차지 하지만 visibility: hidden; 은 보이진 않지만 공간을 차지하고 있기 때문에 다음 요소는 그 공간을 냅두고 차지한다.
positino 예제
<!DOCTYPE html>
<html lang="en">
<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>
div {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: red;
}
.container {
background: yellow;
position: relative;
top: 20px;
left: 20px;
}
.box {
background: blue;
position: absolute;
top: 20px;
left: 20px;
}
</style>
</head>
<body>
<article class="container">
<div></div>
<div class="box"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</article>
</body>
</html><div class="box"></div>의 position을 이것저것 적용해보자!
position - static
position 속성은 문서 상에 요소를 배치하는 방법을 지정한다.position: static;은 아무런 영향을 주지 않는 기본값이다.
position - relative
position: relative;는 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 위치를 이동시킨다. 중요한 점은 자기 자신을 기준으로 삼는 것이고 여기서 자기 자신은 <div class="box"></div>이 박스를 의미한다. 즉, 본인 위치(static)에서 이동하는 것이다.
position - absolute
position: absolute;는 position: static;이 아닌 가장 가까운 위치의 부모 요소에 대해 상대적으로 위치를 배치한다. (부모 요소가 없다면 뷰포트를 기준으로 삼는다.)
🌟 여기서 주의할 점은 만약 가장 가까운 위치의 부모 요소가 position: static; 즉, 기본값이라면 이는 무시하고 다음 부모 요소를 찾는다. 따라서 static 이면 아무리 부모 요소라도 무시하게 되고 부모의 부모 요소를 찾는다.
position: relative;와 다른 점은 position: relative;는 자기 자신을 기준으로 위치를 이동시키지만 position: absolute;는 자기 자신의 부모 요소를 기준으로 위치를 이동시킨다. 위 코드에서 <div class="box"></div> 박스의 부모는 바로 <article class="container">가 된다. 그래서 <article class="container">를 기준으로 top과 left가 20px씩 이동한다.
position - fixed
position: fixed;는 윈도우창 즉, 뷰포트를 기준으로 위치를 이동시킨다.
position - sticky
position: sticky;는 static처럼 원래 있던 자리에 그대로 있는데 스크롤링을 해보면 position: sticky;가 적용된 박스는 계속 그 자리에 머물러 있게 된다.
z-index
z-index는 값을 큰 숫자값으로 지정할 수록 화면 전면에 출력하게 된다. position 속성값이 static을 제외한 다른 relative, absolute, fixed, sticky들을 적용해야 사용 가능하다.
References
'공부 기록' 카테고리의 다른 글
| [리팩토링 1판] Chaptor 02. 리팩토링 개론 (1) | 2024.03.27 |
|---|---|
| [리팩토링 1판] Chapter 01 - 맛보기 예제 (1) | 2024.03.26 |
| [CSS] 박스모델 이해하기 (추가로. background) (0) | 2022.06.19 |
| [CSS] Cascading 이해하기! 추가로. ::before, ::after (0) | 2022.06.18 |
| 웹 표준, 웹 접근성, 크로스 브라우징 개념 (0) | 2022.06.18 |
댓글