14. 시각 형태 속성

해당 내용은 "쉽고 빠르게 익히는 CSS3(제이슨 크랜포드 티그)"를 읽고 정리한 글입니다. 

 

창과 문서의 이해 

웹 페이지(또는 문서)는 브라우저 창의 뷰포트 안에서 보인다. 물론 뷰포트보다 문서가 클 때는 스크롤이 사용되기는 하지만 사용자에게 보여주는 내용은 모두 이러한 뷰포트 영역에 들어간다. 

 

물론(각각 자체 뷰포트를 통해 문서를 보여주는) 여러창을 열 수도 있고 화면에 보이는 창의 크기나 위치를 바꿀 수도 있고 iframe이라는 더 작은 뷰포트를 삽입할 수도 있다. 하지만 당신이 보여주는 내용은 모두 브라우저 창 내에서 문서의 일부로 보인다. 

 

창에 포함된 엘리먼트와 마찬가지로 창도 너비, 높이, 상단, 하단, 좌측면,우측면을 가지고 있다. 실제로 브라우저 창은 웹디자인의 최종 엘리먼트이자 다른 모든 엘리먼트의 부모로 이해할 수 있다.

 

- 브라우저 너비 및 높이

브라우저 컨트롤 및 기타 UI요소를 포함한 전체 창의 크기를 나타낸다. 

 

- 뷰포트 

디스플레이 영역을 나타낸다. 모든 고정 위치 엘리먼트는 뷰포트 가장자리를 기준으로 상대 위치에 놓인다. 

 

- 뷰포트 너비 및 높이

브라우저 창 뷰포트의 실제 디스플레이 영역을 나타낸다. 물론 실제 크기는 전체 창의 크기보다는 항상 작다.

 

- 문서 너비 및 높이

가끔 렌더링된 너비 및 높이라는 용어로 부르기도 하며 바디 태그 내에 포함된 웹 페이지의 전체 크기를 나타낸다. 문서의 너비 및 높이가 뷰포트 너비 및 높이보다 크면 나머지 문서를 볼 수 있도록 스크롤바가 생긴다. 

 

- 엘리먼트 가장자리

보더 내의 엘리먼트 가장자리를 나타낸가. 엘리먼트는 부모 엘리먼트도 위치가 정해진 경우 부모 엘리먼트의 가장자리를 기준으로 위치를 잡는다. 부모 엘리먼트의 위치가 정해지지 않았으면 엘리먼트가 문서의 가장자리를 기준으로 위치를 잡는다. 

 

- 엘리먼트 너비 및 높이

콘텐츠 너비 및 높이와 혼동해서는 안된다. 엘리먼트 너비 및 높이는 콘텐츠 너비 및 높이에 보더와 패딩을 추가한 전체 공간을 말한다. 

 

위치 유형 설정

엘리먼트는 네가지 위치 값 static, relative, absolute, fixed 중 하나를 가질 수 있다. 위치 값은 엘리먼트를 문서에 위치시킬 때 브라우저가 엘리먼트를 어떻게 처리할지를 브라우저에게 알려준다. 

• 스택 순서
  절대 및 고정 위치 엘리먼트에 사용할 수 있으며 3D 공간에서 엘리먼트를 움직일 수 있게 해 준다. 
• 가시성 
  불투명도를 0으로 설정해 엘리먼트의 콘텐츠를 숨길 수 있는 속성이지만 엘리먼트 자체는 숨기지 않는다. 
• 잘라내기 
  측면을 잘라내 콘텐츠의 일부 영역을 숨기는 데 사용한다. 

 

- 정적 위치 지정

기본적으로 엘리먼트는 절대, 상대, 고정 위치를 지정하지 않으면 문서에서 정적으로 위치를 잡는다. 정적 위치 지정은 정적 엘리먼트의 위치를 명시적으로 지정하거나 위치를 새로 지정할 수 없고 잘라내거나 가시성을 바꿀 수 없다는 점에서 차이가 있다. 

 

