[CSS 개념잡기] CSS 레이아웃과 색상 및 배경

5. 레이아웃과 색상, 배경

 

1) 레이아웃

✔ display - inline, block, inline-block

1. inline
   • 영역의 크기가 내부 콘텐츠 크기로 정해짐
   • margin, padding의 top,bottom을 지정 못함
   • 요소가 가로로 배치 됨
2. block
   • 영역의 크기를 width와 height로 지정할 수 있음
   • width를 지정하지 않으면 가로로 전체를 차지함
   • 요소가 세로로 배치 됨
3. inline-block
   • 대표적으로 input이 있음
   • block처럼 width, height 크기를 지정할 수 있음
   • inline처럼 가로로 배치 됨
4. display 속성을 통해 변경

✔ 요소를 없애는 방법 - display none, visibility hidden

• display none : 요소 자체를 사라져 버리게 만듦
• visivility hidden : 레이아웃을 유지하며 요소를 안보이게 함, 다른 요소들 위치에 영향 없음

✔ float

normal flow로부터 빠져 텍스트 및 인라인 요소가 그 주위를 감쌈 자기 컨테이너의 좌우측을 따라 배치되어야함을 지정한다.

• none : 요소 옆에 아무 것도 들어올 수 없음
• left : 요소가 왼쪽으로 빠지고 다른 요소는 우측 공간을 차지하며 들어옴
• right : left와 반대
• flex-box가 생기며 잘 안쓰임

✔ position과 Normal Flow

• normal flow : 요소의 레이아웃을 변경하지 않았을 때 웹페이지 요소가 자기 자신을 배치하는 방법

✔ posotion - relative

• static
  • 일반적인 문서 흐름에 따라 배치함
  • top, bottom, left, right가 소용 없음
• relative
  • 일반적인 무서 흐름에 따라 배치
  • 자기 자신을 기준으로 top, right, bottom, left 값에 따라 오프셋 적용
    • top, bottom을 통시에 적용하면 bottom 무시
    • left, right를 동시에 적용하면 right 무시
  • 요소가 차지하는 공간은 static과 동일함

✔ position - absolute

• 일반적인 문서 흐름에서 제거
• 페이지 레이아웃에 공간 배정 안함
• 가장 가까운 위치 지정 조상 요소에 대해 상대적으로 배치
  • 조상 중 위치 지정 요소가 없으면 초기 containing block을 기준으로 삼음
  • 또는 조상 중 position이 static이 아닌 가장 가까운 요소를 찾아 기준점으로 삼음

✔ position - fixed

• absolute랑 비슷함
• 대신 뷰포트의 초기 컨테이닝 블록을 기준으로 삼아 배치
• nav나 고정 버튼 만들 때 유용

✔ position - sticky

• 일반적인 문서 흐름에 따라 배치
• 테이블 관련 요소를 포함해 가장 가까이 스크롤 되는 조상과 표 관련 요소를 포함한 컨테이닝 블록을 기준으로 top, right, bottom, left에 따라 오프셋을 적용
  • 오프셋은 다른 요소엔 영향을 주지 않음
• 이 값은 항상 새로운 쌓임 맥락을 생성함
  • 스크롤 동작이 존재하는 가장 가까운 조상에 달라붙음
  • 그 조상은 스크롤이 불가능하며 실제로 스크롤 가능한 조상이 따로 존재할 경우 sticky한 동작을 보이지 않음

✔ overflow

요소의 contents가 너무 커 블록 서식 맥락에 맞출 수 없을 때 사용

• overflow-x와 overflow-y 값 따로 설정 가능
• visible : 기본 값
• hidden : 넘어가는 부분 숨김
• scroll : 넘치는 부분을 스크롤바로 처리
• auto : visible이다 넘치면 scroll로 변경

✔ z - index

위치 지정 요소와 그 자손 또는 하위 flex item의 z축 순서를 지정

• 더 큰 z-index값을 가진 요소가 작은 값의 요소 위를 덮음
• 기본적으로 위치 지정 요소는 static 요소보다 위에 있음

2) 색상과 배경

✔ 색상 - HEX(16진수), rgb, rgba

• 키워드 사용
• RGB 3차원 좌표계
  • HEX, rgb, rgba
  • rgba에서 a는 alpha 값으로 투명도를 조절할 수 있다.
• HSL 실린더형 좌표계

✔ opacity

• 불투명도
• opacity는 요소의 내용을 포함해 모든 곳에 영향을 주지만 자식 요소에 상속되지 않음
• 요소와 자식 요소의 투명도가 서로 달라도 배경에 상대적으로 같은 투명도를 가짐
• 자식 요소를 불투명하게 하고 싶다면 background 속성의 alpha값으로 조정

✔ background-color, background-image

• background-color : 배경색
  • background-image 뒤에 렌더링 되기 때문에 이미지가 투명하면 비침
• background-image
  • 기본값 none
  • url을 통해 이미지를 넣을 수 있음

✔ background-repeat

• 배경 이미지의 반복 방법
  • repeat : 기본 값
    • repeat-x : 가로축 반복
    • repeat-y : 세로축 반복
  • no-repeat : 반복이 안되게 함
  • space : 끝에서 끝까지 고르게 분배

✔ background-position

• 기본값 (0, 0)
• repeat으로 설정해도 적용 됨
• top, bottom, left, right, center 키워드로 적용 가능
• center는 입력안해도 자동 적용

✔ background-origin

배경의 원점을 테두리 시작점, 내부, 안쪽 여백 내부 중 하나로 지정한다.

• border-box : 테두리 시작점 기준
• padding-box : paddig의 시작점 기준
• content-box : 실제 content 영역 시작점 기준

✔ background-size

배경 이미지의 크기 설정

• auto : 기본값, 원본 이미지 크기
• contain
  • 이미지가 잘리거나 찌그러지지 않는 한도 내에서 제일 크게 설정
  • 이미지를 자르지 않기 때문에 빈 공간이 생김
• cover
  • 이미지가 잘리거나 찌그러지지 않는 한도 내에서 제일 크게 설정
  • 이미지의 가로 세로비가 요소와 다르면 이미지를 세로 또는 가로방향으로 잘라내어 빈 공간이 생기지 않도록 설정함
• 숫자와 퍼센트도 지정 가능
  • 숫자 하나만 입력하면 가로 길이에 적용되고 세로는 이미지 비율에 맞게 조절됨
  • ⚠ 100%와 cover는 다르다!

✔ background(shorthand)

단축 속성을 이용하여 색상, 이미지, 원점, 크기, 반복 등 여러 배경 스타일을 한 번에 지정한다.

• spacing을 통해 속성을 구분함
  • ⚠ background-size 값은 position 바로 뒤에만 위치할 수 있으며 /문자로 구문해야 함
• background-color는 항상 맨 뒤에 있어야 함
• 기본값 
• background-image: none; background-position: 0% 0% background-size: auto auto background-repeat: repeat background-origin: padding-box background-clip: border-box background-attachment: scroll background-color: transparent