개발

div style 레이아웃 개념정리 본문

Frontend/HTML5, CSS

div style 레이아웃 개념정리

Study 2021. 3. 2. 14:15

 

 

 

보편적으로 블로그에서 많이들 쓰는 상기 모양으로 레이아웃을 만들어 보겠습니다.

 

 

HTML은

inline과 block 그리고 inline-block 총 세가지 속성으로 나뉘어집니다.

 

inline 형식은 일반적인 줄글형식처럼 옆으로 쭉 써지는 방식이며

width, height등 사이즈를 조절할 수 없습니다.

 

block 형식은 자동으로 전, 후 줄바꿈이 들어가 같은 줄에 다른 어떠한 컨텐츠도 용납하지 않습니다.

 

inline-block 형식은 inline형식과 동일하게 줄글형식으로 사용이 가능하며

block 형식처럼 사이즈 조절이 가능합니다.

 

기본적으로 div 태그는 block형식을 취하고 있어 따로 속성을 주지 않을 시 

 

이런식으로 이루어지게 됩니다.  

이 모양으로 만들기위해 제일 외부에 

wrapper 라는 클래스의 div를 먼저 만들어준 뒤 

차래대로 top-div, side-div,, content-div,footer-div를 만들어줍니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
    <div class="wrapper">
        <div id="top-div"></div>    
        <div id="side-div"></div>
        <div id="content-div"></div>
        <div id="footer-div"></div>
    </div>
</body>
</html>
 
 cs

 

 

wrapper에 원하시는 전체 사이즈 입력 좌-우 마진 자동으로 주고

 

top-div는 유지!

side-div는 float으로 띄워서 left 정렬! 

content-div도 마찬가지로 띄워서 left 정렬

footer-div는 띄운 float에 빨려 들어가지 않게 

clear: both; 또는 left로 값을 주시면 됩니다.

 

 

 

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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wrapper{
    background-color: red;
    width: 600px;
    height: 600px;
    margin: auto; /* 좌 우 위치 자동 정렬 */
}
#top-div{
    width: 100%;
    height: 100px;
    background-color: yellow;
}
#side-div{
    width: 100px;
    height: 400px;
    background-color: blue;
    float: left; /* 컨텐츠를 띄워서 왼쪽정렬 */
}
#content-div{
    background-color: green;
    width: 500px;
    height: 400px;
    float: left; /* 컨텐츠를 띄워서 왼쪽정렬 */
}
#footer-div{
    background-color: grey;
    width: 100%;
    height: 100px;
    clear: both; /* float된 공간에 말려들어가지 않는다.*/
}
</style>
</head>
<body>
    <div class="wrapper">
        <div id="top-div"></div>    
        <div id="side-div"></div>
        <div id="content-div"></div>
        <div id="footer-div"></div>
    </div>
</body>
</html>
 cs

'Frontend > HTML5, CSS' 카테고리의 다른 글

border-radius 모서리 굴곡도, object-fit: cover 원본비율 유지  (0) 2021.03.04
이미지 애니메이션  (0) 2021.03.02
HTML 태그 모음  (0) 2021.02.27
'Frontend/HTML5, CSS' Related Articles more