앱바(Appbar)에 툴바(Toolbar) , 탭(Tab)추가하기

탭(Tab) 클릭시 Fragment 활용하여 화면전화하며 보여주기



라이브러리 추가

com.android.support:design:23.4.0



values폴더 > styles.xml

기본액션바가 없도록 스타일변경

1
2
3
4
5
6
7
    <!--parent="Theme.AppCompat.Light.NoActionBar" : 액션바가 없는 스타일-->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
cs



MainActivity.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
public class MainActivity extends AppCompatActivity {
 
    Toolbar toolbar;
 
    Fragment1 fragment1;
    Fragment2 fragment2;
    Fragment3 fragment3;
 
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        //setSupportActionBar : 액션바 설정
        toolbar = (Toolbar)findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
 
        //액션바 기본 타이틀 보여지지 않게
        ActionBar actionBar = getSupportActionBar();
        actionBar.setDisplayShowTitleEnabled(false);
 
        //Fragment : 탭 클릭시 보여줄 화면들
        fragment1 = new Fragment1();
        fragment2 = new Fragment2();
        fragment3 = new Fragment3();
 
        //기본으로 첫번째 Fragment를 보여지도록 설정
        getSupportFragmentManager().beginTransaction().replace(R.id.container, fragment1).commit();
 
 
        //TabLayout에 Tab 3개 추가
        TabLayout tabs = (TabLayout)findViewById(R.id.tabs);
        tabs.addTab(tabs.newTab().setText("통화기록"));
        tabs.addTab(tabs.newTab().setText("스팸기록"));
        tabs.addTab(tabs.newTab().setText("연락처"));
 
        //탭 선택리스너
        tabs.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener(){
            //탭선택시
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                int position = tab.getPosition();
                Log.d("MainActivity", "선택된 탭 : "+position);
 
                Fragment selected = null;
                if(position==0){
                    selected = fragment1;
                }else if(position==1){
                    selected = fragment2;
                }else if(position==2){
                    selected = fragment3;
                }
 
                getSupportFragmentManager().beginTransaction().replace(R.id.container, selected).commit();
            }
            //탭선택해제시
            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
 
            }
            //선탭된탭을 다시 클릭시
            @Override
            public void onTabReselected(TabLayout.Tab tab) {
 
            }
        });
    }
}
cs



activity_main.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">
 
    <!--CoordinatorLayout : 액션바 영역을 포함한 전체 화면의 위치를 잡아주는 역할-->
    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <!--AppBarLayout : 액션바 영역-->
        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
            <!--Toolbar : 툴바-->
            <!--android:elevation : 객체의 z값을 올려준다-->
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:background="@color/colorPrimaryDark"
                android:theme="@style/ThemeOverlay.AppCompat.Dark"
                android:elevation="1dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
                <TextView
                    android:id="@+id/titleText"
                    android:text="타이틀"
                    android:textAppearance="@style/Base.TextAppearance.Widget.AppCompat.Toolbar.Title"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" />
            </android.support.v7.widget.Toolbar>
            <!--//Toolbar-->
 
            <!--TabLayout : 탭-->
            <!--app:tabMode="fixed" , app:tabGravity="fill" : 탭너비 동일하게-->
            <android.support.design.widget.TabLayout
                android:id="@+id/tabs"
                app:tabMode="fixed"
                app:tabGravity="fill"
                app:tabTextColor="@color/colorPrimary"
                app:tabSelectedTextColor="@color/colorAccent"
                android:elevation="1dp"
                android:background="@android:color/background_light"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />
            <!--//TabLayout-->
        </android.support.design.widget.AppBarLayout>
        <!--//AppBarLayout-->
 
        <!--화면내용-->
        <FrameLayout
            android:id="@+id/container"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </android.support.design.widget.CoordinatorLayout>
    <!--//CoordinatorLayout-->
 
</RelativeLayout>
 
cs



Fragment 화면(1~3)

Fragment1.java

1
2
3
4
5
6
7
8
9
10
public class Fragment1 extends Fragment {
 
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment1, container, false);
 
        return view;
    }
}
cs



