CSS(Cascading Style Sheet) 적용

텍스트 필드에는 일반 텍스트나 HTML 형식의 텍스트가 포함될 수 있습니다. 일반 텍스트는 인스턴스의 text 속성에 저장되고 HTML 텍스트는 htmlText 속성에 저장됩니다.

CSS 스타일 선언으로 텍스트 스타일을 정의하여 여러 가지 텍스트 필드에 적용할 수 있습니다. CSS 스타일 선언은 응용 프로그램 코드에 작성하거나 런타임 시 외부 CSS 파일에서 로드해 올 수 있습니다.

flash.text.StyleSheet 클래스는 CSS 스타일을 처리합니다. StyleSheet 클래스는 제한된 CSS 속성 집합을 인식합니다. StyleSheet 클래스가 지원하는 스타일 속성에 대한 자세한 내용은 ActionScript 3.0 언어 및 구성 요소 참조 설명서의 flash.textStylesheet 항목을 참조하십시오.

다음 예제와 같이 코드에서 CSS 스타일을 만든 다음 StyleSheet 객체를 사용하여 HTML 텍스트에 이러한 스타일을 적용할 수 있습니다.

var style:StyleSheet = new StyleSheet();

var styleObj:Object = new Object();
styleObj.fontSize = "bold";
styleObj.color = "#FF0000";
style.setStyle(".darkRed", styleObj);

var tf:TextField = new TextField();
tf.styleSheet = style;
tf.htmlText = "<span class = 'darkRed'>Red</span> apple";

addChild(tf);

StyleSheet 객체 생성 후, 예제 코드는 스타일 선언 속성 집합을 포함하는 간단한 객체를 만듭니다. 그런 다음 StyleSheet.setStyle() 메서드를 호출하며 이 메서드는 ".darkred"라는 스타일 시트에 새 스타일을 추가합니다. 다음으로, StyleSheet 객체를 TextField 객체의 styleSheet 속성에 할당하여 스타일 시트 서식을 적용합니다.

CSS 스타일을 적용하려면 htmlText 속성이 설정되기 전에 스타일 시트가 TextField 객체에 적용되어야 합니다.

스타일 시트가 있는 텍스트 필드는 편집할 수 없도록 만들어져 있습니다. 입력 텍스트 필드가 있고 이 필드에 스타일 시트를 지정한 경우 텍스트 필드에 스타일 시트의 속성이 표시되기는 하지만 사용자가 이 텍스트 필드에 새 텍스트를 입력할 수는 없습니다. 또한 스타일 시트가 지정된 텍스트 필드에서는 다음과 같은 ActionScript API를 사용할 수 없습니다.

텍스트 필드에 스타일 시트를 지정했지만 나중에 TextField.styleSheet 속성을 null로 설정한 경우 TextField.text 및 TextField.htmlText 속성이 해당 내용에 태그와 속성을 추가하여 이전에 지정된 스타일 시트의 서식을 통합합니다. 원래의 htmlText 속성을 유지하려면 이 속성을 변수에 저장한 후에 스타일 시트를 null로 설정하십시오.