●안드로이드 레이아웃을 만들땐 3가지 방법이 있다.

1. 드래그 앤 드로그(잘 사용 안함)

2. xml 코드 편집(제일 많이 사용)

3. 순수 자바 코드로 작성- 디자인 외 작업에 주로 사용되며, 어떤 경우에 위젯을 커스터마이징 할 때 위력을 발휘한다. 단, 무조건 좋은게 아니라 디자인을 구현할때는 오히려 효율성 떨어진다.




● xml 파일 추가하기

 - res->layout폴더에 Android XML Layout File 을 추가한다.









●위젯 

- 위젯은 남을 포함할수 있는 위젯(그룹위젯), 포함 당하는 위젯 2가지가 있다.

다른 위젯을 포함(ViewGroup)하는 위젯은 단순포함인지 배치와 관련(레이아웃)되는 위젯인지로 나뉜다. 

레이아웃을 만들때 LinearLayout을 가장 많이 사용한다.





●위젯을 만들면 반드시 layout_width, layout_height 두가지를 선언해줘야한다. 





Fill_parent vs Match_parent

- Fill_parent와 Match_parent는 같은 것이다.

Match_parent가 최근에 나온 것으로 주로 Match_parent를 쓰면된다.





●ex1


<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical" >


    <!-- 빨간 레이아웃 -->

    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="0dp"

        android:layout_weight="5"

        android:background="#ff0000"

        android:orientation="horizontal" >

         <!-- 하늘색 레이아웃 -->

        <LinearLayout android:layout_width="0dp"

            android:layout_height="match_parent"

            android:layout_weight="1"

            android:background="#00D8FF">

        </LinearLayout>

         <!-- 녹색 레이아웃 -->

        <LinearLayout android:layout_width="0dp"

            android:layout_height="match_parent"

            android:layout_weight="1"

            android:background="#22741C">

        </LinearLayout>

        

    </LinearLayout>


    <!-- 노란 레이아웃 -->

    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="0dp"

        android:layout_weight="5"

        android:background="#ffdd00" >

    </LinearLayout>


    <!-- 하얀 레이아웃 -->

    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="0dp"

        android:layout_weight="5"

        android:background="#ffffff" >

    </LinearLayout>


</LinearLayout>






●ex2


<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:gravity="center"

    android:orientation="vertical" >


    <Button

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="나 버튼" />


</LinearLayout>













●ex3


<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical"

    android:background="#ffdd00"

    android:gravity="center" >

    

    <LinearLayout 

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:orientation="vertical"

        android:background="#66cc66"

        android:layout_margin="15dp">

        <!-- 아이디 입력라인 -->

        <LinearLayout 

            android:layout_width="match_parent"

            android:layout_height="0dp"

            android:layout_weight="1"

            android:orientation="horizontal"

            android:background="#ffcc99">

            <TextView 

                android:layout_width="0dp"

                android:layout_height="wrap_content"

                android:text="ID"

                android:textSize="25dp"

                android:layout_weight="2"

                android:background="#F361A6"/>

            <EditText android:layout_width="0dp"

                android:layout_height="wrap_content"

                android:text="아이디를 입력하세요"

                android:background="#ffffff"

                android:layout_weight="3"/>

            

        </LinearLayout>

        <!-- 비밀번호 입력라인 -->

        <LinearLayout 

            android:layout_width="match_parent"

            android:layout_height="0dp"

            android:layout_weight="1"

            android:orientation="horizontal"

            android:background="#747474">

            <TextView 

                android:layout_width="0dp"

                android:layout_height="wrap_content"

                android:text="비밀번호"

                android:textSize="25dp"

                android:layout_weight="2"

                android:background="#F361A6"/>

            <EditText android:layout_width="0dp"

                android:layout_height="wrap_content"

                android:text="비밀번호를 입력하세요"

                android:background="#ffffff"

                android:layout_weight="3"/>

            

        </LinearLayout>

        <!-- 버튼 라인 -->

        <LinearLayout 

            android:layout_width="match_parent"

            android:layout_height="0dp"

            android:layout_weight="1"

            android:orientation="horizontal"

            android:background="#22741C"

            android:gravity="right">


            <Button

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:text="로그인" />


            <Button

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:text="회원가입" />

            

        </LinearLayout>

    </LinearLayout>

</LinearLayout>