fragment1.xml

1
2
3
4
5
6
7
8
9
10
11
12
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:background="#2BA5BA"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <Button
        android:text="첫번째"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>
cs




결과

TabLayout의 Tab을 클릭할때마다 화면이 바뀐다

  



저작자표시

'IT > - 프로그래밍' 카테고리의 다른 글

반응형웹 미디어쿼리 예제 - 화면너비에 따라 구조 변경하기  (1) 2016.08.24
안드로이드 앱버전코드, 앱버전명 가져오기  (0) 2016.08.23
안드로이드 뷰플리퍼(View Flipper) 사용하여 화면 슬라이드 구현하기  (6) 2016.08.21
반응형웹 미디어쿼리 예제  (0) 2016.08.21
반응형웹 멀티미디어 요소에 가변너비 적용하기  (0) 2016.08.21

안드로이드 뷰플리퍼(View Flipper) 사용하여 화면 슬라이드 구현하기



MainActivity.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
public class MainActivity extends AppCompatActivity implements ViewFlipperAction.ViewFlipperCallback {
 
    //뷰플리퍼
    ViewFlipper flipper;
    //인덱스
    List<ImageView> indexes;
 
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        //UI
        flipper = (ViewFlipper)findViewById(R.id.flipper);
        ImageView index0 = (ImageView)findViewById(R.id.imgIndex0);
        ImageView index1 = (ImageView)findViewById(R.id.imgIndex1);
        ImageView index2 = (ImageView)findViewById(R.id.imgIndex2);
 
        //인덱스리스트
        indexes = new ArrayList<>();
        indexes.add(index0);
        indexes.add(index1);
        indexes.add(index2);
 
        //xml을 inflate 하여 flipper view에 추가하기
        //inflate
        LayoutInflater inflater = (LayoutInflater)getSystemService(LAYOUT_INFLATER_SERVICE);
        View view1 = inflater.inflate(R.layout.viewflipper1, flipper, false);
        View view2 = inflater.inflate(R.layout.viewflipper2, flipper, false);
        View view3 = inflater.inflate(R.layout.viewflipper3, flipper, false);
        //inflate 한 view 추가
        flipper.addView(view1);
        flipper.addView(view2);
        flipper.addView(view3);
 
        //리스너설정 - 좌우 터치시 화면넘어가기
        flipper.setOnTouchListener(new ViewFlipperAction(this, flipper));
    }
 
    //인덱스 업데이트
    @Override
    public void onFlipperActionCallback(int position) {
        Log.d("ddd", ""+position);
        for(int i=0; i<indexes.size(); i++){
            ImageView index = indexes.get(i);
            //현재화면의 인덱스 위치면 녹색
            if(i == position){
                index.setImageResource(R.drawable.green);
            }
            //그외
            else{
                index.setImageResource(R.drawable.white);
            }
        }
    }
}
 
cs



activity_main.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <LinearLayout
        android:gravity="center"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <ImageView
            android:id="@+id/imgIndex0"
            android:src="@drawable/white"
            android:padding="10dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <ImageView
            android:id="@+id/imgIndex1"
            android:src="@drawable/white"
            android:padding="10dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <ImageView
            android:id="@+id/imgIndex2"
            android:src="@drawable/white"
            android:padding="10dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>
 
    <LinearLayout
        android:id="@+id/buttonLayout"
        android:orientation="horizontal"
        android:layout_gravity="center_horizontal"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <ViewFlipper
            android:id="@+id/flipper"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </LinearLayout>
 
</LinearLayout>
 
cs



ViewFlipperAction.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
public class ViewFlipperAction implements View.OnTouchListener {
 
    Context context;
 
    //전체화면개수
    int countIndexes;
    //현재화면인덱스
    int currentIndex;
    //터치시작 x좌표
    float downX;
    //터치끝 x좌표
    float upX;
    ViewFlipper flipper;
 
