Download presentation
Presentation is loading. Please wait.
1
11장 텍스트와 레이아웃 11.1 그래픽 내의 텍스트 11.2 레이아웃 11.3 HTML과 CSS 멀티미디어시스템
11.1 그래픽 내의 텍스트 11.2 레이아웃 11.3 HTML과 CSS 멀티미디어시스템 2016-1학기
2
그래픽 내의 텍스트 텍스트를 그래픽처럼 취급함으로써, 그래픽 프로 그램으로 조작하고 최대한 유연하게 다룸.
텍스트와 통합된 그래픽 디자인에 적합함. 포스터, 책 표지, CD 또는 DVD 커버,… 등 윤곽선 폰트를 가진 벡터 그래픽 또는 비트맵 폰트 를 가진 비트맵 이미지 두 가지 방식의 혼합 형태가 증가하는 추세임. 멀티미디어시스템 2016-1학기
3
벡터 텍스트 윤곽선 폰트의 텍스트 집합은 벡터 그래픽 프로그램 에서 객체처럼 취급될 수 있음.
변환; 컬러 적용, 그라디언트 및 패턴 모양을 텍스트로 채우고, 경로를 따라 텍스트 설정 텍스트는 편집 가능한 상태로 유지됨. 멀티미디어시스템 2016-1학기
4
비트맵 텍스트 텍스트를 픽셀들로 변환 흔히 사용하는 효과와 필터 적용 가능 텍스트는 더 이상 텍스트로써 편집될 수 없음.
보통은, 텍스트는 별도의 분리된 레이어에 유지되므로 효 과를 독립적으로 텍스트에 적용할 수 있음. 텍스트는 더 이상 텍스트로써 편집될 수 없음. 폰트 변경이나 철자 확인, 단어 교체,…등 다른 이미지들처럼 취급해야 함. 멀티미디어시스템 2016-1학기
5
레이아웃(Layout) 대부분의 텍스트는 관례에 따라 배치됨. 단어들은 배열하여 문장을 형성하고, 페이지를 만듦.
특별한 포맷팅(즉, 이탤릭체로)이 문장 내의 단어에 적 용될 수 있음. – 인라인/문자 포맷팅 문단은 특별한 형태로 놓일 수 있음. (즉, 들여쓰기) – 블록-수준/문단 포맷팅 멀티미디어시스템 2016-1학기
6
인라인(Inline) 포맷팅 블록내의 문자들에 포맷팅을 적용하는 것.
폰트 특성과 크기 컬러 아래 첨자와 위 첨자에 대한 기본선 설정 문자 스타일(Character style) 은 어떤 목적(즉, 강조)에 사용되는 속성들을 한데 모은 것. 일관성을 보장, 수정이 용이함. 멀티미디어시스템 2016-1학기
7
블록-수준 포맷팅 각 블록의 문자들에 대하여 포맷팅에 대한 기본 설정을 가짐.(폰트, 크기, …등)
각 블록의 문자들에 대하여 포맷팅에 대한 기본 설정을 가짐.(폰트, 크기, …등) 인라인 포맷팅에 의해 무시됨. 블록은 왼쪽, 가운데, 오른쪽, 양쪽 정렬될 수 있음. 하이픈으로 연결될 수 있음. 블록의 사방에 여백을 설정할 수 있음. 일관성을 위해 문단 스타일(paragraph style) 사용 가능. 멀티미디어시스템 2016-1학기
8
마크업(Markup) 문서 내에 포함되어 있는 명령어들로써, 문서의 포맷 팅을 제어함.
WYSIWYG – 마크업은 보이지 않는 제어 코드로 구성 되며, 타이핑 한 그대로 디스플레이 됨. 태그-기반(Tag-based) – 문서의 텍스트는 태그라 불리 는 특별한 명령으로 둘러 쌓임. 태그는 어휘적으로 텍스트와 구별됨. 멀티미디어시스템 2016-1학기
9
구조적 마크업 태그는 문서의 논리적 요소를 구별함.(제목, 리 스트, 테이블,…)
태그는 문서의 논리적 요소를 구별함.(제목, 리 스트, 테이블,…) 시각적 마크업(visual markup)과 대조적임 – 태그가 보여지는 형태를 제어함.(폰트, 들여쓰기, …) 포맷팅은 요소의 타입 각각에 대해 정의될 수 있음. (참고 ; 문단 스타일 및 문자 스타일) 구조와 외양 사이를 분리하는 것을 허용함. 문서의 구조를 분석하는 프로그램을 만드는 것 이 용이함. 멀티미디어시스템 2016-1학기
10
스타일시트(Stylesheet) 구조적 마크업의 논리적 결정체: 외양으로부터 내용과 구조를 완전히 분리.
마크업 태그는 단지 구조만 가리킴. 외양을 규정하는 것은 별도의 메커니즘에 맏김. 스타일시트(Stylesheet)는 각 타입의 요소가 어떻게 디스플 레이 되어야 하는지를 기술한 규칙. 멀티미디어시스템 2016-1학기
11
HTML Hypertext Markup Language
원래는, 과학 논문을 마크업하는데 적합한 초기 버전 의 마크업에서 발전; 지금은 다양한 멀티미디어 도 포 함할 수 있을 뿐 만 아니라, 다양한 레이아웃 기능도 가짐. 최근 버전은 구조적 마크업을 강조, 예전 버전의 시각적 마크업 기능도 남아 있음. 멀티미디어시스템 2016-1학기
12
XHTML HTML 을 XML DTD 를 사용하여 재정의한 것임.
XHTML 1.0은 W3C 권고안(Recommendation)으로 2000 년 1월 채택됨. HTML 4.0과 거의 호환됨. XHTML 규칙에 맞는 것은 HTML 4에도 맞음, 그러나 역은 성립 안됨. XHTML 은 HTML 4 보다 더 엄격함. 보통, HTML은 XHTML 또는 HTML 4 를 의미하는 것 으로 사용됨. 멀티미디어시스템 2016-1학기
13
HTML 마크업 HTML 마크업은 문서를 요소들로 분리함. 각 타입의 요소들은 이름을 가짐.
요소들은 네스트(nested)될 수 있음. 반드시 적합하게 네스트 되어야 함. 각 요소는 시작 태그(start tag)로 시작하고 종료 태 그 (end tag)로 끝나야 함. 사이에 오는 텍스트는 요소의 내용(content) 임. 멀티미디어시스템 2016-1학기
14
태그 요소의 시작 태그는 그 이름을 각괄호로 둘러 싼 것임; <p>, <h1>, <div>, … XHTML 이름은 소문자와 숫자로 구성됨. 요소의 종료 태그는 / 뒤에 오는 이름을 각괄호로 둘러 싼 것임; </p>, </h1>, </div>,… 공백(Empty) 요소(내용이 없음)는 시작과 종료 태 그가 함께 옴 ; <img />, <hr />,… 멀티미디어시스템 2016-1학기
15
문자 엔티티 참조 문서 내에 < , > 및 다른 특수기호를 삽입할 수 있는 메커니즘이 필요함.(이들이 시작 태그 등으로 해석되 지 않도록 하는) 문자 엔티티 참조(character entity references): < 와 > 는 각각 < 와 > 를 나타냄. &를 삽입할 때는 & 를 사용 타이핑하기 힘든 문자들에 대한 일반적인 메커니즘 숫자 문자 참조(numeric character references)도 사용함. 즉, < # 뒤의 숫자는 ISO10646 문자 값임. 멀티미디어시스템 2016-1학기
16
속성(Attribute) 이름을 가진, 요소의 특성. 값들은 시작 태그 내에 할당됨.
<hr size="12" width="50%" /> 값들은 반드시 “ “ 로 둘러 쌓여야 함. 속성 이름들은 모두 소문자를 사용. 플래그들은 그들의 이름을 할당함으로써 동작 됨. <hr noshade="noshade" /> 플래그가 동작 않도록 하기 위해서는, 단순히 플래 그 속성을 생략하면 됨. 멀티미디어시스템 2016-1학기
17
문서 구조 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " /DTD/xhtml1-strict.dtd"> <html> <head> … </head> <body> … </body> </html> 멀티미디어시스템 2016-1학기
18
CSS Cascading Style Sheets
간단한 스타일시트 언어로써, HTML과 잘 작동하 며 대부분의 웹 브라우저에서 지원됨. 각 요소의 시각적 특성을 지정하는데 사용됨. CSS 규칙(rule)은 다음의 형태를 가짐. selector { declarations } HTML 문서의 head 내에 있는 스타일 요소에 규칙 을 넣을 수 있음. 멀티미디어시스템 2016-1학기
19
선택자들(Selectors) 이름(Name) – 선언은 그 이름을 가진 타입의 모든 요 소들에 적용됨.
Name.class – 선언은 그 이름을 가진 타입의 모든 요소 들의 class 속성이 class 값을 가질 경우에 적용됨. Name#id –선언은 그 이름을 가진 타입의 단일 요소들 의 id 속성이 id 값을 가질 경우에 적용됨. 멀티미디어시스템 2016-1학기
20
선언(Declarations) property: value; 특성들의 집합은 CSS 표준에 정의되어 있음.
인라인 및 블록-수준 포맷팅 요소들의 절대적 위치 및 상대적 위치 멀티미디어시스템 2016-1학기
21
간단한 예 각 문단의 시작 줄을 4pc 만큼 들여 쓰기 ; noindent class 가 있는 문단은 제외할 경우 ;
p { text-indent: 4pc; } noindent class 가 있는 문단은 제외할 경우 ; p.noindent { text-indent: 0pc; } 멀티미디어시스템 2016-1학기
22
HTML 블록-수준 요소들 p : 문단(paragraph)
h1, h2,…,h6 : 레벨 1, 2,…,6(!) 헤더(header) blockquote : 긴 인용문 pre : 미리-포맷된(pre-formatted) 텍스트 div : 임의로 구분(division) class 또는 id 속성들은 스타일시트 규칙과 더불어 사용 가 능. 멀티미디어시스템 2016-1학기
23
HTML 리스트들 ul – unordered list ol – ordered list li – list element
li 요소들은 ul 과 ol 요소들 사이에서 사용됨. Ol 내에서, li 요소들은 자동적으로 번호가 붙음; ul 은 디폴 트로 불렛됨.(bulleted) dl – definition list Dl 내에서 dt (term) 와 dd (definition) 가 쌍으로 사용됨. 멀티미디어시스템 2016-1학기
24
HTML 테이블 다양한 테이블 레이아웃을 제공하기 위하여 비교적 복잡한 구조를 가짐.
다양한 테이블 레이아웃을 제공하기 위하여 비교적 복잡한 구조를 가짐. 테이블 요소 tr (row) 내에 td (데이터, 즉 cell) 요소가 포함됨. 행,렬, 캡션, 헤더, 등을 제공하기 위한 추가적인 기능 테이블은 페이지를 레이아웃 하는데 매우 자주 사용 됨. 효과적이고 신뢰할 수 있지만, CSS를 이용하여 이런 작업 을 하는 것은 배제되어 있음. 멀티미디어시스템 2016-1학기
25
HTML 인라인 요소들 명시적으로 인라인 포맷팅을 지시하는 요소들(즉, 폰 트)은 배제됨- 구조적 마크업과 충돌.
더 추상적인 인라인 요소들은 OK em (emphasis), strong, 등등 스팬(span) 요소는 임의의 텍스트 스팬을 지정함. class 와 id 속성을 스타일시트 규칙과 결합하여, 인라인 포 맷팅에 사용할 수 있음. 멀티미디어시스템 2016-1학기
26
CSS 인쇄법(Typography) 폰트 특성을 제어하기 위한 5가지 성질 font-family font-style
font-variant font-weight font-size 라인-높이(line-height)와 결합하여 사용됨. 멀티미디어시스템 2016-1학기
27
font-family 이 값은, 선호하는 폰트 이름 순서대로 리스트로 나열됨.
이 값은, 선호하는 폰트 이름 순서대로 리스트로 나열됨. 실제로, 특정 폰트가 사용된다는 보장이 없음. (브라우 저에는 쓸모 없을 수도 있음.) 포괄적 폰트 패밀리(generic font families) 의 사용 – 브라우저는 사용 가능한 적절한 폰트로 대체함. serif, sans-serif, monospace, cursive, fantasy p.elegant { font-family: "The Sans", Verdana, Helvetica, sans-serif } 멀티미디어시스템 2016-1학기
28
font-style 및 font-variant
font-style 은 normal, italic 또는 oblique (즉, 경사진) font-variant 는 normal 또는 small-caps 가능. 폰트 성질에 의해 폰트 패밀리 중에서 적절한 멤버를 선택하는 효과. 경사진 폰트는, 실제의 이탤릭 폰트를 쓸 수 없을 경우에 사용될 수 있음. 멀티미디어시스템 2016-1학기
29
font-weight font weight 에 사용되는 용어들은 상대적인 것 들임.
이 값인, normal 과 bold 는 기대하는 효과를 얻 기 위함. 많은 폰트 패밀리들은 두 개 이상의 웨이트를 가지지만, 표준의 이름은 없음. font-weight 는 100, 200,…, 900 일 수 있음. 값이 증가함에 따라, weight 가 감소하지 않고 증가 할 수 있음. 값이 더 커지거나 / 더 작아지는 경우, 상속받은 값에 대해 상대적으로 weight 가 증가/감소 함. 멀티미디어시스템 2016-1학기
30
font-size 절대적인 크기는 어떤 단위로도 지정될 수 있음.
브라우저에 상대적인 디폴트 크기는 다음 값 중에서 선택됨 ; xx-small, x-small, small, medium, large, x-large, xx-large 크기는 상속받은 값의 %로 지정되거나, 상속된 폰트의 em 또는 ex 단위로 지정될 수 있음. 멀티미디어시스템 2016-1학기
31
레딩(Leading) line-height 특성이 레딩을 지정함.
normal – 브라우저에 의해 선택되며, 보통, 폰트 크기 의 배임. (즉, 너무 작음) 폰트 크기에 대한 상대적인 크기로 지정하기 위해, % (150%), 비율 (1.5) 또는 em (1.5em) 을 사용. line-height 와 leading은 폰트 선언 내에 결합될 수 있 음 : 14pt/21pt 멀티미디어시스템 2016-1학기
32
폰트 특성(property) 5가지의 폰트 특성 모두를 합친, 폰트에 대한 단일 선언.
5가지의 폰트 특성 모두를 합친, 폰트에 대한 단일 선언. size/leading 이 합쳐진 것도 포함될 수 있음. 생략된 특성들은 디폴트 값을 가짐. 순서는 정해져 있지 않지만, 브라우저는 보통 다음 순서를 선호함; style, variant, weight, size, family p { font: italic bold 14pt/21pt "The Sans", Verdana, Helvetica, sans-serif } 멀티미디어시스템 2016-1학기
33
컬러 rgb(80%,40%,80%) rgb(204,102,204) #CC66CC
Background-color 와 color 특성은 배경과 텍스트의 색을 제어함. 이 값들은, sRGB 색 공간 내의 색을 지정함. rgb(r%, g%, b%) rgb(r, g, b); 여기서 r, g, b 는 0–255 사이 값. #rrggbb ; 여기서 rr, gg, bb 는 16진 값. rgb(80%,40%,80%) rgb(204,102,204) #CC66CC 멀티미디어시스템 2016-1학기
34
정렬(Alignment) text-align 특성은 left, right, center 또는 justify 의 값을 가질 수 있음. 단지, 블록-수준 요소들에만 의미 있게 적용됨. body { text-align: left } p.display { text-align: center } 멀티미디어시스템 2016-1학기
35
레이아웃(Layout) 레이아웃 알고리즘: 스타일시트는 요소들의 배치를 수정하는데 사용될 수 도 있음.
각 요소는 전체적으로 박스 내에 위치함. 인라인 요소들과 텍스트는, 다음에 오는 것들과 수평적 형태로 놓이며, 허용된 폭의 크기에 적합한 블록을 만듦. 블록들은 다른 블록들과 수직 형태로 배치됨. 스타일시트는 요소들의 배치를 수정하는데 사용될 수 도 있음. 멀티미디어시스템 2016-1학기
36
박스(Box) 각각의 박스는 경계선(border)으로 둘러 쌓일 수 있음.
경계선은 패딩(padding)에 의해 컨텐츠와 분리됨. 경계선 바깥은, 마진(margin)에 의해 박스와 여백을 분 리함. CSS 의 다양한 특성들이 경계선의 width, style 과 colour, padding 과 margin, 박스의 height 와 width를 설 정하는데 사용될 수 있음. 각 박스에 대해, Text colour 와 background colour 를 분 리하여 설정할 수 있음. 멀티미디어시스템 2016-1학기
37
외부 스타일시트 규칙을 파일에 저장해 두고, HTML 문서 내에서 그 파일을 지정하여 참조하도록 함.
href 속성을 가진 link 요소로, rel="stylesheet", type="text/css“ 인 스타일시트를 지정할 경우는, <link href="styles.css" rel="stylesheet" type="text/css" /> Web 사이트의 모든 페이지에 대해 동일한 스타일이 적용 되므로, 전체를 쉽게 변경할 수 있음. 멀티미디어시스템 2016-1학기
Similar presentations
![1/55 4.2 편집 기능 사용하기 – 실습 1 글자 모양을 바꾸고 싶은 곳을 블록 설정 [ 글자 모양 ] 대화 상자에서 [ 글꼴 ] ‘ 궁서체 ’, [ 글자 색 ] ‘ 토마토색 ’ 으로 선택 → [ 설정 ] 클릭 → 글자 모양 변경.](/40/11034426/big_thumb.jpg "1/55 4.2 편집 기능 사용하기 – 실습 1 글자 모양을 바꾸고 싶은 곳을 블록 설정 [ 글자 모양 ] 대화 상자에서 [ 글꼴 ] ‘ 궁서체 ’, [ 글자 색 ] ‘ 토마토색 ’ 으로 선택 → [ 설정 ] 클릭 → 글자 모양 변경.>")
