layout, display, position
1. 배치 : HTML태그가 출력되는 위치를 지정하는 것
2. 배치관련속성
. display : inline, block, inline-block, list-item, table, flex 등
. position: static, absolute, relative, fixed
. float
. z-index
. visibility
. overflow
3. 블록박스, 인라인박스
블록태그 : p, h, div, ul
- 항상 새로운 라인에서 시작된다
- width와 height를 줄수있다
- text-align을 줄수있다.
- margin, padding을 줄 수 있다.
인라인태그: span, a, img
- 없다
>> 대표적인 박스유형 3가지
- 블록박스 : display:block
- 인라인박스: display:inline
- 인라인블록: display:inline-block
<style type="text/css">
#box{
background: black;
color : yellow;
text-align: right;
display : inline-block;
width: 300px; height: 300px;
}
</style>
</head>
<body>
<p style="background: yellow; height: 100px;"> HTML5시대가 되면서 굉장히 다양한 display속성이 등장하게 되었다 </p>
<p> 하지만 모든 <span style="color:blue; width: 100px">display</span>속성을 제대로 <span style="color:blue">지원 </span>하는 웹브라우저가 아직 없다.</p>
<hr>
<span>Dummy</span><br>
<div id="box">
<span>메뉴1</span>
<span>메뉴2</span>
<span>메뉴3</span>
<span>메뉴4</span>
</div>
<div id="box">메뉴5</div>
<span>Dummy</span>
</body>
<style type="text/css">
#box{
background: green;
color: white;
width: 300px; height: 50px;
margin: 50px;
display: inline;
}
span{
width: 100px; height: 100px; background: blue; 적용안됨
display: block; 적용됨
}
</style>
</head>
<body>
<span>시작</span>
<div id="box">
It is a long established fact that a reader will be distracted.
</div>
<span>끝</span>
</body>
<style type="text/css">
span{
background: rgba(50,150,150,0.5);
box-shadow: 2px 2px 5px black;
display: block;
width: 400px;
height: 60px;
text-align: center;
}
</style>
</head>
<body>
<div>
<span>display로 block화 된 span</span>과
<span>display로 block화 된 span</span>입니다.
</div>
</body>
<style type="text/css">
div div{
display: inline;
background: blue;
color: white;
box-shadow: 2px 2px 5px black;
height: 300px;
}
</style>
</head>
<body>
<div style="background: lightgray">
<div>inline DIV</div>
<div>inline DIV</div>
<div>inline DIV</div>
<div>inline DIV</div>
<div>inline DIV</div>
<div>inline DIV</div>
</div>
</body>
<style type="text/css">
div div{
background: powderblue;
box-shadow: 2px 2px 2px black;
text-align: center;
display: inline-block; 인라인블록 : 옆으로 배치, 크기지정
margin: 10px;
border: 2px solid blue;
width : 300px; height: 300px;
}
</style>
</head>
<body>
<div style="background: lightgray; text-align: center;">
<div>inline-block</div>
<div>inline-block</div>
<div>inline-block</div>
<div>inline-block</div>
</div>
</body>
<style type="text/css">
div{
background: aliceblue;
box-shadow: 2px 2px 4px black;
color:blue;
border: 2px solid yellowgreen;
}
span{
border: 3px dotted red;
background: yellow;
}
</style>
</head>
<body>
<h3>인라인, 인라인블록, 블록</h3>
<hr>
나는 <div>기본div입니다</div>
나는 <div style="display: none">dis(none)</div>입니다
나는 <div style="display: inline;">div(inline)</div>그리고 <div style="display: inline;">div(inline)</div>입니다<br>
나는 <div style="display: inline-block; width: 200px; height: 300px;">div(inline-block)</div>
나는 <div>div(block)<span style="display: block">span</span>입니다</div>
</body>
<style type="text/css">
li{
background: red;
width: 100px; height: 40px;
margin: 5px;
display: inline-block;
text-align: center;
padding-top: 10px;
}
a:hover{background: blue;}
li:hover{background: blue;}
a {color: white;}
</style>
</head>
<body>
<div>
<h1>주메뉴</h1>
<ul id="gnb">
<li><a href="#";>COMPANY</a></li>
<li><a href="#">PRODUCT</a></li>
<li><a href="#">SERVICE</a></li>
<li><a href="#">COMMUNITY</a></li>
</ul>
</div>
</body>
<style type="text/css">
ul{background: #DCDCDC; padding: 6px;}
li{ display: inline-block; padding: 10px 10px;
width: 150px; height: 30px;
margin: 0;
text-align: center;
}
a {color:black; text-decoration:none; padding: 5px 10px;}
a:hover{background-color:#696969;
color: white;}
li:hover{background:#696969;}
</style>
</head>
<body>
<div>
<h1>HTML5 웹 프로그래밍</h1>
<hr>
<ul id="ht">
<li><a href="#";>HOME</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS3</a></li>
<li><a href="#">JAVASCRIPT</a></li>
</ul>
</div>
</body>
<style type="text/css">
li{
background: #DCDCDC;
width: 200px; height: 30px;
margin: 0;
display:block;
text-align: center;
}
a:hover{background-color:#696969;}
li:hover{background:#696969;}
a {color:black;}
</style>
</head>
<body>
<div>
<h1>HTML5 웹 프로그래밍</h1>
<hr>
<ul id="ht">
<li><a href="#";>HOME</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS3</a></li>
<li><a href="#">JAVASCRIPT</a></li>
</ul>
</div>
</body>
display: flex - float하지만 더 깔끔함
flex-direction: row - 1|2|3
row-reverse - 3|2|1
column - 위에서 아래로
column-reverse - 아래에서 위로
<style type="text/css">
div[class]{margin: 10px; padding:10px; width:600px; height:400px;
background: #A6A6A6;} div에 속성이 class인 것 모두
div{width: 150px; height: 100px; margin: 2px; background: #FFD766;
border-radius:5px; text-align: center; box-shadow: 1px 1px 2px;}
div.fr{display: flex; flex-direction: row;}
div.frc{display: flex; flex-direction: row-reverse;}
div.fc{display: flex; flex-direction: column;}
div.fcr{display: flex; flex-direction: column-reverse;}
</style>
</head>
<body>
<h3>flex-firection:row</h3>
<div class="fr">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<br><br>
<h3>flex-firection:row-reverse</h3>
<div class="frc">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<br><br>
<h3>flex-firection:column</h3>
<div class="fc">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<br><br>
<h3>flex-firection:column-reverse</h3>
<div class="fcr">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<br><br>
</body>
position 속성
- static (정적배치) : 현재의 태그위치가 브라우저에서 보여지는 위치
위치변경불가
- relative (상대배치) : 현재 자신의 위치(0,0)을 기준으로 left, top 값을 지정 배치
- absolute (절대배치) : left(x), top(y)값으로 브라우저의 위치를 특정지어 배치
>> 절대배치를 지정하는 순간, 해당 박스는 원본에서 떨어져나와 떠있는 상태
>> 부모박스가 감싸주지 않으면 body가 부모위치가 된다
- fixed (고정배치) : 항상 콘텐츠를 특정위치에 고정시키고 싶을 때 사용
- z-index: 겹쳐져 있을 때, 값이 클수록 위로, 작을수록 아래로 배치된다
단, static은 적용되지 않음
<style type="text/css">
.p1 {
position: static;
z-index: 4;
top: 100px; left: 100px; 적용되지 않음
width: 100px; height: 100px;
background: gray;
}
.p2{
position: relative;
z-index: 1;
left: 50px; top: 20px;
width: 100px; height: 100px;
background: orange;
}
.p3{
position: absolute;
z-index : 2;
left: 100px; top: 120px;
width: 100px; height: 100px;
background: lightblue;
}
.p4{
position: fixed;
top: 30px;
right: 0px;
background: green;
}
</style>
</head>
<body>
<p>위치지정과 관련해서는 position top, left, z-index 속성 등을 사용한다</p>
<div class="p1">위치지정1</div>
<div class="p2">위치지정2</div>
<div class="p3">위치지정3</div>
<div class="p4">위치지정4</div>
</body>