smarti,스마트아이

CSS3 button, user-interface, multi-column

CSS3 button

CSS를 이용하면 다양한 모양의 버튼을 여러 방식으로 만들 수 있다. CSS에서 버튼은 <button>태그 뿐만 아니라 <a>태그와 <input>태그로도 만들 수 있다.

<button class="btn">button 태그</button>
<a href="#" class="btn">a 태그</a>
<input type="button" value="input 태그" class="btn">

 

button 타입의 input 요소에서 내부에 표시될 문자열은 value 속성값으로 설정할 수 있다.

다음 예제는 마우스를 올리면 배경색이 변하는 버튼 예제이다.

<style>
    .btn {
        background-color: #87CEEB;
        -webkit-transition-duration: 0.4s;
        transition-duration: 0.4s;
    }
    .btn1:hover, .btn2:hover, .btn3:hover, .btn4:hover {
        background-color: #4169E1;
        color: white;
    }
</style>

위의 예제처럼 transition-duration 속성을 이용하면, 배경색 뿐만 아니라 글자의 색상까지 변경되게 할 수 있다.

다음 예제는 그림자 효과를 설정한 버튼 예제이다.

<style>
    .btn {
        -webkit-transition-duration: 0.4s;
        transition-duration: 0.4s;
    }
    .btn1, .btn2:hover { box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); }
</style>

위의 예제처럼 box-shadow 속성을 이용하면, 버튼에 실제와 같은 그림자 효과를 간단히 설정할 수 있다.

다음 예제는 버튼을 사용하지 못하도록 설정하는 예제이다.

<style>
    .btn2 { opacity: 0.4; cursor: not-allowed; disabled; }
</style>

위의 예제처럼 disabled 속성을 이용하면, 버튼을 사용하지 못하도록 만들 수 있다. 이렇게 사용이 금지된 버튼은 반투명하게 보이게 됩니다. 이때 cursor 속성의 속성값을 not-allowed로 설정하면, 사용이 금지된 버튼을 더욱 그럴싸하게 표현할 수 있다.

float 속성을 이용하여 버튼으로 메뉴를 만들 수도 있다.

<style>
    .btn {
        background-color: #87CEEB;
        border: solid 1px #00BFFF;
        text-decoration: none;
        display: inline-block;
        cursor: pointer;
        float: left;
    }
</style>

 

다양한 형태의 버튼 예제

CSS의 애니메이션(animation) 효과를 이용하면, 버튼에 더욱 다양한 효과를 적용할 수 있다.

다음 예제는 마우스를 올리면 버튼의 표시 내용이 바뀌는 예제이다.

<style>
    .btn span { 
        display: inline-block; 
        position: relative; 
        transition: 0.5s; 
    }
    .btn span::after { 
        content: "▶"; 
        opacity: 0; 
        transition: 0.5s;
    }
    .btn:hover span::after { 
        opacity: 1; 
        right: 0px; 
    }
</style>

위의 예제에서 '▶'기호는 ::after 선택자를 이용하여 '버튼'이라는 문자열 바로 뒤에 삽입된다.
이때 opacity 속성값을 0으로 설정하여 처음에는 보이지 않는다.
하지만 마우스를 버튼 위로 올리면, opacity 속성값이 1로 변경되어 눈에 보이게 된다.
이때 transition 효과가 실행되며 0.5초 동안 천천히 opacity 속성값이 변경된다.

다음 예제는 버튼을 누르면 버튼 위로 다른 색상이 물결처럼 퍼지는 예제이다.

<style>
    .btn {
        background-color: orange;
        -webkit-transition-duration: 0.4s;
        transition-duration: 0.4s;
    }
    .btn::after {
        content: "";
        background-color: #FFD700;
        display: block;
        opacity: 0;
        transition: all 0.8s;
    }
    .btn:active::after { 
        opacity: 1; 
        transition: 0s
    }
</style>

위의 예제는 :active 선택자와 ::after 선택자를 이용하여 transition 효과를 설정함으로써 구현하고 있다.

다음 예제는 진짜 버튼처럼 누르는 효과를 적용한 버튼 예제이다.

<style>
    .btn {
        background-color: orange;
        display: inline-block;
        border: none;
        outline: none;
        border-radius: 20px;
        box-shadow: 0 9px #B0B0B0;
    }
    .btn:active {
        background-color: #FF8C00;
        box-shadow: 0 5px #808080;
        transform: translateY(4px);
    }
</style>

위의 예제에서는 우선 box-shadow 속성을 이용하여 버튼에 그림자 효과를 설정한다.
그 후에 사용자가 버튼을 누르면 :active 선택자와 transform 효과를 이용하여 버튼의 위치를 아래로 살짝 이동시킨다.
이렇게 함으로써 버튼이 진짜로 눌리는 듯한 효과를 줄 수 있게 된다.

 

 

