TIL | css position & display & float

gemma. K·2020년 9월 16일

목록 보기

4/6

css position & display

css 마크업 문서 html의 스타일을 구현해 사용자가 볼 때 아름답고 안정적이게 보이도록 하는 것이 가장 큰 목표이다. position 속성은 html 태그마다 위치를 조정하는 데에 주로 사용되며 display 속성은 요소의 정렬 형태를 결정한다.

position

1. static

position 속성의 default 값은 static으로 정적인이라는 뜻이다. position 속성을 정하지 않으면 static 값이 발현되어 왼쪽에서 오른쪽, 위에서 아래로 쌓이는 방식으로 정렬된다.

2. relative

'relative' 는 상대적인이란 뜻으로 static 위치에서 부모 요소의 영향 아래에서 즉 부모 태그의 영향 아래에서 위치 조정이 가능하다. relative 상태에서 세부적인 위치 조정을 위해서는 top, bottom, left, right 속성을 사용한다. 예를 들어, top: 100px;을 준다면 static의 현 위치에서 위쪽에 100px 만큼의 공간을 주어 밑으로 내려가게 한다.

<style>
 h1 {
    position: relative;
    top: 100px;
  }
</style>

3. absolute

absolute 속성은 위치 속성에서 부모 요소의 영향을 받지 않는다. absolute 포지션은 가 된다면 부모 요소와의 영향을 받지 않는다. 그렇다고 해서 완전히 영향을 받지 않는 것은 아니다. 부모 요소와의 영향은 없지만 그 다음 단계 부모 요소의 바로 바깥의 요소의 영향을 받는다. relative와 마찬가지로 세부적인 위치 조정을 위해서는 top, bottom, left, right 속성을 사용한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
     h1 {
      position: absolute;
     }
    </style>
</head>
<body>
    <div>
     <h1>hello world</h1?
    </div>
</body>
</html>

h1 포지션이 absolute가 되어 부모 요소인 div의 영향을 벗어났다 하더라도 그 밖의 body 요소의 영향을 받는다.

4. fixed

fixed 속성은 말그대로 위치가 고정된다는 뜻이다. 그 위치에 고정되면 스크롤을 내려도 그대로 위치하며 주로 navigation bar 같은 홈페이지 최상단 메뉴바를 고정 시키는 데에 사용된다.

display

display 속성의 속성 값에는 크게 block line level, inline level 로 나눌 수 있다. position 과는 달리 요소의 default 값이 고정되지 않으며 해당 요소 마다 다른 display 속성 값이 할당되어 있다. 대표적인 block 라인은 div, p, inline 은 a, span 요소가 있다.

1. block

블럭 레벨은 요소의 크기와 상관없이 위에서부터 아래로 쌓이는 형태를 취한다. 블럭 레벨 요소 뒤의 요소는 크기에 관계없이 다음 줄에 모습이 나타난다. width, height 속성을 활용해 요소의 크기를 변경할 수 있다.

// block level의 div 태그 활용
<div style="background-color: red;">block1</div>
<div style="background-color: orange;">block2</div>
<div style="background-color: yellow;">block3</div>
<div style="background-color: green;">block4</div>
<div style="background-color: blue;">block5</div>

2. inline

인라인 레벨은 해당 요소의 크기 만큼 면적을 할당하고 한 줄에 하나의 요소만 차지한다는 블럭 레벨의 특징을 가지지 않는다. 그러나 블럭 레벨과는 다르게 width, height 속성으로 요소의 크기 변경이 불가하다.

<!--inline level인 span 태그 활용-->
<span style="background-color: red;">block1</span>
<span style="background-color: orange;">block2</span>
<span style="background-color: yellow;">block3</span>
<span style="background-color: green;">block4</span>
<span style="background-color: blue;">block5</span>

위의 span 태그들은 block이라는 글씨 만큼의 면적만 차지하고 남은 공간이 있기에 다음 태그들이 옆으로 주욱 나열된 형태를 보이게 된다.

3. inline-block

inline-block은 inline level과 같이 옆으로 나열할 수 있으며 block level 처럼 크기를 조정할 수 있다. 따라서 inline과 block의 장점만을 모아서 사용할 수 있는 display 속성값이다.

<style>
 div {
  display: inline-block;
  width: 300px;
  height: 100px;
  }
</style>
  
<div style="background-color: red;">block1</div>
<div class="type" style="background color:orange;">block2</div>
<div style="background-color: yellow;">block3</div>
<div style="background-color: green;">block4</div>
<div style="background-color: blue;">block5</div>

요소들의 크기가 변경되었고, 면적이 넘어가면 다음 줄에 요소가 정렬된다.

4. none

display: none 은 해당 요소가 화면에 보이지 않도록 하는 속성값이다. visibility: hidden;은 실제로 화면에 나타나지 않는 다는 점은 display: none과 같지만 visibility:hidden;은 공간을 차지해 다음 요소가 해당 요소를 있는 것처럼 의식하고 공간이 빈 형태로 보여진다. 반면 display: none은 공간 차지를 하지 않는다.

float

float이란 적용된 요소가 웹페이지의 정상 흐름을 벗어나 위치할 방향을 정하는 속성이다. 쉽게 설명하자면 신문의 레이아웃에서 흔히 볼 수 있는 형태로 텍스트 열 내부에 float하는 이미지가 좌측이나 우측으로 위치하고, 텍스트는 그 주변부를 둘러 쌓이는 형태로 레이아웃을 완성시킨다. float 속성값은 left, right, none 이 있다.

img {
 float: left;
}

위의 예시는 div에 img와 p가 둘러 쌓여 있다. 이미지의 float에 left 값을 주면 이미지가 왼쪽에 정렬되게 된다.

clear

clear 속성은 요소에 상속된 float 속성을 준 것을 없애기 위한 방법으로 없애고 싶은 방향을 속성 값으로 설정하면 된다.

float의 한계

float는 개발자들에게 조금은 귀찮은 속성으로 인식되어 있다. 그 이유로는 float는 상속이 되기 때문에 같은 구획에 포함되어 있는 다른 자식들에게도 같이 적용이 되고 필요 없다면 일일히 clear 속성으로 float를 지워줘야 하기 때문에 여간 귀찮은 것이 아니다. 또한 float가 적용된 요소의 부모 요소가 자식 요소에 따라 자동으로 크기가 변환 되지 않기 때문에 부모 요소의 크기를 일일히 지정해 줘야하는 번거로움이 있다.
css에서 다단 레이아웃을 만들기 위해 사용되었지만 현재는 flexbox 레이아웃 기술이 훨씬 간단하게 원하는 레이아웃을 만들 수 있기에 float 속성은 주로 이미지 주변부를 둘러 쌓는 형태의 레이아웃에만 사용되고 있다.