HTML Styles
html style 속성은 색상, 글꼴, 크기 등과 같은 스타일 요소를 추가하는 데 사용된다.
해당 속성은 다음의 문법적 구조를 통해서 사용할 수 있다
<tagname style="property:value;">
<!-- property = CSS property -->
<!-- value = CSS value -->주석에서 언급한 것처럼 property는 CSS property, value는 CSS value를 의미한다.
CSS에 대해서는 나중에 자세히 알아볼테니 일단은 이정도로만 알고 넘어가도록 하자
배경색상(Background Color)
배경색상을 설정하기 위해서는 "background-color" 속성을 정의하면 된다.
배경색상은 페이지 전체를 대상으로 적용할 수도 있고 각 요소들에 대해서 따로 적용할 수도 있다.
페이지 전체의 배경색상을 변경하고 싶다면 다음과 같이 <body>태그에 style 속성을 추가해주면 된다.
그리고 각 요소의 배경화면을 변경하고 싶다면 다음과 같이 각 태그에 style 속성을 추가해주면 된다.
그리고 다음 두 요소를 함께 혼용해서 사용하는 것도 가능하다.
서체색상(Text Color)
서체의 색상을 설정하기 위해서는 "color" 속성을 정의하면 된다.
서체(Text Font)
서체를 지정하기 위해서는 "font-family" 속성을 정의하면 된다.
서체크기(Text Size)
서체크기를 지정하기 위해서는 "font-size"속성을 정의하면 된다.
서체크기 지정은 기본으로 지정된 크기의 몇% 수준으로 키울 것인지를 입력해주면 된다.
예시처럼 300%은 기본 지정크기의 3배 크기로, 150%는 기본 지정크기의 1.5배 크기로 서체 크기를 지정하겠음을 의미한다.
서체정렬(Text Alignment)
워드 문서파일을 만들 때를 생각해보면 작성한 문자열을 문서의 중앙으로 혹은 왼쪽, 오른쪽으로 정렬하는 경우가 있다.
이를 html에서도 수행할 수 있는데 해당 서체를 정렬하기 위해서는 "text-align" 속성을 정의하면 된다.
각 스타일별로 정의해줘야 하는 css 속성을 다시한 번 정리해보면 다음과 같다.
| 설정하고자 하는 요소 | 정의해야하는 속성 |
| HTML 요소 | style |
| 배경색 | background-color |
| 서체 색상 | color |
| 서체 | font-family |
| 서체크기 | font-size |
| 서체정렬 | text-align |
'Web Basic > HTML' 카테고리의 다른 글
| HTML Quotation & Comments (인용구 & 주석) (0) | 2020.07.20 |
|---|---|
| HTML Formatting(서식) (0) | 2020.07.20 |
| Heading(제목) & Paragraphs(단락) (0) | 2020.07.20 |
| HTML 기초 (0) | 2020.07.20 |
| HTML 개요 (0) | 2020.07.20 |