Dreamweaver의 CSS 속성 패널에서 텍스트 패널 사용 방법 - 드림위버 텍스트 패널

Dreamweaver 텍스트 패널에는 페이지의 텍스트 표시를 제어하는 ​​옵션 모음이 있습니다. 레이아웃 옵션 아래에 올 때까지 또는 패널 상단의 T 아이콘을 클릭 할 때까지 속성 패널을 아래로 스크롤하여 텍스트 패널 옵션에 액세스 할 수 있습니다.

텍스트 패널에는 다음과 같은 서식 옵션이 있습니다.

• 색상: 텍스트 색상을 설정합니다. 색상 영역을 클릭하고 색상을 선택하고 스포이드를 사용하여 화면에서 색상을 샘플링하거나 색상 필드에 16 진수 색상 코드를 입력 할 수 있습니다. 16 진수 색상 코드를 입력하는 경우 시작 파운드 기호 (#)를 포함 시키십시오.

• 글꼴 - 패밀리: 글꼴 패밀리 또는 일련의 패밀리를 정의합니다. 드롭 다운 목록의 맨 아래에서 글꼴 관리를 선택하고 글꼴 관리 대화 상자를 시작하여 로컬 하드 드라이브 또는 Adobe TypeKit에서 글꼴을 추가 할 수 있습니다.

  

• 글꼴 스타일: 일반, 기울임 꼴 또는 사선을 입력하십시오. 그러나 기울임 꼴과 기울임 꼴은 웹 브라우저에서 거의 다르지 않으므로 특별한 이유가없는 한 기울임 꼴로 붙이십시오.

• 글꼴 변형: 텍스트를 작은 대문자로 변경하십시오. 이 속성은 모든 브라우저에서 지원되지 않으므로주의 깊게 디자인을 테스트하십시오.

• 폰트 - 무게: 드롭 다운 목록에서 굵게 또는 굵게를 선택하여 텍스트를 굵게 표시합니다. 100과 900 사이의 숫자를 입력하여 텍스트의 굵게 표시 방법을보다 정확하게 제어 할 수도 있습니다. 굵게 서식을 제거하려면 보통 또는 더 밝게를 선택하십시오.

• 글꼴 크기: 텍스트 크기를 정의하십시오. 특정 숫자 크기 또는 상대 크기를 선택할 수 있습니다. 크기 옵션은 픽셀 (px), 포인트 (pt), 파이카 (pc), 퍼센트 (%), em, rem, ex 및 ch입니다. 픽셀, em 및 백분율은 텍스트 크기에 가장 일반적으로 사용되는 옵션입니다.

• 줄 높이: 텍스트가 배치되는 줄의 높이를 지정하십시오. 텍스트 크기와 비슷하게 픽셀, 전자 및 백분율을 비롯한 다양한 방식으로 선 높이를 지정할 수 있습니다. 텍스트 주위의 공간을 늘리면 컴퓨터 화면에서 더 쉽게 읽을 수 있으므로 줄 높이를 추가하는 것이 좋습니다.

• 텍스트 정렬: 해당 아이콘을 클릭하여 텍스트를 왼쪽 정렬, 오른쪽 정렬, 가운데 정렬 또는 양쪽 맞춤합니다. 상속을위한 첫 번째 아이콘이 기본값입니다. 예를 들어, 페이지 하단의 태그에 적용하는 스타일 정의에 가운데 맞춤 텍스트 정렬을 포함시켜 텍스트를 웹 페이지의 바닥 글에 가운데로 맞출 수 있습니다.

• 텍스트 장식: 텍스트에 밑줄을 표시할지, 겹쳐 지는지, 취소 선으로 표시할지 또는 깜박임 효과로 표시할지 여부를 지정합니다.링크 된 텍스트에서 밑줄을 제거하는 데 자주 사용되는 없음을 선택할 수도 있습니다.

• 텍스트 들여 쓰기: 픽셀, em 또는 백분율과 같은 크기 옵션 중 하나에 숫자를 입력하여 페이지 왼쪽에서 텍스트가 들여 쓰기되는 양을 지정하십시오.

왜 그렇게 많은 글꼴입니까?

CSS3 최신 버전의 CSS (Cascading Style Sheets) 덕분에 웹 페이지에서 원하는 글꼴을 사용할 수 있다고 들었을 것입니다. 이 진술은 사실이지만 일부 제한 사항이 있습니다. 글꼴을 게시 할 법적 권리가 있어야하며 글꼴은 웹 서버에서 호스팅되어야합니다.

의도 한대로 텍스트가 표시되도록 Dreamweaver에는 Windows 및 Macintosh 컴퓨터에서 가장 일반적인 글꼴 모음이 포함되어 있습니다. 이 폰트는

• 고담, Helvetica Nue, Helvetica, Arial, Sans Serif

• Cambria, Hoefler Text, Liberation Serif, Times, Times New Roman, Times, serif

와 같이 가족 단위로 분류됩니다. CSS 디자이너 패널의 텍스트 패널에있는 글꼴 - 패밀리 드롭 다운 목록의 맨 아래에있는 글꼴 관리 옵션을 선택하여 액세스 할 수있는 글꼴 관리 대화 상자를 사용하여 자신의 글꼴 모음을 구성 할 수 있습니다.

텍스트 패널의 텍스트 그림자 섹션

텍스트 패널의 텍스트 그림자 섹션은 CSS3 정의에 포함 된 최신 CSS 속성 중 하나 인 텍스트 그림자를 추가하는 도구를 제공합니다. 가장 인기있는 옵션은 다음과 같습니다.

• H-shadow: 텍스트에 그림자를 추가합니다. 먼저 크기 옵션을 선택한 다음 필드에 숫자를 입력하십시오. 예를 들어, 2 픽셀 너비의 수평 그림자를 추가하려면 2px를 입력합니다.

• V-shadow: 세로축에 텍스트에 그림자를 추가합니다. 먼저 크기 옵션을 선택한 다음 필드에 숫자를 입력하십시오.

• 흐리게: 그림자의 흐림 정도를 조절합니다. 숫자가 클수록 그림자가 흩어 지거나 흐려집니다.

• 색상: 16 진수 색상 코드를 입력하여 그림자 색상을 지정하거나 스포이드를 사용하여 화면에서 색상을 샘플링합니다.

  

텍스트 패널의 아래쪽에있는 다른 텍스트 패널 옵션처럼 일반적인 기능은 다음과 같습니다.

• 텍스트 변형: 텍스트의 대 / 소문자를 변경하십시오. 옵션은 대문자, 대문자 및 소문자입니다. 이 속성을 설정하려면 해당 아이콘을 클릭하십시오.

• 글자 간격: 글자 사이에 삽입되는 공백의 양을 정의합니다. 크기 옵션은 픽셀 (px), 포인트 (pt), 파이카 (pc), 퍼센트 (%), em, rem, ex 및 ch입니다.

• 단어 간격: 단어 사이에 삽입되는 공백의 양을 정의합니다. 크기 옵션은 픽셀 (px), 포인트 (pt), 파이카 (pc), 퍼센트 (%), em, rem, ex 및 ch입니다. 앞의 추가 항목 인 "CSS 크기 옵션 비교"를 참조하십시오.

• 공백 문자: 텍스트 블록에서 줄 바꿈 및 공백을 처리하는 방법을 브라우저에 알립니다. 옵션은 상속, 보통, Nowrap, Pre, Pre-line 또는 Pre-wrap입니다. Nowrap은 브라우저 창이나 다른 컨테이너에 맞게 줄 바꿈해야하는 경우 요소가 분리되지 않도록하기 때문에 특히 유용합니다.

• 수직 정렬: 텍스트 및 이미지와 같은 인라인 요소를 둘러싸는 요소를 기준으로 정렬합니다. 숫자 값을 설정하거나 Baseline, Sub, Super, Top, Text-Top, Middle, Bottom 및 Text-Bottom을 선택할 수 있습니다.