HTML&CSS-3(Position, inline, float)
CSS(Cascading Style Sheets)
HTML으로 태그들을 쭉~ 적어서는 내가 원하는 배치를 만들어낼 수가 없습니다. CSS의 position, float, flex 등 다양한 기능들을 통해 내가 원하는 것을 보다 정확한 위치에 배치시킬 수 있습니다. 오늘은 그 중 3가지 (postion, inline관련, float)을 알아보도록 하겠습니다.
1. Position
position 속성은 문서상에 요소를 배치하는 방법을 지정할 수 있습니다. position의 속성에 top, right, bottom, left 등의 값을 추가하여 원하는 위치에 둘 수 있습니다.
우선 position의 값은 5가지로 나눠집니다.
- static
- relative
- absolute
- fixed
- sticky
1.1 static
일반적인 흐름에 따라 배치합니다. default값이기 때문에 설정을 하거나 설정을 안한다고 해서 큰 영향을 주지않습니다.
1.2 relative
자기 자신을 기준으로 지정한 top, right, bottom, left 값에 따라 움직입니다. 만약 아무런 property를 주지않으면 static과 같은 역할을 하고, pixel을 기준으로 상하좌우로 움직입니다.
- 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>relative position</title>
<style>
.box1 {
width: 100px;
height: 50px;
border: 3px solid black;
border-radius: 5px;
position: static;
}
.box2 {
width: 100px;
height: 50px;
border: 3px solid red;
border-radius: 5px;
position: relative;
top: -30px;
right: -50px;
}
</style>
</head>
<body>
<div>
<p class="box1">Hello! relativebox
</div>
<div>
<p class="box2">Hello! relativebox
</div>
</body>
</html>
- 결과
1.3 absolute
absolute 포지션은 부모요소 혹은 조상 요소를 기준으로 top, right, bottom, left 등 지정한 만큼 이동한다. 만약 조상 요소가 static인 경우, body를 기준으로 이동하게 된다. 부모요소를 기준으로 움직이는 것을 정하기 위해서는 부모 요소에 relative를 설정해야한다. 만약 다른 요소가 이미 자리잡고 있어도 덮어쓰게된다.
1.4 fixed
absolute 포지션과 다르게 fixed 포지션은 부모요소 혹은 조상요소에 영향을 받지않습니다. 초기 컨테이너 블록을 기준으로 프로퍼티 값(top, right, bottom, left)을 지정한 만큼 움직이게 됩니다. 스크롤을 움직이거나 어떻게 해도 늘 그자리에 고정됩니다. 대개의 경우 navbar 혹은 footer 등에서 이런 방법을 자주 사용하게 됩니다.
(아래 영상이 정상적으로 안나오네요 ㅜㅜ 다시 해보겠습니다 ㅜㅜ)
위의 영상처럼 스크롤을 움직여도 상단의 navbar는 fixed postion이 적용되어 움직이지않습니다.
1.5 sticky
sticky position은 처음에는 static같이 아무런 속성을 가지고 있지않다가, 스크롤이 어느 임계점에 도달하면 sticky 말 그대로 고정되는 형태입니다. fixed는 스크롤을 쓰면 여러 요소들이 겹쳐보일 수 있는 상황이 나오지만, sticky를 쓰게되면 그런 상황에서 벗어날 수 있습니다.
2. inline, inline-block, block
각 요소들을 한 줄에 배치할 것인지, 혼자 한 줄을 다 차지하게 할 것인지 등을 결정하기위해서 display의 값으로 inline, inline-block, block 등을 사용합니다.
2.1 inline
inline은 다른 요소들을 같은 줄에 표현할 수 있게 해주는 속성값입니다. 어떤 것을 한 줄에 표현하고자할 때 많이 사용되며, 상하단 외부 여백 속성을 적용해도 적용되지않습니다. 인라인 요소의 상하단 여백은 margin이 아닌 line-height 속성에 의해 적용됩니다. 인라인 속성을 가진 태그끼리 연속으로 사용될 경우 최소한의 간격을 유지하기위해 좌, 우에 5px 가량의 외부 여백이 자동으로 발생합니다.
2.2 inline-block
inline-block은 여러요소들을 한 라인에 순서대로 배치할 수 있게되며, 그것이 넘어 갔을 때는 자동으로 다음 줄로 내려가서 구현됩니다.
또한 inline요소에서 적용이 불가했던 width, height, margin, padding 등의 값들을 적용할 수 있습니다.
대표적인 inline-block 요소는 <button>, <select> 등을 들 수 있습니다.
2.3 block
block은 그 자체로 한 줄을 전체 차지하게 됩니다. 대표적인 블록요소는 <p>값이 있습니다. 기본적으로 너비 100%의 속성을 가지고 있으며, margin, width, height의 속성을 모두 다 적용할 수 있습니다. 해당 태그가 블록요소인지 아닌지 파악하기위한 가장 쉬운 방법은 css로 background-color를 입혀보는 것입니다.
3. float
float은 말그대로 떠다닌다는 의미입니다. 이미지를 어떻게 텍스트와 함께 배치할 수 있는지를 설정할 수 있게됩니다. 가장 많이 사용하는 것은 left, right 등으로 한 쪽 끝으로 보낼 때 많이 사용하게 됩니다. 예전에는 많이 사용했지만 flex가 나온 이후로 예전보다 사용빈도는 많이 줄어들고있습니다.
댓글남기기