미친듯이 즐겨보자..

MVNO에서 발급하는 유심의 경우 나밍을 해야 전화번호를 가져올 수 있는 이슈가 있음.

이슈 발생한 단말기에서 나밍을 해야 한다.

 https://www.mobing.co.kr/html/product/sub03_3.php

Configuring Android Studio

Intro

Android Studio has a cool feature to Import and Export settings. So during installation of new Android Studio version I usually import my previous settings. But recently a bad thing happened to me - I have lost my Android Studio settings file.

My advice to you: always keep backup of your Android Studio settings file somewhere on the cloud.

And since I am configuring my Android Studio from scratch anyway, below are some things which may be useful for you.

Show line numbers

When I first fired up Android Studio and started using it, one of the first things I wanted to do was to be able to see line numbers within the file. I was always curious why this thing is not turned on by default?

To do so

• In toolbar menu select File|Settings
• Choose Editor|General|Appearance
• Tick on Show line numbers

Camel humps

Android Studio doesn’t respect ‘Camel Humps’ words when you navigate through your code with pressed Ctrl+Left/Right arrow keys.

To do so

• In toolbar menu select File|Settings
• Choose Editor|General|Smart Keys
• Tick on Use ‘Camel Humps’ words

Note: if you still want to select whole word on mouse double click go to

• In toolbar menu select File|Settings
• Choose Editor|General
• Remove tick on ‘Honor Camel Humps words settings when selecting on double click’

Field naming conventions

I am usually following field naming conventions from Android Code Style Guidelines for Contributors. There is one thing which Android Studio can automatically do for us - generate field name prefix for:

• Non-public, non-static field names start with m.
• Static field names start with s.

To do so

• In toolbar menu select File|Settings
• Choose Editor|Code Style|Java
• Select Code Generation tab
• Add m prefix for field and s prefix for static field

Imports on the fly

In Android Studio there are shortcuts to auto import or clean-up non used imports. But we live in 2015 right? Those things should be done on the fly.

To do so

• In toolbar menu select File|Settings
• Choose Editor|General|Auto Import
• Tick on Optimize imports on the fly
• Tick on Add unambiguous imports on the fly

Android log colors

With default Darcula theme Logcat highlighting I am not able to recognize type of log.

I prefer to use bright colors from plain old Android Holo theme.

To do so

• In toolbar menu select File|Settings
• Choose Editor|Colors & Fonts|Android Logcat
• Change all colors to ‘Holo’

안드로이드 네트워크 시간 설정 시 서버를 변경하고 싶다면
/system/etc/gps.conf 파일 안의 내용을 변경 하면 된다. 변경 후 재부팅을 해야 반영이 됨.

NTP_SERVER=north-america.pool.ntp.org
XTRA_SERVER_1=http://xtra1.gpsonextra.net/xtra.bin
XTRA_SERVER_2=http://xtra2.gpsonextra.net/xtra.bin
XTRA_SERVER_3=http://xtra3.gpsonextra.net/xtra.bin

위의 부분을 변경해주면 된다.

/system 의 권한이 없으므로 루팅된 폰에서만 변경 가능하다.

style.xml 에서 <item name="android:windowTranslucentStatus">true</item> 사용 시 adjustResize 동작을 하지 않을 때

activity.xml 에 android:fitsSystemWindows="true"  를 사용하면 동작이 된다.

RecyclerView 적용 방법 요약

1. import android.support.v7.widget.RecyclerView library 후 layout 에 RecyclerView 추가.
   activity_main.xml
     .......
    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />
    ......

2. List item layout xml 작성
  item_row.xml
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="100dp"
     android:orientation="horizontal" >
     <ImageView
          android:id="@+id/item_icon"
          android:layout_width="64dp"
          android:layout_height="64dp"
          android:layout_gravity="center_vertical"
          android:src="@drawable/ic_launcher"
          />
     
     <TextView
          android:id="@+id/item_title"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:textColor="@android:color/darker_gray"
          android:layout_gravity="center_vertical"
          android:layout_marginLeft="8dp"
          android:textSize="22dp"
          />
 </LinearLayout>

3. 각 item 의 데이터 클래스 작성
    public class Item {
        private String title;
        private int iconResId;
       
        public Item(String title, int iconResId) {
            super();
            this.title = title;
            this.iconResId = iconResId;
        }
       
        public String getTitle() {
            return title;
        }
        public void setTitle(String title) {
            this.title = title;
        }
        public int getIconResourceId() {
            return iconResId;
        }
        public void setIconResource(int iconResId) {
            this.iconResId = iconResId;
        }
    }

4. RecyclerView Adapter 과 ecyclerView.ViewHolder 작성
    public class ItemAdapter extends RecyclerView.Adapter<ItemAdapter.ViewHolder> {
       
        private ArrayList<Item> itemList;
       
        public ItemAdapter(ArrayList<Item> itemList) {
            super();
            this.itemList = itemList;
        }
   
        @Override
        public int getItemCount() {
            return itemList.size();
        }
       
        @Override
        public void onBindViewHolder(ViewHolder viewHolder, int position) {
            viewHolder.tvTitle.setText(itemList.get(position).getTitle());
            viewHolder.ivIcon.setImageResource(itemList.get(position).getIconResourceId());
        }
   
        @Override
        public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
            View itemView = View.inflate(parent.getContext(), R.layout.item_row, null);
            return new ViewHolder(itemView);
        }
       
        public static class ViewHolder extends RecyclerView.ViewHolder {
           
            public TextView tvTitle;
            public ImageView ivIcon;
            
            public ViewHolder(View itemLayoutView) {
                super(itemLayoutView);
                tvTitle = (TextView) itemLayoutView.findViewById(R.id.item_title);
                ivIcon = (ImageView) itemLayoutView.findViewById(R.id.item_icon);
            }
        }
    }

5. Activity에서 RecyclerView 설정
    public class MainActivity extends Activity {
       
        RecyclerView recyclerView;
       
        @Override
        protected void onCreate(@Nullable Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
           
            setContentView(R.layout.activity_main);
            RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recyclerView);
           
            ArrayList<Item> list = new ArrayList<Item>();
            for (int i = 0; i < 20; i++) {
                list.add(new Item("Title " + i, R.drawable.ic_launcher));
            }
           
            recyclerView.setLayoutManager(new LinearLayoutManager(this));
            ItemAdapter adapter = new ItemAdapter(list);
            recyclerView.setAdapter(adapter);
            recyclerView.setItemAnimator(new DefaultItemAnimator());
        }
    } 
  

RecyclerView 설명

Android L 프리뷰 버전에서 등장한 RecyclerView는 이번 Android 5.0 프리뷰 버전과 함께 Support-Library-v7의 최신 버전에 정식으로 추가되었다. RecyclerView는 기존의 ListView보다 유연하고 성능이 향상된 고급 위젯이다. 기존의 ListView는 커스텀하기에는 구조적인 문제로 많은 제약이 따랐으며, 구조적인 문제로 인해 성능문제가 있었다. RecyclerView는 이런 고질적인 문제를 해결하기위해 좀 더 다양한 형태로 개발자가 커스텀할 수 있도록 유연하며 성능에 중점을 두어 만들어졌다.

