WEB/CSS에 해당되는 글 2건

관리자| 쓰기

글

[웹 프로그래밍] WEB 레이아웃 이해하기

WEB/CSS 2014. 5. 23. 19:24

 

1_RAYOUT

●요소 위치 정하기


＊정적 위치 설정(static positioning)

:: 정상적인 흐름에 따른 배치이다.

＊상대 위치 설정(relative positioning)

:: 정상적인 위치가 기준점이 된다.

＊절대 위치 설정(absolute positioning)

:: 컨테이너의 원점이 기준점이 된다.

＊고정 위치 설정(fixed positioning)

:: 고정된 자리에 위치한다.

 

 -EX

 

 

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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
    #one{
        background-color: #008299;
        width: 200px;
        height: 50px;
}
    #two{
        position: static; 
        /*정적 위치 설정
         (여기서는 position을 static으로 선언하면 문서의 정상적인 흐름에 따라서 배치된다
         static으로 선언하지 않은 것과 결과는 같다.)*/ 
        background-color: #FAED7D;
        width:200px;
        height: 50px;
    }
    #three{
        position : relative;
        left : 30px; 
        /*상대 위치 설정
         (정상적인 위치에서 왼쪽으로 30픽셀 이동)*/
        background-color: #99004C;
        width:200px;
        height:50px;
    }
    #four{
        position: absolute;
        /*절대 위치 설정*/
        top: 100px;
        left : 100px;
        background-color: gray;
        width:200px;
        height:50px;
    }
    #five{
        background-color: #F361A6;
        position: fixed;
        /*고정 위치 설정*/
        top:0px;
        right:0px;
    }
</style>
</head>
<body>
<p id="one">Block #1</p>
<div id="two">Block #2<br/>position:static;</div>
<br/>
<div id="three">Block #3<br/>position:relative;<br/>left:30px;</div><br/>
<div id="four">Block #4<br/>position:absolute;
            <br/>top:100px; left:100px;</div>
<div id="five">Block #5<br/>position:fixed;<br/>top:0px; right:0px;</div> 
</body>
 
</html>

 

 

 

 

 

##block #5가 고정된 위치에서 따라 움직이는 것을 볼 수 있다.

 

 

'WEB > CSS' 카테고리의 다른 글

[웹 프로그래밍] CSS박스 모델 이해하기(1)  (0) 2014.05.22

설정

,

트랙백

댓글

글

[웹 프로그래밍] CSS박스 모델 이해하기(1)

WEB/CSS 2014. 5. 22. 17:52

 

 

2014.05.22

1_CSS BOX MODEL

  -CSS박스 모델은 기본적으로 HTML 요소를 감싸는 가상적인 박스를 생각하는 것이다. 웹 브라우저는 각 요소를 박스(BOX)로 간주하고 화면에 배치한다. 각 박스는 마진, 경계, 패딩을 가진다

콘텐츠(Content) :: 박스의 내용물이다. 텍스트와 이미지가 나타나는 부분이다.


패딩(Padding) :: 콘텐츠 주위의 영역이다. 패딩은 투명하다.


경계(Border) :: 패딩과 내용물을 감싸는 경계이다. 경계는 박스의 경계색에 의하여 영향을 받는다.


마진(Margin) :: 경계 주위의 영역이다. 마진은 투명하다.



●블록 요소와 인라인 요소


HTML요소는 블록요소이거나 인라인 요소중의 하나에 속한다. 일반적인 문서의 흐름에서 HTML요소는 블록 요소냐 인라인 요소냐에 따라서 다음과 같이 화면에 표시된다.


- 블록(Block)요소 :: 

화면의 한 줄을 전부 차지한다.


- 인라인(Inline)요소 :: 

한 줄에 차례대로 배치된다. 현재 줄에서 필요한 만큼의 너비만을 차지한다. 


 블록(Block)요소

  인라인(Inline)요소

1. 줄바꿈이 일어난다.

2. 블록요소 안에는 인라인요소와 텍스트를 포함할 수 있다.

3. 블록요소 안에는 포함 할 수 있는 블록 요소와 포함 할 수 없는 블록 요소가 있다.

4. CSS적용시  width(가로), height(세로)값과 padding, margin의 top, right, bottom, left 값이 모두 적용된다.

 1. 줄바꿈이 일어나지 않는다.

2. 인라인 요소 안에는 인라인 요소와 텍스트를 포함 할 수 있다.

3. 인라인 요소는 블록 요소를 포함 할 수 없다.

4. <body>요소 바로 다음에 인라인 요소를 마크업 하지 않는다.

5. CSS적용시 width(가로), height(세로)ㄱ값이 적용되지 않는다. 예외적으로 input 요소의 text, select, img요소는 width, height값이 적용된다. padding, margin의 left, right값만 적용된다.

 

-Ex

 

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
<!DOCTYPE html>
<html>
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>ex01</title>
        
        <style>
            body > * {
                background: #B2CCFF;
                font-family: "돋움";
}
        </style>
        
    </head>
    <body>
        
        <div>블록요소 div</div>
        <p>블록요소 p</p>
        <h3>블록요소 h3</h3>
        
        <span>인라인요소 span</span>
        <span>인라인요소 span</span>
        <a href="#">인라인요소 a</a>
        
    </body>
</html>
 


 


 

● 경계선 지정하기

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p style="border-style : none">none.</p>
<p style="border-style : dotted">dotted.</p>
<p style="border-style : dashed">dashed.</p>
<p style="border-style : solid">solid.</p>
<p style="border-style : double">double.</p>
<p style="border-style : groove">groove.</p>
<p style="border-style : ridge">ridge.</p>
<p style="border-style : inset">inset.</p>
<p style="border-style : outset">outset.</p>
</body>
</html>

 

 

border-color : 색상 변경 ("green" "rgb(0,255,0) "#00ff00" 등으로 지정)

border-width : 선 굵기(thick, medium, -px)

border : 5px solid red; //한줄로 설정 해 주기

border-radius : 둥근 경계선 만들기(border-radius : -px)

box-shadow: 경계에 그림자 생성(box-shadow: 20px 10px 5px #666666)

(가로오프셋,세로오프셋,번지는정도,그림자색)

border-image : 경계이미지 만들기

-webkit-border-image: url(-.png) 30 30 round //사파리

-o-border-image: url(-.png) 30 30 round //오페라

border-image: url(-.png) 30 30 round //크롬

 

 

●마진과 패딩(margin & padding)

○마진(margin)

:: 마진(margin)은 CSS에서 지정이 가능하다

 

 

값

설명

auto

브라우저가 마진을 계산한다

length

마진을 px, pt, cm단위로 지정할 수 있다. 디폴트는 0px 이다.

%

마진은 요소 폭의 퍼센트로 지정한다 (반응형 웹 디자인에 용이)

inherit

마진이 부모 요소로 부터 상속된다

 

 

'WEB > CSS' 카테고리의 다른 글

[웹 프로그래밍] WEB 레이아웃 이해하기  (0) 2014.05.23

설정

,

트랙백

댓글

1
지역로그| 태그| 미디어로그| 방명록| 관리자| 쓰기
현더미's Blog is powered by Daum & Tattertools / Designed by Tistory

티스토리툴바