• 회원가입
  • 로그인
  • 구글아이디로 로그인

[css] CSS - orphans 속성 - 페이지나 열의 하단에 남겨야 하는 최소 줄 수 지정 (= orphans속성 = 오펀즈속성/고아속성) ※ 하단최소줄수/하단최소라인수

목차
  1. orphans 예제 - 페이지나 열의 하단에 남겨야 하는 최소 줄 수 지정
  2. orphans 정의
  3. orphans 구문

 

orphans 예제 - 페이지나 열의 하단에 남겨야 하는 최소 줄 수 지정

(예) 인쇄 시 각 페이지 상단에 최소 2줄, 하단에 최소 4줄 표시.

 

@media print { 

  widows: 2;

  orphans: 4;

}

 

 

orphans 정의

 

페이지나 열의  하단에 남겨야 하는 최소 줄 수 지정. 

 



1. cf.

widows 속성 - 페이지나 열의 상단에 남겨야 하는 최소 줄 수 지정.


2.

  • 기본값: 2
  • 상속여부: O
  • 애니가능: X
  • CSS버전: CSS3
  • JS구문: object.style.orphans = "3";


3.

Firefox 제외한 IE8 이상 주요 최신 브라우저 모두 지원.


4. MDN orphans 예제보기

https://developer.mozilla.org/en-US/docs/Web/CSS/orphans

 

 

orphans 구문

 

selector {orphans: integer|initial|inherit;}

 


[속성값]

 

integer

페이지나 열의 하단에 남겨야 하는 최소 줄 수 지정. (기본값: 2)

  • 음수 허용 X

 

initial

이 속성의 기본값 사용.

 

inherit

부모요소의 속성값 상속.

 



분류 제목
scroll CSS - scroll-padding-inline 속성 -
css CSS - place-content 속성(C) - (flex/grid) 레이아웃에서 (수직정렬/수평정렬) 일…
scroll CSS - scroll-padding-inline-end 속성 -
grid CSS - grid-auto-flow 속성(C) - 그리드 컨테이너 채우는 방식 지정 (= grid-auto…
grid CSS - grid-row-gap 속성 - (※ row-gap으로 이름 바뀜.) 그리드 행 간격 지정 (= …
position CSS - overflow-x 속성 - 수평방향으로 넘치는 내용 처리 방법 지정 (= overflow-x속성…
scroll CSS - scroll-margin 속성 - 스크롤마진 일괄 지정 (= scroll-margin속성 = 스크…
css CSS - isolation 속성 - 요소가 새 스택(stack: 쌓음) 콘텐츠를 생성해야 하는지 여부 지정…
scroll CSS - scroll-behavior 속성 ★ - 스크롤박스 내 동일 페이지 링크 이동 시 부드럽게 이동할…
grid CSS - grid-auto-columns 속성(C) - 그리드 열 너비 일괄 지정 (= grid-auto-…
background CSS - background-position-x 속성 - 배경이미지 x축위치(=수평위치) 설정 (= bac…
grid CSS - grid-row 속성(I) - 그리드 아이템 행 '시작위치와 끝위치 / 크기확장' 지정 (= gr…
grid CSS - grid-row-start 속성(I) - 그리드 아이템 행 시작 위치 및 확장 지정 (= grid…
box CSS - box-decoration-break 속성 - 요소 상자 깨지는 방식 지정 (= box-decor…
image CSS - image-rendering 속성 - 크기 조정 가능 이미지의 렌더링 방식 지정 (= image-…
scroll CSS - scrollbar-color 속성 - 스크롤바 색상 지정 (= scrollbar-color속성 =…
grid CSS - grid-auto-rows 속성(C) - 그리드 행 높이 일괄 지정 (= grid-auto-row…
background CSS - background-blend-mode 속성 - 해당요소 각 (배경색/배경미미지)층의 혼합방식 지…
css CSS - accent-color 속성 - 사용자 제어 선택요소의 색상/색깔 지정 (= accent-colo…
grid CSS - grid-template 속성 - 그리드 행열 및 영역 개별 지정 (= grid-template속…
9/27
목록
찾아주셔서 감사합니다. Since 2012