    //
    ViewFlipperCallback indexCallback;
 
 
    //인터페이스 - 탭 클릭시 이미지 변경하기 위한 인터페이스
    //여러 액티비티가 fragment를 호출하여도 동일한 인터페이스를 구현하도록 한다
    public static interface ViewFlipperCallback{
        public void onFlipperActionCallback(int position);
    }
 
    public ViewFlipperAction(Context context, ViewFlipper flipper){
        this.context = context;
        this.flipper = flipper;
 
        if(context instanceof ViewFlipperCallback){
            indexCallback = (ViewFlipperCallback)context;
        }
 
        currentIndex = 0;
        downX = 0;
        upX = 0;
        countIndexes = flipper.getChildCount();
 
        //인덱스 업데이트
        indexCallback.onFlipperActionCallback(currentIndex);
    }
 
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        //터치시작
        if(event.getAction()==MotionEvent.ACTION_DOWN){
            downX = event.getX();
        }
        //터치종료
        else if(event.getAction()==MotionEvent.ACTION_UP){
            upX = event.getX();
 
            //왼쪽 -> 오른쪽
            if(upX < downX){
                //애니메이션
                flipper.setInAnimation(AnimationUtils.loadAnimation(context, R.anim.push_left_in));
                flipper.setOutAnimation(AnimationUtils.loadAnimation(context, R.anim.push_left_out));
 
                //인덱스체크 - 마지막화면이면 동작없음
                if(currentIndex < (countIndexes-1)){
                    flipper.showNext();
 
                    currentIndex++;
                    //인덱스 업데이트
                    indexCallback.onFlipperActionCallback(currentIndex);
                }
            }
            //오른쪽 -> 왼쪽
            else if(upX > downX){
                //애니메이션 설정
                flipper.setInAnimation(AnimationUtils.loadAnimation(context, R.anim.push_right_in));
                flipper.setOutAnimation(AnimationUtils.loadAnimation(context, R.anim.push_right_out));
 
                //인덱스체크 - 첫번째화면이면 동작없음
                if(currentIndex > 0){
                    flipper.showPrevious();
 
                    currentIndex--;
                    //인덱스 업데이트
                    indexCallback.onFlipperActionCallback(currentIndex);
                }
            }
        }
 
        return true;
    }
}
 
cs



screenview.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <!-- indicator : 몇번째 화면인지 나타냄 -->
    <FrameLayout
        android:background="#00f"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <LinearLayout
            android:gravity="center"
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <ImageView
                android:src="@drawable/white"
                android:padding="10dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
            <ImageView
                android:src="@drawable/white"
                android:padding="10dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
            <ImageView
                android:src="@drawable/white"
                android:padding="10dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </LinearLayout>
    </FrameLayout>
 
    <LinearLayout
        android:id="@+id/buttonLayout"
        android:orientation="horizontal"
        android:layout_gravity="center_horizontal"
        android:layout_width="wrap_content"
        android:layout_height="match_parent">
        <ViewFlipper
            android:id="@+id/flipper"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </LinearLayout>
 
</FrameLayout>
cs



viewflipper1.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:background="#f00"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <TextView
        android:text="첫번째 View Filpper"
        android:textSize="30dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
 
</LinearLayout>
cs



viewflipper2.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:background="#0f0"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <TextView
        android:text="두번째 View Filpper"
        android:textSize="30dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
 
</LinearLayout>
cs



viewflipper3.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:background="#00f"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <TextView
        android:text="세번째 View Filpper"
        android:textSize="30dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
 
</LinearLayout>
cs



anim폴더 > push_left_in.xml

1
2
3
4
5
6
7
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <!--오른쪽에서 왼쪽으로 이동-->
    <translate android:fromXDelta="100%p" android:toXDelta="0%p" android:duration="300"/>
    <!-- 안보였다가 보여짐 -->
    <alpha android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="300" />
</set>
cs



anim폴더 > push_left_out.xml

1
2
3
4
5
6
7
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <!--오른쪽에서 왼쪽으로 이동-->
    <translate android:fromXDelta="0%p" android:toXDelta="-100%p" android:duration="300"/>
    <!--보였다가 안보여짐-->
    <alpha android:fromAlpha="1.0" android:toAlpha="0.0" android:duration="300" />
