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

 

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

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

CSS를 사용하여 웹 페이지 텍스트의 스타일 지정

시작하기 전에

프로젝트 파일을 다운로드하고 저장합니다. Dreamweaver에서 style-text.html을 열고 분할 뷰에서 styles.css를 표시합니다. 코드 뷰 창의 크기를 조정하여 웹 디자인의 모든 텍스트가 토성 그래픽의 오른쪽에 표시되도록 합니다.

코드 뷰 창에서 /* Start here */ 섹션으로 스크롤합니다.

style-text.html 열기

텍스트 크기 변경

h1을 더 크게 하려면 font-size 속성을 h1 선택기 아래에 추가합니다. <h1> 요소는 페이지의 제목에 해당합니다.

CSS

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

텍스트 크기 변경

서체 변경

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

CSS

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

서체 변경

텍스트 정렬 변경

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

CSS

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

텍스트 정렬 변경

텍스트 색상 변경

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

CSS

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

텍스트 색상 변경
텍스트 색상 변경

텍스트에 기울임체 적용

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

CSS

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

텍스트에 기울임체 적용

글꼴 두께 변경

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

CSS

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

글꼴 두께 변경

기타 유용한 텍스트 속성 추가

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

CSS

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

기타 유용한 텍스트 속성 추가

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

line-height 속성

브라우저에서 미리보기(Preview in Browser)를 클릭하여 원하는 브라우저를 선택하고 스타일이 적용된 텍스트를 확인합니다.

변경 내용을 확인하려면 파일을 저장합니다.

브라우저에서 미리 보기
09/28/2018
이 페이지가 도움이 되었습니까?