●자바코드로 레이아웃 위젯 만들기

package com.example.ex2;

import android.app.Activity;
import android.os.Bundle;
import android.view.Gravity;
import android.view.ViewGroup.LayoutParams;
import android.widget.Button;
import android.widget.LinearLayout;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //디자인에 사용할 xml을 명시한다.
        //setContentView(R.layout.activity_main);
        
        
        //안드로이드에서 디자인을 구현하는 방법은 총3가지가 있다.
        //1. 드래그앤 드래그
        //2. xml로 디자인
        //3. java코드로 디자인
        
        //ex2.xml의 디자인 코드를 순수 자바로 작성
        
        //1단계:리니어 레이아웃 객체를 메모리에 올리자(일반클래스이므로 new로 올리자)
        LinearLayout layout = null;
        //모든 위젯은 자신이 붙여질 액티비티를 알아야 하므로, 생성자의 인수로 넣어줘야 한다.
        layout = new LinearLayout(this);
        //vertical, horizontal 상수를 인수로 대입
        layout.setOrientation(LinearLayout.VERTICAL);
        //width, height 값 명시하기
        //레이아웃 파라미터 객체를 사용해야함
        //각종 속성을 지정할대 유용
        LayoutParams params = null;
        params = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
        
        //리니어 레이아웃에 파라미터를 적용한다.
        layout.setLayoutParams(params);
        layout.setGravity(Gravity.CENTER);
        //버튼을 생성하여 리니어에 부착해보자
        Button btn;
        btn = new Button(this);
        btn.setText("자바로 만든 버튼");
        
        //버튼에 사용할 레이아웃 파람스객체 생성 및 적용
        LayoutParams params2 = null;
        params2 = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        
        btn.setLayoutParams(params2);
        
        //리니어 레이아웃에 버튼 부착
        layout.addView(btn);
        
        //xml로 디자인을 구성하지 않고, 코드중 LinearLayout을 부모로하여 디자인을 수정했기 때문에
        //setContentView메서드의 인수로 LinearLayout을 넣어주면 된다.
        
        setContentView(layout);
        
    }
}














●프로젝트 실행하기

- 상단 세모모양을 클릭한 후 Run Configurations를 선택한다.







- 상단 탭 중 Target을 클릭한 후 3번째 automatiscally pick~~을 선택 한 후 본인이 만든 AVD을 체크 한후 apply를 누르고 Run을 실행한다.











Posted by -현's-

댓글을 달아 주세요

 

●사각형 그리기

- 사각형 툴을 선택하고 화면에 드래그하면 직사각형이 그려진다.

- shift를 누른채 드래그하면 정사각형이 그려진다.

- shift+alt를 누른채 드래그하면 드래그를 시작한 곳을 중심으로 정사각형이 그려진다.

- 드래그하지 않고 화면을 클릭하면 사각형 길이,높이 수치를 입력할 수 있다

 

 

 

 

 

●모서리가 둥근 사각형, 원

- 사각형툴을 계속 누르면 다른 도형을 선택할 수 있다. 모서리가 둥근 사각형과 원은 사각형 그리기와 같다. 

 

- ctrl을 누르고 드래그하면 커서가 원위에 온다.

 

 

 

 

 

●다각형그리기

- 사각형 툴을 길게 누른후 다각형 툴을 선택한다.

- 화면에 드래그해서 다각형을 그린다.

- shift를 누른채 드래그하면 다각형 각도가 고정된다.

- 다각형 툴을 선택한 후 화면을 클릭하면 반지름과 각 개수를 입력해서 다각형을 그릴수 있다.

- 드래그 한 채로 화살표방향키 위,아래를 누르면 각이 추가,제거 된다.

 

 

 

 

 

●별 그리기

- 도형툴을 길게 누른후 별 툴을 선택하고 화면에 드래그한다.

- shift를 누른채 드래그하면 각이 고정된다.

- 드래그 한 상태에서 ctrl을 누르고 다시 드래그하면 내각이 고정된 채 외각을 조절할 수 있다.

- 드래그 한 상태에서 화살표 방향키 위,아래를 누르면 각이 추가,제거된다.

 

 

 

 

 

 

 

●직선 그리기

- 선 툴을 선택하고 드래그한다.