ListView에 비해 RecyclerView의 가장큰 변경 사항은 LayoutManager과 ViewHolder, Item에 대한 뷰의 변형이나 애니메이션할 수 있는 개념이 추가 되었다. 이들은 리스트의 아이템이 표시될 재활용뷰를 관리하는데 사용되며 아이템의 포지션에 따른 레이아웃의 배치를 결정하게 된다. 또한 불필요한 뷰의 생성을 피하기 위해 레이아웃을 관리하는 역할을 하게 된다.

주요 클래스

• Adapter – 기존의 ListView에서 사용하는 Adapter와 같은 개념으로 데이터와 아이템에 대한 View생성
• ViewHolder – 재활용 View에 대한 모든 서브 뷰를 보유
• LayoutManager – 아이템의 항목을 배치
• ItemDecoration – 아이템 항목에서 서브뷰에 대한 처리
• ItemAnimation – 아이템 항목이 추가, 제거되거나 정렬될때 애니메이션 처리

LayoutManager

RecyclerView에서 가장 흥미로운 부분이다. RecyclerView를 생성시 반드시 생성되어야 하며 이를 통해 모든 아이템의 뷰의 레이아웃을 관리한다. 수평/수직 배치 뿐만아니라 그리드형태의 다양하게 레이아웃을 배치 할 수 있다.

기본적으로 제공하는 LayoutManager

• LinearLayoutManager – 수평/수직의 스크롤 리스트
• GridLayoutManager – 그리드 리스트
• StaggeredGridLayoutManage – 높이가 불구칙적인 형태의 그리드 리스트

이외에 개발자는 LayoutManager를 확장하여 다양한 형태를 만들 수 있다. 아래와 같이 사용한다.

LinearLayoutManager layoutManager = new LinearLayoutManager(context);
layoutManager.setOrientation(LinearLayoutManager.VERTICAL);
layoutManager.scrollToPosition(currPos);
recyclerView.setLayoutManager(layoutManager);

ViewHolder

ViewHolder는 기존의 ListView에서 많이 사용하고 구글 안드로이드 팀에서도 오랫동안 추천 된 패턴이다. 하지만 이를 사용하는 것을 강제적으로 제한하지 않았지만 RecyclerView에서는 Adapter와 ViewHolder를 반듯이 같이 사용 할 수 밖에 없는 구조로 바꼈다. ViewHolder패턴을 사용 하지 않은 개발자는 약간의 훈련이 필요 할것이다.

public final static class ListItemViewHolder extends RecyclerView.ViewHolder {
   TextView label;
   TextView dateTime;
   
   public ListItemViewHolder(View itemView) {
      super(itemView);
      label = (TextView) itemView.findViewById(R.id.txt_label_item);
      dateTime = (TextView) itemView.findViewById(R.id.txt_date_time);
   }
}

사용법은 ViewHolder를 확장 후 서브 클래스를 findViewById()를 통해 저장해놓으면 된다. 이렇게 함으로 한번 생성한 클래스를 통해 서브 클래스(뷰)를 빠르게 다시 액세스 할 수 있다.

Adapter

ListView에서 Adpater와 동일한 형태의 구조로 해당 아이템의 데이터와 뷰간의 처리를 한다. 다음과 같은 3가지의 인터페이스를 구현해야 한다.

• public ListItemViewHolder onCreateViewHolder(ViewGroup parent, int viewType)
  • 제네릭 형식의 변수로 ViewHolder를 생성

• public void onBindViewHolder(ListItemViewHolder holder, int position)
  • 만들어진 ViewHolder에 데이터를 넣는 작업, ListView의 getView()와 동일

• public int getItemCount()
  • 데이터의 갯수

public class RecyclerViewDemoAdapter extends RecyclerView.Adapter {

    private List items;

    RecyclerViewDemoAdapter(List modelData) {
        if (modelData == null) {
            throw new IllegalArgumentException(
                  "modelData must not be null");
        }
        this.items = modelData;
    }

    @Override
    public ListItemViewHolder onCreateViewHolder(
            ViewGroup viewGroup, int viewType) {
        View itemView = LayoutInflater.
                from(viewGroup.getContext()).
                inflate(R.layout.item_demo_01, viewGroup, false);
        return new ListItemViewHolder(itemView, viewType);
    }

    @Override
    public void onBindViewHolder(
            ListItemViewHolder viewHolder, int position) {
        DemoModel model = items.get(position);
        viewHolder.label.setText(model.label);
        String dateStr = DateUtils.formatDateTime(
                viewHolder.label.getContext(),
                model.dateTime.getTime(),
                DateUtils.FORMAT_ABBREV_ALL);
        viewHolder.dateTime.setText(dateStr);
    }

    @Override
    public int getItemCount() {
        return items.size();
    }

    public final static class ListItemViewHolder 
           extends RecyclerView.ViewHolder {
        // ViewHolder
    }
}

기존의 ListView와 동일한 구조라서 쉽게 구현이 가능하며, Adapter의 기본 클래스를 확장한 형태(CursorAdapter, ArrayAdapter)는 없다.

ItemDecoration

각 아이템 항목별로 오프셋을 추가 하거나 아이템을 꾸미는 작업을 하게 된다.  예를 들어 스크롤시 컨텐츠의 내용에 따라 View의 높이가 달라져 레이아웃의 위치를 이동해야 하는 작업하는 경우 여기에서 처리 하면된다.

필요시 다음과 같은 3가지를 구현해야 한다.

• public void onDraw(Canvas c, RecyclerView parent)
• public void onDrawOver(Canvas c, RecyclerView parent)
• public void getItemOffsets(Rect outRect, int itemPosition, RecyclerView parent)

LayoutManager에서 getItemOffsets()의 호출을 통해 아이템의 레이아웃의 크기를 측정 하기 때문에 위의 예시는 getItemOffsets()에서 작업하면된다.

ItemAnimtor

ListView에서 아이템별 애니메이션을 일으키기 위해 notifyDataSetChanged()를 호출해 모든 아이템 변경이 발생 할때 처리를 하였으나 notifyItemChanged(int position), notifyItemInserted(int position), notifyItemRemoved(int position)를 통해 ItemAnimator를 통해 특정 아이템에 대한 애니메이션을 발생 할 수 있다.

• public final void notifyItemInserted(int position)
• public final void notifyItemRemoved(int position)

RecyclerView.ItemDecoration itemDecoration =
        new DividerItemDecoration(this, DividerItemDecoration.VERTICAL_LIST);
recyclerView.addItemDecoration(itemDecoration);

