1. position 속성 - static ,relative, absolute, fixed
position은 문서 상에 요소를 배치하는 방법을 정의한다.
position이 요소의 배치 방법을 결정하면, top, bottom, right, left가 최종 위치를 결정하는 방식이다.
- position: 난 이렇게 배치할거야;
- top: 윗면에서부터 얼만큼 떨어뜨릴거야;
- right: 오르쪽면에서부터 얼만큼 떨어뜨릴거야;
- bottom: 아랫면에서부터 얼만큼 떨어뜨릴거야;
- left: 왼쪽면에서부터 얼만큼 떨어뜨릴거야;
=> 상하좌우값은 필수로 지정해야 하는 값은 아니고 필요에 따라 선택적으로 사용이 가능하다.
1) position: static
기본값으로 요소를 일반적인 문서 흐름에 따라 배치한다.
default값이기 때문에 따로 position 속성을 지정해주지 않는다면 position: static; 상태라고 볼 수 있다.
2) position: relative
position: relative; 자체로는 위치가 바뀌지 않는다. 일반적인 문서 흐름에 따라 배치하되, top, right, bottom, left 값에 따라 위치가 이동된다.
아래 예제와 결과값을 보자.
<style>
div {
width: 100px; height: 100px;
background-color: black;
position: relative;
top: 100px; left: 50px;
}
</style>
</head>
<body>
<div></div>
</body>
position: relative; 값을 준 뒤 top과 left값을 지정해주니 각각 위에서부터 100px, 왼쪽에서부터 50px이 떨어진 것을 볼 수 있다.
3. position: absolute
요소를 일반적인 문서 흐름에서 제거하고, 특정 부모에 대해 절대적으로 움직이게 된다.
부모 중 position값이 relative, fixed, absolute 중 하나라도 있으면 그 부모에 대해 절대적으로 움직이게 된다.
일반적으로 absolute를 쓸 경우, 기준이 될 부모에게 position: relative;를 부여하면 된다.
<style>
div {
width: 300px; height: 300px;
border: 1px solid black;
position: relative;
top: 100px; left: 50px;
}
p {
position: absolute;
top: 50px; right: 50px;
}
</style>
</head>
<body>
<div>
<p>ppppp</p>
</div>
</body>
부모 요소인 div에 position: relative;를 주고 자식 요소인 p에 position: absolute;를 준 뒤 top과 right값을 지정해 주었더니 부모요소인 div의 윗면으로부터 50px, 오른면으로부터 50px 떨어진 것을 볼 수 있다.
4. position: fixed;
fixed는 말 그대로 고정되었다는 뜻이다. 스크롤을 내리더라도 position: fixed;값을 적용한 부분은 화면에 고정되어 움직이지 않는다.
또한, 부모요소에 position값이 필요했던 absolute와 달리 fixed는 단독으로 사용이 가능하다.
주로 화면에 고정되어있는 메뉴바를 만들 때 fixed를 많이 사용하며 나 역시도 자기소개페이지를 만들 때 왼쪽에 메뉴바를 고정시키기 위해 position: fixed;를 사용하였다.
2. inline, inline-block, block
1) inline
display 속성이 inline인 엘리먼트는 줄바꿈 없이 모두 한 줄에 표시된다. 대표적인 inline 엘리먼트에는 <span>, <a>, <em> 태그가 있다.
<style>
body {
font-size: 100px;
}
span {
margin: 50px;
}
</style>
</head>
<body>
<a>1</a><span>2</span><em>3</em>
</body>
⬆️각기 다른 태그를 사용한 텍스트들이 모두 한 줄에 표시되는 것을 볼 수 있다.
inline 엘리먼트는 width와 height을 적용할 수 없다. 또한 margin과 padding 값을 지정할 때도, 상하간격은 무시되고 좌우간격만 적용이 된다.
2) inline-block
inline-block 엘리먼트는 줄바꿈 없이 모두 한 줄에 표시되는 inline의 엘리먼트의 속성을 유지하면서, width와 height 값을 지정할 수 있다. padding과 margin 또한 상하좌우 모두 지정한 값이 적용된다.
대표적인 inline-block 엘리먼트로는 <button>, <input>, <select> 태그가 있다.
3) block
block 엘리먼트는 inline 엘리먼트와 반대로 모든 엘리먼트들이 줄바꿈 되어 표시된다. 각각 한 줄을 차지하고 있기 때문이다.
<style>
body{
font-size: 100px;;
}
</style>
</head>
<body>
<div>1</div>
<p>2</p>
<h3>3</h3>
</body>
대표적인 block 엘리먼트에는 <div>,<p>, <h1> 등이 있으며, width와 height, padding과 margin의 상하좌우 값 지정이 모두 가능하다.