- 선 툴을 선택하고 화면에 클릭하면 길이와 각도를 입력해서 정확한 선을 그릴 수 있다.

 

 

 

 

 

 

●곡선 그리기

- 선 툴을 길게 눌러 곡선 툴을 선택하고 드래그하거나 화면을 클릭해서 원하는 수치를 입력한다.

 

 

 

 

 

 

 

●나선 그리기

- 선 툴을 길게 누른 후 나선 툴을 선택하고 드래그하거나 화면을 클릭한다.

- shift를 누르고 드래그하면 나선의 각도가 반듯하게 된다.

- ctrl키를 누르면 원주가 고정되고 나선이 뻗어가는 비율을 조절할 수 있다.

- 드래그하고 화살표 방향키 위,아래를 누그면 세그먼트가 추가,제거된다.

 

 

 

 

 

●도형툴을 선택하고 드래그 하고 있는 도중 space바를 누르면 그리던 모양을 유지한채 위치를 이동시킬수 있다.

 

 

 

 

 

 

 

 

 

 

 

Posted by -현's-

댓글을 달아 주세요

 

 

상단 메뉴중 'Window'에서 선택한다

 

 

 

 

●Align - 선택한 오브젝트 위치와 간격을 정렬한다.

 

 

 

 

●Appearance - 오브젝트 속성과 적용된 효과를 볼수 있고, 컨틀로 할 수 있다.

 

 

 

 

 

●Brushes - 패스를 따라 여러가지 도안이 그려진다.

 

 

 

●Color - 오브젝트의 선,면 색을 지정한다.

 

 

 

 

 

●Gradient - 오브젝트에 그라디언트 효과를 준다.

 

 

 

 

 

●Magic Wand - 비슷한 성질의 오브젝트를 한번에 선택할 수 있는 패널이다.

 

 

 

 

 

 

●Pathfinder - 서로 겹쳐진 패스를 다양한 스타일에 합체하거나 분리한다.

 

 

 

 

 

 

 

●Stroke - 오브젝트의 선 굵기,모양,스타일을 지정한다.

 

 

 

 

 

 

●Transform - 오브젝트의 좌표, 회전, 기울기를 조절한다.

 

 

 

 

●Transparency - 오브젝트의 투명도를 조절한다.

 

 

 

 

 

 

Posted by -현's-

댓글을 달아 주세요

 

 

 

 

 

1. 선택툴(단축키 - V)

- 오브젝트를 선택하거나 옮긴다.

 

2. 직접선택 툴(단축키 - A)

- 오브젝트 중 일부를 선택하거나, 기준점과 세그먼트를 선택할때 사용한다.

 

3. 마술봉 툴(단축키 - Y)

- 클릭한 곳과 비슷한 소성을 가진 오브젝트를 한번에 선택한다.

 

4. 올가미 툴(단축키 - Q)

- 오브젝트를 드래그하는 방식으로 선택한다.

 

5. 펜 툴(단축키 - P)

- 직선, 곡선, 도형 등의 오브젝트를 그린다.

 

6. 문자 툴(단축키 - T)

- 글자를 입력하고 수정한다.

 

7. 선 툴(단축키 - \)

- 직선, 곡선, 나선형, 사각 그리드, 원형 그리드를 그린다.

 

8. 도형 툴(단축키 - M)

- 사각형, 모서리 둥근 사각형, 원,다각형, 별, 태양 광선을 그린다.

 

9. 브러쉬 툴(단축키 - B)

- 다양한 선 모양과 붓 터치 느낌을 낸다.

 

10. 연필, 스무스, 패스 지우개 툴(단축키 - N)

- 자유롭게 드래그하면서 곡선을 그리거 부드럽게 처리하거나 패스의 기준점과 곡선을 지운다.

 

11. 회전 툴, 반전 툴(단축키 - R, O)

- 오브젝트를 회전시키거나 반전시킨다.

 

12. 크기 조절 툴(단축키 - S)

- 선택한 오브젝트의 크기를 조절하거나 기울이고, 형태를 자연스럽게 유지하면서 오브젝트를 변형시킨다.

 

13. 왜곡 툴(단축키 - 시프트+R)

- 오브젝트를 다양한 방법으로 왜곡시킨다.

 

14. 자유 변형 툴(단축키 - E)

- 오브제그를 선택했을 때 나타나는바운디 박스의 기준점을 조절하여 크기,기울기,회전 정도를 조절한다.

 