</set>
cs



anim.폴더 > push_right_in.xml

1
2
3
4
5
6
7
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <!--왼쪽에서 오른쪽으로 이동-->
    <translate android:fromXDelta="-100%p" android:toXDelta="0%p" android:duration="300"/>
    <!-- 안보였다가 보여짐 -->
    <alpha android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="300" />
</set>
cs



anim폴더 > push_right_out.xml

1
2
3
4
5
6
7
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <!--왼쪽에서 오른쪽으로 이동-->
    <translate android:fromXDelta="0%p" android:toXDelta="100%p" android:duration="300"/>
    <!--보였다가 안보여짐-->
    <alpha android:fromAlpha="1.0" android:toAlpha="0.0" android:duration="300" />
</set>
cs



결과

  


저작자표시

'IT > - 프로그래밍' 카테고리의 다른 글

안드로이드 앱버전코드, 앱버전명 가져오기  (0) 2016.08.23
안드로이드 앱바(Appbar)에 툴바(Toolbar) , 탭(Tab)추가하기  (2) 2016.08.22
반응형웹 미디어쿼리 예제  (0) 2016.08.21
반응형웹 멀티미디어 요소에 가변너비 적용하기  (0) 2016.08.21
반응형웹 em, rem, vw, vh, vmin, vmax  (0) 2016.08.21

미디어쿼리 예제 

화면너비에 따라서 다른 CSS 적용하기

@media [only 또는 not] [미디어유형] [and 또는 ,(콤마)] (조건문){실행문}



css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
@charset "utf-8";
/** 전체박스 */
#wrap {
    width: 90%;
    height: 500px;
    margin: 0 auto;
    border: 4px solid #00f;
}
/* min - 크기가 작은순서대로 작성, max - 크기가 큰순서대로 작성 */
/* all : 모든장치 (default) */
/* 너비가 320px 이상일때 */
@media all and (min-width:320px){
    #wrap {
        width: 30%;
        background: #00d2a5;
    }
}
/* 너비가 600px 이상일때 */
@media all and (min-width:600px){
    #wrap {
        width: 60%;
        background: #40b0f9;
    }
}
/* 너비가 1024px 이상일때 */
@media all and (min-width:1024px){
    #wrap {
        width: 90%;
        background: #f45750;
    }
}
cs



결과

 


저작자표시

'IT > - 프로그래밍' 카테고리의 다른 글

안드로이드 앱바(Appbar)에 툴바(Toolbar) , 탭(Tab)추가하기  (2) 2016.08.22
안드로이드 뷰플리퍼(View Flipper) 사용하여 화면 슬라이드 구현하기  (6) 2016.08.21
반응형웹 멀티미디어 요소에 가변너비 적용하기  (0) 2016.08.21
반응형웹 em, rem, vw, vh, vmin, vmax  (0) 2016.08.21
반응형웹 가변 패딩(padding)주기  (0) 2016.08.21

멀티미디어 요소에 가변너비 적용하기

너비와 최대너비에 % 너비값을 주어 가변적으로 보이도록 함

width: 100%;

max-width: 100%;



html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <style>
    /** 전체박스 */
    #wrap {
        width: 90%;
        margin: 0 auto;
        border: 4px solid #00f;
    }
    #wrap div {
        display: inline-block;
        width: 50%;
        margin: 0 auto;
    }    
    img, video {
        /* 너비와 최대너비에 % 너비값을 주어 가변적으로 보이도록 함 */
        width: 100%;
        max-width: 100%;    /* max-width: 100% 요소의 기본크기 이상으로 늘어나지 않는다 */
    }
    </style>
    <style>
    </style>
    <title>Insert title here</title>
</head>
 
<body>
<div id="wrap">
    <div>
        <video controls>
            <source src="source/video.mp4" type="video/mp4"></source>
            <source src="source/video.ogv" type="video/ogg"></source>
            <source src="source/video.webm" type="video/webm"></source>
        </video>
    </div><div>
        <img src="source/img_01.jpg" />    
    </div>