- 상대 위치 지정

상대 엘리먼트는 가만히 둘 경우 엘리먼트가 놓일 위치를 기준으로 엘리먼트의 위치를 정한다. 상대 위치를 지정한 엘리먼트는 문서의 정상 흐름 위치를 기반으로 위치를 조절한다. 하지만 상대 엘리먼트가 차지하는 공간은 빈 공간으로 보인다. 

 

- 절대 위치 지정 

절대 위치 지정은 문서의 정상 흐름으로부터 엘리먼트를 가져오며 공백을 남기지 않는다. 이방식으로 위치를 지정한 엘리먼트는 x와 y좌표를 사용해 가장 최근에 위치를 지정한 부모 엘리먼트의 가장자리 또는 위치를 지정한 부모가 없을 경우 바디를 기준으로 정확한 위치를 잡는다. 

 

- 고정 위치 지정 

엘리먼트의 위치를 (부모가 아니라) 창에 고정하는 방식은 뷰포트 가장자리를 기준으로 항상 고정된 위치에 엘리먼트가 놓이는 점을 제외하고 정대 위치 지정과 동일하다. 뷰포트에서 문서가 스크롤되면 고정 엘리먼트는 초기 위치에 그대로 머물며 나머지 문서를 따라 스크롤되지 않는다. 이 방식을 활용하면 나머지 콘텐츠와 함께 스크롤되지 않고 화면에 고정적으로 보이는 엘리먼트를 만들 수 있다. 

 

- 엘리먼트의 위치 유형 설정

/*
static : 콘텐츠를 정상적으로 흘러가게 한다. 하지만 엘리먼트에 아무런 위치 속성도 설정 할 수 없다.

relative : 마찬가지로 엘리먼트를 정상적으로 흘러가게 하지만 top, left, right, bottom속성에 설정한 값을 
사용해 정상적인 위치를 기준으로 조절된 위치를 설정할 수 있게 해 준다. 

absolute : 엘리먼트를 가장 최근에 위치 지정한 부모 엘리먼트의 가장자리를 기준으로 위치시킨다. 
이런 부모 엘리먼트에는 문서의 바디 또는 위치가 지정된 부모 엘리먼트로서 자식 엘리먼트를 갖고 있는 
엘리먼트가 해당된다. 

fixed : 페이지에 있는 다른 콘텐츠나 부모 엘리먼트와 상관없이 엘리먼트를 뷰포트의 가장자리를 기준으로 위치시킨다.
절대 위치를 지정한 엘리먼트와 달리 창이 스크롤될 때 고정 엘리먼트는 나머지 콘텐츠가 움직이더라도
뷰포트상에서 제자리를 그대로 지킨다. 

inherit : 바로 전 부모 엘리먼트의 위치 유형을 사용한다. 위치 설정된 부모가 없으면 정적위치를 기본으로 
사용한다.

*/

aside { position : absolute;}
strong { position : relative;}
footer { position : fixed;}

- 위치 유형 상속

inherit은 위치를 지정하는 또 다른 지정 방식이다. 이 속성 값을 사용하면 엘리먼트가 기본 static값을 재정의해서 부모의 위치 유형을 그대로 사용한다. 단 자식의 위치 타입이 부모에 의존하기 때문에 부모의 위치 유형을 바꿀 경우 레이아웃이 크게 바뀔 수 있다.

 

엘리먼트의 위치 설정

aside { 
position : absolute;
right : 1%;
top : 120px;}

strong { 
position : relative;
top : -.15em; }

footer { 
position : fixed;
bottom : 0;
left : 0;}

 

객체의 3D 스택

화면은 2차원 공간이지만 위치를 지정하는 엘리먼트에는 상대 스택 순서를 사용해 3차원을 부여할 수 있다. 

 

