[패스트캠퍼스python] float, position, css선택자 우선순위

파이썬 인강 자기계발 챌린지 20회차 미션

nomal flow에서 벗어나 복잡한 방식의 레이아웃을 하는 방법에 대해 알아보자.
크게 두가지 속성으로 사용할 수 있다.

• float

• position

1. float

float로는 정교한 레이아웃을 작성할 수 있다.
float는 이름그대로 띄우는, 뭔가 떠있는 배치이다.

먼저 비교를 위해 아무것도 적용안된 레이아웃을 보자.
일반적인 단락을 나눈 줄글의 형태이다.
가로로 나눠진 단락을 세로로 나누고싶을때 float가 유용하다.

이제 float는 left와 right로 줄 수 있는데 아래 이미지는 float : left;로 적용한 모습이다.
아래 이미지에서 알 수 있듯이 해당 태그가 왼쪽으로 띄어지고 밑에 배치되었던 줄글이 태그옆으로 옮겨지면서 자연스럽게 흘러내려가는 형태를 취하고 있다

여기서 footer가 조금 아쉽다.
column 3개에만 float : 30%;씩 적용해주었는데 10%가 남다보니 footer의 위치가 어색하게 되어버렸다.
따라서 column들만 float left로 주고 footer는 하단에 배치하고싶다면 아래와 같이 clear : both; 속성을 넣어주면 된다.

clear는 left, right, both 의 값을 선택할 수 있고 해당 사이드에 float정렬을 취소한다.
따라서 현재상황에서는 clear : left; 또는 clear : both; 로 같은 결과값을 출력할 수 있다.

짜잔- 세상 깔끔하다!

2. position

1. static

postion 속성의 default 값이다.
HTML 태그 순서에 따라 화면에 출력된다.

2. relative

원래 위치를 기준으로 상대적인 위치를 지정해줄 수 있다.

position : relative;로는 어떠한 값도 바꿀 수 없다.
그 밑에 꼭 top, bottom, left, right의 값을 통해 어디를 얼만큼 이동할 것인지 정할 수 있다.
여기서 중요한 점은 태그의 원래 위치는 변하지 않는다는 것이다. 없어지지 않고 기억되어져 있다.

하트의 위치에서 top과 left에 100씩 값을 주어서 하트가 글 위로 오게되었다.
여기서 쉽게 헷갈릴 수 있는 점이 있다.
바로 하트가 top과 left로 100씩 움직이는 것이 아니라, top과 left에 100씩 빈 공간을 준다고 생각하면 된다.
빈 공간만큼 원래 태그는 밀려나게된다.

3. absolute

relative와 비슷하지만 차이점이 있다면 relative는 원래 태그자리를 빈공간으로 유지하는데 반해, absolute 원래 태그자리를 없애버리고 상대적인 위치에 위치한다.
absolute는 상위태그를 기준으로 상대적인 위치를 정한다.

4. fixed

absolute와 상대적인 위치를 가진다는 것은 비슷하지만 상위태그기준이 아닌 veiwport(웹페이지가 보이는 화면)을 기준으로 뷰포인트의 특정 위치에 태그를 고정한다. 따라서 스크롤을 내려도 태그는 같은 위치에 고정되어있다.

3. css선택자 우선순위

선택자는 총 3종류가 있다.

id선택자 > class선택자 > tag선택자

만약 id와 tag에 둘다 css값이 적용되어 있으면 id클래스가 우선이므로 tag값에 덮어씌어져서 id 클래스값이 출력되게 된다.