</div>
</body>
</html>
cs



결과

화면너비에 상관없이 멀티미디어 요소 너비가 변한다

 


저작자표시

'IT > - 프로그래밍' 카테고리의 다른 글

안드로이드 뷰플리퍼(View Flipper) 사용하여 화면 슬라이드 구현하기  (6) 2016.08.21
반응형웹 미디어쿼리 예제  (0) 2016.08.21
반응형웹 em, rem, vw, vh, vmin, vmax  (0) 2016.08.21
반응형웹 가변 패딩(padding)주기  (0) 2016.08.21
반응형웹 가변 마진(margin)주기  (0) 2016.08.21

em, rem, vw, vh, vmin, vmax 

em : 부모 font-size를 상속받음

rem : 부모 font-size를 상속받지 않고 2em 으로 표시됨

vw : 브라우저너비의 해당 %

vh : 브라우저높이의 해당 %

vmin : 브라우저 너비와 높이중 짧은쪽의 해당 %

vmax : 브라우저 너비와 높이중 큰쪽의 해당 %



html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <style>
    p {
        margin: 0;
        padding: 0;
        font-size: 2em;
    }
    /* rem : 부모 font-size를 상속받지 않고 2em 으로 표시됨 */
    p span:first-child {
        font-size: 2rem;
    }
    /** em : 부모 font-size를 상속받음 */
    p span:last-child {
        font-size: 2em;
    }
    
    /** 브라우저 비율에 따라서 */
    p.vw {
        /* 5vw : 브라우저너비의 5% */
        font-size: 5vw;
    }
    p.vh {
        /* 5vh : 브라우저높이의 5% */
        font-size: 5vh;
    }
    p.vmin {
        /* 5vmin : 브라우저 너비와 높이중 짧은쪽의 5% */
        font-size: 5vmin;
    }
    p.5vmax {
        /* 5vmax : 브라우저 너비와 높이중 큰쪽의 5% */
        font-size: 5vmax;
    }
    </style>
    <title>Insert title here</title>
</head>
 
<body>
<div id="wrap">
    <p>
        (부모) 단위 = 2em;
        <br/>
        <span>
            (자식) 단위 = 2rem;
        </span>
        <br/>
        <span>
            (자식) 단위 = 2em;
        </span>
    </p>
    <p class="vw">
        단위 = 5vw
    </p>
    <p class="vh">
        단위 = 5vh
    </p>
    <p class="vmin">
        단위 = 5vmin
    </p>
    <p class="vmax">
        단위 = 5vmax
    </p>
</div>
</body>
</html>
cs



결과

 



저작자표시

'IT > - 프로그래밍' 카테고리의 다른 글

반응형웹 미디어쿼리 예제  (0) 2016.08.21
반응형웹 멀티미디어 요소에 가변너비 적용하기  (0) 2016.08.21
반응형웹 가변 패딩(padding)주기  (0) 2016.08.21
반응형웹 가변 마진(margin)주기  (0) 2016.08.21
반응형웹 가로너비를 1대2로 나누기  (0) 2016.08.21

가변 패딩(padding)주기

가변패딩 공식 = (패딩값 % 부모박스 가로너비) * 100



html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <style>
    /* 전체박스 */
    #wrap {
        width: 90%;
        heigth: 500px;
        margin: 0 auto;
        border: 4px solid #00f;
    }
    /** 글자 */
    #wrap p {
        width: 52%;
        /* 가변패딩 공식 = (패딩값 % 부모박스 가로너비) * 100 */
        padding: 40px 4%;    /* 위아래 40px 왼오른 4% */
        margin: 0 auto;
        background: #f7e041;
    }
    </style>
    <title>Insert title here</title>
</head>
 