위치를 지정한 엘리먼트에는 0부터 시작해 숫자를 1,2,3으로 늘려가면서 스택 순서를 지정해 부모 및 형제를 기준으로 HTML에서 보이는 엘리먼트 순서를 정할 수 있다. 이때 높은 숫자를 지정받는 엘리먼트는 낮은 숫자를 배정받은 엘리먼트보다 위에 보인다. 이러한 시스템을 z-index라고 한다. 

 

엘리먼트의 콘텐츠가 서로 겹치면 z-index가  높은 엘리먼트가 z-index가 낮은 엘리먼트보다 위에 올라온다. z-index는 엘리먼트가 부모가 아니라 항상 형제 엘리먼트에 대한 상댓값이다.

 

div.gallery figure.f1 {
left : 0;
top : 0;
z-index : 3;
}

div.gallery figure.f2 {
left : 150px;
top : 50px;
z-index : 2;
}

div.gallery figure.f3 {
left : 300px;
top : 100px;
z-index : 1;
}

 

엘리먼트의 가시성 설정

visibility 속성은 엘리먼트가 창에서 보이는지 여부를 나타낸다. visibility속성이 hidden으로 설정되면 엘리먼트는 보이지 않지만 여전히 문서에서 공간을 차지하고 엘리먼트가 있는 자리에는 빈 사각형이 나타난다.

/*
hidden : 화면에서 문서가 최초 렌더링될 때 엘리먼트를 보이지 않게 한다. 
visible : 엘리먼트를 보이게 한다. 
inherit : 엘리먼트가 부모 엘리먼트의 가시성을 상속하게 한다. 
*/

header navigation { visibility : hidden; }

 

엘리먼트의 가시 영역 잘라내기 

엘리먼트의 크기를 제어하는 엘리먼트의 너비 및 높이 설정과 달리 절대 또는 고정 위치의 엘리먼트를 잘라내면 엘리먼트의 콘텐츠 가운데 얼마만큼을 보여줄지 지정할 수 있다. 이때 가시영역으로 지정하지 않은 부분은 여전히 그대로 남지만 브라우저에서 공백으로 처리되기 때문에 사용자는 이 영역을 볼 수 없다. 

 

- 엘리먼트의 잘라낼 영역 지정 

div.gallery figure {
position : absolute;
clip : rect(50px 250px 250px 50px); }

 

엘리먼트의 불투명도 설정

브라우저마다 불투명도를 구현하는 방식은 서로 다르다. 예를 들어 다른 W3C 호환 브라우저들이 단순히 opacity 속성을 추가한 데 반해 인터넷 익스플로러에서는 W3C CSS 구문을 구현하지 않고 자체 filter기능 위에 해당 기능을 추가했다. 인터넷 익스플로러는 다른 브라우저의 코드를 무시하므로 엘리먼트의 불투명도를 제어할 때는 CSS규칙에 두 선언을 모두 사용하면 된다. 

 

불투명도는 누적된다. 따라서 불투명도가 0.5로 지정된 엘리먼트가 불투명도가 0.5인 엘리먼트 안에 있다면 누적된 불투명도는 0.25가 된다. 

div.gallery figure {
position : absolute;
clip : rect(50px 250px 250px 50px); 
filter : alpha(opacity=0.75)
opacity : .5; }

 

엘리먼트 섀도우 설정

텍스트 섀도우와 마찬가지로 위치 지정과 상관없이 화면의 엘리먼트 박스에도 하나 이상의 드롭 섀도우를 추가할 수 있다. 하지만 '섀도우'라는 말 자체에는 다소 오해의 여지가 있다. 밝은 색을 비롯해 원하는 색상을 얼마든지 사용해 글로우 효과 등을 만들 수 있기 때문이다. 

article {
-webkit-box-shadow : rgba(0,0,0,.7) 5px 5px 15px;
-moz-box-shadow : 5px 5px 10px rgba(0,0,0,.7);
box-shadow : 5px 5px 10px rgba(0,0,0,.7); }