사용자 인터페이스 (user interface, UI)

CSS3에서는 새로운 사용자 인터페이스를 이용하여, 사용자가 요소의 크기나 아웃라인 등을 마음대로 변경할 수 있게 해준다.

사용자 인터페이스(user interface)를 위해 제공되는 속성은 다음과 같다.

1. resize
2. outline-offset
3. box-sizing
4. nav-index
5. nav-left
6. nav-right
7. nav-up
8. nav-down

CSS3 User Interface 지원 버전

CSS3 사용자 인터페이스(user Interface)를 지원하는 주요 웹 브라우저의 버전은 다음과 같습니다.
브라우저별로 벤더 프리픽스(vendor prefix)를 이용해 이 기능을 최초로 지원한 버전도 같이 표기했다.

속성	ie	chrome	firefox	safari	opera
resize	지원하지 않음	4.0	5.0 / 4.0 -moz-	4.0	15.0
outline-offset	지원하지 않음	4.0	5.0 / 4.0 -moz-	4.0	9.5
box-sizing	8.0	10.0 / 4.0 -webkit-	29.0 / 2.0 -moz-	5.1 / 3.2 -webkit-	9.5

resize 속성

resize 속성은 사용자가 해당 요소의 높이나 너비를 변경할 수 있게 해준다.

#width { resize: horizontal; }
#height { resize: vertical; }
#both { resize: both; }

위의 예제처럼 resize 속성이 설정된 요소에는 오른쪽 하단에 크기 조절 핸들이 생긴다.
이 핸들을 마우스로 드래그해서 사용자가 직접 요소의 크기를 조절할 수 있다.

resize 속성은 익스플로러에서 지원하지 않습니다.

outline-offset 속성

outline-offset 속성은 해당 요소의 테두리(border)와 아웃라인(outline) 사이에 공간(offset)을 추가해 준다.

아웃라인(outline)과 테두리(border)의 차이는 다음과 같다.

1. 아웃라인은 테두리의 바깥쪽에서 요소를 둘러싸고 있는 라인이다.
2. 아웃라인은 HTML 요소의 크기에 포함되지 않는다.
3. 아웃라인은 사각형이 아닐 수도 있다.

다음 예제는 outline-offset 속성을 이용하여 아웃라인과 테두리를 확인하는 예제이다.

div {
    border: 1px solid black;
    outline: 1px solid red;
    outline-offset: 20px;
}

outline-offset 속성은 익스플로러에서 지원하지 않는다.

box-sizing 속성

box-sizing 속성은 해당 요소의 너비(width)와 높이(height)에 패딩(padding)과 테두리(border)의 크기까지 포함시킨다.

#no_border_box { border: 10px solid green; padding: 20px; }
#border_box { border: 10px solid red; padding: 20px; box-sizing: border-box; }

CSS 박스 모델에서 살펴본 HTML 요소의 전체 너비를 구하는 공식은 다음과 같다.
width + left padding + right padding + left border + right border + left margin + right margin

따라서 위의 예제에서 첫 번째 div 요소의 전체 너비는 다음과 같이 설정된다.
350px + 20px + 20px + 10px + 10px + 10px + 10px = 430px

하지만 box-sizing 속성의 속성값을 border-box로 설정하면, 해당 요소의 총 너비와 높이에 패딩과 테두리의 크기까지 포함해서 설정한다.
따라서 위의 예제에서 두 번째 div 요소의 전체 너비는 다음과 같이 설정될 것이다.
350px + 10px + 10px = 370px

 

CSS3 user interface 속성

속성	설명
resize	사용자가 해당 요소의 높이나 너비를 변경할 수 있게 설정함.
outline-offset	해당 요소의 테두리(border)와 아웃라인(outline) 사이에 공간(offset)을 추가함.
box-sizing	해당 요소의 총 너비와 높이에 패딩(padding)과 테두리(border)의 너비도 포함시킴.
nav-index	해당 요소에 대한 순차적인 탐색 순서를 설정함.
nav-left	화살표 왼쪽 방향키를 누를 때 어디를 탐색할지 설정함.
nav-right	화살표 오른쪽 방향키를 누를 때 어디를 탐색할지 설정함.
nav-up	화살표 위쪽 방향키를 누를 때 어디를 탐색할지 설정함.
nav-down	화살표 아래쪽 방향키를 누를 때 어디를 탐색할지 설정함.

 

 

Multi-column 레이아웃

CSS에서는 신문과 같이 여러 개의 칼럼(column)으로 구성되는 구조를 column 속성을 이용하여 손쉽게 만들 수 있다.

다중 칼럼(multi-column)을 위해 제공되는 속성은 다음과 같다.

1. columns
2. column-count
3. column-gap
4. column-width
5. column-span
6. column-fill
7. column-rule
8. column-rule-style
9. column-rule-width
10. column-rule-color

