'CSS'에 해당되는 글 3건

3D Button 으로 CSS3 의 속성을 적용하여 구현했다고 합니다.

작동원리는 NUMBER ONE! 이란 버튼을 누르면 내려갔다가 놓으면 다시 올라오도록 되어 있습니다.

a tag 에 id 가 button 인 element 를 생성합니다.

#button {

width:165px;   /* a tag 의 width */

height:23px;   /* a tag 의 Height */

display:block;  /* 화면표시를 block 형식으로 보여줌. 즉 줄바꿈, left, top, right, bottom 적용됨, 이외 속성 : none, inline, inline-block */

/* 서체 속성 지정 */

font-family:Arial, "Helvetica", sans-serif; 

font-size:12px;

font-weight:bold;

color:#fff;

text-decoration:none;

text-transform:uppercase;

text-align:center;

text-shadow:1px 1px 0px #07526e;

/* padding 적용 */

padding-top:12px;

margin-left:auto;

margin-right:auto;

left:30px;

/* position 을 relative 로 지정해서 left 속성을 지정할수 있도록 함 */

position:relative;

cursor:pointer;

border-left:solid 1px #2ab7ec;

/* linear-gradient 함수는 image 객체를 반환합니다. 사용법은 방향(각도, left top right bottom), start color, end color 로 입력하면 되고 %는 색상의 진행거리를 표현합니다. 

사각형을 기준으로 해서 중앙에서 gradient line 를 그리고 각도가 0deg 이면 bottom 과 같고 방향은 bottom to top 으로 gradient이 진행됩니다.

*/

background-image: linear-gradient(bottom, rgb(14,137,182) 0%, rgb(22,179,236) 100%);

background-image: -o-linear-gradient(bottom, rgb(14,137,182) 0%, rgb(22,179,236) 100%);

background-image: -moz-linear-gradient(bottom, rgb(14,137,182) 0%, rgb(22,179,236) 100%);

background-image: -webkit-linear-gradient(bottom, rgb(14,137,182) 0%, rgb(22,179,236) 100%);

background-image: -ms-linear-gradient(bottom, rgb(14,137,182) 0%, rgb(22,179,236) 100%);

/* border-radius 를 사용하여 모서리에 라운드 처리합니다. 5px 라면 x축 5, y 축 5 로 라운드 계산 */

-webkit-border-top-right-radius: 5px;

-webkit-border-bottom-right-radius: 5px;

-moz-border-radius-topright: 5px;

-moz-border-radius-bottomright: 5px;

border-top-right-radius: 5px;

border-bottom-right-radius: 5px;

/* box-shadow 는 x-offset, y-offset, blur, spread, 색상으로 구현됩니다. , 를 사용하여 여러개의 shadow를 표현할수 있습니다. inset 0px 1px 0px #2ab7ec 시작선을 표시해 주고, 0px 5px 0px 0px #07526e 옆면shadow 표시, 0px 10px 5px #999 그림자 표시

<shadow> = inset? && [ <length>{2,4} && <color>? ]

처음의 두 길이값은 각각 그림자의 수평과 수직 오프셋을 의미합니다. 

세번째 길이값은 블러(blur) 반경입니다.(text-shadow property에서의 블러반경과 비교해 보세요.). 

마지막으로 네번째 길이값은 스프레드(spread) 반경으로 그림자를 부모 element의 크기와 비교하여 크거나(grow) 작게(shrink) 만듭니다.

 */

-webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #07526e, 0px 10px 5px #999;

-moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #07526e, 0px 10px 5px #999;

-o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #07526e, 0px 10px 5px #999;

box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #07526e, 0px 10px 5px #999;

}

/* button 을 눌렀을때 보이게 되는 형태 */

#button:active {

top:3px;

-webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #07526e, 0px 5px 3px #999;

-moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #07526e, 0px 5px 3px #999;

-o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #07526e, 0px 5px 3px #999;

box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #07526e, 0px 5px 3px #999;

}

/* button css 앞에 수행되는 css */

#button:before {

content:"1";

width:35px;

height:25px;

display:block;

position:absolute;

padding-top:10px;

top:0px;

margin-left:-37px;

font-size:16px;

font-weight:bold;

color:#8fd1ea;

text-shadow:1px 1px 0px #07526e;

border-right:solid 1px #07526e;

background-image: linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);

background-image: -o-linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);

background-image: -moz-linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);

background-image: -webkit-linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);

background-image: -ms-linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);

-webkit-border-top-left-radius: 5px;

-webkit-border-bottom-left-radius: 5px;

-moz-border-radius-topleft: 5px;

-moz-border-radius-bottomleft: 5px;

border-top-left-radius: 5px;

border-bottom-left-radius: 5px;

-webkit-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 0px 10px 5px #999 ;

-moz-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 0px 10px 5px #999 ;

-o-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 0px 10px 5px #999 ;

box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 0px 10px 5px #999 ;

}

/* button active 앞에 수행되는 css */

#button:active:before {

top:-3px;

-webkit-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 1px 1px 0px 0px #044a64, 2px 2px 0px 0px #044a64, 2px 5px 0px 0px #044a64, 6px 4px 2px #0b698b, 0px 10px 5px #999 ;

-moz-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 1px 1px 0px 0px #044a64, 2px 2px 0px 0px #044a64, 2px 5px 0px 0px #044a64, 6px 4px 2px #0b698b, 0px 10px 5px #999 ;

