์ผ | ์ | ํ | ์ | ๋ชฉ | ๊ธ | ํ |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
- ๋ฐ์ดํฐํ์
- stream
- ๋ฐฐ์ด
- StringBuffer
- ๋ฐฑ์ค9012
- ์คํธ๋ฆผ
- ์ฟ ํกERD
- ์
- ์ฟ ํกDB
- ์ฐ์ฐ์
- ๋
- ๋ฐฑ์ค11053 #ํ์ด์ฌ #python
- ์๋ฐ
- ์ฐ
- ์คํ์์ด
- StringBuilder
- ๋ฐฑ์ค9093
- ํ๋ฐฉ์ฟผ๋ฆฌ
- ์คํ
- ๋ฌธ์์ด
- java
- ๋ฐฑ์ค1874
- Today
- Total
Tech Log ๐ ๏ธ
[WEB] html,css ์ด์ฉํ ํ์ด์ง ๊ตฌํ - 2 ๋ณธ๋ฌธ
์๋ฒ ๋๋ IOT ์์ ์ค ์งํ ๋ ์ค์ต ๋ด์ฉ์ ๊ธฐ๋ฐ์ผ๋ก ์ ์ํ์์ต๋๋ค.
(์ฐธ๊ณ ์๋ฃ : ๋ช ํ HTML5+CSS3+Javascript ์น ํ๋ก๊ทธ๋๋ฐ, ์๋ฅ์ถํ์ฌ)
1.CSS ๋ฅผ ์ด์ฉํ ๋ฆฌ์คํธ ํ์ด์ง ์ ์
- CSS ์ hover ์์ฑ๊ณผ first-letter ์์ฑ์ ์ด์ฉํ์ฌ ๋ฆฌ์คํธ ํ์ด์ง๋ฅผ ์ ์
hover : ๋ง์ฐ์ค๋ฅผ ์ฌ๋ ธ์ ๋์ ์์ฑ์ ์ค์ . (CSS ๋ฆฌ์คํธ์ ๋ง์ฐ์ค๋ฅผ ์ฌ๋ ธ์ ๊ฒฝ์ฐ ์ด๋ก์์ผ๋ก ๋ณํจ)
first-letter : ์ฒซ ๋ฒ์งธ ๊ธ์๋ง ์์ฑ์ ์ ์ฉ.
์ฝ๋
<!DOCTYPE x`html>
<!--
HTML์ ์ธ
-->
<html>
<!--
HTML ๊ตฌ๋ฌธ ์์
-->
<head>
<style>
h3::first-letter{color:red}
/* h3 ํ๊ทธ์ ์ฒซ ๊ธ์๋ง ๋นจ๊ฐ์์ผ๋ก ํ๋ค. */
li:hover{background: yellowgreen;}
/* ๋ฆฌ์คํธ์ ๋ง์ฐ์ค๋ฅผ ์ฌ๋ ธ์ ๋ yellowgreen ์์์ผ๋ก ๋ณ๊ฒฝ */
</style>
<meta charset="utf-8">
<!--
๋ฉํ ๋ฐ์ดํฐ ํ์ ์ค์
-->
<title>์
๋ ํฐ ๋ง๋ค๊ธฐ</title>
<!--
ํ์ด์ง ํ์ดํ ์์ฑ
-->
</head>
<body>
<h3>Web Programming</h3>
<hr>
2ํ๊ธฐ ํ์ต๋ด์ฉ
<ul>
<li>HTML5</li>
<li><strong>CSS</strong></li>
<!--
strong ํ๊ทธ๋ฅผ ์ด์ฉํด ๊ตต์์ฒด๋ก ํ๊ธฐํ๋ค.
-->
<li>JAVASCRIPT</li>
</ul>
60์ ์ดํ๋ F!
</body>
</html>
<!--
HTML ๊ตฌ๋ฌธ ๋
-->
2.ํ ์คํธ์ ๋ฐ์ค์ shadow ์์ฑ ์ ์ฉ
- text - shadow
ex) text-shadow2px 2px 10px black
box - shadow
ex) box-shadow2px 2px 2px black
*์ผ์ชฝ๋ถํฐ v-shadaw, h-shadow , blur-radius ์ด๋ค.
์ฝ๋
<!DOCTYPE html>
<html>
<head>
<title>text-shadow์ box-shadow</title>
<style>
h2
{
text-align: center;
/* ๊ฐ์ด๋ฐ ์ ๋ ฌ */
coloryellow;
/* ์์ ์ค์ */
text-shadow2px 2px 10px black,
0 0 25px blue,
0 0 5px darkblue;
}
/*
black ์ปฌ๋ฌ๋ 2px, 2px ,2px
blue ์ปฌ๋ฌ๋ 0 , 0, 25px
darkblue ์ปฌ๋ฌ๋ 0 , 0, 5px ๋ก ์ค์ ํ๋ค.
(์ผ์ชฝ๋ถํฐ v-shadaw, h-shadow , blur-radius)
*/
img:hover
{
box-shadow2px 2px 2px black,
0 0 25px blue,
0 0 5px darkblue
}
/*
black ์ปฌ๋ฌ๋ 2px, 2px ,2px
blue ์ปฌ๋ฌ๋ 0 , 0, 25px
darkblue ์ปฌ๋ฌ๋ 0 , 0, 5px ๋ก ์ค์ ํ๋ค.
(์ผ์ชฝ๋ถํฐ v-shadaw, h-shadow , blur-radius)
*/
</style>
</head>
<body>
<h2>Most Visited Pages</h2>
<hr>
<table>
<tr>
<td><a href="http://www.naver.com">
<img src="media/naver.png" width="200" height="150">
</a></td>
<td><a href="http://www.chosun.com">
<img src="media/chosun.png" width="200" height="150">
</a></td>
<td><a href="http://www.amazon.com">
<img src="media/amazon.png" width="200" height="150">
</a>
</td>
</tr>
</table>
</body>
</html>
3.๋ฐ์ค ๋ชจ๋ธ ์ ์ฉ
- divํ๊ทธ์ padding , margin ์์ฑ์ ์ ์ฉํด์ ๋ฐ์ค ๋ด ์ด๋ฏธ์ง ๋ฐฐ์น
์ฝ๋
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>๋ฐ์ค ๋ชจ๋ธ</title>
<style>
div{
backgroundyellow;
padding20px;
border5px dotted red;
margin30px;
}
/*
๋ฐฐ๊ฒฝ์ ๋
ธ๋์์ผ๋ก ์ค์ ,
padiing ๊ฐ 20px๋ก ์ค์
ํ
๋๋ฆฌ๋ 5px ๋นจ๊ฐ์ ์ ์ ์ผ๋ก ์ค์ ,
maring ์์ฑ์ 30px๋ก ์ค์ ํ๋ค.
*/
</style>
</head>
<body>
<h3>๋ฐ์ค ๋ชจ๋ธ</h3>
<p>margin 30px, padding 20px, border 5px์
๋นจ๊ฐ์ ์ ์ </p>
<hr>
<div>
<img src="media/img.avif" alt="๊ณ ์์ด๋">
</div>
</body>
</html>
4. ์๋์์น๋ฅผ ์ ์ฉํ ํ์ด์ง ์ ์
- ์๋์์น : ๊ฐ์ ์์ ์์์์ ์์น๋ฅผ ์ ํจ.
์ ๋์์น : ๋ถ๋ชจ ์์๋ฅผ ๊ธฐ์ค์ผ๋ก ์์น๋ฅผ ์ ํจ.
์ฝ๋
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>relative ๋ฐฐ์น</title>
<style>
div{
displayinline-block;
/*
๋ด๋ถ์ ์ผ๋ก inline ๊ท์น์ ๋ฐ๋ฅด๊ณ ,
์ธ๋ถ์ ์ผ๋ก block ๊ท์ง์ ๋ฐ๋ฅธ๋ค.
*/
height50px;
width50px;
border1px solid lightgray;
text-aligncenter;
colorwhite;
backgroundred;
}
/*
div ํ๊ทธ์ css ์์ฑ์ ์ค์ ํ๋ค.
*/
#down:hover{
positionrelative;
left20px;
top20px;
backgroundgreen;
}
/*
"down" ์์ด๋๋ฅผ ๊ฐ์ง ํด๋์ค์ hover ์์ฑ์ ์ค์ ํ๋ค.
position ์์ฑ์ ์๋ ์์น๋ก ์ค์
*/
#up:hover{
positionrelative;
right20px;
bottom20px;
backgroundgreen;
}
/*
"up" ์์ด๋๋ฅผ ๊ฐ์ง ํด๋์ค์ hover ์์ฑ์ ์ค์ ํ๋ค.
position ์์ฑ์ ์๋ ์์น๋ก ์ค์
*/
</style>
</head>
<body>
<h3>์๋ ๋ฐฐ์น, relative</h3>
h์ k ๊ธ์์ ๋ง์ฐ์ค๋ฅผ ์ฌ๋ ค ๋ณด์ธ์
<hr>
<div>T</div>
<div id="down">h</div>
<!-- id๊ฐ์ "down"์ผ๋ก ์ค์ -->
<div >a</div>
<div>n</div>
<div id="up">k</div>
<!-- id๊ฐ์ "up"์ผ๋ก ์ค์ -->
<div>s</div>
</body>
</html>
5. ์ง์ ๋ฒ์งธ์๋ง CSS ์์ฑ ์ ์ฉ
- nth-child(even) ์ ํ์๋ฅผ ํตํด ์ง์ ๋ฒ์งธ์๋ง ์์ฑ์ ์ ์ฉํ ์ ์๋ค.
์ฝ๋
<!DOCTYPE html>
<html><head><title>ํ ์์ฉ 1</title>
<style>
table
border-collapsecollapse;
}
/*
ํ์ ํ
๋๋ฆฌ์ ์
์ ํ
๋๋ฆฌ ์ฌ์ด์ ๊ฐ๊ฒฉ์ ์์ค๋ค.
*/
td, th
text-alignleft;
padding5px;
height15px;
width100px;
}
/*
td,th ํ๊ทธ์ ์์ฑ์ ์ค์ ํ๋ค.
*/
thead, tfoot
backgrounddarkgray;
coloryellow;
}
/*
thead , tfoot ํ๊ทธ์ ์์ฑ์ ์ค์ ํ๋ค.
*/
tbody tr:nth-child(even) {
backgroundaliceblue;
}
/*
์ง์๋ฒ์งธ ์์์๋ง ์์ฑ์ ์ค์ ํ๋ค.
*/
tbody tr:hover{
backgroundpink;
}
/*
tbody ํ๊ทธ์ ๋ง์ฐ์ค๋ฅผ ์ฌ๋ ธ์ ๋ ์์ฑ์ ์ค์ ํ๋ค.
๋ง์ฐ์ค๋ฅผ ์ฌ๋ฆฌ๋ฉด ์์์ ํํฌ์์ผ๋ก ๋ณ๊ฒฝ
*/
</style></head>
<body>
<h3>1ํ๊ธฐ ์ฑ์ </h3>
<hr>
<table>
<thead>
<tr><th>์ด๋ฆ</th><th>HTML</th><th>CSS</th></tr>
</thead>
<tfoot>
<tr><th>ํฉ</th><th>310</th><th>249</th></tr>
</tfoot>
<tbody>
<tr><td>ํฉ๊ธฐํ</td><td>80</td><td>70</td></tr>
<tr><td>์ด์ฌ๋ฌธ</td><td>95</td><td>99</td></tr>
<tr><td>์ด๋ณ์</td><td>85</td><td>90</td></tr>
<tr><td>๊น๋จ์ค</td><td>50</td><td>40</td></tr>
</tbody>
</table>
</body>
</html>
6. @keyframes ์ด๋ ธํ ์ด์ ์ ์ด์ฉํ ์๋๋ฉ์ด์ ์น ์ ์
- ์ ๋๋ฉ์ด์ ์ํ๋ฅผ ์ ์ํ๊ณ ์ด๋ฏธ์ง์ ์ ์ฉ (rotate)
์ฝ๋
<html>
<head>
<title></title>
</head>
<style>
@keyframes rotate
{
0%
{
transform:rotate(-90deg);
}
50%
{
transform:rotate(90deg);
}
100%
{
transform:rotate(-90deg);
}
}
/*
keyframes ์ด๋
ธํ
์ด์
์ ํตํด ์ ๋๋ฉ์ด์
์ค๊ฐ ์ํ๋ฅผ ์ ์ํ๋ค.
%๋ ์ ๋๋ฉ์ด์
์ ์์๊ณผ ๋์ ์๋ฏธ
*/
img
{
animation-name: rotate;
animation-duration: 2s;
animation-iteration-count: infinite;
}
/*
img ํ๊ทธ์ ์์ฑ์ keyframes์์ ์ ์ฉํ๋ ์์ฑ๋ค์ ์ ์ฉํ๋ค.
*/
</style>
<body>
<h3>์ด์ง๋ฌ์์</h3>
<hr>
<img src="media/img.avif" width="90px" height="100px">
</body>
</html>
7. ์ ๋๋ฉ์ด์ ์ ๋ฐ๋ณต ํ์ ์ค์
- ์ ๋๋ฉ์ด์ ์ ์ ์ฉํ ํด๋์ค ๋ฐ ํ๊ทธ์ animation-iteration-count: 1; ์ ์ฉํ๋ฉด ๋ฐ๋ณตํ์๋ฅผ ์ค์
์ฝ๋
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style>
@keyframes a
{
from
{
margin-left: 100%;
}
to
{
margin-left: 0%;
}
}
/*
@Keyframes ์ด๋
ธํ
์ด์
์ ํตํด ์ ๋๋ฉ์ด์
์ ์ ์ํ๊ณ ์ด๋ฆ์ ์ค์ ํ๋ค. (a)
*/
strong
{
padding: 3px;
border: 2px solid black;
}
p
{
animation-name: a;
animation-duration: 3s;
animation-iteration-count: 1;
}
/*
pํ๊ทธ์ ๋ฏธ๋ฆฌ ์ค์ ํด๋ ์ ๋๋ฉ์ด์
์ ์ ์ฉํ๊ณ ์๊ฐ, ๋ฐ๋ณต ํ์๋ฅผ ์ค์ ํ๋ค.
*/
</style>
<body>
<h3>์ ๋๋ฉ์ด์
์์ฉ</h3>
<hr>
<p><span><strong>?</strong>์ง๋ฌธ ์์ต๋๋ค.</span></p>
</body>
</html>
'WEB(html,css,js)' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
html & css ๊ธฐ์ด ๊ฐ๋ ์ ๋ฆฌ (2) | 2023.04.23 |
---|---|
[WEB] html,css ์ด์ฉํ ํ์ด์ง ๊ตฌํ - 1 (0) | 2023.03.30 |