html5에 css 스타일을 직접 지정하는 방법은 즉각적인 결과를 볼 수 있다. 그 중 자주 사용되는 것이 있는데 배경색과 글자색, 글자폰트와 정렬이 그것이다. 이것을 html 태그에 직접 적용하는 방법은 style 속성을 이용하여 css 코드를 직접 작성하는 방법이다. 여기서는 자주 사용하는 스타일을 직접 태그에 적용해 보도록 한다.
html5 css3 스타일 자주 사용하는 배경 글자 정렬 적용하기
using html css sytle background font align
html5에서 스타일을 적용하는 방법은 태그에 직접 스타일을 지정하는 방법이 있다.
스타일을 따로 분리하여 사용할 수도 있으나 여기서는 직접 태그에 적용하도록 한다.
자주 사용하는 스타일은 보통 3가지가 있다.
배경색과 글자 정렬이다.
이것들만 잘 사용하더라도 어느정도 보기 편한 웹페이지를 꾸밀 수 있다.
html5 태그에 스타일 css 지정하는 방법 using html5 style attribute
html5 태그에는 css3 의 스타일을 직접 지정하여 태그를 돋보이게 할 수 있다. 태그의 style 속성을 사용하여 css 구문을 작성하면 된다. css 구문이 길어지고 많아지면 정리하여 외부에서 불러와야 겠
lngnat.tistory.com
자주 사용하는 css 스타일
웹에서 자주 사용하는 스타일은 3가지 정도가 있다.
사람마다 더 추가될 수 있다.
여기서 말하는 자주 사용하는 css 스타일은 배경색과 글자모양, 글자색, 정렬정도이다.
사용법은 다음과 같다.
스타일의 속성과 값의 순서는 상관이 없고, 올바르게 작성만 하면 그만이다.
<tagname style="property:value; property:value; property:value; ~"></tag>
// 배경색
background: 색상코드 또는 색상명
// 글자색
color: 색상코드 또는 색상명
// 글자폰트
font-family: 글자폰트명
// 글자크기
font-size: 글자크기
// 수평정렬
text-align: 수평정렬코드샘플코드
위의 코드를 사용하여 예제를 만들어 본다.
스타일을 적용하는 방법은 간단하다.
하지만, 추후에 스타일코드가 길어지면 외부로 분리해야 한다.
<!-- HTML 문서임을 정의한다. -->
<!DOCTYPE html>
<!-- html 문서 시작 -->
<html>
<!-- 문서 정보 -->
<head>
</head>
<!-- // -->
<!-- 문서 내용 -->
<body>
<div>
<h1>
스타일 적용하는 방법
</h1>
<p style="background-color:tomato;">
style=background:색상명 : 배경색 지정
</p>
<p style="color:blue;">
style=color:색상명 : 글자색 지정
</p>
<p style="font-family: 궁서;">
style=font-family : 글자폰트 지정
</p>
<p style="font-size: 100%;">
style=font-size : 글자크기 지정
</p>
<p style="text-align: center;">
style=text-align : 수평정렬 지정
</p>
<p style="text-align: center; color:blue;">
style=text-align : 수평정렬, 색상 지정
</p>
</div>
</body>
<!-- // -->
</html>
<!-- // -->결과 화면을 보자.
스타일을 지정하는 방법은 다양하다.
아래는 자주 사용하는 스타일 속성을 태그에 적용한 것이다.
'programming > web' 카테고리의 다른 글
| html 인용구 태그 종류와 사용 qutation and citation tag (0) | 2022.03.19 |
|---|---|
| html 문자열 태그 종류와 의미 using html text formatting tag (0) | 2022.03.15 |
| html5 태그에 스타일 css 지정하는 방법 using html5 style attribute (0) | 2022.03.12 |
| html5 pre 태그의 사용 방법 using html5 pre tag (0) | 2022.03.08 |
| html5 br 줄바꿈 태그 사용 p 태그 비교 using line break br tag (0) | 2022.03.06 |
댓글