24.01.26 <css 레이아웃>

<chapter 1. css 레이아웃이란?>

🎁 1. css 레이아웃
레이아웃 : 요소들의 배치, 배열
실전에서 자주 쓰이는 배치들 : position, flexbox, grid

0) normal flow : html, css에서 글의 흐름대로 요소가 배치되는 흐름.

1) position : normal을 벗어나 위치를 직접 정하는 방식.

2) flexbox : 박스를 만들고 방향을 정해서 요소를 배치하는 방식.

3) gird : 엑셀처럼 칸을 나눈 다음, 그 안에 요소를 배치하는 방식.

4) 배치하는 순서
-1. 포지션으로 -> '위치'의 기준을 정한다.
ex) 이미지 영역을 기준으로 정한다.

-2. 구체적인 위치를 ->'top, right, bottom, left'로 정한다.
ex) 오른쪽에서부터 10px, 아래에서부터 10px 위치에 텍스트를 배치한다.
값이 커질수록 영역의 안쪽 방향이고, 값이 커지면 영역의 바깥 부분이다.

---

🎁 2. position 란?
0) Display : 글의 흐름에서 요소를 어떻게 배치할지 정하는 것으로 블록과 인라인이 존재.

• 블록 : <h1>,<div>,<p> 태그 같이 위에서부터 아래로 블록처럼 배치
• 인라인 : <a>,<span>,<img> 태그 같이 글 쓰는 방향으로 배치되며 위 아래로 크기가 없다.

1) position 속성
position : 글의 흐름과 관계없이 사진 위에 글을 얹는 것이나, 스크롤을 해도 메뉴가 계속 떠있는 것과 같이 배치하고 싶을 때 쓴다.

position 속성 : static, relative, absolute, fixed, sticky

---

🎁 3. static
1) 정의
: position 속성의 기본값으로, 원래 있어야 할 위치에 그대로 있는 것을 말한다. 즉, 일반적인 글의 흐름이다. static 이외에 다른 속성을 적용하면 일반적인 글의 흐름에서 벗어난다.

---

🎁 4. relative
1) 정의
원래 위치를 기준으로 배치한다. 하지만 포지션만 relative로 바꾸고 위치를 지정하지 않으면 그 자리에 그대로 있다.
또한 요소의 위치가 바뀌어도 요소의 원래 자리는 비어있다.

2).3 클래스의 static 포지션을 relative 포지션으로 바꿨을 때

.three {
  background-color: #32b9c1;
  position: relative;
  top:30px;
} 

3) 설명
relative : 상대적인
top: 30px : 원래 있어야 할 곳에서 이동하여, 위로 30px의 공간을 준다. 만약 left:30px 이었다면 왼쪽으로 30px의 공간을 주었을 것이다.

4) margin이랑 다른 점

.three {
  background-color: #32b9c1;
  margin-top: 30px;
  margin-left: 50px;
}

• 똑같이 위와 왼쪽에 여유 공간이 생겼지만, 다른 애들도 같이 움직였다.
• relative를 하면 다른 애들은 그대로고, 3만 움직인다.

5) inline 배치일 경우도 마찬가지이다.

.box {
  color: #f9fafc;
  padding: 30px;
  display: inline;
}

• relative
  
• margin
  

---

🎁 4. absolute
1) 정의
가장 가까운 포지셔닝이 된 조상 요소를 기준으로 위치를 잡는다.
포지셔닝이 되었다 : position 속성을 기본값인 static으로 두는 것이 아니라, 다른 것으로 지정하였다는 것.
따라서, 가장 가까운 조상이 포지셔닝이 꼭 되어야, 그것을 기준으로 삼는다.
relative 포지션과 다르게 원래 배치에서 자리를 차지하지 않고, 원래 배치에서 아예 빠져버린다.

2) .green div 포지셔닝 -> blue absolute 포지셔닝

.green {
  background-color: #32b9c1;
  width: 300px;
  height: 300px;
  position: relative;
  top: 500px;
  left: 90px;
}

.blue {
  background-color: #5195ee;
  width: 100px;
  height: 100px;
  position: absolute;
  bottom: 40px;
  right: 100px;
}

-> 만약, green div가 포지셔닝 되지 않고 red div가 포지셔닝 된 상태라면 blue div는 red div를 따랐을 것이다.

3) 기타
-1. blue & orange 의 width를 모두 지워준다.

기본적으로 orange는 블록 디스플레이기 때문에 부모 영역에서 너비가 꽉 차도록 배치되지만,