CSS3 multi-column 지원 버전

CSS3 다중 칼럼(multi-column)을 지원하는 주요 웹 브라우저의 버전은 다음과 같다.
브라우저별로 벤더 프리픽스(vendor prefix)를 이용해 이 기능을 최초로 지원한 버전도 같이 표기했다.

속성	ie	chrome	firefox	safari	opera
column-count / column-cap / column-rule / column-rule-color / column-rule-style / column-rule-width / column-width	10.0	50.0 / 4.0 -webkit-	2.0 -moz-	9.0 / 3.1 -webkit-	37.0 / 15.0 -webkit- / 11.1
column-span	10.0	50.0 / 4.0 -webkit-	지원하지 않음	9.0 / 3.1 -webkit-	37.0 / 15.0 -webkit- / 11.1

column-count 속성

column-count 속성은 해당 요소를 몇 개의 칼럼(column)으로 나눌지를 설정한다.

<style>
    #origin { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; }
</style>

column-gap 속성

column-gap 속성은 칼럼(column) 사이의 간격을 설정한다.

<style>
    #gap { -webkit-column-gap: 70px; -moz-column-gap: 70px; column-gap: 70px; }
</style>

column-width 속성

column-width 속성은 칼럼의 너비를 설정한다. 웹 브라우저는 설정한 너비의 칼럼을 만든 후, 나머지 영역을 동일하게 나누어 칼럼 사이의 간격으로 자동 설정한다.

<style>
    #gap { -webkit-column-width: 150px; -moz-column-width: 150px; column-width: 150px; }
</style>

column-span 속성

column-span 속성은 해당 요소가 몇 개의 칼럼을 병합하여 표현할지를 설정한다.

<style>
    #merge { -webkit-column-span: all; column-span: all; }
</style>

column-count 속성은 파이어폭스와 익스플로러 9와 그 이전 버전에서 지원하지 않는다.

column-rule-style 속성

column-rule-style 속성은 칼럼 사이에 들어갈 라인의 스타일을 설정한다.

<style>
    #line { -webkit-column-rule-style: solid; -moz-column-rule-style: solid; column-rule-style: solid; }
</style>

column-rule-width 속성

column-rule-width 속성은 칼럼 사이에 들어갈 라인의 두께를 설정한다.

<style>
    #line {
        -webkit-column-rule-style: solid; -moz-column-rule-style: solid; column-rule-style: solid;
        -webkit-column-rule-width: 5px; -moz-column-rule-width: 5px; column-rule-width: 5px;
    }
</style>

column-rule-color 속성

column-rule-color 속성은 칼럼 사이에 들어갈 라인의 색상을 설정한다.

<style>
    #line {
        -webkit-column-rule-style: solid; -moz-column-rule-style: solid; column-rule-style: solid;
        -webkit-column-rule-width: 5px; -moz-column-rule-width: 5px; column-rule-width: 5px;
        -webkit-column-rule-color: #6495ED; -moz-column-rule-color: #6495ED; column-rule-color: #6495ED;
    }
</style>

column-rule 속성

모든 columns-rule 속성을 이용한 스타일을 한 줄에 설정할 수 있습니다.

<style>
    #line {
        -webkit-column-rule: 5px solid #6495ED;
        -moz-column-rule: 5px solid #6495ED;
        column-rule: 5px solid #6495ED;
    }
</style>

CSS3 다중 칼럼(multi-column) 속성

속성	설명
columns	모든 columns 속성을 이용한 스타일을 한 줄에 설정할 수 있음.
column-count	해당 요소를 몇 개의 칼럼(column)으로 나눌지를 설정함.
column-gap	칼럼 사이의 간격을 설정함.
column-width	칼럼의 너비를 설정함.
column-span	해당 요소가 몇 개의 칼럼(column)을 병합해서 표현할지를 설정함.
column-fill	칼럼을 어떻게 채울지 설정함.
column-rule	모든 columns 속성을 이용한 스타일을 한 줄에 설정할 수 있음.
column-rule-style	칼럼 사이에 들어갈 라인의 스타일을 설정함.
column-rule-width	칼럼 사이에 들어갈 라인의 두께를 설정함.
column-rule-color	칼럼 사이에 들어갈 라인의 색상을 설정함.

 

 

[세상살이] - 크롬 확장 프로그램으로 마우스 우클릭 해제

크롬 확장 프로그램으로 마우스 우클릭 해제

[코딩공부] - CSS fixedNavigation2 예제 다운로드

CSS fixedNavigation2 예제 다운로드

[코딩공부] - CSS3 Transition, Animation

CSS3 Transition, Animation

[코딩공부] - HTML5 멀티미디어

HTML5 멀티미디어

[디자인공부] - 여기어때 잘난체 다운로드 및 설치

여기어때 잘난체 다운로드 및 설치