-o-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 1px 1px 0px 0px #044a64, 2px 2px 0px 0px #044a64, 2px 5px 0px 0px #044a64, 6px 4px 2px #0b698b, 0px 10px 5px #999 ;

box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 1px 1px 0px 0px #044a64, 2px 2px 0px 0px #044a64, 2px 5px 0px 0px #044a64, 6px 4px 2px #0b698b, 0px 10px 5px #999 ;

}

매번 혼자 웹페이지를 분석하면서 느끼는 거지만 기본기가 없으면 마니 답답함이 커집니다.

그래서 웹페이지가 어떻게 해서 화면에 보여지게 되는걸까? 에 대해서 적어보고자 합니다.

웹페이지는 Html 문서에 Element를 연결해서 작성하도록 되어 있습니다.

그러면 이들은 어떤 순서로 페이지에 배치되어 질까요?

Element 들간에는 각 특성에 따라서 공간을 차지하는 방식이 달라 집니다.

1. Block level element

블록처럼 차례대로 위에서 부터 쌓여 내려오도록 되어 있습니다.

2. Inline level element

수평으로 펼쳐저서 영역을 차지하도록 되어 있습니다.

3. 공통사항

요소들간의 관계는 Left, Top, Right, Bottom 으로 정해집니다.

다음으로 Element가 차지하는 영역은 어떤 구조일까요?

Box Model 구조라고 해서 중앙에 Element (width)가 있고 Padding, Border, Margin 으로 구성됩니다.

페이지 레이아웃을 만들때 필요한 핵심개념에는 margin, float, position 이 있습니다.

위치(Position)

1. static

position 은 default 값으로 static 을 가집니다. static 은 block level element 의 기본성질로 한줄에 하나의 element만 놓일수 있다는 사실에 따라 하나씩만 배정합니다. static은 left, top, right, bottom 속성이 무시됩니다.

2. left, top, right, bottom 속성

static 을 제외한 position에서 위치를 지정하기 위해 사용할수 있습니다. 각 속성의 입력값만큼 위치에서 element 를 밀어낸다고 해석하시면 됩니다.

3. relative

static 값에서의 위치를 기준으로 left, top, right, bottom 의 값에 따라 이동하게 됩니다.

종속된 element가 있는 경우에는 상위 element가 이동하는 경우에 종속 element의 위치기준이 바뀌게 됩니다.

4.absolute

화면의 상단좌측을 기준으로 하여 절대적인 좌표를 부여하게 됩니다.

부모가 static 이면 화면위 상단좌측이 기준이 되고, 부모가 absolute거나 relative 라면 부모요소의 좌측 최상단이 됩니다.

5. fixed

absolute 와 동일한데 단지 스크롤에 의햇 위치가 달라지지 않습니다.

float

웹페이지는 기본적으로 가장 위에서 부터 element 들이 아래쪽으로 하나씩 붙여 나가는 형태 입니다.

본문 div 옆에 sidebar div 를 추가할려고 하면 어떻게 해야 할까요? Position 을 absolute 로 해서 하던가 아니면

float 를 사용하면 됩니다.

float 속성이 붙어 있는 element 는 말 그대로 둥둥 떠 있는 상태이기 때문에 다음에 오는 element 는 그 밑으로 비집고 들어가게 됩니다. 여기서 중요한것은 비집고 들어가지만 내용은 가려지지 않을 정도만 들어간다는 것입니다.

그리고 내용이 옆으로 이동할 공간이 존재하면 그 공간을 내용이 이동하면서 비집고 들어갑니다.

이 원리를 이용하면 margin 을 줘서 side bar div 를 옆으로 붙일수 가 있습니다.

float 에는 left, right 속성값이 있습니다.

뒤에 오는 element에 float 영향을 안 미치게 하기 위해서는 clear 속성을 적용하면 됩니다.

CSS 2.01 버전부터 추가된 기능을 사용해서 동일한 컨텐츠를 미디어 형태별로 CSS 를 적용할수 있습니다.

Style sheet를 적용하기 위한 방법

A안.

<LINK rel="stylesheet" type"text/css" href="print.css" media="print,projection">

B안.

@import url(print.css) print,projection;

C안.

<STYLE type="text/css">

@media print {

   BODY {font-size: 10pt; line-height: 120%; background: white;}

}

@media screen {

   BODY {font-size:12pt; line-height: 1em; background: silver;}

}

</STYLE>

셋중에 하나를 사용할수 있습니다.

Style sheet를 CSS 파일로 작성하기

/* screen.css : screen display styles */

BODY {color: silver; background: black;}

A:link {color: yellow; background: #333333; text-decoration: none;}

A:visited {color: white; background: #333333; text-decoration: none;}

A:active {color: black; background: white; text-decoration: none;}

H1, H2, H3 {color: #CCCCCC; background: black; padding-bottom: 1px;

    border-bottom: 1px solid gray;}

/* print.css : print styles */

BODY {color: black; background: white;}

A:link, A:visited {background: white; color: black; text-decoration: underline;

   font-weight: bold;}

H1, H2, H3 {background: white; color: black; padding-bottom: 1px;

   border-bottom: 1px solid gray;}

DIV.adbanner {display: none;}

CSS 파일을 HTML 문서에서 링크걸기

<LINK rel="stylesheet" type"text/css" href="screen.css" media="screen">

<LINK rel="stylesheet" type"text/css" href="print.css" media="print">