blue는 absolute 포지션이라 보이지 않는다. 원래 배치에서 완전히 빠져버리기 때문이다.

-2. blut 안에다 text를 쓰면, 안에있는 텍스트만큼 너비가 생긴다. 즉, absolute 포지션에서 크기를 정해주지 않으면 안에 있는 내용만큼의 크기만 갖는다. 따라서, left&right 양쪽을 다 지정해주면 크기를 지정할 수 있다.

<div class="blue">blue</div>

 right: 10px;
  left: 10px;

-3. 영역에 green div가 red div에 꽉 차는 법
너비, 높이를 지워주고, inset을 설정한다. 모든 방향에 대해 0px가 된다는 뜻이다. 여기에는 0px 이외에 다른 값을 넣어도 된다.

.green {
  background-color: #32b9c1;
  position: absolute;
  inset: 0px;
}

---

🎁 5. fixed
1) 정의 브라우저를 기준으로 포지셔닝 된다. 또한, 화면을 기준으로 스크롤을 내려도 계속 같은 기준에 있다.

또한, absolute 포지션처럼 기존 배치에서 완전히 빠져 자리를 차지하지 않는다. 따라서 width:100% or right:0px; left:0px와 같이 지정해주어야 한다. 그렇지 않으면 기본 크기는 요소의 내용만큼만 할당받기 때문이다.

쓰이는 곳 : '내비게이션'

2) .red -> fixed 포지셔닝
-1.스크롤을 내려도 같은 곳에 있다.

-2. 너비나 양쪽을 지정해주어야 한다.

.red {
  background-color: #e46e80;
  height: 100px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

-3. 문제점 : 내비게이션과 겹쳐 내용이 보이지 않는다.
why? fixed를 쓰면 흐름에서 완전 빠지기 때문에 원래 있던 공간이 남아있지 않아서다.
solute) 위에다 margin을 넣는다.
-1. 내용들을 div 태그로 감싸고, main이라는 클래스를 지정.

  <div class="main">
    <img class="skeleton" src="skeleton.png" alt="긴 글">
    <img class="skeleton" src="skeleton.png" alt="긴 글">
    <img class="skeleton" src="skeleton.png" alt="긴 글">
  </div>

-2. css에서 내비게이션 바의 높이만큼 margin을 준다.
-> 위의 내용이 겹치지 않고 잘 보인다.

.main {
 margin-top : 90px;
}

---

🎁 6. sticky
1) 정의
자바스크립트로 동작하던 것이 불편해 만들어진 포지셔닝으로, 요소를 웹 브라우저에 달라붙도록 배치하는 것.

지정한 위치로 스크롤 하기 전까지는 static 포지션처럼 원래 위치에 있다가, 저장한 위치에 닿으면 fixed 포지션처럼 고정되며, 위치의 기준은 fixed와 마찬가지로 브라우저 화면 기준이다.

💥 <특별한 성질>
부모 요소 안에 갇혀 있다. static 포지션처럼 배치되기 때문이다. 따라서 부모 요소가 화면 밖에서 사라지면 같이 사라진다.

2) 스크롤 하다가, 브라우저 상단에 내비게이션이 닿으면 달라붙어 고정되는 것 만들기.
top:0px : 브라우저 화면을 기준으로 맨 위쪽에 닿았을 때 달라붙는다는 의미.

.red {
  background-color: #e46e80;
  width: 100%;
  height: 60px;
  position: sticky;
  top:0;
}

🔽
추가적으로, sticky 포지션에서는 left:0 right:0 width:100% 와 같은 속성은 필요없다. 원래 그렇게 꽉차게 배치되기 때문이다.

3) z-index (제트 인덱스)
sticky 속성을 여러개 주었을 때, 겹치는 부분의 앞/뒤 순서를 정하는 것.
제트 인덱스를 지정하지 않으면 코드의 밑에 줄에 있을수록 화면에선 앞쪽에서 보인다.

여기서 1은 단위없이 그냥 쓰는 숫자이며, 숫자가 높을수록 더 앞에 보인다. 제트 인덱스 값을 정해주지 않으면 기본값으로 0이 설정된다. -의 값도 쓸 수 있다.
만약, 제트 인덱스 값이 같다면 처음의 경우와 같이 아랫줄에 있는 태그가 더 앞 쪽에 보인다.

.red {
 --생략--
  z-index: 1;
}

---

✅오늘 한 일

코드잇 강의 css 레이아웃 <chapter 2.position>까지 완료❤