<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Classroom exercise2</title>
<style>
h1 {background-color:yellow; display:inline; ;}
table {margin: 50px 20px 0px 20px; color:black; text-align:center; border: 6px solid navy; border-collapse: collapse}
#row {background-color:green; color:yellow;}
#date {background-color:skyblue; color:brown; }
.place {background-color:beige; color:darkblue;}
#att {color:red;}
#part {background-color:aqua; display:inline; padding: 10px 20px 0px 0px; }
#partsize {font-size:x-small; margin:0 0 50px 0;}
#partcolor {background-color: darksalmon; color:gray; display:inline; margin:0px 30px 50px 60px; padding:0px 0px;}
</style>
</head>
<body>
<h1>2023년 여름휴가 Plan</h1>
<p/>
<table height="200px" width="500px" border="2px" solid="black">
<tr id="row">
<td><b>날 짜</b></td>
<td><b>장 소</b></td>
<td><b>참석대상자</b></td>
</tr>
<tr>
<td id="date"><b>8월 15일</b></td>
<td class="place">힐튼 호텔</td>
<td class="place">초딩 동창</td>
</tr>
<tr>
<td id="date"><b>8월 22일</b></td>
<td class="place">앰버서더 호텔</td>
<td class="place">입사 동기</td>
</tr>
<tr>
<td id="date"><b>8월 29일</b></td>
<td class="place">조선호텔</td>
<td class="place">가족 및 친지</td>
</tr>
</table>
<div id="att">많은 참석 부탁드립니다.</div>
<h3>문단 전체의 색을 지정하지 않고<br><br><div id="part">부분적으로 골라서</div></h3>
<p id="partsize"><b>글자크기와</b></p>
<p id="partcolor">일부에만 색을 지정할 수 있습니다.</p>
</body>
</html>
span inline style로 지정해서 일부분 색을 입혀서 지정할 수 있음. ▼요런거?
이렇게 하면 일부분만 밑줄 효과 가능
위에 내가 한것 처럼 style에 background-color 로 넣게 되면 그 부분 전체가 스타일이 걸려서 전체가 다 색이 칠해짐.
display : inline-block ▼ 아래처럼 하려면 사이즈 맞춰서, 박스 딱 맞춰짐
'HTML' 카테고리의 다른 글
| float랑 위치 잡는거 연습 (0) | 2023.04.21 |
|---|---|
| 0414 HTML CSS 실습 (0) | 2023.04.20 |
| CSS 선택자 (0) | 2023.04.09 |
| CSS 수업 내용 (0) | 2023.04.09 |
| Iframe 공간 분할 & 시맨틱 (0) | 2023.04.06 |