recyclerView.setItemAnimator(new CustomItemAnimator());


public class CustomItemAnimator extends PendingItemAnimator {
 
    public CustomItemAnimator() {
        setAddDuration(300);
        setRemoveDuration(300);
    }
 
    @Override
    protected boolean prepHolderForAnimateRemove(ViewHolder holder) {
        return true;
    }
 
    @Override
    protected ViewPropertyAnimatorCompat animateRemoveImpl(ViewHolder holder) {
        return ViewCompat.animate(holder.itemView)
                .rotationX(90)
                .translationY( - (holder.itemView.getMeasuredHeight() / 2));
    }
 
    @Override
    protected void onRemoveCanceled(ViewHolder holder) {
        ViewCompat.setRotationX(holder.itemView, 0);
        ViewCompat.setTranslationY(holder.itemView, 0);
    }
 
    @Override
    protected boolean prepHolderForAnimateAdd(ViewHolder holder) {
        ViewCompat.setRotationX(holder.itemView, 90);
        ViewCompat.setTranslationY(holder.itemView, - (holder.itemView.getMeasuredHeight() / 2));
        return true;
    }
 
    @Override
    protected ViewPropertyAnimatorCompat animateAddImpl(ViewHolder holder) {
        return ViewCompat.animate(holder.itemView)
                .rotationX(0)
                .translationY(0);
    }
 
    @Override
    protected void onAddCanceled(ViewHolder holder) {
        ViewCompat.setRotationX(holder.itemView, 0);
        ViewCompat.setTranslationY(holder.itemView, 0);
    }
}

그외

ListView OnItemClickListener, OnItemLongClickListener의 아이템 터치에 대한 리스너가 RecyclerView에서는 addOnItemTouchListener, setOnClickListener를 통해 처리 하게 되었다. 이는 GestureDetecter를 통해 좀 더 다양한 이벤트를 식별 할 수 있는 유연한 구조로 바꼈다. 한편으로는 유연하지만 한편으로는 좀 더 어려워 졌다고 볼 수 있다.

addHeaderView(), addFooterView()는 어디로?

없어 졌다. 이를 위해 Adapter의 onCreateViewHolder()에서 itemType으로 header나 footer를 추가 하는 방식으로 처리 해야 한다.

마치며..

ListView에서 RecyclerView를 바로 사용하기는 개념상 달라진 점이 없기 때문에 무리가 없겠으나 ListView에 있는 몇몇 기능들이 RecyclerView에서는 지원하지 않아 직접 처리 해야 하는 경우가 있어 보인다. 그리고 확실시 ListView에 다양하게 확장 할 수 있도록 유연해졌다. 하지만 유연해진 만큼 손이 많이 가는 부분도 없지 않아 있다.
참고 코드:

https://github.com/writtmeyer/recyclerviewdemo

출처 : http://www.kmshack.kr/android-recyclerview/

Status Bar 색상 지정

<resources>
  <!-- inherit from the material theme -->
  <style name="AppTheme" parent="android:Theme.Material">
    <!-- Main theme colors -->
    <!--   your app branding color for the app bar -->
    <item name="android:colorPrimary">@color/primary</item>
    <!--   darker variant for the status bar and contextual app bars -->
    <item name="android:colorPrimaryDark">@color/primary_dark</item>
    <!--   theme UI controls like checkboxes and text fields -->
    <item name="android:colorAccent">@color/accent</item>
  </style>
</resources>

Status Bar 투명처리

<resources>
  <!-- inherit from the material theme -->
  <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
    <item name="android:statusBarColor">">@android:color/transparent</item>
    <item name="android:windowTranslucentStatus">true</item>
  </style>
</resources>

Material Design 적용방법

1. 타겟 SDK 버전을 21 이상 사용
2. AppTheme 가 Theme.Material을 상속 받아야 함.
    values/styles.xml : API Level 21 미만에서 사용하는 테마
    values-v21/styles.xml : API Level 21 이상에서 사용하는 테마

    Ex) values-v21/style.xml
    <style name="AppTheme" parent="android:Theme.Material">
         <item name="android:colorPrimary">@color/primary</item>
         <item name="android:colorPrimaryDark">@color/primary_dark</item>
         <item name="android:colorAccent">@color/accent</item>
    </style>
3. android:theme 속성에 해당 Theme 적용

AppCompatActivity 적용방법

1. 서포트 라이브러리 v7 사용
2. 타겟 SDK 버전을 21 이상 사용
3. AppTheme 가 서포트라이브러리 테마를 상속 받아야 함.
   - res/value-v21이 없을 경우 폴더를 생성 한 후 style.xml 파일을 생성
   - AppTheme에 Theme.AppCompat Theme 를 상속받고, 기본 Theme color 을 설정한다.
   - 두 가지 버전의 style.xml 파일을 준비해야 함.
     values/styles.xml : API Level 21 미만에서 사용하는 테마
     values-v21/styles.xml : API Level 21 이상에서 사용하는 테마

    Ex) values-v21/style.xml
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/primary</item>
        <item name="colorPrimaryDark">@color/primary_dark</item>
        <item name="colorAccent">@color/accent</item>
    </style>

4. 작성할 activity가 AppCompatActivity 상속 받아야 함.
5. android:theme 속성에 해당 Theme 적용

