******** CSS에서 일반적으로 사용되는 속성 **********
[레이아웃]
지우기: 이 속성 값은 부동 개체가 허용되지 않는 가장자리를 나타냅니다. 기본값: 없음 없음: 양쪽 모두 플로팅 개체 허용 둘 다: 플로팅 개체 허용 안 됨 왼쪽: 왼쪽에 플로팅 개체 허용 안 됨 오른쪽: 오른쪽에 플로팅 개체 허용 안 됨 ------ --- ---------------------------------- --- display: 객체가 표시되는지 여부와 방법을 설정하거나 검색합니다. 표시가 없음으로 설정된 경우 부동 및 위치 속성 정의가 적용되지 않습니다. 위치가 정적 또는 상대가 아닌 경우 부동 속성 정의는 적용되지 않습니다. IE7 및 이전 브라우저에서는 none | inline-block | list-item 속성 값만 지원합니다. Opera 12.10 이상에서는 이미 속성 값 쓰기를 지원합니다. | 접두사를 추가하지 않고 inline -flex 없음: 숨겨진 개체입니다. 가시성 속성의 숨겨진 값과 달리 숨겨진 객체에 대한 물리적 공간을 유지하지 않습니다. inline: 객체가 인라인 요소임을 지정합니다. block: 객체를 블록 요소로 지정합니다. list-item: 지정된 개체가 목록 항목입니다. inline-block: 객체를 인라인 블록 요소로 지정합니다. (CSS2) table: 블록 요소 수준에서 개체를 테이블로 지정합니다. html 태그(CSS2) inline-table과 유사: 객체를 인라인 요소 수준 테이블로 지정합니다. html 태그 (CSS2) table-caption과 유사: 개체를 테이블 제목으로 지정합니다. html 태그 (CSS2) table-row-group과 유사: 개체를 테이블 행 그룹으로 지정합니다. html 태그 (CSS2) table-column과 유사: 개체를 테이블 열로 지정합니다. html 태그와 유사 (CSS2) table-column-group: 테이블 열 그룹으로 표시할 개체를 지정합니다. html 태그 (CSS2) table-header-group과 유사: 개체를 테이블 헤더 그룹으로 지정합니다. html 태그 (CSS2) table-footer-group과 유사: 개체를 테이블 바닥글 그룹으로 지정합니다. html 태그와 유사 (CSS2) compact: 콘텐츠에 따라 객체를 블록 객체 또는 인라인 객체로 할당합니다(CSS3) run-in: 컨텍스트에 따라 객체가 인라인인지 블록 수준인지 결정합니다. (CSS3) 런인 요소에 블록 수준 요소가 포함된 경우, 런인 요소는 블록 수준 요소가 됩니다. 블록 수준 요소가 있는 경우( 비부동 및 위치 정의) 런인 요소 바로 다음에는 런인 요소가 블록의 첫 번째 인라인 요소가 됩니다. 런인 요소는 이미 런인 요소가 있는 블록에 삽입할 수 없습니다. 시작 또는 자체가 실행 요소입니다. 다른 경우에는 실행 요소가 블록 수준 요소가 됩니다. ruby: 개체를 테이블 바닥글로 표시합니다. 그룹(CSS3) ruby-base: 개체를 테이블 바닥글 그룹으로 표시(CSS3) ruby-text: 개체를 테이블 바닥글 그룹(CSS3)으로 표시ruby-base-group: 객체를 테이블 바닥글 그룹으로 표시합니다. Display(CSS3) ruby-text-group: 객체를 테이블 바닥글 그룹으로 표시합니다(CSS3) flex : 객체를 플렉스박스 모델로 표시(CSS3) inline-flex: 객체를 인라인 블록 수준 플렉스박스 모델로 표시(CSS3) ---- --------- --------------- ---------
float: 이 속성의 값은 객체가 부동하는지 여부와 방법을 나타냅니다. 이 속성이 none이 아니고 객체가 부동하게 되면 객체는 블록 객체(블록 수준)로 간주됩니다. 즉, 표시 속성은 동일합니다. 차단하다. 즉, 부동 개체의 표시 속성이 무시됩니다. 절대 위치 지정 및 표시가 없으면 부동 소수점은 적용되지 않습니다. 없음: 개체가 뜨지 않도록 설정 왼쪽: 개체가 왼쪽에 뜨도록 설정 오른쪽: 개체가 뜨도록 설정 오른쪽 -------------------------------------- -------------- ------ 오버플로: 복합 속성. 지정된 높이와 너비를 초과하는 경우 개체의 콘텐츠를 관리하는 방법을 검색하거나 설정합니다. 기본값: visible 한 개만 제공되는 경우 해당 효과는 Overflow-x + Overflow-y와 같습니다. 두 개가 제공되면 첫 번째는 Overflow-x와 동일하고 두 번째는 Overflow-y와 동일합니다. 테이블의 경우 table-layout 속성이 고정으로 설정되면 td 객체는 기본값이 Hidden인 오버플로 속성을 지원합니다. 숨김, 스크롤 또는 자동으로 설정하면 td 크기를 초과하는 콘텐츠가 잘립니다. 표시로 설정하면 방향 속성 설정에 따라 오른쪽이나 왼쪽 셀에 추가 텍스트가 오버플로됩니다. visible: 내용을 자르지 마세요. 숨김: 개체 크기를 초과하는 콘텐츠를 자르고 스크롤 막대가 표시되지 않습니다.
스크롤: 개체 크기를 초과하는 콘텐츠를 자르고 초과된 콘텐츠를 스크롤 막대로 표시합니다.
auto: 내용을 잘라내고 필요한 경우 스크롤 막대를 추가합니다. 이는 본문 개체 및 텍스트 영역의 기본값입니다.
no-display: 콘텐츠가 현재 콘텐츠 상자에 맞지 않으면 display:none과 유사하게 전체 상자가 제거됩니다. (CSS3)
no-content: 콘텐츠가 현재 콘텐츠 상자에 맞지 않으면 visible:hidden과 유사하게 전체 콘텐츠가 숨겨집니다. (CSS3)
---------------------- ------------- ----------- ------------- ------------
overflow-x: 객체의 콘텐츠가 관리되는 방법을 검색하거나 설정합니다. 지정된 너비를 초과하는 경우.
기본값: visible
visible: 내용을 자르지 않습니다.
hidden: 개체 너비를 초과하는 내용을 자르면 스크롤 막대가 나타나지 않습니다.
스크롤: 개체의 너비를 초과하는 내용을 자르고 초과된 내용을 스크롤 막대로 표시합니다.
auto: 내용을 잘라내고 필요한 경우 스크롤 막대를 추가합니다. 이는 본문 개체 및 텍스트 영역의 기본값입니다.
no-display: 콘텐츠가 현재 콘텐츠 상자에 맞지 않으면 display:none과 유사하게 전체 상자가 제거됩니다.
no-content: 콘텐츠가 현재 콘텐츠 상자에 맞지 않으면 visible:hidden과 유사하게 전체 콘텐츠가 숨겨집니다.
------------------------- --- ---------------------------------- ---
overflow-y: 객체의 콘텐츠가 지정된 높이를 초과할 때 콘텐츠를 검색하거나 관리하는 방법을 설정합니다.
기본값: visible
visible: 내용을 자르지 않습니다.
hidden: 개체의 높이를 초과하는 내용을 자르면 스크롤 막대가 나타나지 않습니다.
스크롤: 개체의 높이를 초과하는 내용을 자르고 초과된 내용을 스크롤 막대로 표시합니다.
auto: 내용을 잘라내고 필요한 경우 스크롤 막대를 추가합니다. 이는 본문 개체 및 텍스트 영역의 기본값입니다.
no-display: 콘텐츠가 현재 콘텐츠 상자에 맞지 않으면 display:none과 유사하게 전체 상자가 제거됩니다.
no-content: 콘텐츠가 현재 콘텐츠 상자에 맞지 않으면 visible:hidden과 유사하게 전체 콘텐츠가 숨겨집니다.
------------------------- --- ---------------------------------- ---
회전: 객체의 회전 각도를 검색하거나 설정합니다.
기본값: 0
회전 회전은 회전 오프셋의 기준 원점으로 회전점으로 설정된 값을 사용합니다.
요소의 테두리, 패딩, 내용 및 고정되지 않은 배경은 요소가 회전함에 따라 회전합니다. 위치 값이 정적 및 상대인 모든 하위 요소도 회전하지만 나머지는 회전하지 않습니다.
회전은 상위 요소와 형제 요소에 영향을 주지 않으며 위치와 레이아웃은 변경되지 않습니다. 따라서 요소가 회전하면 다른 요소와 겹칠 수 있습니다.
이 속성은 변환 속성 아래의rotate()와 유사하며 대체되거나 버려질 수 있습니다.
: 각도를 지정합니다. 부정적일 수 있음
----------------------------------- - --------------
rotation-point: 객체가 회전할 때 참조되는 좌표점을 검색하거나 설정합니다.
회전 회전은 회전 오프셋의 기준 원점으로 회전점에 설정된 값을 사용합니다.
이 속성은 변환 원본과 유사하며 대체되거나 폐기될 수 있습니다.
: 좌표값을 백분율로 지정합니다.
: 좌표값을 길이값으로 지정합니다.
left : 원점의 가로좌표를 왼쪽으로 지정
center : 원점의 가로좌표 또는 세로좌표를 가운데로 지정
right : 원점의 가로좌표를 오른쪽으로 지정
top : 원점의 세로좌표를 상단으로 지정
bottom : 원점의 세로좌표를 하단으로 지정
------ ---- --------------------------------- ---- -------------
visibility: 객체 표시 여부를 설정하거나 검색합니다. 표시 속성과 달리 이 속성은 숨겨진 객체가 차지하는 물리적 공간을 예약합니다.
객체를 표시하려면 상위 객체도 표시되어야 합니다.
기본값: visible
visible: 객체가 보이도록 설정
hidden: 객체가 숨겨지도록 설정
collapse: 주로 표의 행이나 열을 숨기는 데 사용됩니다. 숨겨진 행이나 열은 다른 콘텐츠에서 사용될 수 있습니다. 테이블 외부의 다른 개체에 대해서는 해당 기능이 숨김과 동일합니다. IE6 이하는 이 매개변수 값을 지원하지 않습니다
------------------------------- --- ---------------------------------- --- ---------------------------------- ---
table-cell: 개체를 테이블 셀로 지정합니다. html 태그
(CSS2)
(CSS2)
table-row와 유사: 개체를 테이블 행으로 지정합니다. html 태그와 유사
관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
