CSS Tutorial (4) set position / CSS 시작하기 (4) 위치 정하기

 

 

 

 

 

 

챕터3의 주제는 위치 정하기 float과 position이다.

 

강의는 클래스101, 유노코딩 강사님의 프로그래밍 입문자를 위한 CSS 기초이다.

https://class101.net/ko

CLASS101+ | 세상의 모든 클래스를 하나의 구독으로

 

 

 

 

 

챕터3. 위치 정하기 - float과 position

 

 

 

 

1강. float 그리고 clear

 

(1) float

float 속성은 요소가 문서의 일반적인 흐름에서 제외되어 

자신을 포함하고 있는 컨테이너의 왼쪽이나 오른쪽에 배치 되도록 한다.

 

문서의 일반적인 흐름이란 무엇일까?

흔히 웹브러우저에서 렌더링 되는 순서라고 보면 된다.

아마 쓰인 순서대로 위에서부터 아래로 내려가는 흐름일 것이다. 

이 흐름에서 자유로운 속성이라고 보면 될 것 같다.

그리고 나머지 태그들은 float 속성이 차지한 공간을 제외하고

나머지 공간을 이용하게 된다.

 

- 속성값의 종류

none: 기본값, 원래 상태

left: 자신을 포함하고 있는 박스의 왼편에 떠 있어야 한다.

(웹페이지가 늘어나도 왼쪽에 착 붙어있다.)

right: 자신을 포함하고 있는 박스의 오른편에 떠 있어야 한다.

(마찬가지로 웹페이지 크기와 상관없이 맨 왼쪽을 차지하고 있다.)

 

=> 물론 문서의 흐름에서는 제외되지만 필요한 만큼의 공간은 차지한다.

 

 

 

float 속성을 가진 두개의 <div> 태그가 먼저 왼쪽 오른쪽에 자리를 잡고 있고, 

p태그는 그 공간을 피해 작성되어 있는 것이 보인다.

 

 

 

 

 

 

그래도 순서에서 완전히 우선 순위는 아닌 것 같다.

<div>와 <p>태그의 위치를 바꾸자 p태그의 아래에 위치한 것을 볼 수 있다.

무조건 맨 위에 내가 있을거야!!

이런 느낌보다는 우선적으로 둥둥 떠다니며 공간을 먼저 선점한다고 봐야 맞는 것 같기도 하다.

 

 

 

 

 

(1) clear

위에 이미지에서 확인할 수 있듯이, 

p태그의 텍스트 값들이 자리를 못잡고 난감해하는 것이 보인다.

이렇게 float다음 요소들이 잘 자리를 잡을 수 있도록 도와주는 것이 바로 clear 속성이다.

 

float속성을 가진 요소가 차지하고 남은 공간이 아닌,

float을 해제(clear)하여 float 요소의 아래로 내려갈 수 있도록 한다.

 

 

- 속성값 종류

none: 기본값, 아래로 이동되지 않는다. / clear가 적용되지 않는다.

left: float이 left인 요소의 아래로 내려가겠다.

right: float이 right인 요소의 아래로 내려가겠다.

both: float이 left 및 right인 요소의 아래로 내려가겠다.

 

=> clear both; 를 사용하면 한번에 해결된다!

 

 

 

 

 

p{ clear: right; } 

p태그의 요소들이 오른쪽 float속성을 가진 요소의 아래로 내려가 배치하도록 했다.

그러자 오른쪽에 있는 네모 아래로는 내려갔지만,

크기가 더 큰 왼쪽 네모에 걸려있는 것을 볼 수 있다.

 

 

 

 

 

 

p{ clear: both; }

이제 두 네모들 아래에 잘 자리를 잡았다.

웬만하면 both만 쓰는 것이 속 편할듯 싶다.

 

 

 

 

 

 

| 정리 |

* float 속성은 요소가 자신을 포함하고 있는 컨테이너의 왼쪽이나 오른쪽에 배치되게 한다.