출처 : 모던 웹 디자인을 위한 HTML5 + CSS3 입문  요약

    1. HTML5 태그 기본
    1.1. 글자 태그
    1.1.1 제목 태그
        - <h1> ~ <h6>
        - 일반적으로 웹 페이지를 만들 때는 h1 ~ h3 태그까지 사용.
        - 실제 웹 페이지를 제작할 때는 모든 브라우저에서 동일한 화면을 볼 수 있게 폰트를 강제로 지정합니다.

    1.1.2 본문 태그
        - <p>(paragraph 태그의 줄임말) : 본문 글자 태그
        - <br> : 개행 태그
        - <hr> : 수평 줄 태그
       
    1.1.3 앵커태그
        - <a> : 앵커 태그
        ex) <a href="http://www.naver.com">Naver</a>
        - 빈 링크
        하이퍼링크 끼능을 쪠꺼햬또 우ㅖㅃ 표쭌을 따르려면 a 태그에 href 속성을 반드시 입력해야 합니다.
        따라서 웹 표준을 지키면서 이동하지 않는 a태그를 만들 때는 href 속성에 #을 입력합니다.
        - 페이지 내부 이동
        a 태그를 이용하면 현재 페이지 내부에서 원하는 장소로 이동할 수 있습니다. 이때는 원하는 장소에
        id 속성을 부여해야 합니다. id 속성이 중복되면 먼저 나오는 태그로 이동합니다.
        ex)<a href="#top">Move to Top</a> 
       
    1.1.4 글자형태 태그
        - <b> : 굵은 글자 태그
        - <i> : 기울어진 글자 태그
        - <small> : 작은 글자 태그
        - <sub> : 아래에 달라 붙는 글자 태그
        - <sup> : 위에 달라 붙는 글자 태그
        - <ins> : 밑줄 글자 태그
        - <del> : 가운데 줄이 그어진 글자 태그
           
        * 글자를 기울이거나 굵게 만드는 기능은 모두 스타일시트로 처리하므로 현대에는 잘 사용하지 않습니다.

    1.1.5 루비 문자 태그
        - <ruby> : 루비 문자 선언 태그
        - <rt> : 위에 위치하는 작은 문자 태그
        - <rp> : ruby 태그를 지원할 경우 출력되지 않는 태그
        ex) <ruby>
                <span>大韓民國</span>
                <rp>(</rp>
                <rt>대한민국</rt>
                <rp>)</rp>
            </ruby>
       
    1.2 목록 태그
    1.2.1 기본 목록 태그
        - <ul> : 순서가 없는 목록 태그(unordered list)
        - <ol> : 순서가 있는 목록 태그(ordered list)
        - <li> : 목록 요소(list item)
        ex) <ol>
                <li>Facebook</li>
                <li>Tweeter</li>
            </ol>
            <ul>
                <li>Facebook</li>
                <li>Tweeter</li>
            </ul>

        * 중첩해서 목록을 만들고 싶을 때는 li 태그 안에 목록 태그를 중첩해서 입력하면 됩니다.

    1.2.2 정의 목록 태그
        - <dl> : 정의 목록 태그(definition list : 정의목록)
        - <dt> : 정의 용어 태그(definition term : 정의용어)
        - <dd> : 정의 설명 태그(definition description : 정의설명)
        ex)  <dl>
                <dt>HTML5</dt>
                <dd>Multimedia Tag</dd>
                <dd>Connectivity Tag</dd>
            </dl>

    1.3 테이블 태그
    1.3.1 테이블 태그 기본
        - <table> : 테이블 태그
        - <tr> : 표 내부의 행 태그(table row)
        - <th> : 행 내부의 제목 셀 태그(table header)
        - <td> : 행 내부의 일반 셀 태그(table data)
        - <caption>
        - <colgroup>
        - <thead>
        - <tbody>
        - <tfoot>
        ex) <table border="1">
                <tr><th>Header1</th><Header2</th></tr>
                <tr><td>Data1</td><td>Data1</td></tr>
                <tr><td>Data2</td><td>Data2</td></tr>
            </table>
    1.3.2 테이블 태그 속성
        - border : 표의 테두리 두께를 지정
        - rowspan : 셀의 너비 지정
        - colspan : 셀의 높이 지정
          ex) <table border="1">
                <tr>
                    <th colspan="3">Table Data</th>
                    <th rowspan="3">Table Data</th>
                </tr>
                <tr>
                    <td>Table Data</td>
                    <td rowspan="2">Table Data</td>
                    <td>Table Data</td>
                </tr>
                <tr>
                    <td>Table Data</td>
                    <td>Table Data</td>
                </tr>
            </table>
   
    1.4 이미지 태그
      - <img>
      - 속성
        src : 이미지의 경로
        alt : 이미지가 없을 때 나오는 글자 지정
        width : 이미지의 너비 지정
        height : 이미지의 높이 지정
        현대에는 스타일시트를 사용해 입력하는 것이 일반적이므로 width, height 잘 사용하지 않습니다.
        ex) <img src="image.jpg" alt="이미지" width="300" />
        * 이미지 크기는 아는데 아직 이미지가 없을 때 사용할 수 있는 좋은 방법이 있습니다.
          http://placehold.it/ 비슷한 사이트로 http://dummyimage.com/
          <img src="http://placehold.it/300x200" />

    1.5 오디오 태그
      - <audio>
      - <source>
      - 속성
        src : 음악 파일의 경로 지정
        preload : 음악을 재생하기 전에 모두 불러올지 지정
        autoplay : 음악을 자동 재생할지 지정
        loop : 음악을 반복할지 지정
        controls : 음악 재생 도구를 출력할지 지정
        ex) <audio src="Kalimba.mp3" controls="controls" autoplay="autoplay>

            <audio controls="controls" autoplay="autoplay>
                <source src="Kalimba.mp3" type="audio/mp3" />
                <source src="Kalimba.ogg" type="audio/ogg" />
            </audio>
        * 웹 브라우저마다 지원하는 음악파일이 달라 source 로 여러개의 파일을 제공해서 문제를 해결.
        * type 속성을 입력하지 않아도 상관이 없지만 웹브라우저가 음악 파일을 내려 받은 뒤에 재생 가능한
          파일인지 확인하므로 트래픽이 낭비됩니다. type 속성을 꼭 지정해줍시다.

    1.6 비디오 태그
      - <video>
      - <source>
      - <track>
      - 속성
        src : 비디오 파일의 경로 지정
        poster : 비디오 준비 중일 때ㅢ 이미지 파일 경로 지정
        preload : 비디오를 재생하기 전에 모두 불러올지 지정
        autoplay : 비디오를 자동 재생할지 지정
        loop : 비디오를 반복할지 지정
        controls : 비디오 재생 도구를 출력할지 지정
        width : 비디오의 너비를 지정
        height : 비디오의 높이를 지정
        ex) <video poster="http://placehold.it/640ㅌ360"
                width="640" height="360" controls="controls">
                <source src="Wildlife.mp4" type="video/mp4" />
                <source src="Wildlife.webm" type="video/webm" />

                <track kind="subtitles" src="track.srt" srclang="ko" label="Korean" />
                <track kind="subtitles" src="track.srt" srclang="en" label="English" />
            </video>
        * video.js 플러그인
          <head>
              <link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
              <script src="http://vjs.zencdn.net/c/video.js"></script>
          </head>
          <body>
              <video controls="controls" width="640" height="360"
                    class="video-js vjs-default-skin" data-setup="{}">
                  <source src="Wildlife.mp4" type="video/mp4" />
                  <source src="Wildlife.webm" type="video/webm" />
              </video>
          </body>
 
    1.7 입력양식 태그
      - <form>
      - 속성
        action : 입력 데이터의 전달 위치를 지정합니다.
        method : 입력 데이터의 전달 방식을 선택합니다.
    1.7.1 기본 input 태그
      - <input>
      - 속성
        button : 버튼을 생성합니다.
        checkbox : 체크박스를 생성합니다.
        file : 파일 입력 양식을 생성합니다.
        hidden : 보이지 않습니다.
        image :  이미지 형태를 생성합니다.
        password : 비밀번호 입력양식을 생성합니다.
        radio : 라디오 버튼을 생성합니다.
        reset : 초기화 버튼을 생성합니다.
        submit : 제출 버튼을 생성합니다.
        text : 글자 입력 양식을 생성합니다.
        label : input 태그를 설명하는데 사용합니다.
        * label 태그는 어떠한 input 태그를 설명하고 있는지 표시해 줘야 합니다. input 태그에 id
          속성을 입력하고 label 태그에 for 속성을 입력합니다.
        ex) <form method="post" action="http://localhost:8080/sample/index.jsp">
                <label for="sample">이름</label>
                <input id="sample" type="text" name="name1" />
            </form>
            label 태그를 클릭하면 input 태그에 초점이 맞추어 집니다.
        input 태그가 체크박스나 라디오 버튼일 경우 label 태그를 선택하면 input 태그가 체크됩니다.
       
      
    1.7.2 HTML5 입력 양식 태그
      - <color> : 색상 선택 양식을 생성합니다.
      - <date> : 일 선택 양식을 생성합니다.
      - <datetime> : 날짜 선택 양식을 생성합니다.
      - <datetime-local> : 지역 날짜 선택 양식을 생성합니다.
      - <email> : 이메일 입력 양식을 생성합니다.
      - <month> : 월 선택 양식을 생성합니다.
      - <number> : 숫자 생성 양식을 생성합니다.
      - <range> : 범위 선택 양식을 생성합니다.
      - <search> : 검색어 입력 양식을 생성합니다.
      - <tel> : 전화번호 입력 양식을 생성합니다.
      - <time> : 시간 선택 양식을 생성합니다.
      - <url> : URL 주소 입력 양식을 생성합니다.
      - <week> : 주 선택 양식을 생성합니다.

    1.7.3 textarea 태그
      - <textarea>
      - 속성
        cols : 태그의 너비를 지정합니다.
        rows : 태그의 높이를 지정합니다.

    1.7.4 select 태그
      - <select> : 선택 양식을 생성합니다.
      - <optgroup> : 옵션을 그룹화 합니다.
      - <option> : 옵션을 생성합니다.

    1.7.5 fieldset 태그와 legend 태그
      입력양식을 설명하는 태그, legend 는 fieldset 태그 안에만 사용할 수 있습니다.
      - <fieldset>
      - <legend>

    1.8 공간 분할 태그
    1.8.1 div, span 태그
      - <div> : block 형식으로 공간을 분할합니다.
      - <span> : inline 형식으로 공간을 분할합니다.
      - block 형태의 태그 : div, h1 ~ h6, p, 목록 태그, 테이블 태그, form
      - inline 형태의 태그 : span, a, input, 글자 형식 태그

    1.8.2 HTML5 시멘틱 구조 태그
      - <header> : 헤더를 의미
      - <nav> : 내비게이션을 의미
      - <aside> : 사이드에 위치하는 공간을 의미
      - <section> : 여러 중심 내용을 감싸는 공간을 의미
      - <article> : 글자가 많이 들어가는 부분을 의미
      - <footer> : 푸터를 의미
        ex) <header><h1>HTML5</h1></header>
            <nav>
                <ul>
                    <li><a href="#"> Menu - 1</a><li>
                    <li><a href="#"> Menu - 2</a><li>
                </ul>
            </nav>
            <section>
                <article>
                    <h1>Lorem ipsum dolor</h1>
                    <p>Lorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolor</p>
                </article>
            </section>
            <footer>
                <address>서울시 강남구 역삼동</address>
            </footer>
           
           
    2. CSS3 선택자 기본
      - h1   {  color:   red; }
       선택자 스타일속성 스타일값
       style 태그 내부에 입력해 사용합니다.
    
      - * : 전체선택자
            HTML 페이지 내부의 모든 태그를 선택 합니다.
            전체 선택자를 사용하면 html 태그를 폼함해 head 태그 title태그, style 태그까지 선택합니다.
            ex) * { color: red; }
     
      - 태그 : 특정한 태그를 선택합니다.
               여러 개의 선택자를 한꺼번에 선택해서 스타일 속성을 적용할 때는 쉼표를 사용합니다.(모든 선택자에 적용이 가능함)
               ex) h1, h2, p { color: blue;}
    
      - #아이디 : 아이디 속성을 가지고 있는 태그를 선택 합니다.
                  ex) #header { color: red; }
   
      - .클래스 : 특정한 클래스를 가지고 있는 태그를 선택 합니다.
                  ex) .select { color: red; }
                  ex) li.select { color: blue; } li 태그 중 class 속성으로 select를 가지는 태그의 속성을 변경

      - 선택자[속성] : 특정한 속성이 있는 태그를 선택합니다.
      - 선택자[속성=값][속성=값] : 특정한 속성 안의 값이 특정 값과 같은 문서 객체를 선택합니다.
        ex) input[type=text] { background: red; }
            input태그 중에서 type속성을 text로 같는 태그의 background 속성에 red 키워드를 적용
        * 속성 선택자는 type 속성을 정확히 text로 입력한 태그만 인정합니다.
          ex) <input /> <input type="text" />

      - 선택자 표 정리

    3. CSS3 스타일 기본 속성
    3.1. 단위
        - %(퍼센트) : 백분율, 기본 설정된 크기에서 상대적으로 크기를 지정합니다.
        - em : 배수를 나타내는 단위, 1배=1em=100%
        - px : 픽셀 단위
        * 보통 폰트에서는 전체 기본 폰트 크기에 절대 크기를 지정하고 각각의 태그에 상태 크기를 지정하는 방법은 굉장히 많이 사용합니다.
        ex) * { font-size: 12px; }
        h1 { font-size: 3.0em; }
        h2 { font-size: 150%; }

        - #000000 : Hex 코드 단위
        - rgb(red, green, blue) : RGB 색상 단위
        - rgba(red, green, blue, alpha) : RGBA 색상 단위
          ex) h1 { background-color: #0094ff; }
          * http://www.colorpicker.com/
        - hsl { hue, saturation, lightness) : HSL 색상단위(색상,채도,명도)
        - hsla { hue, saturation, lightness, alpha) HSLA 색상단위
          * http://www.workwithcolor.com/
        - url : 파일이나 폰트 파일을 불러올 때 URL 단위를 사용
          ex) background-image: url('Desert.jpg'); -> 현재 폴더의 Desert.jpg
          background-image: url('Other/Desert.jpg'); -> 현재 폴더의 내부의 Other 폴더의 Desert.jpg
          background-image: url('/Desert.jpg'); -> 루트 폴더의 Desert.jpg

    3.2 가시 속성
        - display: block; : none, block, inline, inline-block
          inline 키워드를 적용하면 width, height 속성이 지정되지 않습니다.
          inline-block 키워드를 지정하면 width, height 속성을 지정할 수 있습니다. margin 속성도 적용이 가능합니다.
        - visibility: visible : visible, hidden, collapse
          display 속성을 사용하면 태그가 화면에서 제거되지만 visibility
          속성을 사용하면 화면에서 보이지 않을 뿐입니다. 영역은 차지합니다.
        - opacity: 0.2; : 0.0 ~ 1.0 투명도 처리

    3.3 박스 속성
        - width, height, margin, padding : box 속성
          박스속성 크기는 width + 2 x (margin + border + padding), height 동일
        - box-sizing: content-box; : content-box 는 width, height가 컨텐츠 크기만 포함, border-box 값은 선(테두리)까지 포함해서 크기를 결정
          content-box : width + 2 * (margin + border + padding)
          border-box : width + 2 * margin
          ex)
            <head>
            <style>
                div { margin: 10px; padding: 10px; width: 100px; height: 100px; border: 10px solid black; }
                #content { background: red; box-sizing: content-box; }
                #border {background: orange; box-sizing: border-box; }
            </style>
            </head>
            <body>
                <div id="content"></div>
                <div id="border"></div>
            </body>   

    3.4 테두리 속성
        - border-width, border-style, border-color, border-radius(CSS3 에 추가, border-radius: 10px(왼쪽위) 10px(오른쪽위) 10px(오른쪽아래) 10px;(왼쪽아래))

    3.5 배경 속성
        - background-image: url('path.ext'); : css3 부터 여러 개의 배경 이미지를 적용할 수 있음.(background-image: url('path1.ext'), url('path2.ext2');
        - background-size:auto; : auto, contain(=너비100%), cover(=높이100%), 100%...
          background-size:100% 100% -> width, height 설정
          background-size:100%, 200% -> 쉼표는 두개의 이미지를 서로 다른 크기로 설정
        - background-repeat: no-repeat; : repeat, repeat-x, repeat-y...
        - background-attachment: fixed; : scrolㅣl... 배경 이미지 고정, 화면 스크롤 시 배경이미지는 고정되어 있음.
        - background-position: bottom; : center, left, right, top,
          속성에 x, y 를 줄수 있음(0px, 50%)
        - 한줄로 입력하는 방법도 있지만 너무 복잡하여 따로 쓰는 것이 더 보기 좋음.
       
    3.6 폰트 속성
        - font-size: 32px; : 폰트 크기를 설정
        - font-family: Arial, 'Times new Roman', sans-serif; : 제일 마지막에는 serif, sans-serif, mono space 등(generic-family 폰트: 웹브라우저에 설정된 고유의 폰트)을 입력한다.
        - font-style: italic; : 글자 스타일
        - font-weight: bold; : 글자 굵기
        - line-height: 70px; : 글자 높이
        - text-decoration: none; : 글자를 꾸밈.
        - text-align: center; : 글자 정렬, 글자가 수평으로는 중앙 정렬이 되지만 수직으로는 중앙 정렬되지 않음.(start, end, left, right, center, ...)
          inline 태그에 정렬을 지정해도 정렬이 되지 않는다. inline 태그는 너비가 존재하지 않으므로...
          글자를 수직정렬 하기 위해서는 박스의 높이와 같은 크기의 line-height 속성을 적용하면 된다.
            <style>
            .button {
                width: 150px;
                height: 70px;
                border: 10px solid #ffffff;
                background-color: #ff6a00;
                border-radius: 30px;
                box-shadow: 5px 5px 5px #a9a9a9;
                text-align : center;
                font-size: 2em;
            }
            .button > a {
                display: block;
                line-height: 70px;
            }
            </style>
            <body>
                <div class="button">
                    <a href="#">Click</a>
                </div>
            </body>

    3.7 위치 속성
        - position: absloute; : static, relative, fixed 등으로 위치를 설정 할 수 있다.
          static : 태그가 위에서 아래로, 왼쪽에서 오른쪽으로 순서대로 배치됩니다. direction 속성을 사용해 오른쪽에서 왼쪽으로 변경할 수 있습니다.
          relative : 초기 위치 상태에서 상하좌우로 위치를 이동합니다.
          absolute : 절대적 위치 좌표를 설정합니다.
          fixed : 화면을 기준으로 절대적 위치 좌표를 설정합니다.
          position 속성에 absolute 키워드를 적용하면 부모 태그가 영역을 차지하지 않습니다. 따라서 아래와 같이 처리 해야 함
          1. 자손에게 position 속성을 absolute 키워드로 적용하면 부모에게 height 속성을 입력한다.
          2. 자손의 position 속성을 absolute 키워드로 적용하면 부모의 position 속성을 relative 키워드로 적용한다.
        - z-index: 10; : 숫자가 클수록 앞으로 나옴
        - overflow: scroll; : 내부의 요소가 부모의 범위를 벗어날 때 어떻게 처리할지 지정하는 속성, hidden, overflow-x, overflow-y
            <head><style>
                .box {
                    width: 100px;
                    height: 100px;
                    position: absolute;
                }
                .box:nth-child(1) {
                    background-color: red;
                    left: 10px;
                    top: 10px;
                }
                .box:nth-child(2) {
                    background-color: green;
                    left: 50px;
                    top: 50px;
                }
                .box:nth-child(3) {
                    background-color: blue;
                    left: 90px;
                    top: 90px;
                }
            </style></head>
            <body>
                <h1>위치(position) 예제</h1>
                <div>
                    <div class="box"></div>
                    <div class="box"></div>
                    <div class="box"></div>
                </div>
                <h1>위치(position) 예제</h1>
            </body>
            위와 같을 경우
            1. h1 태그 두개가 붙어있음(div 태그가 영역을 차지하지 않음)
            2. 색상이 적용된 상자가 자신의 부모를 기준으로 위치를 잡지 않음.

    3.8 float 속성
        - float: left; : 부유하는 대상을 만들 때 사용하는 스타일 속성
          자손에 float 속성을 적용하면 부모의 overflow 속성에 hidden 키워드를 적용한다.
          clear 스타일 속성에 both 키워드를 적용해도 마찬가지 기능을 수행할 수 있지만 현대에는 overflow 스타일 속성을 많이 사용 함.

    3.9 22그림자 속성
        - text-shadow: 5px 5px 5px black; : 글자에 그림자를 부여하는 스타일 속성(오른쪽 아래 흐림도 색상)
        - box-shadow: 5px 5px 5px black; : 박스에 그림자를 부여하는 속성(오른쪽 아래 흐림도 색상)
          * http://css3generator.com
   
    3.10 그레디언트
        - 2가지 이상의 색상을 혼합한 색을 만들어 채색하는 기능입니다.
        - 선형그레이디언트
          linear-gradient(45deg, #f85032 0%, #e73827 100%) : 각도, 색상 위치, 색상 위치
          * http://www.colorzilla.com/gradient-editor/

    4. 웹페이지 레이아웃
    4.1 레이아웃 구분
      웹페이지 레이아웃 공간 분할 방법
      1) 웹페이지를 구상합니다.
      2) 웹 페이지의 구성 영역을 분리 합니다.
      3) 구성 영역을 행 단위로 분리 합니다.
      4) 나누어진 행의 내부 요소를 분리합니다.

     - 모든 HTML 페이지의 첫 번째 스타일시트는 초기화 코드로 시작합니다.
       Eric Meyer's Reset CSS : http://meyerweb.com/eric/tools/css/reset/
       HTML5 Doctor CSS Reset : http://html5doctor.com/html-5-reset-stylesheet/
       YUI 3 Reset CSS : http://developer.yahoo.com/yui/3/cssreset/

    5. CSS3 변형과 애니메이션
    5.1. 변형속성 기본(transition)
        - CSS3 변형 속성은 아래의 스타일 속성과 함께 적용 할 수 있습니다.
          위치속성: top, left, bottom, right
          크기속성: width, height
          박스속성: margin, padding
          테두리속성: border-width, border-radius, border-color
          색상속성: color, background-color
          투명도속성: opacity
          변환속성: transform
        - transition : 모든 속성을 한 번에 적용
        - transition-delay : 이벤트 발생 후 몇 초 후에 재생할지 지정
        - transition-duration: 몇 초 동안 재생할지 지정
        - transition-property : 어떤 속성을 변형할지 지정
        - transition-timing-function : 수치 변형 함수 지정
          ease, linear, ease-in, ease-out, ease-in-out
          맘에드는 형태가 없으면 cubic-bezier() 함수를 사용
          * http://cubic-bezier.com

        <style>
            #graph {
                width: 610px;
                border: 3px solid black;
            }
            .bar {
                width: 10px; height: 50px; background-color: orange; margin: 5px;
                transition-property: background-color, width;
                transition-duration: 1s, 5s;
            /* property duration function delay 순서로 입력
                transition: background-color 1s ease, width, 5s linear 1s;
                */
            }

            #graph:hover > .bar { width: 600px; }
            .bar:nth-child(1) { transition-timing-function: linear; transition-delay: 0s;}
            .bar:nth-child(2) { transition-timing-function: ease; transition-delay: 1s;}
            .bar:nth-child(3) { transition-timing-function: ease-in; transition-delay: 2s; }
            .bar:nth-child(4) { transition-timing-function: ease-in-out; transition-delay: 3s; }
            .bar:nth-child(5) { transition-timing-function: ease-out; transition-delay: 4s; }
            .bar:nth-child(6) { transition-timing-function: cubic-bezier(.54, .31, .01, .94); transition-delay: 5s;}

            #graph:hover > .bar:nth-child(1) {background-color: red; width: 100px;}
            #graph:hover > .bar:nth-child(2) {background-color: blue; width: 300px;}
            #graph:hover > .bar:nth-child(3) {background-color: green; width: 400px;}
            #graph:hover > .bar:nth-child(4) {background-color: yellow; width: 200px;}
            #graph:hover > .bar:nth-child(5) {background-color: pink; width: 400px; }
            #graph:hover > .bar:nth-child(6) {background-color: gray; width: 500px; }
        </style>
        <body>
        <div id="graph">
            <div class="bar"></div>
            <div class="bar"></div>
            <div class="bar"></div>
            <div class="bar"></div>
            <div class="bar"></div>
            <div class="bar"></div>
        </div></body>
   
    5.2. 키 프레임과 애니메이션 속성
        - animation: 모든 animation 속성을 한 번에 적용합니다.
        - animation-delay : 이벤트 발생 후 몇 초 후에 재생할지 지정합니다.
        - animation-direction: 애니메이션 방향을 설정 합니다.
          alternate : from에서 to로 이동 후 to에서 from으로 이동을 반복
          normal : 계속 from에서 to로 이동
        - animation-duration: 애니메이션을 몇 초 동안 재생할지 지정합니다.
        - animation-iteration-count: 애니메이션 반복 횟수를 지정합니다.
        - animation-name: 애니메이션 이름을 지정합니다.
        - animation-play-state: 애니메이션 재생 상태를 지정합니다.
        - animation-timing-function: 수치 변형 함수를 지정합니다.

        * 애니메이션 속성은 반드시 animation-name 속성과 animation-duration 속성을 지정해야 합니다.

        <style>
            #box {
                position: absolute; width: 200px; height: 200px; border-radius: 100px; text-align: center;
   
                animation-name: rint;
                animation-duration: 2s;
                animation-iteration-count: infinite;
                animation-direction: alternate;
                animation-timing-function: linear;

                background: #b8e1fc; /* Old browsers */
                background: -moz-linear-gradient(top,  #b8e1fc 0%, #a9d2f3 10%, #90bae4 25%, #90bcea 37%, #90bff0 50%, #6ba8e5 51%, #a2daf5 83%, #bdf3fd 100%); /* FF3.6+ */
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b8e1fc), color-stop(10%,#a9d2f3), color-stop(25%,#90bae4), color-stop(37%,#90bcea), color-stop(50%,#90bff0), color-stop(51%,#6ba8e5), color-stop(83%,#a2daf5), color-stop(100%,#bdf3fd)); /* Chrome,Safari4+ */
                background: -webkit-linear-gradient(top,  #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* Chrome10+,Safari5.1+ */
                background: -o-linear-gradient(top,  #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* Opera 11.10+ */
                background: -ms-linear-gradient(top,  #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* IE10+ */
                background: linear-gradient(to bottom,  #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* W3C */
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b8e1fc', endColorstr='#bdf3fd',GradientType=0 ); /* IE6-9 */
            }

            #box > h1 {  line-height: 200px; }
            @keyframes rint {
                from { left: 0; transform: rotate(0deg); }
                50% { left: 500px; }
                to { left: 500px; transform: rotate(360deg); }
            }
            </style>
            <body><div id="box"><h1>Rotation</h1></div>

    6. CSS3 변환
    6.1 2차원 변환
    6.1.1 transform 속성
        - translate(translateX, translateY) : 특정한 크기만큼 이동합니다.
        - translateX(translateX) : x축으로 특정한 크기만큼 이동합니다.
        - translateY(translateY) : Y축으로 특정한 크기만큼 이동합니다.
        - scale(scaleX, scaleY) : 특정한 크기만큼 확대 축소를 합니다.
        - scaleX(ScaleX) : X축으로 특정한 크기만큼 확대 및 축소합니다.
        - scaleY(scaleY) : Y축으로 특정한 크기만큼 확대 및 축소합니다.
        - skew(angleX, angleY) : 특정한 각도만큼 기울입니다.
        - skewX(angleX) : X축으로 특정한 각도만큼 기울입니다.
        - skewY(angleY) : Y 축으로 특정한 각도만큼 기울입니다.
        - roate(angleZ) : 특정한 각도만큼 회전합니다.
        * transform 속성에 변환 함수를 입력하는 순서에 따라 실행결과가 바뀔 수 있습니다.
          transform 속성에 입력한 변환 함수는 앞쪽부터 차례대로 적용이 됩니다.
           
          ex) transform: rotate(60deg) scale(1.2) skewY(10deg);
        <style>
            section {
                width: 100px; height: 100px;
                border:5px solid black;
            }
            div {
                width: 100px; height: 100px;
                background: red;
                transform: rotate(60deg);
            }
        </style>
        <body>
            <section>
                <div></div>
            </section>
        </body>

    6.1.2 transform-origin 속성
        - 변환 중심을 설정하는 스타일 속성입니다.
          ex) transform: rotate(30deg);
              transform-origin: 100% 100%;

    6.2.1 3차원 변환 함수
        - translate3d(translateX, translateY, translateZ) : 특정한 크기만큼 이동합니다.
        - translateX(translateX) : X축으로 특정한 크기만큼 이동합니다.
        - translateY(translateY) : Y축으로 특정한 크기만큼 이동합니다.
        - translateZ(translateZ) : Z축으로 특정한 크기만큼 이동합니다.
        - sclae3d(scaleX, scaleY, scaleZ) : 특정한 크기만큼 확대 축소 합니다.
        - scaleX(scaleX) : x축으로 특정한 크기만큼 확대 및 축소 합니다.
        - scaleY(scaleY) : y 축으로 특정한 크기만큼 확대 및 축소 합니다.
        - scaleZ(scaleZ) : z 축으로 특정한 크기만큼 확대 및 축소 합니다.
        - rotate3d(angleX, angleY, angleZ) : 특정한 각도만큼 회전합니다.
        - roateX(angleX) : x 추으로 특정한 각도만큼 회전합니다.
        - roateY(angleY) : y 축으로 특정한 각도만큼 회전합니다.
        - roate(angleZ) : z 축으로 특정한 각도만큼 회전합니다.
       
    6.2.2 transform-style 속성
        - flat : 후손의 3차원 속성을 무시합니다.
        - preserve-3d : 후손의 3차원 속성을 유지합니다.
   
    6.2.3. backface-visibility 속성
        - visible : 후면을 보이게 만듭니다.
        - hidden : 후면을 보이지 않게 만듭니다.

* 참조 : http://www.westciv.com/tools/3Dtransforms/index.html

        <style>
            body {
                width: 200px;
                margin: 200px auto;
            }
            section {
                width: 200px;
                height: 200px;
                position: relative;

                animation: rint 3s linear 0s infinite;

                transform-style: preserve-3d;
            }
             @keyframes rint {
                 from {
                     transform: rotateX( 0deg) rotateY( 0deg) rotateZ(0deg);
                 }
                 to {
                     transform: rotateX( 360deg) rotateY( 360deg) rotateZ(360deg);
                 }
             }
            div {
                width: 200px;
                height: 200px;
                position: absolute;
                left: 0;
                top: 0;

                /*backface-visibility: hidden;*/
                opacity: 0.3;
            }
            div:nth-child(1) {
                transform: rotateY( 0deg) translate3d(0px, 0px, 100px);
                background: red;
            }
            div:nth-child(2) {
                transform: rotateY( 90deg) translate3d(0px, 0px, 100px);
                background: green;
            }
            div:nth-child(3) {
                transform: rotateY( 180deg) translate3d(0px, 0px, 100px);
                background: blue;
            }
            div:nth-child(4) {
                transform: rotateY( 270deg) translate3d(0px, 0px, 100px);
                background: yellow;
            }
            div:nth-child(5) {
                transform: rotateY( 90deg) translate3d(0px, 0px, 100px);
                background: brown;
            }
            div:nth-child(6) {
                transform: rotateY( 270deg) translate3d(0px, 0px, 100px);
                background: pink;
            }
   
        </style>
        <body>
            <section>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </section>
        </body>

ex) 정육면체
출처 : http://www.clearboth.org/css3_3_by_isdn386/

<style>
body{
         padding:200px;
        }
        /* 큐브의 6개의 각 면을 채울 기본속성 정의(사이즈, 폰트) */
        #cube div {
         position: absolute;
         height: 160px;
         width: 160px;
         padding:20px;
         text-align:center;
         font-size:30px;
         color:#fff;
         background-color: rgba(0, 0, 0,.5); /* 면 배경색상 .5는 투명도가 0.5임 */
        }
        #cube {
         /* 원근의 관점 - 값이 작을 수록 길이가 길어진다. */
         -webkit-perspective: 800;
         /* 3D의 기본이 되는 원근의 기준점*/
         -webkit-perspective-origin: 50% 600px;
        }
        /* top으로 시작해서 bottom까지 6면체의 모양을 표시 */
        #cube .top {
         /* 90도 각도로 X축 회전하고 Z축으로 100px만큼 이동 */
         -webkit-transform: rotateX(90deg) translateZ(100px);
        }
        #cube .front {
         /* Z축으로 100px만큼 이동 */
         -webkit-transform: translateZ(100px);
        }
        #cube .right {
         /* 90도 각도로 Y축 회전하고 Z축으로 100px만큼 이동 */
         -webkit-transform: rotateY(90deg) translateZ(100px);
        }
        #cube .back {
         /* 180도 각도로 Y축 회전하고 Z축으로 100px만큼 이동 */
         -webkit-transform: rotateY(180deg) translateZ(100px);
        }
        #cube .left {
         /* -90도 각도로 Y축 회전하고 Z축으로 100px만큼 이동 */
         -webkit-transform: rotateY(-90deg) translateZ(100px);
        }
        #cube .bottom {
         /* -90도 각도로 X축 회전하고 Z축으로 100px만큼 이동한 후 다시 180도 회전 */
         -webkit-transform: rotateX(-90deg) translateZ(100px) rotate(180deg);
        }
