[HTML] HTML - 10.스타일 — Koras02코딩웹

HTML 스타일(Style)

이번 시간에는 HTML 스타일을 사용해

CSS스타일을 HTML요소에 설정하는 방법을

알아보도록 하겠습니다.

HTML 요소의 style 속성(attribute)을 이용해

CSS 스타일을 HTML 요소에 직접 설정가능합니다.

하지만 이러한 style 요소를

사용하면 단 하나의 HTML 요소에만

스타일을 적용할 수 있습니다.

<태그이름 style="속성이름:속성값">

배경색 변경

다음 예제에서는 style 속성을 이용해 배경색을

변경 해보겠습니다.

  <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>Document</title>
    <style>
        .center-bottom {
            background-color: red;
            width: 100%;
            max-width: 1200px;
            margin:auto;
        }
    </style>
</head>
  <body>
    <div class="center-bottom">
      <h1>style 속성을 이용한 배경색 변경</h1>
    </div>
  </body>

글자색 변경

다음 예제는 style 속성을 이용해 글자색을 변경하는 방법입니다.

<h1 style="color:maroon"> 
   style 속성을 이용한 글자색 변경
</h1>

글자 크기 변경

다음 예제는 style 속성을 이용해 글자 크기를 변경하는 방법입니다.

<h1 style="font-size:15px">
    style 속성을 이용한 글자 크기 변경 
</h1>

문단 정렬 변경

다음 예제는 style 속성을 이용해 문단 정렬을 하는 방법입니다.

<h1 style="text-align: center;">
        style 속성을 이용한 문단 정렬 변경
</h1>

여러 스타일의 설정

style 속성을 이용해 여러 CSS 스타일을 한번에 적용할 수 있습니다.

<h1 style="font-size:12px; color:green; background-color: aqua; text-align: center">
        style 속성을 이용해 한번에 스타일링
</h1>

참고 자료

코딩교육 티씨피스쿨

4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등

tcpschool.com

GitHub - Koras02/html-study: html 블로그 작성용 - study1

html 블로그 작성용 - study1. Contribute to Koras02/html-study development by creating an account on GitHub.

github.com

'프론트 엔드 > HTML' 카테고리의 다른 글

[HTML] HTML - 11.색과 배경 (0)	2023.01.07
[HTML] HTML - 9. 주석과 엔티티 그리고 문자셋 (1)	2023.01.04
[HTML] HTML - 8.인용구 (1)	2023.01.03

HTML 스타일(Style)

참고 자료

'프론트 엔드 > HTML' 카테고리의 다른 글

티스토리툴바