CSS에서 콘텐츠를 정렬하기 위해 기본값을 설정하는 방법은 무엇입니까?
- WBOY앞으로
- 2023-08-30 09:09:06795검색
CSS는 웹페이지를 디자인하고 렌더링하는 데 주로 사용되는 웹 언어입니다. 이는 사용자 정의 프로세스에 도움이 되는 많은 속성을 제공합니다. 이러한 속성 중 하나는 "정렬된 콘텐츠 속성"입니다.
Align 콘텐츠 속성은 Flexbox 또는 그리드에 속한 항목 사이 또는 주위에 공간을 할당하는 데 사용됩니다. 이 속성의 초기 값은 "normal"입니다. 이산 애니메이션이 있으며 계산된 값은 항상 지정된 값과 같습니다.
상속 가능한 재산이 아니라는 점에 유의해야 합니다. 이는 대부분의 브라우저에서 널리 지원되는 속성입니다.
이 속성에 제공할 수 있는 다양한 값은 아래에 설명되어 있습니다. -
Start - 콘텐츠나 항목을 컨테이너 요소의 시작 부분부터 패킹하기 시작하려는 경우에 사용됩니다.
End - 콘텐츠나 항목이 컨테이너 요소의 끝에서 래핑을 시작하도록 하려는 경우에 사용됩니다.
Center - 정렬된 컨테이너의 중앙에 하위 요소를 패킹하는 데 사용됩니다.
Normal - 정렬된 콘텐츠 속성의 기본값입니다.
Flex-start - Flexbox 유형 컨테이너의 경우 시작 가장자리를 따라 항목 정렬을 시작합니다. 그러나 Flexbox가 아닌 컨테이너에서 사용하는 경우 이것이 시작으로 간주됩니다.
Flex-end - flex-start와 마찬가지로 Flexbox 유형 컨테이너에도 사용되며 끝 가장자리를 따라 항목 정렬을 시작합니다. 그러나 Flexbox가 아닌 컨테이너에서 사용하면 끝으로 간주됩니다.
Space- Between - 이 속성을 사용하여 지정된 항목은 인접한 요소를 따라 동일한 간격으로 컨테이너의 가로 축을 따라 정렬됩니다.
Space-around - 사이의 공간과 유사하게 작동하지만 첫 번째 요소의 왼쪽과 마지막 요소의 오른쪽에 있는 공간은 인접한 두 요소 공간 사이의 공간의 절반과 같습니다.
Space-evenly - 이는 단순히 첫 번째 요소의 시작부터 마지막 요소의 끝까지 공간이 절반만 있는 공간과 달리 모든 요소 사이에 동일한 공간이 있음을 의미합니다.
Stretch - 자동 크기 조정과 관련된 컨테이너 내의 항목 크기를 자동으로 변경합니다.
이 외에도 이 속성의 값은 safe 및 unsafe입니다. 이는 alignment 키워드와 함께 사용되며 오버플로로 인해 데이터가 손실되는지 여부와 같은 컨테이너의 특성에 따라 달라집니다. 이러한 조건에 따라 정렬을 유지할지 여부를 선택합니다.
예
정렬된 콘텐츠 속성의 예가 아래에 나와 있습니다.
으아아아콘텐츠 정렬을 위한 기본값 설정
"기본값"이라는 용어는 실제로 속성의 "초기값"을 나타낼 수 있습니다. 항목 정렬의 기본값은 "Stretch"입니다.
그래서 "normal"은 특정한 의미를 지닌 특별한 키워드와 비슷하지만 사용되는 맥락에 따라 달라진다고 말할 수 있습니다. 구체적인 맥락이 없으면 "정상"이 무엇을 하는지 정의할 수 없기 때문입니다.
보통은 유효하지 않은 것으로 처리되어 대체 값을 사용하거나 유효한 것으로 처리되어 올바른 값으로 대체되므로 걱정하지 않고 기본값으로 사용할 수 있습니다.
예
다음은 정렬된 콘텐츠의 기본값을 일반으로 설정하는 샘플 코드입니다. -
으아아아컨테이너의 모든 항목은 기본적으로 "정상적으로" 정렬되어 있으며 Flexbox 컨테이너의 사양에 따라 늘어납니다.
결론
대체로 CSS를 사용하여 콘텐츠 위치 지정에 대한 기본값을 설정하는 것은 웹 사이트 전체에서 일관된 디자인을 보장하는 간단하고 효과적인 방법입니다. 단일 값을 기본값으로 설정하면 각 요소를 개별적으로 변경할 필요 없이 모든 페이지에서 모든 요소의 위치를 빠르게 조정할 수 있습니다. 이를 통해 개발자와 디자이너 모두 모든 테마나 테마에 맞는 일관된 모양을 쉽게 만들 수 있습니다. 필요한 경우 나중에 쉽게 조정할 수 있습니다.
위 내용은 CSS에서 콘텐츠를 정렬하기 위해 기본값을 설정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!