따라하며 배우는 HTML - #6 ( HTML Style)

HTML Style Attribute

안녕하세요 ~ 오늘은 화면을 꾸며보는 시간을 갖도록 하겠습니다.

글자에 색상을 입히고 가운데정렬, 오른쪽 정렬 그리고 배경색을 입혀보도록 하겠습니다.

먼저 실습 영상을 보고 학습을 진행하도록 하겠습니다.

자 이제 ~ 스타일 속성에 대해서 알아보도록 하겠습니다.

<h1 style="color:blue;">HTML STYLE</h1>

        

        <p style="color:red">이번 시간에는 HTML STYLE 에 대해서 알아보겠습니다.</p>

        

        <p style="text-align: center; color:blueviolet">텍스트 정렬 가운데</p>

        

        <p style="text-align: right; background-color: aqua">텍스트 정렬 오른쪽</p>

스타일 은 태그에 css 프로퍼티와 css 값을 입력해 주는 형태로 이루어집니다.

예를 들면 h1 태그에 style 을 주어 css 속성인 color 에 blue 라는 값을 주는 형태로 사용합니다.

위의 소스코드 실행 결과 화면은 아래와 같습니다.

스타일 속성에 대해서 잠시 알아보면  color 는 글자에 대한 색상 값이며,

text-align 은 글자에 대한 정렬을 할 수 있는 값입니다 - left, center, right 값을 넣을 수 있습니다.

스타일 에 대한 부분은 속성 값이 많아 다룰 부분이 워낙 많기 때문에 이후 배울 내용 중간 중간 계속 소개하는 방법으로 진행하도록 하겠습니다.

그럼 다음에 뵙겠습니다. ^^