[CSS] CSS3 (4) : 버튼, UI, 다중 칼럼 레이아웃, 플렉서블 박스 레이아웃, 미디어 쿼리

728x90

CSS3 버튼 (button)

> CSS3 버튼

- 다양한 모양의 버튼을 만들 수 있다

- <button> 태그 뿐만 아니라 <a> 태그와 <input> 태크로도 만들 수 있다

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

- (예) 마우스를 올리면 배경색이 변하는 버튼

<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>

- (예) 그림자 효과 설정 버튼

<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>

- (예) 버튼을 사용하지 못하게 설정

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

- 사용 금지된 버튼은 반투명하게 보인다

- (예) float 속성을 이용하여 만든 버튼

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

> 다양한 형태의 버튼 예제

- 애니메이션 효과를 이용하여 버튼에 다양한 효과를 줄 수 있다

- (예) 마우스를 올리면 버튼의 표시 내용이 바뀌는 예제

<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>

- (예) 버튼을 눌면 버튼 위로 다른 색상이 물결처럼 퍼지는 예제

<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에서는 새로운 UI를 이용하여, 사용자가 요소의 크기나 아웃라인 등을 변경 가능하다

속성	설명
resize	높이나 너비 변경. 이 속성이 설정되면 오르쪽 하단에 크기 조절 핸들이 생김
outline-offset	테두리(border)와 아웃라인(outline) 사이에 공간(offset) 추가
box-sizing	총 너비와 높이에 패딩(padding)과 테두리(border)의 너비도 포함시킴
nav-index	해당 요소에 대한 순차적인 탐색 순서 설정
nav-left	화살표 왼쪽 방향키를 누를 때 어디를 탐색할지 설정
nav-right	-
nav-up	-
nav-down	-

다중 칼럼 (multi-column) 레이아웃

> 다중 칼럼 레이아웃

- 신문과 같이 여러 개의 칼럼으로 구성되는 구조

- column 속성을 이용해 만들 수 있음

- 다중 칼럼을 위해 제공되는 속성들

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

- (예) column-rule 속성을 이용해 한 줄에 스타일 설정

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

플렉서블 박스 (flexible box) 레이아웃

> 플렉서블 박스 레이아웃

- 플렉서블 박스는 플렉스 박스(flex box)라고도 불리고, CSS3에서 처음 소개된 레이아웃 모델임

- 서로 다른 화면과 기기에서도 HTML 요소들이 자동 재정렬되어 웹 페이지의 레이아웃이 유지되는 레이아웃

> 플렉스 박스 (flex box)

- 플렉스 박스는 플렉스 컨테이너와 플렉스 요소로 구성된다

- 플렉스 컨테이너 : 해당 요소의 display 속성을 설정하는 것

˙ 하나 이상의 플렉스 요소를 포함해야 한다

˙ 블록타입으로 설정하려면 display 속성값을 flex로, 인라인 타입으로 정의하려면 inline-flex로 설정

- 플렉스 컨테이너 외부와 플렉스 요소 내부 모든 것들은 평소처럼 동작

- 플렉스 박스는 플렉스 요소가 플렉스 컨테이너 내부에 어떻게 위치하는가를 정의

- 플렉스 라인

˙ 플렉스 요소는 플렉스 컨테이너 안에서 플렉스 라인이라는 가상의 선을 따라 위치

˙ 플렉스 컨테이너는 기본적으로 단 하나의 플렉스 라인만을 가진다

<style>
    #flex { display: -webkit-flex; display: flex; }
</style>

- direction 속성을 이용하여 플렉스 라인의 방향을 바꿀 수 있다

- (예) direction 속성을 rtl(right-to-left)로 설정

<style>
    body { direction: rtl; }
    #flex { display: -webkit-flex; display: flex; }
</style>

- 페이지 내 모든 텍스트 요소가 오른쪽에서 왼쪽 방향으로 써짐

- 플렉스 라인의 방향도 바뀌어, 플렉스 요소의 정렬도 오른쪽에서 왼쪽으로 바뀜

> 플렉스 박스을 위해 제공되는 속성

1. display

2. flex-direction : 플렉스 컨테이너 안에서 플렉스 요소가 배치될 방향 설정

- row : 기본 설정. 왼쪽에서 오른쪽, 위쪽에서 아래쪽

- row-reverse : direction 속성값과 반대로

- column : 쓰기 방식이 수평이면, 플렉스 요소는 수직 방향(위쪽에서 아래쪽)

- column-reverse : 쓰기 방식이 수평이면, 플렉스 요소는 수직 방향(아래쪽에서 위쪽)

3. justify-content : 플렉스 요소의 수평 방향 정렬 방식을 설정

- flex-start : 기본 설정. 플렉스 요소는 플렉스 컨테이너 앞쪽부터 배치

- flex-end : 뒤쪽부터 배치

- center : 가운데부터 배치

- space-between : 요소들 사이에만 여유 공간을 두고 배치

- space-around : 앞, 뒤, 요소들 사이에 모두 여유 공간을 두고 배치

4. align-items : 플렉스 요소의 수직 방향 정렬 방식을 설정

- stretch : 기본 설정. 플렉스 요소의 높이가 플렉스 컨테이너 높이와 같게 변경하고 연이어 배치

- flex-start : 플렉스 요소는 플렉스 컨테이너 위쪽에 배치

- flex-end : 아래쪽에 배치

- center : 가운데에 배치

- baseline : 플렉스 컨테이너의 기준선(baseline)에 배치

5. flex-wrap : 플렉스 라인에 여유 공간 없을 때, 플렉스 요소의 위치를 다음 줄로 넘길지 설정

- nowrap : 기본 설정. 플렉스 요소를 다음 줄로 넘기지 않고, 너비를 줄여서 한 줄에 모두 배치시킴

- wrap : 플렉스 요소가 여유 공간이 없으면 다음 줄로 넘어가서 배치

- wrap-reverse : 다음 줄로 넘어간다. 단, 아래쪽이 아닌 위쪽으로 넘어감

6. flex-flow

7. align- content : flex-wrap 속성의 동작 변경. 플렉스 라인을 정렬

- stretch : 기본 설정. 플렉스 라인이 높이가 남는 공간 전부 차지

- flex-start : 플렉스 라인은 플렉스 컨테이너 앞쪽에 뭉침

- flex-end : 뒤쪽에 배치

- center : 가운데에 배치

- space-between : 플렉스 컨테이너에 고르게 분포

- space-around : 플렉스 컨테이너에 고르게 분포. 단 양쪽 끝에 약간 공간 남겨둠

> 플렉스 요소(flex item)를 위해 제공되는 속성

8. order : 플렉스 컨테이너 안 플렉스 요소들의 순서 설정

9. margin

- auto로 설정하면, 수평 방향 여유 공간 없앨 수 있음

- 플렉스 요소들을 서로 반대 방향으로 밀어내 위치시킬 수 있음

- 수직, 수평 방향의 가운데 정렬을 설정 가능

10. align-self

- 컨테이너의 align-item 속성보다 우선 적용

- 플렉스 요소마다 서로 다른 align 속성값을 설정 가능

11. flex

- 같은 플렉스 컨테이너 안 플렉스 요소의 너비를 상대적으로 설정 가능

[참고] http://tcpschool.com/css/intro