html5 태그에는 css3 의 스타일을 직접 지정하여 태그를 돋보이게 할 수 있다. 태그의 style 속성을 사용하여 css 구문을 작성하면 된다. css 구문이 길어지고 많아지면 정리하여 외부에서 불러와야 겠지만, 즉각적인 테스트를 위해 자주 사용된다. 하지만 퍼블리싱 단계에서는 css를 따로 정리하여 외부에 배치한다.
html5 태그에 스타일 css 지정하기
using html5 style attribute
html5로 웹페이지를 보면 화려하거나 혹은 예쁜 웹페이지를 보게 된다.
이것은 html 태그들의 어울리는 화면배치이기도 하면 css 를 이용한 스타일을 적용한 것이다.
html이 웹페이지의 뼈대를 만들어 컨텐츠를 보여주는 것이라면
css는 웹페이지를 꾸미고 컨텐츠를 돋보기에 하는 역할을 한다.
태그에 style 사용
html에 스타일을 사용하는 방법은 간단하다.
태그 속성의 style 속성을 추가하고 css 구문을 작성하면 된다.
html 태그에 직접 작성하여 즉각적으로 효과를 볼 수 있지만, 추후에는 외부로 정리하는 작업을 해야 한다.
사용법은 다음과 같다.
<태그명 style="css 속성 : 값" />
<tagname style="property : value;" />샘플 코드
위의 사용법을 바탕으로 간단한 예제를 만들어 본다.
참고로 css의 background-color 은 배경색을 지정하는 기능을 한다.
<!-- HTML 문서임을 정의한다. -->
<!DOCTYPE html>
<!-- html 문서 시작 -->
<html>
<!-- 문서 정보 -->
<head>
</head>
<!-- // -->
<!-- 문서 내용 -->
<body>
<div>
<h1 style="background-color:powderblue;">
스타일 적용
</h1>
<p style="background-color:tomato;">
html5 태그에 css3 스타일을 직접 적용합니다.
</p>
</div>
</body>
<!-- // -->
</html>
<!-- // -->결과 화면을 보자.
html5 태그의 배경색이 적용되었다.
h1 태그와 p 태그에만 배경색을 적용되었기 때문에 해당 부분만 적용되었다.
반응형
'programming > web' 카테고리의 다른 글
| html 문자열 태그 종류와 의미 using html text formatting tag (0) | 2022.03.15 |
|---|---|
| html5 css3 스타일 자주 사용하는 배경 글자 정렬 적용하기 using html css sytle background font align (0) | 2022.03.13 |
| html5 pre 태그의 사용 방법 using html5 pre tag (0) | 2022.03.08 |
| html5 br 줄바꿈 태그 사용 p 태그 비교 using line break br tag (0) | 2022.03.06 |
| html5 p 태그 h 태그 관계 컨텐츠 분리하기 using html5 p tag and h tag (0) | 2022.03.05 |
댓글