IT/HTML&CSS

[HTML] 인라인스타일_기초(2021-08-31)

기록자 꼬비 2021. 11. 8.

<!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

[HTML] 인라인스타일_기초(2021-08-31)

'IT > HTML&CSS' 카테고리의 다른 글

댓글

티스토리툴바