1. css- display: inline-block , width
/*div.dclass{
background-color:darkmagenta;
}
*/
div#first{
background-color: aqua;
display: inline-block;
width: 300px;
}
div#second{
background-color:darkmagenta;
display: inline-block;
width: 500px;
}
div#third{
background-color:darkslateblue;
display: inline-block;
width: 700px;
}inline-block은 줄바꿈이 안 된다.
width와 height를 설정해줄 수 있다.
2. margin, padding, border 개념과 적용
<html>
<head>
<style>
div#outer{
display: inline-block;
background-color: mediumpurple;
margin: 100px;
border : 3px solid palevioletred;
}
div#inner{
display: inline-block;
background-color: rgb(247, 241, 231);
margin: 10px;
padding: 3px 50px;
}
</style>
</head>
<body>
<div id = "outer">
<div id = "inner">
HELLO
</div>
</div>
</body>
</html>
margin : 자신을 감싸고 있는 바깥쪽과의 거리 (상,우,하,좌/ex.10px 5px 10px 5px)
padding : 자신의 몸집을 키운다
border : 경계 테두리 두께를 어느정도 할 것인지
- 위 사진에서 inner의 padding은 위, 아래부분 3px이고 왼쪽, 오른쪽은 50px이다.
- inner의 margin은 보라색부분이 된다. 지금은 10px만큼 넓힌 것이고 원하면 더 넓힐수도, 더 줄일수도 있다.
- outer를 보면 분홍색 부분이 border이다.
'WEB > HTML & CSS' 카테고리의 다른 글
| 3_HTML 화면 구성 (1) (0) | 2021.09.07 |
|---|---|
| 2_HTML 기초 (0) | 2021.09.07 |
| 1_Hello_World (0) | 2021.09.06 |