15. 심벌 툴(단축키 - 시프트+S)

- 도큐먼트에 심벌을 등록하고, 등록한 심벌을 다양한 방법으로 편집한다.

 

16. 그래프 툴(단축키 - J)

- 다양한 형태의 그래프를 만든다.

 

17. 메시 툴(단축키 - U)

- 오브젝트 내면에 그물망모양의 기준점을 추가하여 자연스러운 그레이디언트 효과를 만드나. 메시 툴을 시용해 사진처럼 정교한 일러스트를 그릴 수 있다.

 

18. 그레이디어느 툴(단축키 - G)

- 선택한 오브젝트에 그레이디언트 효과를 준다.

 

19. 스포이트 툴(단축키 - I)

- 선택도니 오브젝트에 클릭한 오브젝트 속성을 복제하여 적용한다.

 

20. 블렌드 툴(단축키 - W)

- 속성이 다른 두 가지 오브젝트 사이를 자연스럽게 연결해주고, 변화 단계를 자동으로 만들어 준다.

 

21. 슬라이스 툴(단축키 - 시프트+K)

- 이미지를 자른다.

 

22. 가위 툴(단축키 - C)

- 이어져 있는 패스를 잘라준다.

 

23. 손 툴(단축키 - H)

- 작업 화면을 드래그하여 원하는 곳을 볼 수 있다.

 

24. 돋보기 툴(단축키 - Z)

- 화면을 확대한다. ALT키와 함께 사용하면 화면이 축소된다. 더블클릭하면 원래 화면으로 돌아간다.

 

25.

우측상단 - 바꾸기 버튼(단축키 - 시프트+X) - 선택된 오브젝트의 면,선 색을 바꾼다.

좌측하단 - 초기화(단축키 - D) = 선택된 오브젝트나 툴 패널의 면,선 색이 초기화 된다.

 

26. 선택된 면,선 색을 단일색, 그레이디언트,투명으로 처리한다.

 

27. 화면 모드(단축키 - F)

- 작업 화면창을 조절한다.

 

 

 

 

 

 

 

 

Posted by -현's-

댓글을 달아 주세요

●CTH470이랑 CTL470이랑 고민하다가 CTL로 결정했는데 이 두가지의 가장 큰 차이점은 가격,지우개 유무,손가락터치 유무,무선 유무입니다.여기서 무선으로 하려면 추가로 5만원상당의 무선킷을 구입해야 합니다.

전 초보자이고 타블릿 처음 쓰는거라 CTL470으로 구입하였습니다

 

 

 

 

 

 

 

 

 

 

 

 

'IT기기' 카테고리의 다른 글

와콤 타블릿 뱀부 CTL 470  (0) 2013.01.06
갤럭시s2 hd  (0) 2012.09.19
갤럭시탭 7.0인치  (0) 2012.05.01
아이팟터치4  (0) 2011.04.17
Posted by -현's-

댓글을 달아 주세요

 

●기본 화면

 

 

 

 

●메뉴 바 - 파일의 입출력, 편집,도구 등의 내용 등이 있다.

 

 

 

 

 

●메인 툴바 - 모델링,렌더링 등에 관련된 많이 사용되는 기능들을 포함한다.

 

 

 

 

●뷰포트 - 실제 작업하는 공간이다.

 

 

 

 

●커맨드 패널 - 기본적인 도형, 라인, 카메라, 라이트 등에 관련된 모든 것과 편집할 수 있는 도구들이다.

 

 

 

 

●애니메이션에 관련된 작업을 하는 곳이다.

 

 

 

 

'디자인 > 3D Max' 카테고리의 다른 글

3d max 캐릭터 머리 그리기2  (0) 2012.07.25
3d max 캐릭터 머리 그리기1  (0) 2012.07.23
3d max 단축키  (0) 2012.07.20
3d max UI 인터페이스  (0) 2012.07.19
Posted by -현's-

댓글을 달아 주세요

●로고는 h1태그를 써서 그 안에 넣어준다. h1은 페이지 내에서 가장 중요한 것을 나타내는 태그이다.

ex)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>

<style type="text/css">
img{border:0;}

#logo{width:900px; height:200px; margin:10px auto; border:1px solid;}
</style>

</head>
<body>


