반응형
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>기초-인라인 스타일</title>
<style>
table.tb {background: #1233;}
</style>
</head>
<body>
<h2>기초-인라인 스타일</h2><!--태그를 element라고 하기도 한다.-->
<h4>inline-style = element-style 방식</h4>
<p>직접 태그를 선택해서 시작태그안에 스타일 속성을 사용해서 스타일을 대입하는 것을 인라인스타일 방식이라고 한다.</p>
<pre>인라인 스타일의 단점:
15년 전에나 했던 방식으로 일일히 하나하나 바꿔줘야해서 어렵다.ㅠ</pre>
<!--스타일 태그는 태그에 스타일을 입혀주기 때문에 모든 태그에 사용할 수 있다.
표준 모니터 : FHD(1092*1080 px) < QHD < UHD
스타일 = "스타일 정보"라는 속성값을 넣어준다. width는 가로 넓이를 의미 width:100px는 너비에 100픽셀을 대입하겠다.-->
<table border="1" class="tb">
<caption>CALCULATOR</caption>
<!--스타일 정보를 여러 개 쓰고자 할때는 ; 을 사용합니다.(;는 스타일 정보를 구분해주는 문자 '구분자'라고 합니다.), tr 태그에도 스타일 속성은 넣을 수 있다.-->
<tr style="height:100px;text-align:center">
<td style="width:100px;text-align:center" >Num<br>Lock</td>
<td style="width:100px">/</td>
<td style="width:100px">*</td>
<td style="width:100px">-</td>
</tr>
<tr style="height:100px;text-align:center">
<td>7</td>
<td>8</td>
<td>9</td>
<td rowspan="2">+</td>
</tr>
<tr style="height:100px;text-align:center">
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr style="height:100px;text-align:center">
<td>1</td>
<td>2</td>
<td>3</td>
<td rowspan="2">Enter</td>
</tr>
<tr style="height:100px;text-align:center">
<td colspan="2">0</td>
<td>.</td>
</tr>
</table>
</body>
</html>반응형
'IT > HTML&CSS' 카테고리의 다른 글
| [html] 나무위키_예제(HTML 만들기)_기초(2021-09-07) (0) | 2021.11.09 |
|---|---|
| [HTML] 내부스타일시트방식_기초(2021-08-31) (0) | 2021.11.08 |
| [HTML] 표만들기(Table)_예제_기초(2021-08-27) (0) | 2021.11.08 |
| [HTML] 표만들기(Table)_기초(2021-08-27) (0) | 2021.11.08 |
| [HTML] 탭제목_기초(2021-08-17) (0) | 2021.11.07 |