css

1.border-radius

경계선에 원형 곡선을 적용할 수 있도록 해주는 속성

2.box-shadow

그림자를 생성
그림자방향(inset, outset) x-offset y-offset blur정도 색상

3.실습

디렉토리 구조 ``` WebContent
resources
- js
- css
- images
  - views ```
views 디렉토리에 boxshadow.html 을 생성하고 작성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>박스의 경계선과 그림자 효과</title>
<link rel="stylesheet" href="./../resources/css/0205.css">
</head>
<body>
    <h1 class="korea"><p>대한민국</p></h1>
</body>
</html>

css 디렉토리에 0205.css 파일을 만들고 작성

.korea{
    color:#000000;
    width:200px;
    line-height:30px;
    text-align:center;
    padding:30px;    /*경계선과 콘텐츠와의 여백 */
    border:1px solid rgb(18,52, 88);
    /*여러 속성의 값을 한 번에 적용할 때 공백으로 구분 */
    /*,는 동일한 속성의 값을 여러 개 적용할 때 구분 */
    background:#eeeeee;
    /*여러 개의 값을 지정할 수 있는 속성의 경우에 뒤에서 부터 값 생략 가능합니다.*/
    /*css 나 javascript는 옵션에 전부 기본값이 설정되어 있습니다.*/
    border-radius:15px;
    box-shadow:0px 0px 50px 15px rgba(18,52,88,0.8);
}
.korea p{vertical-align:middle;}

4.float

콘텐츠를 배치하는 방법
이 속성을 이용하면 콘텐츠를 화면위에 올려놓은 것 처럼 배치
블록 요소 옆에 다른 콘텐츠를 배치할 때 사용
left, right, none 으로 설정

5.float 해제

clear:both 를 사용

6.실습

1) html에 추가

    <div class='menu'>Unix</div>
    <div class='menu'>Max OS X</div>
    <div class='menu'>Linux</div>
    <div class='menu'>Windows</div>


    <!-- 다음 줄로 내리고자 하면 기존 float를 해제해야 합니다. -->
    <div class='title'><h2>운영체제</h2></div>

2) css에 추가

/*menu 클래스를 가진 객체들을 왼쪽에서부터 배치하고 오른쪽에 다른 콘텐츠를 배치할 수
있도록 설정 */
.menu
{
    float:left;
    margin:10px;
}
/*title 클래스를 가진 객체는 이전에 적용된 float를 해제하고 원래대로 배치 */
.title
{
    clear:both;    
}

7.display 속성

콘텐츠가 화면에 보여질 때 어떤 형태로 보여질 것인지 설정
block(블록 요소로 변환), inline(인라인요소로 변환), inline-block(블록으로 만드는데 내부에서 줄 바꿈을 하지 못하도록 변환) 등이 있음
테이블 요소로도 변환이 가능

8.overflow

크기에 비해 많은 양의 콘텐츠를 가진 경우 출력방법을 설정
visible(크기를 늘려서 출력), hidden(숨김), scroll(스크롤 바를 생성)
화면에 안에 별도의 영역을 구성해서 콘텐츠를 출력하고 내부에 스크롤을 배치하는 경우나 많은 데이터를 출력할 때 테이블을 사용하는 경우에 헤딩을 고정시키는 용도로도 사용 가능

9.엑셀의 틀 고정 처럼 스크롤을 해도 항목의 이름은 화면에 계속 출력되도록 하기

1) html에 작성

    <table>
        <tr>
            <th>이름</th>
            <th>언어</th>
        </tr>
    </table>

    <div class='contents'>
    <table>
        <tr>
            <td>데니스 리치히</td>
            <td>C언어</td>
        </tr>
        <tr>
            <td>제임스 고슬링</td>
            <td>Java</td>
        </tr>
        <tr>
            <td>귀도 반 로섬</td>
            <td>Python</td>
        </tr>
        <tr>
            <td>브랜던 아이크</td>
            <td>Javascript</td>
        </tr>
        <tr>
            <td>비야네 스트로스스트룹</td>
            <td>C++</td>
        </tr>
        <tr>
            <td>아르네스 하일스베르</td>
            <td>C#</td>
        </tr>
    </table>
    </div>

2) css에 작성

table
{
    border:1px solid black;
    width:400px;
}
th, td
{
    width:200px;
}
.contents
{
    width:420px;
    height:100px;
    overflow:auto;
}

10.position

콘텐츠의 배치 방법

1) static : 콘텐츠를 순서대로 배치
2) relative : 이전 요소와의 관계를 가지고 배치, left 와 top 속성을 이용해서 원하는 만큼 떨어뜨려서 배치 가능
3) absolute : left, top, right, bottom 속성을 이용해서 원하는 좌표에 배치
4) fixed : 스크롤을 해도 특정위치에 고정되는 방식

11.visibility

visible, hidden 속성을 설정해서 보여지고 보여지지 않도록 해주는 설정

12.z-index

겹쳐서 출력되는 경우 출력되는 순서 설정을 위한 속성

13.transform

변환 - 크기, 위치, 회전, 비틀기 등의 변환을 수행
표준으로 적용되지 않아서 vendor-prefix를 이용해야 합니다.
크롬과 사파리는 webkit, firefox는 moz, IE는 ms

14.animation

1) transition animation

transition-property: 애니메이션을 적용할 속성을 설정(all을 기재하면 모든 속성);
transition-duration: 애니메이션 적용시간
transition-timing-function: 애니메이션 적용 방법(linear, ease-in, ease-out, ease-in-out)
transition-timing-delay: 대기 시간

2) Keyframe Animation

중간 중간에 변화를 추가할 수 있는 애니메이션 기법
애니메이션 생성

@-webkit-keyframes 애니메이션이름
{
    from{시작값 설정}
    to{종료값 설정}
}

from 대신에 백분율로 애니메이션 변화시점 지정 가능
애니메이션 적용
- -webkit-animation-name : 애니메이션이름
- timing-function : 타이밍 함수
- duration : 시간
- iteration : 반복횟수
- play-state
- direction(alternate-왕복, normal-한쪽으로만 적용)

6.css실습

css