<title>box4</title>
<style type="text/css">
body{background-color: ghostwhite;}
div.box{
background-color: yellow;
/* border: 30px solid peru; */
border-style: solid;
border-color: peru;
border-width: 30px;
margin: 40px;
padding: 50px;
text-align: center;
}
span{background-color: #1DDB16;}
</style>
</head>
<body>
<div class="box">
<span>DIV/DIV/DIV</span>
</div>
</body>
border-width: 전체 굵기
border-left : 왼쪽
border-right: 오른쪽
border-top : 위쪽
border-bottom: 아래쪽
<style type="text/css">
초기화 시키기
dl,dt,dd,p{
margin:0; padding: 0;
}
body{
font: 12px "굴림", Gulim;
}
dl.box{width: 550px; border: 3px #123456 double;}
dt{
background-color: #abcedf;
color: #123456;
text-align: center;
font-size: 25px;
letter-spacing: 15px;
padding: 15px;
border-bottom: #123456 5px solid;
}
dd{
padding: 10px;
}
dd.line{border-bottom: #123456 1px dotted;}
</style>
</head>
<body>
<dl class="box">
<dt>속담풀이</dt>
<dd class="line">
<h2>말 한마디에 천 냥 빚진다</h2>
<p>생각해보지 않고 나오는 대로 말하다가는 실수하면
상대의 마음에 아픔을 남기게 된다.</p>
</dd>
<dd>
<h2>웃는 얼굴에 침 못 뱉는다</h2>
<p>호의적인 의사소통 방법은 자기 말만 하는 것 보단
들어주는 것이 좋은 결과로 이어진다.</p>
</dd>
</dl>
</body>
테두리(border)속성
. border-width : 선 굵기
1px 2px 3px 4px (상 우 하 좌)
1px 2px 3px (상 좌우 하)
1px 2px (상하 좌우)
1px (전체)
. border-style : 선 스타일 (점선, 실선..)
. border-color : 선의 색상
. border-radius: 둥근 모서리
. border-radius :
1px 2px 3px 4px (상 우 하 좌)
1px 2px 3px (상 좌우 하)
1px 2px (상하 좌우)
1px (전체)
<title>테두리 속성</title>
<style type="text/css">
.box{
border-width: thin;
border-style: dashed;
border-color: black;
padding: 100px;
border-radius: 20px; 모서리 원의 반지름
}
</style>
</head>
<body>
<h1>테두리 속성은 원래 박스 속성입니다</h1>
<div class="box">
<h1>What is Lorem Ipsum</h1>
</div>
</body>
<style type="text/css">
p{
text-align: center;
color: white;
background-color: #1DDB16;
font-weight: bolder;
font-size: 20px;
width: 150px;
border-width: 10px;
border-color: orange;
border-style: solid;
border-radius: 10px;
}
em{font-size: 1.2em; font-style: normal;}
.border1{border-width: 3px 6px 10px 20px}
.border2{
border-top-width: thin;
border-right-width: medium;
border-bottom-width: thick;
border-left-width: 10px;
}
.border3{border-width: 20px;}
</style>
</head>
<body>
<p>네이버 로그인(표준)</p>
<p class="border1"><em>네이버</em> 로그인</p>
<p class="border2"><em>네이버</em> 로그인</p>
<p class="border3"><em>네이버</em> 로그인</p>
</body>
<style type="text/css">
공통
p{
background: #90D000;
width: 300px;
padding: 20px;
text-align: center;
}
#round1{border-radius: 50px}
#round2{border-radius: 0, 20, 40, 60px}
#round3{border-radius: 0, 20, 40, 20px}
#round4{border-radius: 0, 20, 0, 20px}
#round5{border-radius: 50px; border-style: dotted;}
</style>
</head>
<body>
<h3>둥근 모서리 테두리</h3>
<hr>
<p id="round1">반지름 50픽셀의 둥근 모서리</p>
<p id="round2">반지름 0,20,40,60 둥근 모서리</p>
<p id="round3">반지름 0,20,40,20 둥근 모서리</p>
<p id="round4">반지름 0,20,0,20 둥근 모서리</p>
<p id="round5">반지름 50인 둥근 점선 모서리</p>
</body>
<style type="text/css">
p{
background-color: red;
width: 300px;
height: 300px;}
#round1 {border-radius:150px;
border-width: 5px;
border-style: solid;
border-color: yellow;}
#round2 {border-radius:150px;}
#round3 {border-radius:150px;}
</style>
</head>
<body>
<p id="round1">1</p>
<p id="round2">2</p>
<p id="round3">3</p>
</body>
'IT 공부 > HTML, CSS' 카테고리의 다른 글
| layout, display, position (0) | 2022.05.26 |
|---|---|
| box 2-2 (0) | 2022.05.26 |
| CSS3 그라데이션, box, 배경 이미지 (0) | 2022.05.25 |
| CSS실습 (0) | 2022.05.24 |
| font (0) | 2022.05.24 |