CSS 레이아웃 : 위치 지정
2022.08.12
- <비전공자를 위한 첫 코딩 챌린지> - DAY 9
: 10 CSS 레이아웃 : 위치 지정
Review
- <비전공자를 위한 첫 코딩 챌린지> - DAY 9
: CSS의 꽃이라 할 수 있는 레이아웃 2탄이다.
코드가 아직 익숙지 않아 헷갈리지만 서서히 익히고 있다. 이전에도 말했듯이 디자인에 관심이 많아
레이아웃을 공부하는 것이 즐겁다.
오늘은 요소를 이동하고 고정시키는 방법을 공부했다.
<자식이 부모가 될 수 있다?>
: 자식이 자라서 부모가 되는 것처럼 CSS에서도 자식이 부모가 될 수 있다.
예를 들어 div 태그에 텍스트를 넣으면 div 태그가 부모가 된다.
div 태그에 값 1,2,3을 입력한다. div 태그 안에 숫자를 넣어줬으니 div는 숫자의 부모가 된다.
그렇다면 숫자를 div 박스 가운데로 위치시키려면 어떻게 해야할까?
div 박스에 display 값을 flex로 주고 justify-content와 align-items에 center(중앙)를 선언하면 된다.
1. div 태그에 display: flex를 입력하고
2. justify-content와 align-items에 center 속성값을 입력한다.
그러면 숫자가 가운데로 정렬된다.
<위치 지정하기>
: position은 '위치'라는 뜻이다. position 속성은 웹 페이지의 요소를 어떻게 배치할지 정한다.
웹 페이지는 수많은 요소들과의 위치 관계로 이루어져 있다.
예를 들어 구글 메인 페이지를 살펴보자.
구글 로고 아래 검색창이 있다. 그리고 여러 사이트로 바로갈 수 있는 '바로가기' 버튼이 있다.
이렇게 각 요소를 배치할 때 position이 결정적인 역할을 한다.
position은 다음과 같이 사용한다.
<style>
div {
position: static;
}
</style>
다음의 4가지 위칫값을 하나씩 살펴보자.
1. static (기본값) : 기본 위치
2. fixed : 웹 브라우저 화면 기준 고정 위치
3. relative : 기본 위치(static) 기준 상대적인 위치
4. absolute : static이 아닌 가장 가까운 조상 기준 상대적 위치
<static (기본값) : 기본 위치>
: static은 '변화나 움직임이 없는' 이라는 뜻으로, 여기서는 '기본이 되는' 이라는 의미로 쓰인다.
position 값을 따로 지정해주지 않으면 모든 태그는 static 상태이다. 즉, static이 기본값이다.
div 태그로 정사각형 2개를 만들고 위칫값을 static으로 지정해준다.
1. div 태그 두 개를 만들고, 두 번째 div 태그 id값으로 second를 지정한다.
2. style.css에 div 태그 크기와 색상을 지정하고,
3. div 태그의 postion 값을 static으로 지정한다.
div 태그의 position 값으로 static을 지정한 결과와 그렇지 않은 결과는 같다.
static이 기본값이기 때문이다.
여기서 주목할 점은 position은 항상 태그 속성으로 존재한다는 것이다.
<fixed : 웹 브라우저 화면 기준 고정 위치>
: fixed는 '고정된' 이라는 뜻이다.
fixed가 적용된 요소는 페이지를 스크롤해도 항상 같은 위치에 있다. 일반적으로 웹 페이지 상단에 있는
메뉴바 또는 네비게이션바에 fixed를 적용한다.
오 웹 페이지를 만들 때 아주 많이 적용되는 코드일 것 같다.
fixed를 효과적으로 보여줄 수 있게 페이지 높이를 길게 조정하고 id가 second인 div 태그의 위치를 fixed로
지정하겠다.
1. body 태그에 height를 1000vh로 지정한다.
* vh (vertical height) : px처럼 길이를 나타내는 단위. 주로 페이지 길이를 정의할 때 사용
2. #second div 태그에 위칫값을 fixed로 지정한다. 스크롤을 내리면 빨간 박스가 화면에서 사라진다.
하지만 초록색 박스는 스크롤을 내려도 위치가 변하지 않는다.
실행 해보니 설명과 같이 된다. 엄청 신기하다. 코드의 신비...!
<relative : 기본 위치(static) 기준 상대적인 위치>
: relative는 '상대적인'이라는 뜻이다.
position: relative는 자기 자신을 기준으로 top, left, right, bottom에 간격을 주고 싶을 때 사용한다.
-형제 관계일 때
: 다음의 예시는 인접한 2개의 형제 div 태그를 나타낸다.
1. index.html에서 인접한 div 태그 두 개를 생성한다.
2. style.css에서 div 태그를 정사각형으로 만든다.
다음은 아래에 있는 핑크색 박스의 position 값을 relative로 지정하고 top 속성을 이용하여 위쪽에서 20px
떨어지도록 만들어준다.
1. down class에 속하는 태그에 position 값을 relative로 지정한다.
2. top 속성값으로 20px을 지정한다.
나란히 붙어있던 핑크색 박스는 자기 자신을 기준으로 위쪽에서 20px만큼 떨어졌다.
- 조부모, 부모, 자식 관계일 때
: 이번엔 형제 관계가 아닌 부모, 자식 사이에서 어떻게 relative가 사용되는지 살펴보자.
1. index.html에 조부모, 부모, 자식 관계로 이루어진 div 태그 3개를 만든다.
2. style.css에서 3개의 div 태그를 정사각형으로 만든다
인접하게 배치된 형제 관계와 달리 조부모, 부모, 자식 관계로 설정했을 때는 겹쳐서 나타난다.
여기서 부모와 자식의 position 값을 relative 로 지정해보자.
1. 부모와 자식의 position 값을 relative로 지정한다.
2. top 값으로 20px을 지정한다.
형제 관계와 마찬가지로 각 요소는 20px만큼 움직였다.
다만, 부모, 자식 관계는 기본적으로 부모 위치를 기준으로 자식의 위치가 결정된다.
복잡하니 순서를 정리해보면 다음과 같다.
1. 보라색(부모) 요소가 부모인 하늘색(조부모) 요소 안에 위치한다.
2. 보라색(부모) 요소가 자기 자신을 기준으로 20px만큼 부모의 아래에 위치한다.
3. 연두색 요소(자식)가 부모인 보라색 요소 안에 위치한다.
4. 연두색 요소(자식)가 자기 자신을 기준으로 20px만큼 부모의 아래에 위치한다.
그림을 보면 자식 요소(연두색)는 40px를 이동한 것 같지만 보라색 부모를 기준으로 20px 이동한 것이다.
상대적 위치를 음수로 설정할 수도 있다.
예를 들어 top을 -20px으로 지정하면 위쪽으로 20px만큼 이동한다.
와 엄청 헷갈린당 음수까지 있다니... 열심히 해보자 !
자식 요소를 반투명 상태로 만들어 음수를 주었을 때 어떻게 움직이나 확인해보자.
top 값을 -20px로, 투명도(opacity) 값을 50%로 지정한다.
실행한 결과, 보라색(부모) 상자가 부모인 하늘색(조부모) 상자보다 20px만큼 위에 위치한다.
연두색(자식) 상자는 부모인 보라색(부모) 상자보다 20px만큼 위에 위치한다.
양수일 때와 반대로 이동한 것을 알 수 있다.
오 투명도를 50%로 지정했더니 상자가 조금 투명해졌다. 신기하다 !
<absolute : static이 아닌 가장 가까운 조상 기준 상대적 위치>
: relative가 자기 자신을 기준으로 움직였다면, absolute는 position 값이 static이 아닌 가장 가까운 조상
기준으로 움직인다.
여기서 조상이란 부모가 될 수 있는 모든 요소를 말한다.
즉, position 값이 relative, absolute, fixed 중 하나이면서 가장 가까운 조상의 위치를 기준으로 움직이는
것이다.
무슨 소린지 아직 잘 모르겠다...
absolute는 특정 태그를 기준으로 움직이고 싶을 때 효과적이다.
기준이 되는 태그의 position 값을 relative로 지정하고, 움직이려는 태그의 position 값을 absolute로 정하면
된다.
예시로 다음처럼 로고 위치를 기준으로 검색창을 위치시키고 싶을 때 이 둘의 관계를 absolute와 relative로
지정하면 된다.
오호 그렇구나 - !
-형제 관계일 때
: 형제 관계로 이루어진 예시에서 position 값을 relative에서 absolute로 변경해보자.
down class 이름을 가진 태그의 position 값을 absolute로 변경한다.
position 값이 relative일 땐 자기 자신을 기준으로 움직였지만 absolute의 경우 가장 가까운 조상을 기준으로
움직인다.
그렇다면 down class 태그는 어디를 기준으로 움질일까?
인접한 up class는 부모가 아니기 때문에 기준이 될 수 없다.
down class 태그는 부모 요소 중 최상위 요소인 여백 영역을 기준으로 움직인다.
즉, 위 하얀색 여백 영역을 기준으로 위쪽 20px만큼 움직인 것이다.
- 조부모, 부모, 자식 관계일 때
: 부모가 분명하게 보이는 부모, 자식 관계에서 absolute는 어떤 역할을 할까?
이를 확인하기 위해 앞서 사용했던 조부모, 부모, 자식 관계 예제에서 조부모의 position 값을 relative로,
부모와 자식의 position 값을 absolute로 바꿔주자.
1. 조부모의 position 값을 relative로 변경한다.
2. 부모와 자식의 position 값을 absolute로 변경한다.
실행 결과 앞선 relative 예시와 별반 다를 것이 없어 보인다. 이는 grandparent class를 가진 태그의
position 값을 relative로 지정했기 때문이다.
absolute는 position 값이 static이 아닌 가장 가까운 조상을 기준으로 움직인다.
복잡한 순서를 정리해보면 다음과 같다.
1. 보라색(부모) 요소가 부모인 하늘색(조부모) 요소 안에 위치한다.
2. 보라색(부모) 요소가 relative 값을 가진 부모 태그로부터 20px만큼 아래에 위치한다.
3. 연두색(자식) 요소가 부모인 보라색(부모) 요소 안에 위치한다.
4. 연두색(자식) 요소가 relative 값을 가진 부모 태그로부터 20px만큼 아래에 위치한다.
자 다시 정리하자면 position 값이 relative인 요소는 자기 자신을 기준으로 움직이고,
absolute인 요소는 static이 아닌 position 값을 가진 가장 가까운 부모 요소를 기준으로 움직인다.
오늘 배운 것은 너무너무 헷갈린다. 흐엉
공식처럼 익히면 익숙해질 것 같은데 아직 모든 것이 새롭다.
그래도 실전에서 유용하게 쓰일 것들을 배우니 신기하고 욕심이 난다.
복습해야겠다. 파이팅 !
*이미지 출처
instagram : @postershop.kr