[WEB] CSS 레이아웃

박스 모델 1

• inline은 width, height 적용 불가능하지만 block과 inline-block은 가능

viewport

vw 전체 윈도우 창 기준 퍼센트 가로 길이

vh 전체 윈도우 창 기중 퍼센트 세로 길이

⇒ 문제) 핸드폰은 세로가 더 긴데 어떻게 함?

vmax vmin 사용하면 더 긴 화면 기준으로 설정 가능

• 텍스트가 한 줄일 때 line-height = height로 설정해주면 가운데 정렬 가능
• width/height 에서 calc함수 사용 가능 calc(50% + 50vh + 100px) 언제 쓰는지 예시) 전체 화면에 스크롤바가 생기지 않도록 하면서 어떤 div를 꽉 채우고 싶을 때 해당 div의 height을 100vh로 하면 부모 div의 padding 속성 때문에 스크롤바가 생김 따라서 부모의 padding 크기*2만큼 빼주어야 할 때 calc 사용
  

cf.) font의 % vs. box의 % 다름

font도 vh 사용 가능 → 창 크기에 따라서 폰트 사이즈 조절할 때 용이

• margin 주는 법 4가지

1. margin
   • 0에는 단위 필요 X
   • 값 1개: 상하좌우 동일하게 적용
   • 값 2개: 상하 적용
   • 값 4개: 위에서부터 시계방향으로 돌아가면서 적용한다 생각 (상 우 하 좌)
   • 값 3개: 상 좌우 동일 하 순서로 적용
   • auto 남는 공간 꽉 채운다는 개념
   1. padding
   • 마진과 동일

// margin: 0, padding: 0인데도 아래 공간?
부모 요소 내의 자식 요소에 적용되는 margin이 부모 요소 밖에서도 적용될 수 있다는 것 ⇒ 부모 요소의 경계선을 밀어낼 수도, 그 밑의 다른 요소를 밀어낼 수도 있다는 것

//inline-block은 margin: auto 적용 안됨?
상자 형태를 가지지만 텍스트 플로우에 따르는 inline의 특성도 가지고 있기 때문에 부모 요소의 text-align: right으로 되어 있으면 auto가 적용이 안되는 것처럼 보이는

박스 모델 2

border

속성들 나열해줘도 됨

border-style

• solid 웬만한 테두리는 다 solid
• dashed 점선
• dotted 땡땡이

box-sizing

• default: content-box 일 때는 border 영역과 컨텐츠 영역과 패딩 영역이 구분됨 (패딩과 보더 영역을 제외한 부분에 width 적용됨)
• else: border-box 일 때는 모든 영역이 다 포함됨 (대체로 위의 상황보다 더 작아짐)

border-radius

0 16% 또는 0 1.6em 이런 식으로 원하는 쪽에만 적용 가능

상단 왼쪽에서 시계 방향 순서로 적용된다 생각

border-radius: 50% = 동그라미/타원

border-top-right 이런 식으로 따로따로 지정도 가능

overflow 부모보다 자식이 더 클 때

• auto - 그냥 내버려둠 (자동으로 스크롤바 나옴)
• visible - 다 보이게끔
• hidden - 빠져나온 부분 안 보이게 함
• scroll - 안쪽 내용이 더 작아도 스크롤바 생성 (왜? 스크롤바 유무에 따라 모든 요소의 배치가 달라질 수도 있으므로 항상 표시되도록 할 때)
• overflow-x/y로 따로따로 줄 수 있음 ⇒ visible로 할 때는 양쪽 다 visible이어야 함

box-shadow

• 텍스트 섀도우와 유사
• 값 1~2개: 그림자 어디로
• 값 3개: 마지막 값은 얼마나 blur 처리 할지
• 값 4개: 마지막 값은 얼마나 spread 처리 할지

배경 꾸미기

1. background color 지정
2. 이미지 사용

background-image

none

url(상대적 주소 or 절대적 주소)

background-repeat

repeat 기본 설정

이미지 크기 > 요소 크기

같은 이미지 종횡으로 반복 - 안 들어가는 부분 잘림

no-repeat

한 개만 나옴

repeat-x / repeat-y

x: 가로 y: 세로 방향으로만 반복

space

사이사이에 들어갈 수 있는 만큼 들어가고 각 이미지 가운데 스페이스 들어감

round

이미지 크기를 조절하여 요소 크기에 딱 맞게 들어감

repeat space 이렇게 가로 세로 설정 따로 해 조합하여 사용 가능

background-position

기본: 왼쪽 위

top left, top (위 가운데), bottom, left, right, center

bottom right 처럼 조합 사용 가능

퍼센트: 이미지의 중심축이 부모 요소의 몇%에 오도록

50% 50% == center와 같은 효과

구체적으로 설정 가능

bottom 10px right 3vw

**background-size

auto: 이미지의 기본 사이즈에 맞춤

10%, 100% 차

직접 px로 가로 세로 지정 가능

가로/세로 지정 나머지 auto 지정도 가능

contain: 요소를 넘어가는 큰 쪽에 맞춰서 배치

contain에 background-repeat: no-repeat랑 background-position: center로 해주면 원하는대로 나옴

근데 요소에 꽉 채우고 싶다? → cover 사용

cover: 요소를 넘어가지 않는 쪽에 맞춰서 배치

