이번에는 저번에 하지 않은 margin, padding, border에 대한 포스팅입니다.
이런식의 레이아웃을 구성을 해보겠습니다.
실제로 많이 색상 이나 그림자 모양을 만드는 것은 많이 사용이 됩니다.
먼저 html 마크업을 보면 간단합니다.
<body>
<div id="box">ABC</div>
<div id="free">Hello</div>
<hr/>
<div id="arrow"></div>
</body>
이정도의 마크업만 되어있습니다. div 3개와 hr 요소가 있네요
그럼 css는 어떻게 되어있을지 보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>보더</title>
<style>
hr {
margin-top: 30px;
margin-bottom: 30px;
/* margin은 바깥쪽 여백을 의미합니다.
top, right, bottom, left가 있습니다.
이 모든 것을 포괄하는 것이 margin 입니다. */
}
#box {
width: 100px;
height: 100px;
background:#03DAC6;
/* 뒷 배경 색상 지정 */
margin: 50px;
padding: 50px;
/* padding은 안쪽 여백을 의미하고 top, right, bottom, left가
있습니다.*/
/* 둥근보더 */
/* 둥근 보더를 위해 크기를 100 이상(widht , height 크기)
으로 지정하면 둥근 보더가 됩니다.*/
border-radius: 50px;
}
#free {
background: yellow;
width: 100px;
height: 100px;
border-radius: 30px 0 30px 30px;
box-shadow:10px 10px 10px #000000;
/* 그림자를 생성해줌 */
}
#arrow {
background: #FFFFFF;
width: 0px;
height: 0px;
border-top: 10px solid #FF0000;
border-right: 50px solid #0000FF;
border-left: 20px solid transparent;
/* transparent를 하면 투명색 (공간차지함) */
border-bottom: 100px solid #000000;
/* border 에는 top , right , bottom , left 가 다 있습니다.
모든것을 공통으로 주기 위해서는 border 를 기재하면 됩니다. */
}
</style>
</head>
<body>
<div id="box">ABC</div>
<div id="free">Hello</div>
<hr/>
<div id="arrow"></div>
</body>
</html>
border, padding, margin 모두 top, right, bottom, left가 있습니다.
원하는 부분에 css 속성을 주기 위해선 기재하지만 모두 주기 위해선 border, padding, margin 만 기재하면 모두 공통으로 지정합니다.
사각형을 가진 보더를 한번 둥글게 만들어 보겠습니다.
이런식의 둥근 보더를 만들기 위해서는
#box {
width: 100px;
height: 100px;
background:#03DAC6;
/* 뒷 배경 색상 지정 */
margin: 50px;
padding: 50px;
/* padding은 안쪽 여백을 의미하고 top, right, bottom, left가
있습니다.*/
/* 둥근보더 */
/* 둥근 보더를 위해 크기를 100 이상(widht , height 크기)
으로 지정하면 둥근 보더가 됩니다.*/
border-radius: 1000px;
}
이 부분에서 border-radius 속성의 값을 100이상으로 해주면 됩니다. 100이상이면 1000이든 10000이든 둥근 보더가 됩니다.
다음 포스팅에서 뵙겠습니다.