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

728x90

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' 카테고리의 다른 글

티스토리툴바