<body>
<div id="wrap">
    <p>모든 국민은 신체의 자유를 가진다. 모든 국민은 신속한 재판을 받을 권리를 가진다. 공무원의 직무상 불법행위로 손해를 받은 국민은 법률이 정하는 바에 의하여 국가 또는 공공단체에 정당한 배상을 청구할 수 있다. 이 경우 공무원 자신의 책임은 면제되지 아니한다. 신체장애자 및 질병·노령 기타의 사유로 생활능력이 없는 국민은 법률이 정하는 바에 의하여 국가의 보호를 받는다. 군인·군무원·경찰공무원 기타 법률이 정하는 자가 전투·훈련 등 직무집행과 관련하여 받은 손해에 대하여는 법률이 정하는 보상 외에 국가 또는 공공단체에 공무원의 직무상 불법행위로 인한 배상은 청구할 수 없다. 대통령이 임시회의 집회를 요구할 때에는 기간과 집회요구의 이유를 명시하여야 한다. 모든 국민은 법률이 정하는 바에 의하여 국방의 의무를 진다.</p>
</div>
</body>
</html>
cs



결과

화면크기에 상관없이 패딩너비가 4%를 유지한다

 


저작자표시

'IT > - 프로그래밍' 카테고리의 다른 글

반응형웹 멀티미디어 요소에 가변너비 적용하기  (0) 2016.08.21
반응형웹 em, rem, vw, vh, vmin, vmax  (0) 2016.08.21
반응형웹 가변 마진(margin)주기  (0) 2016.08.21
반응형웹 가로너비를 1대2로 나누기  (0) 2016.08.21
반응형웹 미디어쿼리(media) 와 뷰포트(viewport)  (0) 2016.08.21

가변 마진(margin)주기

가변마진 공식 = (마진값 % 부모박스 가로너비) * 100



html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <style>
    /* 전체박스 */
    #wrap {
        width: 90%;
        height: 500px;
        margin: 0 auto;
        border: 5px solid #00f;
    }
    /* 부모박스 */
    .container {
        width: 93.75%;
        height: 100%;
        margin: 0 auto;
    }
    /* 자식박스 */
    .container div {
        display: inline-block;
        height: 100%;
    }
    /* 자식박스 - 왼쪽 */
    .container div:first-child {
        width: 40%;
        /* 가변마진 공식 = (마진값 % 부모박스 가로너비) * 100 */
        margin-right: 20%;
        background: #e75d5d;
    }
    /* 자식박스 - 오른쪽 */
    .container div:last-child {
        width: 40%;
        background: #2dcc70;
    }
    </style>
    <title>Insert title here</title>
</head>
 
<body>
<div id="wrap">
    <div class="container">
        <!-- 태그를 붙여써야 박스가 붙어서 보인다 안그러면 약간의 여유너비을 줘야함 -->
        <div></div><div></div>
    </div>
</div>    
</body>
</html>
cs



결과

화면크기에 상관없이 마진너비가 20%를 유지한다


저작자표시

'IT > - 프로그래밍' 카테고리의 다른 글

반응형웹 em, rem, vw, vh, vmin, vmax  (0) 2016.08.21
반응형웹 가변 패딩(padding)주기  (0) 2016.08.21
반응형웹 가로너비를 1대2로 나누기  (0) 2016.08.21
반응형웹 미디어쿼리(media) 와 뷰포트(viewport)  (0) 2016.08.21
안드로이드 안드로이드 버전, SDK(API)버전, 빌드버전 가져오기  (0) 2016.08.21

가로너비를  1대2로 나누기

화면크기에 상관없이 가로너비를 1대2로 나눈다


html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <style>
    /* 전체박스 */
    #wrap {
        width: 90%;
        height: 500px;
        margin: 0 auto;
        border: 5px solid #00f;
    }
    /* 부모박스 */
    .container {
        width: 93.75%;
        height: 100%;
        margin: 0 auto;
    }
    /* 자식박스 */
    .container div {
        display: inline-block;
        height: 100%;
    }
    /* 자식박스 - 왼쪽 */
    .container div:first-child {
        /* 가변너비 공식 = (자식박스 가로너비 % 부모박스 가로너비) * 100 */
        width: 33.3%;
        background: #e75d5d;
    }
    /* 자식박스 - 오른쪽 */
    .container div:last-child {
        width: 66.7%;
        background: #2dcc70;
    }
    </style>
    <title>Insert title here</title>