</style>
<body>
    <div id="cube">
  <div class="top">1 Top</div>
  <div class="front">2 Front</div>
  <div class="right">3 Right</div>
  <div class="back">4 Back</div>
  <div class="left">5 Left</div>
  <div class="bottom">6 Bottom</div>
 </div>
</body>

    부록A
    1. 조건부 주석
    <!-- [if 조건]>
    조건이 참일 때 실행할 코드
    <![endif] -->
    !: not, lt: Less Than, lte: Less Than or Equal, gt: Greater Than, gte: Greater Than or Equal, &: and, |: or
       
    <!-- [if (IE 9) | (IE 10)]>
    <h1>최신 버전의 인터넷 익스플로러</h1>
    <![endif]-->
       
    <!--[if !((IE 9) | (IE 10))]>
    <h1> 구 버전의 인터넷 익스플로러</h1>
    <![endif]-->

출처 : http://pixplicity.com/dp-px-converter/

안드로이드 px/dp/sp 변환기

출처 : http://kscho.tistory.com/271

아래의 순서로 정해짐

사용례

- 언어코드

values는 영어

values-ko : 한국어

values-ja : 일본어

values-zh : 중국어 

- 이미지

drawable-ko-hdpi

drawable-ja-hdpi

drawable-zh-hdpi

- 조합

drawable-en-rUS-land

drawable-en-rGB-hdpi

drawable-port-hdpi

values-fr-rCA