고정 헤더 영역
상세 컨텐츠
본문
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>요소의 바깥 여백</title>
<style>
p {
display: block;
list-style: none;
background-color: skyblue;
border: 2px solid skyblue;
padding: 10px;
margin: 10px;
width: 50%;
height: 100%;
text-align: left;
line-height: 30px;
font-weight: bold;
}
.art2 {
display: block;
list-style: none;
background-color: skyblue;
border: 2px solid skyblue;
padding: 10px;
margin-inline: 440px;
width: 50%;
height: 100%;
text-align: left;
line-height: 30px;
font-weight: bold;
}
</style>
</head>
<body>
<p>
유래없이 뜨거운 날씨이다. 섭씨 38도를 웃도는 온도에서 에어콘은 이제 살기
위한 도구가 되었다.
</p>
<p class="art2">
달걀을 사다 놓기만 해도 병아리로 부화된다는 농담같은 이야기가 현재
대한민국의 실화다.
</p>
<p>
드디어 섭씨 40도가 넘었다. 엄마 뱃속보다 뜨거운 날씨, 감사해야 할까? 해가
뜨거울 뿐인데 오존층이 파괴되어 오존주의보가 발령되었다.
</p>
</body>
</html>
실행결과
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>둥근 테두리</title>
<style type="text/css">
.radius {
display: inline-block;
text-align: center;
line-height: 100px;
}
.radius1 {
width: 100px;
height: 100px;
border-radius: 100px;
background-color: #C60;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
}
.radius2 {
background-color: #090;
border-radius: 100px 100px 0 0;
width: 200px;
}
.radius3 {
background-color: #06C;
width: 100px;
border-top-left-radius: 2000%;
border-top-right-radius: 100%;
}
.radius4 {
border: 4px dotted #808;
background-color: #99a;
width: 200px;
border-top-left-radius: 20%;
border-top-right-radius: 10%;
border-bottom-right-radius: 20%;
border-bottom-left-radius: 10%;
}
</style>
</head>
<body>
<span class="radius radius1">radius1</span>
<span class="radius radius2">radius2</span>
<span class="radius radius3">radius3</span>
<span class="radius radius4">radius4</span>
</body>
</html>
실행결과
'풀스텍과정' 카테고리의 다른 글
| 42일차 학습_CSS (0) | 2024.07.10 |
|---|---|
| 41일차학습일지_CSS (0) | 2024.07.08 |
| 39일차학습일지_CSS (0) | 2024.07.04 |
| 38일차 학습일지_HTML (0) | 2024.07.03 |
| 37일차 학습일지_HTML (0) | 2024.07.03 |