</head>
 
<body>
<div id="wrap">
    <div class="container">
        <!-- 태그를 붙여써야 박스가 붙어서 보인다 안그러면 약간의 여유너비을 줘야함 -->
        <div></div><div></div>
    </div>
</div>    
</body>
</html>
cs



결과


저작자표시

'IT > - 프로그래밍' 카테고리의 다른 글

반응형웹 가변 패딩(padding)주기  (0) 2016.08.21
반응형웹 가변 마진(margin)주기  (0) 2016.08.21
반응형웹 미디어쿼리(media) 와 뷰포트(viewport)  (0) 2016.08.21
안드로이드 안드로이드 버전, SDK(API)버전, 빌드버전 가져오기  (0) 2016.08.21
안드로이드 키보드가 올라올때 밑의 버튼이 올라오는 것 막기  (0) 2016.08.21

미디어쿼리(media) 와 뷰포트(viewport)


미디어쿼리(media) : 디바이스의 환경 또는 종류를 감지하여 웹사이트를 변경

뷰포트(viewport) : 디바이스의 보이는 영역을 디바이스의 실제화면크기로 변경


html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 디바이스의 보이는 영역을 디바이스의 실제화면크기로 변경 -->
    <meta name="viewport" 
          content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
          
    <style>
    /* 미디어쿼리 : 디바이스의 환경 또는 종류를 감지하여 웹사이트를 변경 */
    @media all and (min-width:320px){
        body{
            background: #e65d5d;
        }
    }
    @media all and (min-width:600px){
        body{
            background: #2dcc70;
        }
    }
    @media all and (min-width:960px){
        body{
            background: #6fc0d1;
        }
    }
    </style>
    <title>Insert title here</title>
</head>
 
<body>
    <img src="img_01.jpg" />
</body>
</html>
cs



결과

화면크기에 따라 다르게 보인다

 


저작자표시

'IT > - 프로그래밍' 카테고리의 다른 글

반응형웹 가변 마진(margin)주기  (0) 2016.08.21
반응형웹 가로너비를 1대2로 나누기  (0) 2016.08.21
안드로이드 안드로이드 버전, SDK(API)버전, 빌드버전 가져오기  (0) 2016.08.21
안드로이드 키보드가 올라올때 밑의 버튼이 올라오는 것 막기  (0) 2016.08.21
안드로이드 화면진입시 키보드 자동으로 올라오는거 막기  (0) 2016.08.18

안드로이드 버전, SDK(API)버전, 빌드버전 가져오기


안드로이드 버전 

ex)4.4.2 

1
2
3
4
    //OS Version
    public String getOsVersion(){
        return Build.VERSION.RELEASE;
    }
cs



SDK(API) 버전

ex)19

1
2
3
4
    //SDK Verion
    public int getSDK(){
        return Build.VERSION.SDK_INT;
    }
cs



빌드버전 - 단말기 소프트웨어 빌드버전 (앱 빌드버전이 아님

1
2
3
4
    //소프트웨어 빌드버전 - 안드로이드 소스 컨트롤을 위한 내부 빌드 정보
    public String getSoftwareBuildVersion(){
        return Build.VERSION.INCREMENTAL;
    }
cs



결과


저작자표시

'IT > - 프로그래밍' 카테고리의 다른 글

반응형웹 가로너비를 1대2로 나누기  (0) 2016.08.21
반응형웹 미디어쿼리(media) 와 뷰포트(viewport)  (0) 2016.08.21
안드로이드 키보드가 올라올때 밑의 버튼이 올라오는 것 막기  (0) 2016.08.21
안드로이드 화면진입시 키보드 자동으로 올라오는거 막기  (0) 2016.08.18
안드로이드 카메라앱 호출  (0) 2016.08.18

+ Recent posts

티스토리툴바