728x90
이번 포스팅에서는 지금까지 기재한 내용을 기반으로 예제를 만들어 보겠습니다.
예전 사이트에서 많이 써본 텝 모양 만드는것 그리고 화살표를 만들어서 활용하는 포스팅 그리고 현재로도 프로필사진을 둥글게 하는
여러 속성에 대한 것입니다.
마크업은 간단합니다 html 부분을 먼저 보면
<body>
<h1>텝모양 만들기</h1>
<div id="title"></div>
<div id="contents">내용이 들어갑니다.내용이 들어갑니다.내용이 들어갑니다.내용이 들어갑니다.
내용이 들어갑니다.내용이 들어갑니다.</div>
<hr/>
<h1>화살표 만들기</h1>
<div id="arrow"></div>
<div id="stick"></div>
<hr/>
<h1>프로필 사진</h1>
<div><img id="prof" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAMAAACahl6sAAAAJFBMVEXMzMz09PTl5eXg4ODW1tbPz8/v7+/q6urb29vx8fHi4uLs7OwKc4KuAAAD6UlEQVR4nO2dB5aFIAwALWC9/333s67rtxtIw5c5gfMgISClKAzDMAzDMAzDMAzDMAzDMAzDMMTxrh7ati8/9G071M5Lf1EEvhvGcsc4dFnJ+K7dS8y02bhcWcwu0t94j6+bO41AU+tuFl89sZio9KpANDSr1D3M45OUa+lvPsA9io0tjZP+7g1+iNEIDKr6lzsY/J4yKmqULl4joGZUie5WM4O0wQQw6R5RSTsEEDxUmKB4KDBB8hA3ScxX34jmLgeuSs7pJceThHFwzyjnUWN6lKVYCekRO1aglyq7kBtErkmQG+TTJDIeiKl3RiYF3y6WwGklPDy+R1lKhDt6qAckwp2gZ8n0LQqPsuT3cDQi/AUXSYhIBAlJiEgECWrhu8BfAtN48Ec7yXAY4B4SiZIWf9p6jQhR9uXPvyZiIiZiIiZiIiZiIgpFXlM0moiJmMgNVCLcHiZiIiZiIpmJvGQ1viNajC/LkfUXNdourSMYd24l78a8hm2vJtkvhRmuXwtks8MZrlkiUcJa4Epd6LuCtnDtEqL2YBsVTUSbyGuC/TUirxlHyFZQZthWUqLOhT2n4fKg7lt869jEVSPjdpS3zEfQd8V/w7tDnmAX9gzzbmyyzsV+RIlouitwJLEjGE0akV3+0OPr94gdcEfuXoInXVHbRPIkokeMk0b0YDtiISx8rP0tR1zRihWxo3v/IJX0Cu7jQIl3vrnUOSjxruICC4RFFZFjezsQ5ovikT6RHO8KIn0iMd41RPpEYryriPSJpM6lpmMFUu4Okv72FfGVinxtsiY6TBQFyETkApGam5wWokwUekSNJnpGkG8iliKUXKy1ISLe1UX6BPx6Q+kvPgE8f5eep58Bzlsqc1YRMTFRNqgvAINEa4iAJ706JrhHAKt5VfX7CmC0a4118JCodDgswGlLbdKC7uSS/toLXiMCquR11vBFuGkduAQxarxz3UEtZhdVqcsNCWuNzaDEJclCjUtXYf16qwTHeTQLURdkCyEXN5DtPOv54gUhuq9hiX3wqBcH9Vh5/9gLHnTPxjiK8L6irwi6GFOX2oLdxdgbYwGzWTgj4wicaPHwF2vw6ZN7GP4GzFiSNm464T61po0NFl0agSgVfRoBsIpXqRFoIbGiJ8SPeB72GhLuFQ8fJEt5k4qLB29f6e5VC3f9K+7FNgkuX4mLf7FNgvNX4nKIjm/OIgXz5SAejt8nIj9KTMFBIs4kW23ZbZ7I1GNnkq3HxiRjj5UJ4YFVDv6n9OQ3BlDzl4Uxj67J8HdgLqu65JjfvZHkl0xx4HPPWDPVSxokNEmWJdaemvqOEy4ahquZeDARbfwAGzlHuZRNMPMAAAAASUVORK5CYII=" alt="프로필 이미지"></div>
</body>
이런식으로 간단한 마크업입니다.
전체 코드를 확인해서 어떤 CSS 속성이 들어갔는지 보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>실습</title>
<style>
hr {
margin-top: 50px;
margin-bottom: 20px;
}
#title {
width: 200px;
height: 40px;
border-radius:30px 30px 0 0 ;
background: #BB86FC;
border-top: 3px solid #70EFDE;
border-left: 3px solid #70EFDE;
border-right: 3px solid #70EFDE;
}
#contents {
width: 400px;
height: 400px;
border-radius: 0 10px 10px 10px;
background: #BB86FC;
border: 3px solid #70EFDE;
}
#arrow {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 30px solid #B2FF59;
border-right: 30px solid transparent;
border-left: 30px solid transparent;
}
#stick {
width: 10px;
height: 50px;
background: #B2FF59;
margin-left: 25px;
}
#prof {
border-radius:100px 100px 100px 100px ;
}
</style>
</head>
<body>
<h1>텝모양 만들기</h1>
<div id="title"></div>
<div id="contents">내용이 들어갑니다.내용이 들어갑니다.내용이 들어갑니다.내용이 들어갑니다.
내용이 들어갑니다.내용이 들어갑니다.</div>
<hr/>
<h1>화살표 만들기</h1>
<div id="arrow"></div>
<div id="stick"></div>
<hr/>
<h1>프로필 사진</h1>
<div><img id="prof" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAMAAACahl6sAAAAJFBMVEXMzMz09PTl5eXg4ODW1tbPz8/v7+/q6urb29vx8fHi4uLs7OwKc4KuAAAD6UlEQVR4nO2dB5aFIAwALWC9/333s67rtxtIw5c5gfMgISClKAzDMAzDMAzDMAzDMAzDMAzDMMTxrh7ati8/9G071M5Lf1EEvhvGcsc4dFnJ+K7dS8y02bhcWcwu0t94j6+bO41AU+tuFl89sZio9KpANDSr1D3M45OUa+lvPsA9io0tjZP+7g1+iNEIDKr6lzsY/J4yKmqULl4joGZUie5WM4O0wQQw6R5RSTsEEDxUmKB4KDBB8hA3ScxX34jmLgeuSs7pJceThHFwzyjnUWN6lKVYCekRO1aglyq7kBtErkmQG+TTJDIeiKl3RiYF3y6WwGklPDy+R1lKhDt6qAckwp2gZ8n0LQqPsuT3cDQi/AUXSYhIBAlJiEgECWrhu8BfAtN48Ec7yXAY4B4SiZIWf9p6jQhR9uXPvyZiIiZiIiZiIiZiIgpFXlM0moiJmMgNVCLcHiZiIiZiIpmJvGQ1viNajC/LkfUXNdourSMYd24l78a8hm2vJtkvhRmuXwtks8MZrlkiUcJa4Epd6LuCtnDtEqL2YBsVTUSbyGuC/TUirxlHyFZQZthWUqLOhT2n4fKg7lt869jEVSPjdpS3zEfQd8V/w7tDnmAX9gzzbmyyzsV+RIlouitwJLEjGE0akV3+0OPr94gdcEfuXoInXVHbRPIkokeMk0b0YDtiISx8rP0tR1zRihWxo3v/IJX0Cu7jQIl3vrnUOSjxruICC4RFFZFjezsQ5ovikT6RHO8KIn0iMd41RPpEYryriPSJpM6lpmMFUu4Okv72FfGVinxtsiY6TBQFyETkApGam5wWokwUekSNJnpGkG8iliKUXKy1ISLe1UX6BPx6Q+kvPgE8f5eep58Bzlsqc1YRMTFRNqgvAINEa4iAJ706JrhHAKt5VfX7CmC0a4118JCodDgswGlLbdKC7uSS/toLXiMCquR11vBFuGkduAQxarxz3UEtZhdVqcsNCWuNzaDEJclCjUtXYf16qwTHeTQLURdkCyEXN5DtPOv54gUhuq9hiX3wqBcH9Vh5/9gLHnTPxjiK8L6irwi6GFOX2oLdxdgbYwGzWTgj4wicaPHwF2vw6ZN7GP4GzFiSNm464T61po0NFl0agSgVfRoBsIpXqRFoIbGiJ8SPeB72GhLuFQ8fJEt5k4qLB29f6e5VC3f9K+7FNgkuX4mLf7FNgvNX4nKIjm/OIgXz5SAejt8nIj9KTMFBIs4kW23ZbZ7I1GNnkq3HxiRjj5UJ4YFVDv6n9OQ3BlDzl4Uxj67J8HdgLqu65JjfvZHkl0xx4HPPWDPVSxokNEmWJdaemvqOEy4ahquZeDARbfwAGzlHuZRNMPMAAAAASUVORK5CYII=" alt="프로필 이미지"></div>
</body>
</html>
주석을 기재하지 않았습니다. 1번째 포스팅과 2번째 포스팅을 통해 충분한 설명이 써있기때문입니다.
공부가 필요하신분은 이 코드를 가지고 자신이 주석을 달아보는 것도 나쁘지 않겠네요
다음 포스팅은 선택자에 대해 더욱 더 알아보고 가상클래스에 대해서 알아보겠습니다.
반응형