Chapter07 CSS3 글꼴과 문자 HTML5 Programming
Contents Chapter07 1. CSS3의 사용 2. 선택자 3. 글꼴 4. 텍스트 CSS3 글꼴과 문자
CSS CSS HTML 단점을 보완하기 위한 스타일 시트 장점 다양한 기능의 확장 통일된 문서 양식 제공 Chapter07 CSS HTML 단점을 보완하기 위한 스타일 시트 장점 다양한 기능의 확장 통일된 문서 양식 제공 사용자 환경과 상관없는 독립된 문서 제작 가능 문서 형식의 다양화 로딩 시간 단축 CSS3 글꼴과 문자
CSS 장점 다양한 기능의 확장 통일된 문서 양식 제공 사용자 환경과 상관없는 독립된 문서 제작 가능 Chapter07 다양한 기능의 확장 HTML은 누구나 쉽게 익힐 수 있을 정도로 단순한 기능을 제공하므로 CSS를 사용하면 다양한 기능을 추가 시킬 수 있으며 기능의 변경도 가능 통일된 문서 양식 제공 CSS를 사용하면 한 번의 속성 정의로 여러 문서에서 동시에 다양하게 적용할 수 있음 사용자 환경과 상관없는 독립된 문서 제작 가능 CSS를 사용함으로써 이를 방지할 수 있고 만든 이의 의도대로 HTML 문서의 결과를 확인할 수 있음 CSS3 글꼴과 문자
CSS 장점 문서 형식의 다양화 로딩 시간 단축 CSS를 사용함으로써 더욱 다양하고 멋진 HTML 문서를 만들 수 있음 Chapter07 문서 형식의 다양화 CSS를 사용함으로써 더욱 다양하고 멋진 HTML 문서를 만들 수 있음 로딩 시간 단축 통일된 문서 양식을 제공함으로써 브라우저가 읽어야 하는 문자의 수가 작아지기 때문에 로딩 시간이 단축됨 CSS3 글꼴과 문자
CSS3 CSS3 CSS2에 비해 다양한 속성들이 추가됨 Chapter07 CSS3 CSS2에 비해 다양한 속성들이 추가됨 이미지 파일이 했던 역할들을 CSS에서 처리할 수 있게 됨으로써 유지 보수 측면에서 유리하게 되었고 이미지 파일 로딩으로 웹 페이지의 로딩 시간 딜레이를 상당히 줄여 줄 수 있게 되었음 모듈 기반으로 개발이 되으므로 필요에 따라 해당 모듈만 교체하면 되기 때문에 빠른 업데이트가 가능함 CSS3 글꼴과 문자
CSS 기본 구조 CSS 기본 구조 HTML과는 달리 값에 “나 ‘ ’를 붙여 주지 않음 Chapter07 CSS 기본 구조 HTML과는 달리 값에 “나 ‘ ’를 붙여 주지 않음 HTML에서는 해당 속성에 해당하는 값을 지정할 때 =를 사용하지만 CSS는 :를 사용하며, 속성을 여러 개 사용할 경우 HTML은 띄어쓰기로 구분하지만 CSS는 ;를 사용하여 구분함 CSS3 글꼴과 문자
CSS 문서 적용 방법 Chapter07 CSS 문서 적용 방법 CSS3 글꼴과 문자
CSS 문서 적용 방법 임베디드 방식 HTML 문서에 CSS를 삽입하는 방식 Chapter07 임베디드 방식 HTML 문서에 CSS를 삽입하는 방식 head 요소 안에 style 요소를 사용하여 스타일을 정의 하나의 페이지에서만 적용되므로 HTML 문서마다 스타일을 적용하고자 할 때 편리함 CSS3 글꼴과 문자
CSS 문서 적용 방법 Chapter07 임베디드 방식 CSS3 글꼴과 문자
CSS 문서 적용 방법 링크 방식 HTML 문서와는 별도로 스타일만을 설정한 CSS 파일을 만들어 사용하는 방법 Chapter07 링크 방식 HTML 문서와는 별도로 스타일만을 설정한 CSS 파일을 만들어 사용하는 방법 CSS 만을 작성한 확장자 *.css를 따로 만들어야 하며 head 요소 내에 해당 CSS 파일을 링크시킴 CSS3 글꼴과 문자
CSS 문서 적용 방법 Chapter07 링크 방식 CSS3 글꼴과 문자
CSS 문서 적용 방법 인라인 방식 각 요소에 직접 스타일을 적용하는 방법 Chapter07 인라인 방식 각 요소에 직접 스타일을 적용하는 방법 임베디드 방식이 페이지 전체에 적용된다고 하면 인라인 방식은 하나의 요소 안에서만 적용됨 CSS3 글꼴과 문자
CSS 문서 적용 방법 Chapter07 인라인 방식 CSS3 글꼴과 문자
선택자 Chapter07 선택자 지정 방법 CSS3 글꼴과 문자
선택자 Chapter07 요소 선택자 선택자로 스타일을 지정할 요소를 입력하는 것 CSS3 글꼴과 문자
선택자 Chapter07 요소 선택자 CSS3 글꼴과 문자
선택자 클래스 선택자 클래스 아이디를 각 요소에 지정한 후 CSS의 선택자로 클래스 이름을 지정 Chapter07 클래스 선택자 클래스 아이디를 각 요소에 지정한 후 CSS의 선택자로 클래스 이름을 지정 만약 요소를 지정하지 않고 .클래스만을 선택자로 사용하면 해당 클래스 이름을 가진 모든 요소는 지정한 스타일을 적용됨 CSS3 글꼴과 문자
선택자 Chapter07 클래스 선택자 CSS3 글꼴과 문자
선택자 Chapter07 아이디 선택자 전체적으로 클래스 속성을 사용할 때와 같음 #를 사용하여 정의 CSS3 글꼴과 문자
선택자 Chapter07 클래스 선택자 CSS3 글꼴과 문자
선택자 속성 선택자 특정 속성을 선택자로 지정하는 것 Chapter07 속성 선택자 특정 속성을 선택자로 지정하는 것 모든 요소에서 사용하는 거의 모든 속성들이 지원되며 속성 값에 따른 다른 스타일 적용도 가능 CSS3 글꼴과 문자
선택자 Chapter07 속성 선택자 CSS3 글꼴과 문자
선택자 Chapter07 속성 선택자 CSS3 글꼴과 문자
글꼴 Chapter07 글꼴 관련 속성 CSS3 글꼴과 문자
글꼴 Chapter07 글꼴 관련 속성 CSS3 글꼴과 문자
프로그램 7-1 Chapter07 01: <!DOCTYPE html> 02: <html> 03: <head> 04: <style type="text/css"> 05: font {font-size: 10pt; 06: font-family: 굴림체; 07: font-weight: bold; 08: font-color: blue;} 09: .font1 {font-size: 20pt; 10: font-family: 궁서체; 11: font-weight: bold;} 12: .font2 {font-size: 15pt; 13: font-family: 돋움체; 14: font-weight: bold;} 15: </style> 16: </head> 17: <body> 18: <p class="font1"> 자기 소개서 </p> 19: 20: <p class="font2"> 성격 <p> 21: <p><font> 어떤 일이 주어지든지 항상 평균이상의 목적 달성하기 위해 노력을 아끼지 않는 편입니다.</font></p> 22: 23: <p class="font2"> 생활 신조 </p> 24: <p><font style="font-style: italic;"> 제 생활신조는 "사람이 되자" 입니다.</font></p> 25: 26: <p><font>주변 사람들에게 사람답게 보이기 위해서 언제나 신중한 태도를 가지고 생활하고 있습니다.</font></p> 27: </body> 28: </html> CSS3 글꼴과 문자
사용자 폰트 스타일 지정 @font-face 규칙 외부의 폰트를 손쉽게 불러와 사용할 수 있음 Chapter07 @font-face 규칙 외부의 폰트를 손쉽게 불러와 사용할 수 있음 사용형식은 @font-face에 사용자가 정의한 폰트의 이름을 지정하고 불러올 폰트의 URL을 지정 @font-face 규칙 브라우저 지원 현황 CSS3 글꼴과 문자
사용자 폰트 스타일 지정 Chapter07 폰트 포맷 브라우저 지원 현황 CSS3 글꼴과 문자
프로그램 7-2 Chapter07 01: <!DOCTYPE html> 02: <html> 03: <head> 04: <style type="text/css"> 05: @font-face {font-family: 'myFont'; src: url(Chunkfive.otf);} 06: p {font-family: myFont; font-size: 30pt} 07: </style> 08: 09: </head> 10: <body> 11: <p> CSS3 @font-face </p> 12: </body> 13: </html> CSS3 글꼴과 문자
텍스트 Chapter07 텍스트 관련 속성 CSS3 글꼴과 문자
텍스트 Chapter07 텍스트 관련 속성 CSS3 글꼴과 문자
프로그램 7-3 Chapter07 01: <!DOCTYPE html> 02: <html> 03: <head> 04: <style type="text/css"> 05: font {font-size: 10pt; 06: font-family: 굴림체; 07: font-weight: bold; 08: font-color: blue;} 09: .font1 {font-size: 20pt; 10: font-family: 궁서체; 11: font-weight: bold; 12: letter-spacing: 10pt; 13: text-align: center;} 14: .font2 {font-size: 15pt; 15: font-family: 돋움체; 16: font-weight: bold;} 17: .text {line-height: 150%; 18: text-indent: 10pt;} 19: </style> 20: </head> 21: <body> 22: <p class="font1"> 자기 소개서 </p> 23: 24: <p class="font2"> 성격 <p> 25: <p class="text"><font> 어떤 일이 주어지든지 항상 평균이상의 목적 달성하기 위해 노력을 아끼지 않는 편입니다.</font></p> 26: 27: <p class="font2"> 생활 신조 </p> 28: <p><font style="font-style: italic;"> 제 생활신조는 "사람이 되자" 입니다.</font></p> 29: 30: <p class="text"><font>주변 사람들에게 사람답게 보이기 위해서 언제나 신중한 태도를 가지고 생활하고 있습니다.</font></p> 31: </body> 32: </html> CSS3 글꼴과 문자
텍스트 Chapter07 CSS3에 추가된 텍스트 관련 속성 CSS3 글꼴과 문자
그림자 효과 스타일 지정 그림자 효과 스타일 지정 Chapter07 그림자 효과 스타일 지정 텍스트에 그림자를 부여하는 속성은 text-shadow이며 속성의 값으로는 그림자의 가로 위치, 그림자의 세로 위치, 그림자의 농도, 그림자 색상을 지정 text-shadow 속성 브라우저 지원 현황 CSS3 글꼴과 문자
그림자 효과 스타일 지정 Chapter07 그림자 효과 스타일 지정 CSS3 글꼴과 문자
특정 영역안의 텍스트 스타일 지정 wordbreak 속성 Chapter07 wordbreak 속성 강제로 줄 바꿈을 해야 할 때 사용하며 처음에는 익스플로러에서만 지원되었지만 웹 표준으로 지정되면서 이제는 크롬과 사파리에서도 지원하고 있음 브라우저 지원 현황 속성 값 CSS3 글꼴과 문자
특정 영역안의 텍스트 스타일 지정 Chapter07 wordbreak 속성 CSS3 글꼴과 문자
특정 영역안의 텍스트 스타일 지정 word-wrap 속성 특수 문자를 포함하여 강제 줄 바꿈을 하고자 할 때 사용 Chapter07 word-wrap 속성 특수 문자를 포함하여 강제 줄 바꿈을 하고자 할 때 사용 속성의 값은 break-word 하나만이 존재함 CSS3 글꼴과 문자
특정 영역안의 텍스트 스타일 지정 text-overflow 속성 긴 문장에 대하여 잘라주는 형태를 지정 브라우저 지원 현황 Chapter07 text-overflow 속성 긴 문장에 대하여 잘라주는 형태를 지정 브라우저 지원 현황 속성 값 CSS3 글꼴과 문자
특정 영역안의 텍스트 스타일 지정 Chapter07 text-overflow 속성 CSS3 글꼴과 문자