Dreamweaver에서 CSS를 사용하여 색상, 정렬 등 다양한 스타일 속성을 웹 페이지 텍스트에 적용해 보세요.

페이지의 타이포그래피를 세련되게 디자인하는 방법에 대한 자세한 내용은 타이포그래피 및 웹 을 참조하십시오.

HTML에서 텍스트 구조의 스타일은 기본 글꼴로 설정되어 있습니다. CSS로 텍스트에 스타일을 적용하면 계층 구조, 가독성, 페이지 디자인의 전반적인 시각 효과가 크게 향상됩니다.

h1 을 더 크게 하려면 font-size 속성을 h1 선택기 아래에 추가합니다.

요소는 페이지의 제목에 해당합니다.

h1 {
margin: 0;
font-size: 48px;
}

HTML 페이지의 기본 글꼴은 일반적으로 Times New Roman입니다. 글꼴을 변경하려면 font-family 속성을 추가합니다. 여러 글꼴을 쉼표로 구분하여 지정할 수 있고 웹 브라우저는 사용자의 컴퓨터에서 사용 가능한 목록의 첫 번째 글꼴을 표시합니다. 브라우저에서 이용 가능한 글꼴을 바탕으로 가장 적합한 글꼴이 표시되도록 목록 마지막에는 반드시 "sans-serif" 또는 "serif"를 추가하십시오.

h1 {
...
font-size: 48px;
font-family: Gotham, Tahoma, sans-serif;
}

텍스트는 항상 기본적으로 왼쪽 정렬이지만 text-align 속성을 추가하여 변경할 수 있습니다. 텍스트는 왼쪽, 오른쪽, 가운데, 양쪽 정렬이 가능합니다. text-align: center; 속성을 h1 선택기와 h2 선택기에 추가합니다.

요소는 페이지의 부제에 해당합니다.

h1 {
...
font-family: Gotham, Tahoma, sans-serif;
text-align: center;
h2 {
...
color: #282828;
text-align: center;
}

텍스트는 기본적으로 검정 텍스트이지만 h1 의 색상을 color 속성과 16진수 값으로 변경할 수 있습니다. "color:"를 입력하면 컨텍스트 메뉴가 표시됩니다. 색상 옵션을 두 번 클릭한 다음 색상 메뉴에서 스포이드를 클릭합니다. 토성 그래픽의 진한 주황색 영역을 클릭하여 색상을 선택한 다음 Return 키를 누릅니다. 진한 주황색의 16진수 값이 자동으로 추가됩니다. 또한 16진수 값을 직접 입력할 수도 있습니다. 세미콜론을 사용하여 속성을 닫는 것을 잊지 마십시오.

h1 {
...
text-align: center;
color: #F47A53;
}

font-style 속성을 사용하여 텍스트에 기울임체를 적용할 수 있습니다. h2 를 기울임체 로 변경하려면 이 속성에 italic 값을 추가합니다.

h2 {
…
text-align: center;
font-style: italic;
}

font-weight 속성을 추가하면 텍스트를 얇게 또는 두껍게 만들 수 있습니다. 텍스트 두께는 100의 배수로 지정되며 100은 가장 얇고 900은 가장 두꺼운 값입니다. 이 속성을 사용하여 h2 의 두께를 줄입니다.

h2 {
…
font-style: italic;
font-weight: 300;
}

text-transform 을 사용하면 텍스트를 모두 대문자나 소문자로 손쉽게 바꿀 수 있습니다. letter-spacing 을 적용하면 선택기로 제어되는 모든 문자 사이의 가로 간격을 지정할 수 있습니다. 이러한 선택기를 h1 에 추가해 보십시오.

h1 {
...
color: #F67A53;
text-transform: uppercase;
letter-spacing: .08em;
}

p 선택기를 보면 텍스트 행 사이의 세로 간격을 제어할 수 있는 line-height 속성이 있습니다. line-height 속성을 삭제하여 이 속성이 만들어내는 가독성의 차이점을 확인해 보십시오. Command + Z (Mac) 또는 Ctrl + Z(Windows)를 눌러 변경 내용을 실행 취소합니다.