[코딩온] 프론트엔드 입문 Day 19 (CSS 배경, 배치)

오늘은 길었던 설날 연휴가 끝나고 첫 수업이었는데, 지난주에 이어 CSS 속성 중에 Background와 Position에 대해 배우고, 오후에 잠깐 현업 개발자이신 학습처 대표님의 특강이 있었다. 업계 선배이자 인생 선배로서의 유익한 이야기들 좋았지만 여기는 학습기록을 남기는 공간이기 때문에 특강 내용까지 기록하지는 않을 생각이고, 오늘 배운 CSS 속성 중에 개인적으로 약간 헷갈렸던 부분들에 대해서 블로그에 기록하며 정확하게 개념을 이해하려고 한다.

---

CSS 속성 - Background

background {
    background: linear-gradient(red, blue);
    /* 배경색에 그라데이션 주는 방법*/

    background-image: url("./img.png") /* 배경에 이미지 넣기 */
    background-repeat: no-repeat; /* 배경 이미지 반복 여부 설정 */
    background-position: center; /* 배경 이미지 위치 지정*/
    background-size: auto; /* 배경 이미지 크기 조절 */
    background-attachment: scroll; /* 배경의 스크롤 여부 설정 */
}

• background-color - 배경색 지정. 다른 속성을 배울 때에도 많이 사용했어서 이제는 너무나도 익숙하다.
  속성을 풀네임으로 쓰지 않고 'background'라고만 입력해서 지정하는건 단축속성이다.
  단축속성의 입력 순서는 color, image, repeat, position/size인데 이렇게 쓰는 경우는 별로 없다고 한다.
  • 'linear-gradient'라고 입력하면 그라데이션도 지정할 수 있는데 실제로 많이 사용하지는 않는다.
    그라데이션의 기본 방향은 위에서 아래로 진행되고, 기본 비율은 정확히 1/n으로 나뉜다.
    색상 앞에 to bottom, to top, degree 입력하면 해당 방향으로 그라데이션이 진행된다.
    색상 뒤에 쉼표 넣고 퍼센트를 입력하면, 앞에 입력된 색상의 비율이 조절된다.
• background-image - 배경에 url 경로로 이미지 삽입. 기본적으로 바둑판 형식으로 반복된다.
  소장하고 있는 사진은 html의 img 태그와 입력방법이 같고, 외부 링크는 따옴표 없이 입력해야한다. 
• background-repeat - 배경사진 반복 여부 설정.
  속성값은 repeat, repeat-x, repeat-y, no-repeat 등이 있고 기본값은 repeat
• background-position - 배경사진의 위치를 설정하는 속성이고 가로, 세로 순서로 지정한다.
  방향으로 지정하려면 left, right, center, top, bottom으로 지정한다.
  (center가 2번이면 1개만 작성하면 되고, 정중앙에 위치하게 된다.)
  px, em, rem 등 단위를 이용해서 디테일한 위치로 지정할 수도 있다.
• background-size - 배경사진의 크기 설정.
  단위로 지정하는 경우, 1개만 입력하면 가로 길이가 지정되고 세로는 가로에 맞게 자동으로 조절된다.
  그러나 단위로 지정하면 사진의 원래 비율이 깨질 수 있어 주의가 필요하다.
  → auto는 원래 사진의 실제 크기를 유지하는 속성값.
  → cover는 사진의 긴 길이에 맞춰 크기를 지정하는 속성값. 사진이 짤릴 수 있다.
  → contain은 사진의 짧은 길이에 맞춰 크기를 지정한다. 사진이 짤리지 않아 자주 사용된다.
  ★ 여기서 사진이 짤렸다고 overflow 지정해도, 이건 배경으로 넣은 사진이기 때문에 보여지지 않는다.
• background-attachment - 사진의 스크롤 특성을 설정하는 속성.
  scroll은 기본값이고, 사진이 요소와 함께 스크롤된다.
  fixed는 사진이 viewport 기준으로 위치가 고정되어 스크롤되지 않는다.

---

CSS 속성 - Position

• static - 기본값이라 굳이 작성하지 않아도 된다. top, bottom, right, left 속성이 적용되지 않는다.
• relative - 상대적인 위치, 자기 자리를 벗어나도 원래 자리가 비어있다. (문서의 흐름을 깨지 않는다.)
  요소 자신을 기준으로 배치하기 때문에, 내가 원래 있어야하는 자리를 기준으로 움직이게 된다.
  top/bottom, left/right는 둘 중에 하나만 작성해야 한다. (ex. top left)
  이 때의 위치는 위/아래, 좌/우측으로부터의 여백을 의미한다. (top 30px이면 위에서부터 30px 벌린다는 의미)
• absolute - 절대적인 위치, 자기 자리를 벗어나면 원래 자리가 사라진다. (문서의 흐름을 벗어난다.)
  부모 요소를 기준으로 배치하기 때문에, 특정 요소를 기준으로 위치 지정이 필수적이다.
  
• fixed - 스크롤을 해도 지정된 위치에 고정되어있는 기능으로, 자신의 원래 위치가 사라지고 문서 흐름을 벗어난다.
  viewport 기준으로 특정 위치에 배치되는거라 header나 top 버튼을 제작할 때 사용한다.
  top, bottom, left, right 중에 하나 이상을 필수적으로 지정해야 한다.(고정될 자리가 필요하니까)
  개인적으로 이건 피그마에서 'scroll behavior' 항목의 position을 fixed로 준 것과 같아서 이해하기 쉬웠다.
• sticky - 같이 스크롤되다가 특정 위치에 도달했을때 붙어버리는 기능.
  부모 요소 내부에서만 작동하는 속성이라 html 구조가 매우 중요하다!
  여기서 top의 값으로 0을 주면 viewport 최상단에 도달하면 고정된다는 의미이다. (ex.쇼핑몰 상세페이지 메뉴)

★ CSS의 position 속성에서 가장 중요한 부분 ★
1. 요소의 직계 부모가 position: static이면, 그 주변의 가장 가까운 relative를 부모로 인식한다.
만약 부모 요소 중에 relative가 하나도 없으면(=만족하는 기준점이 없으면) viewport를 기준으로 인식한다. 
2. position을 absolute, 혹은 fixed로 지정하면 요소는 block element로 변경된다.

---

CSS 속성 - 'z-index'

★ 요소의 쌓임 순서를 지정하는 방법
1. 요소에 position 속성값이 지정된 경우, 맨 앞으로 온다.
2. 1번 조건을 충족하는게 여럿이면, z-index 속성의 숫자가 클수록 맨 앞으로 온다.
3. 1,2번 조건을 모두 충족하는게 여럿이면, html 문서에서 나중에 적힌게 맨 앞으로 온다.

• z-index - 아이템이 쌓이는 순서를 지정하는 속성.
  position 속성이 relative, absolute인 경우에만 작동하는 기능.
  속성값에는 auto 혹은 숫자를 입력하는데, 숫자가 클수록 맨 앞으로 올라온다.
  (실험해본 결과, 부모가 relative고 자식들이 absolute여야 제대로 겹쳐진다.)

---

여기까지가 Background와 Position에 관련된 속성들이었고, 이후에는 드디어 CSS 속성 중에 상당히 자주 사용하는 Flex 관련 속성들에 대해서 배웠는데, 굉장히 헷갈릴만한 부분들이 많았다. Flex 속성은 앞으로 자주 사용하게 될테니, 얼른 정리해놓고 각자의 용도를 제대로 기억해야겠다!