* 이때 요소는 문서의 흐름에선 제외되지만, 필요한 만큼의 공간은 차지한다.

* clear 속성은 float 요소 이후에 표시되는 요소가 float 요소의 아래로 내려가게 할 수 있다.

 

 

(출처: 유노코딩(클래스 101), 프로그래밍 입문자를 위한 CSS 기초)

 

 

 

 

2강. position 1편, relative absolute

 

(1) position

position은 문서 상에 요소를 배치하는 방법을 정의한다.

position이 속성값을 통해 요소의 배치 방법을 결정하면, 

top, bottom, right, left의 키워드를 통해 최종 위치를 결정한다.

 

- 위치 배치 관련 속성들

position: 이렇게 배치할게요.

top: 윗면에서부터 이만큼 떨어트려주세요.

right: 오른쪽 면에서부터 이만큼 떨어트려주세요.

bottom: 아랫면에서부터 이만큼 떨어트려주세요.

left: 왼쪽면에서부터 이만큼 떨어트려주세요.

 

=> 이 네개를 모두 정의해야하는 것이 아닌,

필요에 따라 골라 정의해줄 수 있다.

 

 

 

 

(2) position의 속성값

어떻게 배치할지에 대한 속성값들은 다음과 같다.

간단하게 정리하고 구체적인 내용은 실습과 함께 알아보자.

 

- 속성값의 종류

static: 기본값. 아무것도 안써주었을 때 디폴트. 일반적인 문서의 흐름에 따라 배치된다.

문서의 기본적인 흐름은 새 요소를 순서에 따라 좌측상단부터 아래로 배치하는 것이다.

relative: 일반적인 문서의 흐름에 따라 배치하되, 상하좌우 위치값에 따라 오프셋(위치를 특정값만큼

이동시키는 것을 의미)을 적용한다.

 

absolute: 일반적인 문서의 흐름에서 아예 제거하고, 가장 가까운 position 지정 요소에 대해 

상대적으로 오프셋을 적용한다.

fixed: 일반적인 문서의 흐름에서 제거하고, 지정한 위치에 고정시킨다.

sticky: 일반적인 문서의 흐름에서 제거하고, 스크롤 동작이 존재하는 가장 가까운 요소에 대해

오프셋을 적용한다.

 

 

 

 

(3) position: relative;

문서에서 기본으로 정해주는 위치에 따르되, 상하좌우에서 얼만큼 떨어트릴지를

사용자가 값을 입력해 정해줄 수 있다. (top, left, right, bottom)

 

*예시코드

div{

        ~

        position: relative;

        top: 100px; left 100px;

}

=> 원래의 위치보다 위에서 100px 만큼, 왼쪽에서는 100px만큼 떨어트려주세요.

 

 

position: relativ;

top: 100px; left: 100px;

원래 사각형의 기본 위치는 맨 좌측 상단이다. relative를 통해 위치를 옮겨주자

좌측과 위쪽에서 떨어져있는 것을 볼 수 있다.

 

하지만 신기한 점은 <p>태그의 경우 사각형의 위치와 무관하게,

자신의 기본 위치에 배치된다는 점이다.

원래 사각형의 기본 위치는 좌측 상단이므로 그 아래에 배치되어 있는 것을 볼 수 있다.

 

 

 

 

(4) position: absolute;

요소를 기본 위치가 아닌, 자신의 상위 요소 중에서 가장 가까운 position지정 요소에 대한 상대값으로 위치를 지정한다.

position 지정 요소란, position 속성에 이미 우리가 속성값을 지정해준 요소이다.

 

*예시코드

div{

        ~

        position: absolute;

        top: 100px; left: 100px;

}

 

 

 

세 종류의 박스를 만들어보았다.

첫번째 <div> 태그, 그리고 두번째 <div> 안에 또 다른 <div> 태그가 들어가 있는 형태이다.