<h1 id="logo"><img src="image/logo.png" width="900" height="200"/></h1>

</body>
</html>

Posted by -현's-

댓글을 달아 주세요

 

세로 메뉴

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>

 

<style type="text/css">
#menu1{width:100px; }
#menu1 ul{list-style:none; margin: 0;padding: 0; }
</style>

 

</head>
<body>

 

<div id="menu1">
  <ul>
    <li>1111</li>
    <li>2222</li>
    <li>3333</li>
    <li>4444</li>
  </ul>
</div>

 

</body>
</html>

결과

1111

2222

3333

4444

 

 

 

 

●li안에 이미지를 세로로 나열할 때 이미지 사이에 여백이 생길경우, img속성에 'vertical-align:top;'로 설정한다.

 

 

 

 

●가로 메뉴

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>

 

<style type="text/css">
#menu2{width:400px; }
#menu2 ul{margin:0 ;padding: 0; }
#menu2 li{display:inline;}
</style>

 

</head>
<body>

 

<div id="menu2">
 <ul>
   <li>1111</li>
   <li>2222</li>
   <li>3333</li>
   <li>4444</li>
 </ul>
</div>

 

</body>
</html>

 

결과

1111 2222 3333 4444

 

 

 

●li안에 'display:inline;'를 적용하면 가로로 배열이 된다.

 

 

 

●li안에 이미지를 가로로 나열할 때 이미지 사이에 여백이 생기는 경우, li안에 'float:left;'로 설정한다.

 

 

 

 

Posted by -현's-

댓글을 달아 주세요

●웹표준 레이아웃

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>

 

<style type="text/css">
body,div,ul,li,dl,dt,dd,ol,p,h1,h2,h3,h4,h5,h6,form{margin:0; padding:0}
body{font:normal dotum, '돋움';}
ul,il,dl{list-style:none}
img{border:0; vertical-align:top;}
ul{list-style:none; padding:0; margin:0;}

 

#wrap{margin:0; auto; width:900px;  }
#header{float:left; width:900px; height:145; margin-bottom:15px;}
#sidebar{float:left; width:245px;}
#content{float:right; width:645px;}
#footer{float:left; width:900px; margin-top:20px;}
</style>

 

</head>
<body>

 

<div id="wrap">
  <div id="header">a</div>
  <div id="sidebar">b</div>
  <div id="content">c</div>
  <div id="footer">d</div>
</div>

 

</body>
</html> 

 

 

●#wrap{margin:0 auto; width:900px;}

- table에서는 align="center"로 중앙 정렬을 했지만, 웹표준에서는 따로 중앙정렬은 없다. 그래서 중앙정렬을 하려면 가장 바깥 div에 'margin:0 auto'를 선언해 준다. 'margin:0'은 상하 0px라는 뜻이고 'auto'는 좌우를 중앙에 위치하게 한다.

 

 

 

●큰 div(wrap,header,sidebar,content,footer 등)를 만들고 그 안에 세부적인 div를 만든다. 큰 div는 height값을 주지 않고 세부적인 div에 height를 준다.

 

 

 

●width, margin, padding, height 수치를 정확히 계산해서 레이아웃을 만든다. 만들 레이아웃 디자인을 프린트하고 계산기로 위의 값을 계산하면서 하면 편하다.

 

 

 

●margin은 바깥쪽 여백, padding는 안쪽 여백이다.

 

 

 

●padding값은  width값에 포함하지 않는다. 계산할때 따로 더해주어야 한다.

ex)

<div style="padding:10px; width:80px; height:80px;"></div>

여기서 총 길이는 width값 80px와 양쪽 padding값 10px+10px인 100px이다.

 

 

 

●값에 숫자만 쓰면 안되고 px등 단위를 써주어야한다.

 

 

 

●div에 테두리를 사용하려면 'border:1px solid ;border-color:blue;' 를 css에 입력한다.

ex)

#header{float:left; width:900px; height:145px; border:1px solid ; border-color:blue; margin-bottom:15px; }

 

 

 

●연습 예

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>

