외우지 않기
설명하기
외워짐 당하기
<html>
<head>
<title>First Page</title>
</head>
<body>
<input type="text">
<button>CLICK</button>
Hello
<p>This is</p>
<span>First</span>
WebPage
</body>
</html>
<html>
<head>
<title>First Page</title>
<style>
p{
color: red
}
</style>
</head>
<body>
<input type="text">
<button>CLICK</button>
Hello
<p>This is</p>
<span>First</span>
WebPage
</body>
</html>
<html>
<head>
<title>First Page</title>
<style>
p{
color: red
}
</style>
</head>
<body>
<input type="text">
<button>CLICK</button>
Hello
<p>This is</p>
<span>First</span>
WebPage
<p>That is</p>
</body>
</html>
그럼 어떻게 구분을 하느냐
신분증으로 구분한다
그럴려면 신분증을 만든다
<html>
<head>
<title>First Page</title>
<style>
p{
color: red
}
#this{
color:orange
} ->>>>>>>>>>>> #this: 신분증 제시
</style>
</head>
<body>
<input type="text">
<button>CLICK</button>
Hello
<p id="this">This is</p>-------->>>>>> <p의 id="this">
<span>First</span>
WebPage
<p>That is</p>
</body>
</html>
#id-name {
}
<html>
<head>
<title>First Page</title>
<style>
p{
color: red
}
#this{
color:orange
}
.size-30{
font-size:30px
}
</style>
</head>
<body>
<input type="text">
<button>CLICK</button>
Hello
<p id="this" class="size-30">This is</p>
<span class="size-30">First</span>
WebPage
<p>That is</p>
</body>
</html>
class는 공유 가능한 신분증
.class-name {
}
'알토르' 카테고리의 다른 글
| 알토르 1주차 인스타 (0) | 2025.08.11 |
|---|---|
| 알토리 0주차 JavaScript (2) | 2025.08.11 |
| 알토르 0 주차 CSS (2) | 2025.08.10 |
| CSS selector 게임으로 배워보자 CSS Diner (1 - 19) (1) | 2025.08.08 |
| 0주차 과제 (3) | 2025.08.04 |
