728x90
저자 : Jason Cranford Teague
출판사 : Peachpit Press
출판일자 : 2010년 10월 3일
독서 기간 : 2011년 5월 24일 ~
Introduction
이 책에서 사용되는 모든 코드는 아래 사이트에 포함되어 있다.
http://www.speaking-in-styles.com/css3vqs
이 책은 세 파트로 나뉜다.
- Chapter 1-4 : CSS 소개와 문법(syntax)
- Chapter 5-12 : CSS 속성(property)
- Chapter 13-15 : CSS 로 작업(working)
Chapter 1. Understanding CSS3
- HTML 이 웹에서 배포를 위한 문서의 구조를 정의한다고 하면 CSS(Cascding Style Sheets) 는 웹 페이지의 외양을 결정하는 언어이다. HTML 이 웹 브라우져가 어떻게(How) 내용(contents)을 페이지 상에서 구성되는지를 말한다면, CSS 는 브라우져가 내용(contents)을 어떻게 보여져야(look) 하는지를 말한다.
- CSS3(CSS Leve 3) 는 새로운 기능을 추가한 차세대의 스타일 언어이다. W3C 에서 여전히 개발중이다.
- Cascading Stye Sheets 란?
cascading style sheets 는 워드프로세스처럼 웹 상에서 동일한 스타일 설정으로 편리하게 한다. 하나의 웹페이지의 특정 HTML 태그의 모양을 적용하도록 중간 위치에서 CSS 를 설정하거나 전체 웹 사이트에도 적용할 수 있다.
- CSS 는 어떻게 동작하는가?
방문자가 주소를 입력하거나 링크를 클릭해서 웹 페이지 하나를 읽을때, 서버는 HTML 파일을 방문자의 컴퓨터로 같이 링크된 파일들과 내장된 HTML 파일을 보낸다. CSS 코드가 없어도 방문자의 브라우져는 브라우져 고유한 렌더링 엔진으로 웹 페이지를 렌더링(render) 하기 위해서 HTML 에 CSS 를 적용하기 위해 번역한다.(interpret)
<HTML> -> interpretation
|
render -> Web Page
|
{CSS} -> interpretation
- CSS 의 Evolution
몇년 동안 CSS 는 W3C 의 보호아래 현재의 형태를 유지했지만 작업(process) 는 매우 느렸다. CSS 가 W3C의 CSS Working Group 이 만든 표준이지만, 그 표준을 번역하고 구현하는 것은 각각의 브라우져이 몫이었다. 이것이 균등하지 못한 실행을 이끌었고 몇몇 브라우저는 다른 것들보다 앞서나가게 했다.
모드 현재의 브라우져(Internet Exploer, Firefox, Safari, Opera)는 CSS2(CSS1 과 CSS-Positioning)을 지원한다. 그러나 몇년간의 개발후 CSS3 는 아직 진행단계이고 몇몇 브라우져(Firefox, Safari, Opera) 에서는 지원되지만 IE 같은 브라우져에서는 여전히 개발중이다.
. CSS Level 1(CSS1)
W3C 는 1996년 CSS 의 첫번째 공식 버전을 배포했다. 초기 버전에 포함된 핵심 기능은 텍스트 포맷, 폰트 설정, 여백(margin) 설정들이다. Netscape 4 와 Internet Explorer 3, 4 가 지원한다.
웹 디자이너들은 화면(screen)상에서 엘리먼트(elements)를 정확하게 위치할 방법을 필요했다. CSS1 은 이미 배보되었고 CSS Level2 는 여전히 미래에 있어서, W3C 는 임시방편으로 CSS-Positioning 를 배포했다. 이 표준은 표준으로 공식화하기 전에 잠시동안 관계된 파티들이 논의할 수 있도록 제안했다. 그렇지만 넷스케이프와 마이크로소프트는 이 제안을 건너띄고 그들의 버전4 브라우져들에서 예비 아이디어를 포함시켰다.
. CSS Level 2(CSS2)
. CSS Level 3(CSS3)
- CSS 와 HTML
CSS : 형용사(adjectives), 부사(adverbs)
HTML : 명사(nouns)
JavaScript : 동사(verbs)
- CSS 룰의 세가지Type
. HTML selector : HTML 태크의 텍스트 부분을 HTML selector 라고 한다.
ex) h1 {color: red; }
<h1> ... </h1>
-> h1 이 selector
. Class : 사용자의 재량으로 어떠한 HTML 태그에 적용할 수 있는 "자유로운 인간"(free agent) 룰이다. 클래스 이름을 거의 원하는 것으로 지을 수 있다. 다중 HTML 태그에 적용할 수 있기 때문에 매우 다양한 타입의 셀럭터(selector) 이다.
ex) .myClass { font: bold 1.25em times; }
<h1 class="myClass">...</h1>
. ID : 클래스 셀럭터처럼 ID 룰은 어떠한 HTML 태그에 적용할 수 있다. 그렇지만 자바스크립트 함수로 객체를 생성하는 페이지 상에서 특정 HTML 태그에 한번만 적용할 수 있다.
#myObject1 { position: absolute; top: 10px; }
<h1 id="myObject1" ... </h1>
출판사 : Peachpit Press
출판일자 : 2010년 10월 3일
독서 기간 : 2011년 5월 24일 ~
Introduction
이 책에서 사용되는 모든 코드는 아래 사이트에 포함되어 있다.
http://www.speaking-in-styles.com/css3vqs
이 책은 세 파트로 나뉜다.
- Chapter 1-4 : CSS 소개와 문법(syntax)
- Chapter 5-12 : CSS 속성(property)
- Chapter 13-15 : CSS 로 작업(working)
Chapter 1. Understanding CSS3
- HTML 이 웹에서 배포를 위한 문서의 구조를 정의한다고 하면 CSS(Cascding Style Sheets) 는 웹 페이지의 외양을 결정하는 언어이다. HTML 이 웹 브라우져가 어떻게(How) 내용(contents)을 페이지 상에서 구성되는지를 말한다면, CSS 는 브라우져가 내용(contents)을 어떻게 보여져야(look) 하는지를 말한다.
- CSS3(CSS Leve 3) 는 새로운 기능을 추가한 차세대의 스타일 언어이다. W3C 에서 여전히 개발중이다.
- Cascading Stye Sheets 란?
cascading style sheets 는 워드프로세스처럼 웹 상에서 동일한 스타일 설정으로 편리하게 한다. 하나의 웹페이지의 특정 HTML 태그의 모양을 적용하도록 중간 위치에서 CSS 를 설정하거나 전체 웹 사이트에도 적용할 수 있다.
- CSS 는 어떻게 동작하는가?
방문자가 주소를 입력하거나 링크를 클릭해서 웹 페이지 하나를 읽을때, 서버는 HTML 파일을 방문자의 컴퓨터로 같이 링크된 파일들과 내장된 HTML 파일을 보낸다. CSS 코드가 없어도 방문자의 브라우져는 브라우져 고유한 렌더링 엔진으로 웹 페이지를 렌더링(render) 하기 위해서 HTML 에 CSS 를 적용하기 위해 번역한다.(interpret)
<HTML> -> interpretation
|
render -> Web Page
|
{CSS} -> interpretation
- CSS 의 Evolution
몇년 동안 CSS 는 W3C 의 보호아래 현재의 형태를 유지했지만 작업(process) 는 매우 느렸다. CSS 가 W3C의 CSS Working Group 이 만든 표준이지만, 그 표준을 번역하고 구현하는 것은 각각의 브라우져이 몫이었다. 이것이 균등하지 못한 실행을 이끌었고 몇몇 브라우저는 다른 것들보다 앞서나가게 했다.
모드 현재의 브라우져(Internet Exploer, Firefox, Safari, Opera)는 CSS2(CSS1 과 CSS-Positioning)을 지원한다. 그러나 몇년간의 개발후 CSS3 는 아직 진행단계이고 몇몇 브라우져(Firefox, Safari, Opera) 에서는 지원되지만 IE 같은 브라우져에서는 여전히 개발중이다.
. CSS Level 1(CSS1)
W3C 는 1996년 CSS 의 첫번째 공식 버전을 배포했다. 초기 버전에 포함된 핵심 기능은 텍스트 포맷, 폰트 설정, 여백(margin) 설정들이다. Netscape 4 와 Internet Explorer 3, 4 가 지원한다.
웹 디자이너들은 화면(screen)상에서 엘리먼트(elements)를 정확하게 위치할 방법을 필요했다. CSS1 은 이미 배보되었고 CSS Level2 는 여전히 미래에 있어서, W3C 는 임시방편으로 CSS-Positioning 를 배포했다. 이 표준은 표준으로 공식화하기 전에 잠시동안 관계된 파티들이 논의할 수 있도록 제안했다. 그렇지만 넷스케이프와 마이크로소프트는 이 제안을 건너띄고 그들의 버전4 브라우져들에서 예비 아이디어를 포함시켰다.
. CSS Level 2(CSS2)
. CSS Level 3(CSS3)
- CSS 와 HTML
CSS : 형용사(adjectives), 부사(adverbs)
HTML : 명사(nouns)
JavaScript : 동사(verbs)
- CSS 룰의 세가지Type
. HTML selector : HTML 태크의 텍스트 부분을 HTML selector 라고 한다.
ex) h1 {color: red; }
<h1> ... </h1>
-> h1 이 selector
. Class : 사용자의 재량으로 어떠한 HTML 태그에 적용할 수 있는 "자유로운 인간"(free agent) 룰이다. 클래스 이름을 거의 원하는 것으로 지을 수 있다. 다중 HTML 태그에 적용할 수 있기 때문에 매우 다양한 타입의 셀럭터(selector) 이다.
ex) .myClass { font: bold 1.25em times; }
<h1 class="myClass">...</h1>
. ID : 클래스 셀럭터처럼 ID 룰은 어떠한 HTML 태그에 적용할 수 있다. 그렇지만 자바스크립트 함수로 객체를 생성하는 페이지 상에서 특정 HTML 태그에 한번만 적용할 수 있다.
#myObject1 { position: absolute; top: 10px; }
<h1 id="myObject1" ... </h1>
'Thinking > Book' 카테고리의 다른 글
| [도서] 십자군 이야기 1, 2, 3 (0) | 2013.01.25 |
|---|---|
| [도서] 24시간 365일 서버/인프라를 지탱하는 기술 (0) | 2012.01.27 |
| [독서노트] 완전초보를 위한 아이폰&아이패드 앱 개발 (0) | 2011.12.30 |
| [독서노트] 얼음과 불의 노래(A Song of Ice and Fire) (0) | 2011.08.23 |
| [독서노트] 똑똑하고 100배 일 잘하는 개발자 모시기_조엘온소프트웨어 시즌 2 (0) | 2011.04.22 |
