스페인은 건축이다
2014. 12. 16. 17:57 Review/Book,Study
스페인은 한번 건물을 지으면 쉽게 건물을 허물수 없는 법이 있어서
처음 건물을 지을때 튼튼하게 짓는다고 한다.
가장 훌륭한 디자인은 그 공간을 스쳐간 과거 시간의 흔적과 손때와
그 사람들의 기억이라고 말하는 스페인의 건축가 정신
멋있다.
부럽다.
'Review > Book,Study' 카테고리의 다른 글
| 스페인은 가우디다 (0) | 2014.12.16 |
|---|---|
| 스페인 셀프 트래블 (0) | 2014.12.16 |
| 언젠가 한번쯤 스페인 (0) | 2014.12.16 |
| 친절한 음악책 (0) | 2014.10.01 |
| 천개의 성공을 만든 작은 행동의 힘 (0) | 2014.10.01 |
스페인은 가우디다
2014. 12. 16. 17:48 Review/Book,Study
스페인에는 가우디 투어가 있다. 가우디가 머지..?
가우디를 빼놓고는 스페인을 얘기할수 없다니..
모두 정형화된 건물을 지을때 추를 거꾸로 매달아 축을 세우는 기법으로 건물을 지었고
나무 한그루를 살리기 위해 몇년의 공사기간을 더 두기도 했던 가우디는
건축주의 특징을 구조와 장식과 조각으로 새겼던 진정한 건축가이자
현재 바르셀로나를 먹여살리고 있다고해도 과언이 아닌 최고의 예술가다.
난 건축과는 거리가 멀지만..
이 책은 가우디의 인간적인 면을 토대로
건축을 이해하는데 도움이 된다.
남들 다하는 패키지 여행같지만
나도 가우디 보러 가야징..
'Review > Book,Study' 카테고리의 다른 글
| 스페인은 건축이다 (0) | 2014.12.16 |
|---|---|
| 스페인 셀프 트래블 (0) | 2014.12.16 |
| 언젠가 한번쯤 스페인 (0) | 2014.12.16 |
| 친절한 음악책 (0) | 2014.10.01 |
| 천개의 성공을 만든 작은 행동의 힘 (0) | 2014.10.01 |
스페인 셀프 트래블
2014. 12. 16. 17:20 Review/Book,Study
일정별 추천 코스와 지역별 지도가 있고 추천하는 음식점도 자세히 안내되어 있는데
바르셀로나의의 내용이 절반이상이라 다른 지역을 여행하기로 했다면 살짝 실망스러운 책
하지만 바르셀로나 여행을 계획중인 여행자라면 분명 도움이 될것~
'Review > Book,Study' 카테고리의 다른 글
| 스페인은 건축이다 (0) | 2014.12.16 |
|---|---|
| 스페인은 가우디다 (0) | 2014.12.16 |
| 언젠가 한번쯤 스페인 (0) | 2014.12.16 |
| 친절한 음악책 (0) | 2014.10.01 |
| 천개의 성공을 만든 작은 행동의 힘 (0) | 2014.10.01 |
언젠가 한번쯤 스페인
2014. 12. 16. 17:13 Review/Book,Study
스페인 여행을 준비하면서 읽은 책4
소도시로 이동하는 교통과 시간이 자세히 안내되어있어
유명한 곳보다 여유있게 스페인 소도시를 여행할 계획이라면 도움이 될것같다.
건축 유학생활을 했던 여행 경험을 토대로
건물과 풍경에 대한 설명과 작가의 위트가 돋보이는책
'Review > Book,Study' 카테고리의 다른 글
| 스페인은 가우디다 (0) | 2014.12.16 |
|---|---|
| 스페인 셀프 트래블 (0) | 2014.12.16 |
| 친절한 음악책 (0) | 2014.10.01 |
| 천개의 성공을 만든 작은 행동의 힘 (0) | 2014.10.01 |
| 예수이야기 (0) | 2014.05.12 |
CSS와 DHTML
2014. 12. 15. 17:26 나홀로스터디/JS 완벽가이드
이 포스팅은 "자바스크립트 완벽 가이드(인사이트, 송인철,이동기,이유원,황인석 옮김)"에서 발췌 요약한 것입니다.
16.1 CSS 개요
16.2 DHTML과 CSS
16.3 인라인 스타일 스크립트
16.4 계산된 스타일의 스크립팅
16.5 CSS 클래스 스크립팅
16.6 스타일시트 스크립팅
css와 자바스크립트를 함께 사용하면 때로는 동적인 HTML을 표현할 수 있다.
16.1 CSS 개요
CSS에서 각 스타일은 세미콜론으로 구분된 이름/값 속성 쌍으로 지정된다. CSS 표준에서는 자주 함께 쓰이는 몇 가지 스타일 속성들을 하나로 모아놓은 단축 속성들을 지원한다.
16.1.1 문서 엘리먼트에 스타일 규칙 적용하기
문서 엘리먼트에 스타일 속성을 적용하는 방법에는 여러가지가 있는데 한 가지 방법은 각 HTML 태그의 style 어트리뷰트에 스타일 속성을 써넣는 것이다.
<p style="margin-left:1in; margin-right:1in">
CSS를 사용하는 중요한 목적 중 하나는 문서의 표현에서 내용과 구조를 분리하는 것인데 위와 같이 하면 목적을 달성할 수 없다. 문서 표현에서 구조를 분리해내려면 '스타일시트'를 사용하면 된다. 스타일시트를 사용하면 모든 스타일 정보를 한 군데로 모아서 정리할 수 있다.
또 다른 종류의 스타일시트 규칙으로는 해당 스타일을 적용할 엘리먼트의 '클래스'를 지정하는 선택자를 사용하는 형태가 있다. 마지막으로, 스타일시트에는 id 어트리뷰트로 지정된 개별 엘리먼트에 한해서만 스타일을 적용할 수 있다는 규칙도 있다.
16.1.2 문서에 스타일시트 결합시키기
HTML 문서의 <head> 태그 안에 <style>과 </style> 태그를 만들고 그 사이에 스타일시트를 넣음으로써 HTML 문서와 스타일시트를 합칠 수 있다. 한 웹사이트에 있는 둘 이상의 페이지에서 같은 스타일시트를 사용한다면 스타일시트를 HTML에 넣기보다는 그 자체를 별도의 파일로 저장하여 CSS 파일을 HTML 페이지에 포함시킬수 있다. HTML 페이지에 스타일시트를 포함시키려면 <link> 태그를 사용하면 된다. 또한 <link> 태그를 사용해서 대체 스타일시트를 지정할 수도 있다. CSS @import 지시어를 사용하여 페이지 고유의 스타일시트에 공통 CSS 파일을 포함시킬 수 있다.
16.1.3 Cascade
CSS의 C는 캐스케이딩(cascading)을 의미한다. 이 용어가 가리키는 의미는 문서의 어떤 엘리먼트에 적용되는 스타일 규칙은 다른 위쪽의 단계에서 흘러 내려온 것일 수 있다는 뜻이다.
사용자 스타일시트는 브라우저의 기본 스타일시트보다 우선한다. 문서의 저자 스타일시트가 사용자 스타일시트보다 우선한다. 인라인 스타일은 모든 것보다 우선한다는 규칙이 있다. 예외 규칙으로 사용자 스타일 속성에 !important 변경자가 포함된 값이 있으면 저자 스타일시트보다 우선한다.
16.1.4 CSS 버전
CSS1은 1996년 10월에 채택되었고 색, 폰트, 바깥 여백, 테두리 등을 비롯한 기본 스타일들에 대한 속성을 정의했다. CSS2는 1998년 5월에 정의되었고 엘리먼트가 배치될 위치를 절대적으로(absolute) 지정하는 기능이 있다.
16.2 DHTML과 CSS
DHTML 콘텐츠 개발자들에게 CSS의 가장 즁요한 기능은 보통의 CSS 스타일 속성을 사용하여 문서에 있는 각 엘리먼트의 가시성이나 크기, 정확한 위치를 지정할 수 있다는 것이다.
16.2.1 DHTML의 핵심: 절대적 위치 지정
CSS의 position 속성은 엘리먼트를 배치하는 방법을 지정한다.
static
디폴드 값이며 문서 내용의 기본 흐름을 따라 엘리먼트가 배치되게 한다. 정적(static)으로 배치된 엘리먼트는 DHTML 엘리먼트가 아니기 때문에 top, left 등의 속성으로 위치를 지정할 수 없다.
absolute
이 값으로 설정된 엘리먼트는 자신을 감싸고 있는 컨테이너 엘리먼트를 기준으로 위치가 지정된다. 절대적(absolute)으로 배치된 엘리먼트는 다른 엘리먼트들과 무관하게 독립적으로 배치되며 <body>를 기준삼은 상대적인 위치를 갖는다. 만일 다른 엘리먼트 속에 이 엘리먼트가 중첩되어 있다면 감싼 엘리먼트를 기준삼은 상대적인 위치를 갖는다.
fixed
이 값은 브라우저 창을 기준으로 하여 엘리먼트 위치를 지정할 수 있게 한다. fixed로 배치된 엘리먼트는 항상 보이며(감출 수 없다) 문서를 스크롤해도 따라 움직이지 않는다. 고정적 배치는 대부분의 최신 브라우저에서 지원되지만 특이하게도 IE6만큼은 예외다.
relative
엘리먼트의 position 속성이 relative로 설정되면 이 엘리먼트는 일단 문서의 기본 흐름을 따라 배치된 후 그 위치를 기준으로 상대적인 거리에 배치된다.
16.2.2 CSS 위치 지정 예: 그림자가 깔린 텍스트
text-shadow 속성은 CSS3에서 채택되었으나 아직 구현하지 못하는 브라우저가 있으므로 shadow.js라는 자바스크립트 모듈을 사용하여 표현할 수 있다.
16.2.3 엘리먼트 위치와 크기 알아내기
최신브라우저에서 엘리먼트의 offsetLeft와 offsetTop 프로퍼티는 해당 엘리먼트의 X좌표와 Y좌표를 반환한다. 마찬가지로 offsetWidth와 offsetHeight 프로퍼티는 가로와 세로 길이를 반환한다. 이들 프로퍼티는 읽기 전용이며 픽셀 값을 숫자 타입으로 반환한다.('px' 단위가 붙지 않는다.) 위치가 지정되지 않은 엘리먼트에서 offsetParent는 브라우저마다 다르게 처리된다. 따라서 브라우저에 관계없이 엘리먼트의 위치를 판별하려면 offsetParent가 참조하는 엘리먼트들을 따라서 루프를 돌면서 오프셋 값을 누적시키는 것이다.
function getX(e){
var x = 0; // 0에서 시작한다
while(e){ // 엘리먼트 e에서 시작한다.
x += e,offsetLeft; // 오프셋 값을 더한다.
e = e.offsetParent; // 그리고나서 offsetParnet를 따라 올라간다.
}
return x; // offsetLeft의 총합을 반환한다.
}여기서 반환하는 값은 문서 좌표인데 이 값은 CSS 좌표와 호환되며 브라우저의 스크롤바 위치에 영향을 받지 않는다. 하지만 문서내 overflow 속성이 사용된다면 오프셋을 계산하는데 좀더 복잡한 과정을 사용해야 한다.
16.2.4 제 3의 차원: z-index
z-index 속성은 엘리먼트들을 쌓아 올리는 순서를 지정하며 둘 이상의 엘리먼트들이 겹쳐있을 때 어느 것이 더 위에 위치할 것인지 가리킨다. z-index의 디폴트 값은 0이지만 z-index 속성은 정수값이다. 단, z-index에 의해 지정되는 쌓아 올리기 순서는 오직 서로 형제 관계인 엘리먼트들에게만 적용된다.
16.2.5 엘리먼트 표시(display)와 가시성(visibility)
문서 엘리먼트를 화면에 실제로 보여줄 것인지를 제어하는 두 가지 CSS 속성은 visibility와 display 속성이다. visibility는 속성값이 hidden이면 해당 엘리먼트가 보이지 않고 속성값이 visible이면 해당 엘리먼트가 보인다. 한편 disply 속성은 보다 포괄적이며 해당 항목이 표시되는 방법을 지정하는데 사용되는데 해당 엘리먼트가 블록 엘리먼트인지, 인라인 엘리먼트인지, 리스트 항목인지 등을 지정한다. 그러나 display 속성이 none으로 설정되면 해당 엘리먼트가 표시되지 않음은 물론 배치조자 되지 않는다.
visibility와 display 스타일의 속성의 차이점이라 하면 동적으로 배치된 엘리먼트에 각 스타일을 적용했을때 일어나는 효과가 서로 다르다는 것이다. 문서 구조의 기본 흐름을 따라 배치되는 엘리먼트들(position속성이 static 또는 relative일 때)에 visibility를 hidden으로 설정하면 해당 엘리먼트가 보이지 않을 뿐 할당된 공간은 그대로 남아 있게 된다. 반면 엘리먼트 display 속성을 none으로 설정하면 문서 구조상에 해당 엘리먼트를 위한 공간이 아에 할당되지 않는다. (absolute나 fixed로 지정된 엘리먼트에서는 이 두 속성의 효과가 동일하다.)
16.2.6 CSS 박스 모델과 위치 지정 세부 사항
엘리먼트의 테두리(border)란 해당 엘리먼트 주변(또는 주변의 일부분)에 그려지는 사각형으로 css속성에서 각 테두리마다 스타일을 지정할 수 있다. margin과 padding 속성은 둘다 엘리먼트 주변의 여백을 지정하는 데에 쓰이는데 margin은 엘리먼트 테두리 바깥쪽에 있는 여백을 지정하는 반면 padding은 테두리 안쪽에 있는 여백을 지정한다.
width와 height가 지정하는 크기는 오직 엘리먼트의 내용 영역뿐이다. 안쪽 여백, 테두리, 바깥 여백 등에 필요한 추가 공간은 여기에 포함되지 않는다. 테두리까지 포함하여 엘리먼트가 화면상에서 차지하는 총 면적을 구하려면 엘리먼트의 width 값에 좌우 안쪽 여백과 좌우 테두리 굵기를 더해야 한다.
16.2.6.1 인터넷 익스플로러의 변덕
윈도우용 익스플로러 버전 4부터 5.5는 width와 height 속성을 엘리먼트의 테두리와 안쪽 여백이 포함된다.(하지만 바깥 여백은 포함되지 않는다.) 브라우저는 <!DOCTYPE> 선언이 있으면 엄격한 표준을 따르지만 선언이 없다면 디폴트는 하위 호환을 따르는 방식이 된다
16.2.7 색(color), 투명성(tranceparency), 투명도(translicency)
CSS에는 색을 지정할수 있는 문법이 있는데 색을 구성하는 삼원색인 빨강, 초록, 파랑 성분값을 16진수 숫자로 지정하는 방법이 있다. 만일 엘리먼트의 배경색이나 배경 이미지를 지정하지 않는다면 그 엘리먼트의 배경은 보통 투명하다. 하지만 모든 엘리먼트가 디폴트로 투명한 것은 아니다. 투명도를 지정하려면 CSS3의 opacity 속성을 사용하는데 1은 100% 불투명한 것을(디폴트), 0은 0% 불투명(또는 100% 투명)한 것을 의미한다.
16.2.8 부분적 가시성(partial visibility):overflow와 clip
visibility 속성은 문서 엘리먼트를 완전히 감추고 싶을 때 쓰인다. 한편 overflow와 clip 속성은 엘리먼트의 일부분만을 보이려 할 때 쓸수 있다.
visible(디폴트)
필요에 따라 내용물이 지정된 크기보다 넘쳐서 엘리먼트 박스 밖으로도 그려질 수 있게 허용한다.
hidden
지정된 크기를 초과하는 내용물은 잘려나가서 보이지 않는다. 따라서 크기와 위치 지정 속성에 의해 정의된 영역 밖으로는 내용물이 전혀 그려지지 않는다.
scroll
엘리먼트 박스에 수평, 수직 스크롤바가 추가된다.
auto
내용물이 엘리먼트 크기를 초과할 때에만 스크롤바가 표시된다.
16.3 인라인 스타일 스크립트
자바스크립트 객체에는 CSS1과 CSS2 스타일 속성에 해당하는 프로퍼티가 있다. 이들 프로퍼티의 값을 설정하는 것은 style 어트리뷰트에서 해당 스타일을 설정하는 것과 동일한 효과를 일으킨다. 이들 프로퍼티를 읽으면 (스타일이 있으면) 그 엘리먼트의 style 어트리뷰트에 설정되어 있는 CSS 속성 값을 읽을 수 있는데 중요한 점은 엘리먼트의 style 프로퍼티로 얻어지는 CSS2Properties 객체에는 오직 해당 엘리먼트의 인라인 스타일만 지정되어 있다는 것이다.
16.3.1 명명 규칙: 자바스크립트의 CSS 속성들
CSS 속성 중에는 이름 중간에 하이픈(-)이 들어가는 경우가 많다. 하지만 자바스크리비트에서 하이픈은 마이너스 기호로 해석되기 때문에 CSS2Properties 객체의 프로퍼티 이름들은 원래의 CSS 속성 이름들과 약간 다르다. CSS2Properties 프로퍼티 이름을 만들때는 하이픈을 제거하는 대신 하이픈 직후의 문자를 대문자로 바꾼다.
자바를 비롯한 몇몇 언어에서 'float'이라는 단어가 키워드로 지정되어 있으므로 CSS2Properties 객체는 CSS의 float 속성에 대응하는 프로퍼티 이름에 float 를 사용할 수 없다. 자바스크립트에서는 이 문제에 대한 해결책으로 float 속성 이름 앞에 'css'라는 접두사를 붙여 cssfloat이라는 프로퍼티를 사용할 수 있게 하였다.
16.3.2 스타일 프로퍼티를 사용하여 작업하기
CSS2Properties 객체의 스타일 프로퍼티를 사용하여 작업할 때엔 모든 값을 문자열로 지정해야 한다. 엘리먼트에 대해 자바스크립트로 수행하려면 모든 값을 따옴표로 감싸야만 한다. 또 하나, 모든 위치 지정 프로퍼티에는 단위를 필수적으로 명시해야 함을 유의하라.
HTMLElement의 style 프로퍼티에서 CSS2 Properties 객체를 얻어낼 경우 이 객체의 프로퍼티가 나타내는 것은 해당 엘리먼트의 인라인 스타일 속성 값이다. 바꿔말하면 이들 프로퍼티 중 하나를 설정한다는 것은 곧 그 엘리먼트의 style 어트리뷰트에 지정된 CSS 속성을 설정하는 것이 된다. 이 설정은 오직 그 하나의 엘리먼트에만 영향을 미치며 CSS 계층 구조에서 전파되는 모든 스타일 설정보다 이 인라인 속성이 우선한다.
16.3.3 예: CSS 툴팁
첫째, 스타일시트에는 툴팁의 그림자, 배경색, 테두리 그리고 폰트가 지정되어 있다.
둘째, Tooltip() 생성자에서 툴팁 <div> 엘리먼트가 생성될 때 position:absolute 등과 같은 속성이 인라인 스타일로 지정된다.
셋째, top, left, visibility 스타일은 Tooltip.show() 메서드에 의해 툴팁이 표시될 때 지정된다.
16.3.4 DHTML 애니메이션
움직이는 애니메이션 효과를 주려면 구현하려는 이미지의 style.left 프로퍼티를 반복적으로 증가시켜 원하는 위치에 도달시키면 된다. 다른 방법으로는 style.clip 프로퍼티를 반복적으로 변경함으로써 이미지의 보이는 부분을 픽셀 단위로 증가시킬 수도 있따. 모든 DHTML 애니메이션에는 setInterval()이나 setTimeout() 함수가 필요할 것이다.
16.4 계산된 스타일의 스크립팅
자바스크립트에서 HTML 엘리먼트의 style 프로퍼티는 HTML의 style 어트리뷰트에 대응한다. 또한 style 프로퍼티의 값으로 얻어지는 CSS2Properties 객체에는 오직 해당 엘리먼트의 인라인 스타일 정보만 저장되어 있다.
경우에 따라 어떤 엘리먼트에 적용된 모든 스타일을 정확히 알고 싶을 때가 있는데 W3C 표준에 따르면 어떤 엘리먼트의 계산된 스타일을 얻어내는 API Window 객체의 getComputedStyle() 메서드다. 이 메서드의 첫째 전달인자는 계산된 스타일을 얻어내려는 대상 엘리먼트이고 둘째 전달인자는 스타일을 얻어내려는 ":before"나 ":after" 같은 CSS 모조 엘리먼트다. getComputedStyle() 의 반환값은 CSS2Properties 객체이며 이 객테는 지정된 엘리먼트(또는 모조 엘리먼트)에 적용된 모든 스타일을 표현하고 읽기 전용이다.
IE는 getComputedStyle() 메서드를 지원하지 않지만 모든 HTML 엘리먼트에는 currentStyle 프로퍼티가 있고 이 프로퍼티가 해당 엘리먼트에 대한 계산된 스타일을 지니고 있다.
16.5 CSS 클래스 스크립팅
이 절에서는 HTML 엘리먼트의 className 프로퍼티를 사용하여 HTML class 어트리뷰트의 값을 스크립팅 하는 방법을 알아보자
16.6 스타일시트 스크립팅
16.6.1 스타일시트 활성화와 비활성화
스타일시트를 활성화 또는 비활성화시키는 스타일시트 스크립팅 기법은 가장 간단하며 호환성과 안정성면에서도 가장 우수하다. HTML DOM 레벨2 표준에는 <link>와 <script> 엘리먼트에 대해 disabled 프로퍼티가 정의되어 있는데 HTML 태그에는 이 프로퍼티에 대응하는 disabled 어트리뷰트 등이 존재하지 않는다. 하지만 자바스크립트에는 읽고 쓸 수 있는 disabled 프로퍼티가 존재한다.
16.6.2 스타일시트 객체와 스타일시트 규칙
문서에 적용되어 있는 스타일시트는 document 객체의 styleSheets[] 배열에 저장되어 있다. 배열의 엘리먼트는 CSSStyleSheet 객체이고 이 객체에는 cssRules[] 배열이 있는데 여기에 스타일시트 규칙들이 포함되어 있다. IE는 cssRules[] 프로퍼티를 지원하지 않지만 그와 동등한 rules 프로퍼티가 있다. cssRules[]또는 rules[] 배열의 엘리먼트는 CSSRules 객체다. W3C 표준에 의하면 CSSRule 객체는 어떤 종류의 CSS 규칙이라도 표현할 수 있는데 여기에는 at-규칙(at-rule)이라 불리는 @import나 @page 지시어도 포함된다.
'나홀로스터디 > JS 완벽가이드' 카테고리의 다른 글
| 10장 모듈과 네임스페이스 (0) | 2015.03.31 |
|---|---|
| 쿠키와 클라이언트 측 지속성 (0) | 2014.12.23 |
| 문서 스크립팅 (0) | 2014.11.26 |
| 웹 브라우저와 자바스크립트 (0) | 2014.11.18 |
| 함수 (0) | 2014.10.27 |
by 허클베리밋