<style type="text/css">
/* 공통 속성 */
body,div,ul,li,dl,dt,dd,ol,p,h1,h2,h3,h4,h5,h6,form{margin:0; padding:0}
body{font:normal dotum, '돋움';}
ul,il,dl{list-style:none}
img{border:0; vertical-align:top;}
ul{list-style:none; padding:0; margin:0;}
/* 큰 div */
#wrap{margin:20px auto; width:900px;  }
#header{float:left; width:900px; height:145px; background:green; margin-bottom:15px; }
#sidebar{float:left; width:245px;}
#content{float:right; width:645px;}
#footer{float:left; width:900px; height:80px; background:green; margin-top:15px; margin-bottom:30px;  }
/* sidebar 세부 div */
#sidebar_a{width:250px ;height:150px ;background:green; margin-bottom:10px;  }
#sidebar_b{width:250px ;height:160px ;background:green; margin-bottom:10px; }
#sidebar_c{width:230px ;height:300px ;background:green; padding:10px;  }
#sidebar_c_1{width:230px ;height:145px ;background:yellow; margin-bottom:10px; }
#sidebar_c_2{width:230px ;height:145px ;background:yellow; }
/* content 세부 div */
#content_a{width:625px ; background:green ;margin-bottom:10px; padding:10px;  }
#content_a_1{width:625px ;height:90px ;background:yellow ;margin-bottom:10px;  }
#content_a_2{width:625px ;height:90px ;background:yellow; ;margin-bottom:10px ; }
#content_a_3{width:625px ;height:100px ;background:yellow; ; }
#content_b{width:645px ;height:150px ;background:green ;margin-bottom:10px ; }
#content_c{width:645px ;height:160px ;background:green ; }

</style>

</head>
<body>

<div id="wrap">
 <div id="header"></div>
 <div id="sidebar">
  <div id="sidebar_a"></div>
  <div id="sidebar_b"></div>
  <div id="sidebar_c">
   <div id="sidebar_c_1"></div>
   <div id="sidebar_c_2"></div>  
  </div> 
 </div> 
 <div id="content">
  <div id="content_a">
   <div id="content_a_1"></div>
    <div id="content_a_2"></div>
    <div id="content_a_3"></div>
  </div> 
  <div id="content_b"></div>
  <div id="content_c"></div> 
 </div>
 <div id="footer"></div>
</div>

</body>
</html>

 

 

 

 

Posted by -현's-

댓글을 달아 주세요

●형태

<style type="text/css">

#wrap{width:1000px;}

#header{width:1000px; float:left;}

#sidebar{width:300px; float:left;}

#content{width:700px; float:left;}

#footer{width:1000px; float:left;}

</style>

 

<div id="wrap">

<div id="header">header</div>
<div id="sidebar">sidebar</div>
<div id="content">content</div>
<div id="footer">footer</div>

</div> 

 

 

 

●html의 <div>와 css로 레이아웃 구성하기 예 

 

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>

 

<style type="text/css">
#wrap{width:1000px; height:800px; background:blue;}
#header{width:900px; height:130px; margin-left:50px; margin-bottom:10px; background:yellow;}
#middle{width:1000px; float:left; background:black;}
#sidebar{width:200px;height:500px; float:left; margin-left:50px; margin-right:10px; background:gray;}
#content{width:700px; height:500px;float:left; background:red;}
#footer{width:900px; height:130px; float:left; margin-left:50px; margin-top:10px; background:orange;}
</style>

 

</head>
<body>


<div id="wrap">
   <div id="header">header</div>
   <div id="middle">
       <div id="sidebar">sidebar</div>
       <div id="content">content</div>
   </div>
   <div id="footer">footer</div>
</div>


</body>

</html>

 

 

wrap - 레이아웃 전체를 묶어서 wrap안에 있는 div들이 깨지지 않고 자리를 잘 잡게 하기 위한 테두리이다.

header - 넓이값과 float으로 위치를 잡아주면 된다.

sidebar, content - sidebar와 content의 합은 레이아웃 전체 크기보다 클수 없다.

footer - footer에도 float값을 주어야한다. float값을 주지 않으면 비ie브라두저에서 레이아웃이 깨져나올수 있다.

 

 

●보통 실무에서는 css코드는 html코드안에 삽입하지 않고 따로 css파일을 만들어서 사용한다.

 

 

●과거에는 html의 <table>태그를 사용하여 레이아웃을 구성하였지만 웹표준을 준수하려면<table>태그보다는 <div>로 레이아웃을 구성하는 것을 추천한다.

 

 

 

 

Posted by -현's-

댓글을 달아 주세요