아무런 position도 작성하지 않았을때, 다음과 같은 일반적인 문서의 흐름을 갖는다.

 

 

 

 

<div>태그의 position을 relative로 설정해주고,

absoluteBox 클래스 (세번째 박스)에 대해서만 absolute 10px, 10px를 적용했다.

그러자 세번째 박스의 가장 가까운 상위 요소인 두번째 박스를 기준으로 이동되었다.

 

 

 

두번째 박스가 이동하자 마지막 박스도 그 위치를 기준으로 이동된 것이 보인다.

 

 

 

 

relative position의 지정을 모두 빼주었다.

상위요소가 없는 상태에서 absolute는 브라우저 화면을 기준으로(좌측 맨 위) 이동한다.

 

 

 

 

이번에는 <div>에 다시 relative를 추가하고, p태그도 하나 추가해보았다.

그러자, p태그는 세번째 박스의 위치에 겹쳐있는 것이 보인다. 이유가 무엇일까?

absolute 속성은 문서의 일반적인 흐름에서 제외된다. 즉, 다른 요소들은 absolute가 없다고 

생각하고 일반적인 흐름에 따라 차곡차곡 배치된다. 

 

 

 

 

 

 

 

 

3강. position 2편, fixed sticky

 

(1) position: fixed;

요소를 일반적인 문서 흐름에서 제거하고, 지정된 위치에 고정시킨다.

 

.pos{

        ~

        position: fixed;

        top: 50px; left: 50px;

}

 

=> 웹브라우저 기준, 위에서부터 50px, 왼쪽에서부터 50px 떨어져 움직이지 않습니다.

 

 

 

fixed도 일반적인 문서 흐름에서 자유롭기 때문에 다른 요소들이 박스를 인식하지 않고

위치를 잡는다.

 

 

 

 

스크롤을 내려도 fixed로 위치를 잡아준 요소는 밀리지 않는다.

 

 

 

 

(2) position: siticky;

상위요소에 붙어 있을때는 일반적인 문서의 흐름을 따른다.

자신의 순서가 되면 스크롤에 의해 움직이지만,

상위 요소가 영향을 받아 사라지면 sticky요소는 자신의 고정 위치에 붙어있다.

(실습을 통해 확인해보는 것이 더욱 이해가 빠르다.)

 

.pos{

        ~

        position sticky;

        bottom: 0;

}

 

=> 스크롤 이동으로 요소가 움직여도 스티키 요소는 고정된 상태를 유지한다.

 

 

 

 

 

스크롤에 따라 잘 움직이다가...

 

 

 

 

 

자신의 상위 요소가 영향을 받아 사라지면 고정된 위치에 달라붙는다.

 

 

 

 

 

position:sticky; bottom:0px; 로 설정해보았다.

스크롤이 맨 위일때, 아직 자신의 위치가 나타나지 않을 때는 고정된 위치에 붙어있는다.

 

 

 

 

 

자신의 차례가 오자 일반적인 흐름에 맞춰 배치된다.

 

 

 

 

 

 

 

 

| 정리 |

* position은 문서 상에 요소를 배치하는 방법을 정의한다. 기본값은 static

* top, bottom, right, left를 선택적으로 사용해 위치를 지정한다.

* relative는 자기의 원래 위치를 기준으로 오프셋을 적용한다.

* absolute는 가장 가까운 포지션 요소를 기준으로 오프셋을 적용한다.

* fixed는 고정되어 움직이지 않는다. 스크롤 이동에도 꼼짝 않는다.

* sticky는 스크롤 되는 상위 요소를 기준으로 오프셋을 적용한다. 

 

 

(출처: 유노코딩(클래스 101), 프로그래밍 입문자를 위한 CSS 기초)

 

 

 

 

 

 

 

 

 

 

 

 

 

 

이 글은 클래스 101, "프로그래밍 입문자를 위한 CSS 기초 (유노코딩)" 강의를

기반으로 작성되었음을 알립니다.