어차피 이미지 하나로 꽉 찰테니 repeat은 안 지정해도 됨

근데 position: 중요한 내용이 담긴 이미지 구역으로 맞춰지도록 해야 함

1. 그라데이션 넣기

background

linear

• linear-gradient(gold, red) 위→ 아래
• linear-gradient(45deg, skyblue, blue) 45도 밑 왼 → 위 오른
• linear-gradient(90deg, deeppink, indigo) 가로 왼 → 오른
• linear-gradient(90deg, deeppink, 25%, indigo) 딥핑크 비율 줄이고 싶을 때
• linear-gradient(90deg, deeppink, 75%, indigo) 딥핑크 늘릴 때
• linear-gradient(red, white, blue) 세가지 색
• linear-gradient(red 0%, white 40%, blue 100%) 하얀색 영역 올라감 (빨강은 0에 완전 빨갛게 흰색은 40 영역 즈음에 파랑은 100에 완전히 새파랗게
• linear-gradient(red 20%, white 33%, blue 60%) 20%까지 완전 빨강, 33% 부근 완전 흰색, 60%부터 완전 파랑
• linear-gradient(red 33%, white 33%, white 67%, blue 67%) 33%까지 완전 빨강, 33%부터 67%까지 완전 하양, 67%부터 완전 파랑 → 즉 세가지 색 그라데이션 없이 (흡사 네덜란드 국기)
• 참고

linear-gradient(217deg, red, transparent 70%),

linear-gradient(127deg, lime, transparent 70%),

linear-gradient(336deg, blue, transparent 70%);

이렇게 하면 인스타 로고 느낌으로 여러 그라데이션 합친 느낌 가능

radial

etc. MDN 문서 확인

포지셔닝

• positioning 속성은 대물림 되지 X

cf.) font-size → 부모 요소와 같은 속성으로 기본 적용됨

• position

  • static 기본 속성

    따로 지정 X

    페이지 흐름에 맡김

    top, left, z-index 속성에 영향 X

  • relative

    원래 있어야 할 자리를 기준으로 top left 속성 지정한 위치

    근데 의자는 그대로 있고 내가 움직이듯이 다른 요소들에 영향 주지 않음

    내 의자도 그 자리에 있기 때문

  • **absolute

    • 본인의 가장 가까운 static이 아닌 부모를 기준으로 top left (or bottom&light) 속성 지정한 위치

      // 여기서 가장 가까운 부모가 relative인 경우에 relative를 빼면 기본 속성인 static으로 바뀌어서 맨 바깥 즉 viewport를 기준으로 top left 속성 지정한 위치에 자리하게 됨 (왜? position이 static이면 그 자식 요소의 absolute position의 기준으로 삼을 수 없음)

    • 페이지 요소가 흐름에서 벗어나게 됨 - 흐름에서 벗어나 원하는 곳으로 감

      무슨 말이냐?

      absolute로 지정한 자식 요소가 차지하던 자리에 다른 자식 요소들이 들어온다는 것

      // word doc.에서 이미지 삽입 시 block으로 넣을 것인지 다른 텍스트의 흐릅을 방해하지 않고 위에 넣을 것인지 지정할 때 쓰이는 개념

  • fixed

    항상 viewport가 기준

    언제나 떠 있는 팝업창과 같은 요소에 쓰이는 개념

  • sticky

    어디까지 스크롤해서 움직일 수 있는지 지정하는 것

    움직이다가 어느 순간을 기점으로 움직이지 않게 하는 요소에 쓰임

    sticky 요소가 있길 바라는 가장 바깥 요소에 함께 두어야 모든 화면에서 원하는 패딩과 함께 등장하겠지?

• z-index static이 아닌 요소들 간에 요소를 서로 위에 올리고 내리고 하는 것 더 나중에 온 게 먼저 온 것을 덮음

  • auto 기본 (0이나 다름 없음)

  • 인위적인 숫자를 주어서 위아래로 움직일 수 있음

  • top, bottom, left, right로 화면 상의 위치 조정 가능

    높이 너비 지정되지 않은 경우

    right = 0으로 해주면 같은 크기를 유지하며 오른쪽에 붙는 게 아니라 그 위치를 유지하면서 크기가 오른쪽에 붙는 크기로 변환됨

    위에서 얼마 아래에서 얼마 이런 식으로 인위적인 크기 만들어줄 수 있음

• 맨 위 왼쪽 점이 기준점이라 calc 함수 사용해서 정확히 가운데 지정해줄 수 있음 - 근데 너비랑 높이를 정확히 알아야 이걸 적용할 수 있다는 점

요소들을 감추는 방법들

• CSS의 cursor 속성 - 요소에 커서 놓았을 때 포인터 모양

  • auto

    브라우저가 결정

  • default 화살표로 고정

  • none 커서 사라짐

  • pointer 손꾸락

  • zoom-in 돋보기

  • not-allowed 금지 표시

• display: none

해당 요소 화면에서 사라지게

Flex 레이아웃

⇒ 양이 방대하여 제대로 정리를 못했습니다😭

align-items vs. align-contents

align-items는 분할 된 구역 내에서 각 요소의 배치가 달라짐

align-contents는 전체적으로 요소의 배치가 달라짐

flex-grow & flex-shrink

클수록 배려심이 좋은 것