새 스타일 및 스타일 수정 대화 상자, 레이아웃
게시: 2016년 4월
새 스타일 및 스타일 수정 대화 상자의 레이아웃 범주를 사용하면 웹 페이지의 UI 요소 레이아웃에 대해 CSS 스타일 규칙을 정의할 수 있습니다. 이러한 스타일 규칙을 HTML 요소에 직접 적용하거나 현재 페이지 또는 외부 스타일시트에 추가할 수 있습니다.
현재 페이지의 UI 요소에 대해 CSS 레이아웃 스타일 규칙을 정의하려면
페이지를 디자인 뷰 또는 소스 뷰에서 엽니다.
스타일을 적용할 텍스트 및/또는 HTML 요소를 선택할 수도 있습니다.
서식 메뉴에서 새 스타일을 클릭합니다.
새 스타일 대화 상자가 표시됩니다.
범주 창에서 레이아웃을 선택합니다.
선택한 레이아웃 스타일 항목이 오른쪽 창에 표시됩니다.
디자인 뷰에서 선택한 텍스트에 스타일을 적용하면 스타일 특성이 페이지에 대한 HTML 태그에 인라인으로 삽입됩니다. 새 스타일 특성을 검토하려면 소스 뷰로 전환합니다.
외부 스타일시트에 정의된 CSS 스타일 규칙에 레이아웃 특성을 추가하려면
기존 외부 스타일시트를 엽니다.
수정할 스타일 규칙의 중괄호 안에 커서를 놓습니다.
다음 작업 중 하나를 수행합니다.
편집기에서 스타일시트를 마우스 오른쪽 단추로 클릭한 다음 바로 가기 메뉴에서 스타일 작성을 선택합니다.
스타일시트 도구 모음에서 스타일 작성을 선택합니다.
스타일 수정 대화 상자가 표시됩니다.
왼쪽 창에서 레이아웃을 클릭합니다.
선택한 레이아웃 스타일 항목이 오른쪽 창에 표시됩니다.
요소의 class 속성을 클래스 선택기의 이름으로 설정하여 CSS 스타일 클래스를 웹 페이지의 요소 또는 body 요소 자체에 적용할 수 있습니다.
UI 요소 목록
다음 표에는 새 스타일 및 스타일 수정 대화 상자의 레이아웃 범주 아래에서 사용할 수 있는 옵션이 나열되어 있습니다.
레이아웃 옵션
표시 유형
요소가 표시되는지 아니면 숨겨지는지 여부입니다. 값은 다음과 같습니다.collapse 이 값을 표 요소에 사용하는 경우 행이나 열이 숨겨집니다. 다른 모든 요소의 경우 이 값은 요소를 숨기는 것과 동일합니다.
hidden 요소가 표시되지 않도록 합니다.
visible 요소가 표시되도록 합니다.
inherit 요소가 해당 visibility 속성을 부모 요소로부터 상속받습니다.
표시
요소가 표시되는 방식입니다. 값은 다음과 같습니다.block 요소가 앞뒤에 줄 바꿈이 적용된 상태로 블록 수준에서 표시됩니다.
inline 요소가 앞뒤에 줄 바꿈이 적용되지 않은 상태로 인라인으로 표시됩니다.
inline-box 요소가 앞뒤에 줄 바꿈이 적용되지 않은 상태로 상자 형태의 인라인으로 표시됩니다.
inline-table 요소가 앞뒤에 줄 바꿈이 적용되지 않은 상태로 표 형태의 인라인으로 표시됩니다.
list-item 요소가 목록에 항목으로 표시됩니다.
none 요소가 숨겨집니다.
run-in 상황에 따라 요소가 블록 수준에 또는 인라인으로 표시됩니다.
table 요소가 블록 테이블로 표시되며 테이블 앞뒤에 줄 바꿈이 적용됩니다.
table-caption 요소가 표 캡션으로 표시됩니다.
table-cell 요소가 표 셀로 표시됩니다.
table-column 요소가 표 열로 표시됩니다.
table-column-group 요소가 표 열 그룹으로 표시됩니다. 이 그룹에는 열이 하나 이상 들어 있을 수 있습니다.
table-footer-group 요소가 표 바닥글 그룹으로 표시됩니다. 이 그룹에는 바닥글이 하나 이상 들어 있을 수 있습니다.
table-header-group 요소가 표 머리글 그룹으로 표시됩니다. 이 그룹에는 머리글이 하나 이상 들어 있을 수 있습니다.
table-row 요소가 표 행으로 표시됩니다.
table-row-group 요소가 표 행 그룹으로 표시됩니다. 이 그룹에는 행이 하나 이상 들어 있을 수 있습니다.
inherit 요소가 해당 display 속성을 부모 요소로부터 상속받습니다.
float
텍스트가 주위에 래핑될 수 있도록 요소가 왼쪽 또는 오른쪽에 표시되는지 아니면 인라인으로 표시되는지 여부입니다. 이 속성은 대개 이미지에 가장 많이 사용되지만 텍스트 블록에도 적용됩니다. 값은 다음과 같습니다.left 요소가 왼쪽(부모 요소 내)에 표시됩니다.
none 요소가 텍스트에 나타나는 위치에서 인라인으로 표시됩니다.
right 요소가 오른쪽(부모 요소 내)에 표시됩니다.
inherit 요소가 해당 float 속성 값을 부모 요소로부터 상속받습니다.
clear
부동 요소를 허용하지 않는 요소의 면입니다. 값은 다음과 같습니다.both 요소의 왼쪽 또는 오른쪽 면에서 부동 요소가 허용되지 않습니다.
left 요소가 왼쪽 면에 있는 부동 요소 아래로 이동합니다.
none 요소의 모든 면에서 부동 요소가 허용되지 않습니다.
right 요소가 오른쪽 면에 있는 부동 요소 아래로 이동합니다.
inherit 요소가 해당 clear 속성을 부모 요소로부터 상속받습니다.
커서
표시할 커서의 유형입니다. 값은 다음과 같습니다.auto(기본값) 브라우저에서 커서를 설정합니다.
crosshair 커서가 십자형으로 렌더링됩니다.
default 기본 커서(대개 화살표)입니다.
e-resize 요소의 크기를 오른쪽(동쪽)으로 조정하는 데 사용되는 커서입니다.
help 도움말을 사용할 수 있음을 나타내는 커서(대개 물음표)입니다.
move 개체를 이동할 수 있음을 나타내는 커서입니다.
n-resize 요소의 크기를 위쪽(북쪽)으로 조정하는 데 사용되는 커서입니다.
ne-resize 요소의 크기를 위쪽 및 오른쪽(북동쪽)으로 조정하는 데 사용되는 커서입니다.
nw-resize 요소의 크기를 위쪽 및 왼쪽(북서쪽)으로 조정하는 데 사용되는 커서입니다.
pointer 커서가 포인터(대개 손 모양)로 렌더링됩니다.
progress 프로그램이 진행되고 있음을 나타내는 커서입니다.
s-resize 커서의 크기를 아래쪽(남쪽)으로 조정하는 데 사용되는 커서입니다.
se-resize 요소의 크기를 아래쪽 및 오른쪽(남동쪽)으로 조정하는 데 사용되는 커서입니다.
sw-resize 요소의 크기를 아래쪽 및 왼쪽(남서쪽)으로 조정하는 데 사용되는 커서입니다.
text 텍스트에 사용되는 커서입니다.
w-resize 요소의 크기를 왼쪽(서쪽)으로 조정하는 데 사용되는 커서입니다.
wait 프로그램이 사용 중임을 나타내는 커서(대개 모래 시계)입니다.
inherit 요소가 해당 cursor 속성을 부모 요소로부터 상속받습니다.
오버플로(overflow)
요소 콘텐츠가 해당 영역에서 오버플로되면 발생하는 현상입니다. 값은 다음과 같습니다.auto 콘텐츠가 클리핑되는 경우에만 스크롤 막대가 표시됩니다.
hidden 콘텐츠가 요소에 맞게 클리핑되며 스크롤 막대가 표시되지 않습니다.
scroll 콘텐츠가 요소에 맞게 클리핑되며 스크롤 막대가 표시됩니다.
visible(기본값) 요소 바깥쪽에 있는 콘텐츠도 표시됩니다.
inherit 요소가 해당 overflow 속성을 부모 요소로부터 상속받습니다.
클립(clip)
요소의 사각형 크기입니다. 정의된 영역보다 큰 요소는 영역에 맞게 클리핑됩니다. 크기를 지정하려면 top, right, bottom 및 left 상자를 사용합니다.top
클립 사각형의 위쪽 가장자리입니다. 값을 지정하면 목록에서 단위를 선택할 수 있습니다.right
클립 사각형의 오른쪽 가장자리입니다. 값을 지정하면 목록에서 단위를 선택할 수 있습니다.bottom
클립 사각형의 아래쪽 가장자리입니다. 값을 지정하면 목록에서 단위를 선택할 수 있습니다.left
클립 사각형의 왼쪽 가장자리입니다. 값을 지정하면 목록에서 단위를 선택할 수 있습니다.
기타 UI 요소
선택기
(새 스타일 대화 상자에서만) 스타일을 적용할 클래스 이름을 입력하거나 HTML 요소를 클릭할 수 있습니다. 클래스 이름은 마침표(.)로 시작해야 합니다. **(인라인 스타일)**을 선택하면 선택된 텍스트 또는 HTML 요소에 스타일이 인라인으로 적용됩니다.정의 위치
(새 스타일 대화 상자에서만) 스타일 규칙의 정의를 쓸 위치를 지정할 수 있습니다. 값은 다음과 같습니다.현재 페이지 스타일 규칙을 현재 페이지의 style 요소에 씁니다.
새 스타일시트 새 CSS 스타일시트를 프로젝트에 추가하고 규칙을 여기에 씁니다.
기존 스타일시트 스타일 규칙을 URL 목록을 사용하여 지정한 CSS 스타일시트에 추가합니다.
URL
(새 스타일 대화 상자에서만) 기존 CSS 스타일시트를 선택할 수 있습니다. 이 옵션은 정의 위치가 기존 스타일시트로 설정된 경우에만 사용할 수 있습니다.선택한 문서 영역에 새 스타일 적용
(새 스타일 대화 상자에서만) 선택한 텍스트, 클래스 또는 HTML 요소에 스타일을 적용하도록 지정합니다.미리 보기
스타일 규칙을 적용할 경우 어떻게 표시되는지를 예제를 통해 보여 줍니다.설명
스타일 규칙의 CSS 정의를 표시합니다.