부족한 점 공부를 해봅시다 CSS 속성편

부족한 점 공부하기 = CSS속성 편

 

사이트 유형 공부를 하다가

css의 background 속성의 종류를 공부해야겠다 생각해서

background 속성의 종류를 알아보려 한다!

• background-attachment : 요소의 배경 이미지가 콘텐츠와 함께 스크롤되어야 하는지 아니면 제자리에 고정되어 있어야 하는지를 지정하는 CSS 속성입니다. 다음 두 값 중 하나를 사용할 수 있습니다.

1. scroll: 기본값이며 배경 이미지가 요소의 내용과 함께 스크롤된다는 의미입니다.
2. fixed: 이 값을 사용하면 요소의 콘텐츠가 스크롤되더라도 배경 이미지가 뷰포트에 상대적으로 제자리에 고정됩니다. 이렇게 하면 배경 이미지가 나머지 콘텐츠보다 느린 속도로 움직이는 것처럼 보이는 시차 효과가 생성됩니다.

• background-blend-mode : 요소의 배경 이미지와 색상이 서로 그리고 요소의 콘텐츠와 혼합되는 방식을 지정하는 CSS 속성입니다. 다양한 배경 레이어가 결합되는 방식을 제어하여 흥미롭고 창의적인 시각 효과를 만들 수 있습니다.

이 **background-blend-mode**속성은 서로 다른 레이어의 색상을 혼합하는 방법을 지정하는 키워드인 혼합 모드 값을 사용합니다. 사용 가능한 혼합 모드에는 normal, multiply, screen, overlay, hard-light, soft-light, **difference**및 가 있습니다 exclusion.

**background-blend-mode**각 레이어의 혼합 모드 및 불투명도를 지정하여 여러 배경 이미지 및 색상과 함께 속성을 사용할 수 있습니다 . 혼합 모드와 불투명도 값은 맨 위 레이어부터 맨 아래 레이어까지 순서대로 적용됩니다.

• background-clip :

**background-clip**요소의 배경 이미지 또는 색상의 가시성을 제어하는 CSS 속성입니다. 배경이 요소의 콘텐츠, 패딩 또는 테두리 상자에 잘릴지 여부를 결정합니다.

속성 **background-clip**은 다음 값을 허용합니다.

• border-box
• : 배경은 테두리와 패딩을 포함하여 테두리 상자의 바깥쪽 가장자리까지 확장됩니다.
• padding-box
• : 테두리를 제외한 패딩 박스의 바깥쪽 가장자리까지 배경이 확장됩니다.
• content-box
• : 패딩과 테두리를 제외한 배경이 요소의 콘텐츠 상자에 잘립니다.

기본적으로 의 값은 **background-clip**입니다 border-box. 즉, 배경이 요소 테두리 상자의 외부 가장자리까지 확장됩니다. 속성을 사용하여 **background-clip**요소 배경의 위치 및 가시성을 제어하고 흥미로운 시각적 효과를 만들 수 있습니다.

• background-color : 백그라운드 색을 설정합니다.
• background-image : 백그라운드 이미지 및 배경 속성을 설정합니다.
• background-origin : 요소 내 배경 이미지의 원점 위치를 지정하는 CSS 속성입니다. 요소의 패딩 상자, 콘텐츠 상자 또는 테두리 상자 내에서 배경 이미지가 시작되는 위치를 결정합니다.

속성 **background-origin**은 다음 값을 허용합니다.

• border-box
• : 배경 이미지는 테두리 상자의 바깥쪽 가장자리부터 시작됩니다.
• padding-box
• : 배경 이미지는 패딩 박스의 바깥쪽 가장자리부터 시작됩니다.
• content-box
• : 콘텐츠 박스의 안쪽 가장자리부터 배경 이미지가 시작됩니다.

기본적으로 의 값은 **background-origin**입니다 padding-box. 이는 배경 이미지가 요소의 패딩 상자 바깥쪽 가장자리에서 시작됨을 의미합니다. 의 값을 변경하면 **background-origin**요소 내에서 배경 이미지의 위치를 제어하고 흥미로운 시각 효과를 만들 수 있습니다. 예를 들어 로 설정 **background-origin**하면 **border-box**배경 이미지가 요소의 콘텐츠 영역을 넘어 안쪽 여백 및 테두리 영역으로 확장되고 로 설정하면 **content-box**배경 이미지가 요소의 콘텐츠 영역 내에 포함된 것처럼 보일 수 있습니다.

• background-position : 백그라운드 이미지의 위치 영역을 설정합니다.
• background-repeat : 콘텐츠 상자 내에서 요소의 배경 이미지가 수평 및 수직으로 반복되는 방식을 지정하는 CSS 속성입니다. 이 속성은 다음 값 중 하나를 사용할 수 있습니다.

1. repeat
2. : 배경 이미지가 가로 세로로 반복되어 요소의 콘텐츠 상자를 채웁니다.
3. repeat-x
4. : 배경 이미지가 가로로만 반복됩니다.
5. repeat-y
6. : 배경 이미지가 세로로만 반복됩니다.
7. no-repeat
8. : 배경 이미지가 반복되지 않고 콘텐츠 박스 좌측 상단에 한 번만 보여집니다.
9. space
10. : 배경 이미지가 가로, 세로 모두 반복되지만 각 반복 사이의 간격은 고르게 분포됩니다.
11. round
12. : 배경 이미지가 가로, 세로 모두 반복되지만 각 반복의 크기는 콘텐츠 상자에 정확히 맞도록 조정됩니다.

의 기본값은 **background-repeat**입니다 repeat.

• background-size : 백그라운드 이미지 사이즈를 설정합니다.

다음은 엄청나게 많이 쓰는 display

CSS(Cascading Style Sheets)에서 **display**속성은 요소의 레이아웃 동작을 제어하는 데 사용됩니다. HTML 요소에 사용되는 상자 유형을 지정하고 요소가 웹 페이지에서 렌더링되는 방식에 영향을 줍니다.

속성 **display**은 다음을 포함하여 다양한 값을 가질 수 있습니다.

• block: 요소가 블록 수준 요소로 표시됩니다. 즉, 상위 컨테이너의 전체 너비를 차지하고 새 줄에서 시작됩니다.
• inline: 요소가 인라인 수준 요소로 표시됩니다. 즉, 텍스트 및 기타 인라인 수준 요소와 함께 흐릅니다.
• inline-block: 요소는 인라인 수준 블록 컨테이너로 표시됩니다. 즉, 너비, 높이, 패딩 및 여백을 준수하면서 텍스트 및 기타 인라인 수준 요소와 함께 흐릅니다.
• none: 요소가 전혀 표시되지 않고 문서 흐름에서 효과적으로 제거됩니다.

고급 레이아웃 옵션을 허용하는 , 및 와 display같은 속성 에 대한 다른 값도 있습니다 .flexgridtable