HTML Styles
카테고리 없음
※ 주의 !
이 글은 개인 공부 목적으로 많은 오류가 있을 수 있습니다.
문제가 있다면 말씀 부탁 드리겠습니다
안녕하세요
Gon입니다.
이글에서는 우리가 HTML을 이용하여 웹페이지를 만들면서 어떻게 보면 가장 중요한 기법중이라고 할수 있는 Styles에 관련된 것을 알아보도록 하겠습니다.
우리가 무언가 글을 쓰게 된다면 글의 내용자체는 당연히도 중요하지만, 그 가독성을 높이기 위한 기법들이 아주 중요합니다.
크기,글씨체,색, 구성 등등 이런 디자인의 요소가 아주 중요합니다.
여기서 우리의 HTML에서 style이라는 속성이 등장하여 이것들을 도와주게 됩니다.
HTML Styles속성
HTML style 속성은 요소의 색,글꼴,사이즈 등을 바꾸어 줄수 있습니다.
이전 글에서 잠깐 봤듯이 우리가 사용하는 요소 즉 - 태그안에 style속성을 이용하여 우리의 딱딱한 또는 가독성이 떨어지는 문서를 좀더 활력을 불어 넣을수 있게 됩니다.
여담이지만 이 style 속성안의 name과value들은 CSS라는 언어에서 좀 더 자세히 적어 보도록 하겠습니다.
지금은 style속성은 CSS라는 언어와 HTML언어가 상호작용하기 위한 속성값이다 정도로만 생각해두시면 좋을 것 같습니다.
자, 그래서 style 속성은 아래와 같이 사용할수 있습니다.
<태그이름 style="name:value;">위와 같이 어떠한 태그 안에 style이라는 속성을 입력하면 이후 ""(큰따옴표) 안에는 CSS언어가 동작을 하게 됩니다.
그리고 CSS언어에서 그 명령들을 마치기 위한 약속으로 ;를 표시해 줍니다.
그러면 대표적인 style 속성을 사용하여 우리의 HTML코드를 업그레이드 시켜보록 해보겠습니다.
Background Color
CSS의 background-color는 해당 HTML요소의 배경색을 정의해 줍니다.
<body style="background-color:powderblue;">
<h1>제목</h1>
<p>내용</p>
</body>위와 같은 형식으로 우리가 만든 HTML의 body 태그에 style 속성을 이용하여 배경색을 변경 시킬수 있습니다.
또한 그 하위 태그인 h1,p태그에도 적용시킬수 있습니다.
<body>
<h1 style="background-color:powderblue;">제목만 배경색 변경</h1>
<p style="background-color:tomato;">이 문단만 배경색 변경</p>
</body>이런식으로 각각의 요소에 style속성을 이용하여 CSS에서의 속성값-background-color를 이용하여 해당 요소의 배경색을 변경할 수 있습니다.
Text Color -color
이제 요소의 글의 색만 변경하는 style 속성의 값을 알다보록 하겠습니다.
color를 이용하여 우리는 해당 요소의 글의 색을 변경할수 있습니다.
<h1 style="color:blue;">제목 글의 색 변경</h1>
<p style="color:red;">이 문단의 글의 색 변경.</p>
Fonts - font-family
글꼴또한 변경 가능합니다.
<h1 style="font-family:verdana;">제목 글꼴은 - verdana</h1>
<p style="font-family:courier;">이 단락의 글꼴은 - courier.</p>
Text Size - font-size
크기도 변경이 가능합니다.
<h1 style="font-size:300%;">제목</h1>
<p style="font-size:20px;">본문.</p>여기서 주의할 점은 %를 사용하면 기본 태그가 가지고 있는 고유의 값에서 %만큼 변경을 하는 것이고,
px를 사용하여 절대적인 값을 정의해 줄 수 있습니다.
Text Alignment - text-align
해당 요소의 글을 정렬할수 있습니다.
<h1 style="text-align:center;">제목 가운데 정렬</h1>
<p style="text-align:center;">해당 단락 가운데 정렬</p>
이렇게 우리는 style 속성을 이용하여 우리가 만드는 HTML을 좀더 풍미를 높일 수 있습니다.
이 글에서는 이런 내용들이 있다만 알고 계시면 좋을 것 같습니다.
감사합니다.
Gon
Commnet