안녕하세요.
콤퓨타 학원에 원장을 하고 있는 이프로입니다. 헤헴 ^^
이번 강좌는 style인데요. body내에서 정말 많이 사용하는 기능입니다.
각 태그를 원하는 형태로 스타일링 할 수 있도록 도와주는 기능들을 제공해줍니다.
하나씩 둘러보겠습니다.
style 형식
<태그명 속성="속성명:값">우선 html문법을 잠시 보면요. 태그명이 있고 옆에 속성이라는제 존재하는데요.
꼭 사용해야하는 건 아니에요. 필요에 의해서 추가를 할수 있는거에요.
style도 속성에 들어가는데, 속성에는 일반적으로 속성명과 값의 구조를 가지고 있어요.
다음 예제를 볼께요.
<body style="background-color: red;">
body태그에 style이라는 속성을 이용했어요. style속성에는 background-color라는 속성명과 red라는 값을 가지고 있조.
style은 body 영역을 스타일링해주는데요.
background-color는 배경색을 넣는 역할을 해줘요. red라는 값이 있어서
body태그 영역에 붉은색 처리가 되는걸 확인 하실수 있어요.
이렇게 style이라는 속성을 이용해서 특정 태그영역내에 여러가지 스타일 효과를 줄수 있어요.
너무나도 당현하게 style속성안에 속성들이 정말 다양하게 제공하고 있어요.
이 강의는 초급 강의이기 때문에 대표적인 속성들을 둘더보도록 할께요.
background-color 속성
예제 부분에서 설명하였으므로 넘어가도록 할께요.
red처럼 색상을 표현하는 방법이 여러가지 있는데요. 이 부분은 별도의 강의를 준비하도록 할께요.
<h1 style="color: blue;">안녕하세요.</h1>
color속성은 영역 내에 글자의 색상을 설정 할수 잇는 기능이에요.
값이 blue인데요. 영역내의 글자를 파란색으로 처리 하겠다는 의미가 되요.
font-family 속성
<h1 style="font-family: 돋움;">안녕하세요.</h1>
<h1 >안녕하세요.</h1>
font-family는 폰트의 종류를 설정 할 수 있는 기능을 제공해요.
그래서 font-family:돋움 하면 해당 영역내에 있는 글자는 모두 돋움으로 표현되게 되어 있습니다.
모든 폰트를 사용 할 수 있는건 아니고 윈도우에 설치되어 있는 폰트들은 모두 사용 가능해요.
그렇다고 내 컴퓨터에만 설치되어 있는 폰트를 사용한다면 해당 폰트가 없는 다른 사람의 컴퓨터에서는 해당 폰트가 없을 수 있고 그렇게 되면 폰트가 깨지는 현상이 있을 수 있어요.
그래서 별도로 웹에서 사용되는 폰트들이 있는데 이부분도 별도의 강좌를 만들어보도록 할게요.
font-size 속성
<h1 style="font-size: 15px;">안녕하세요.</h1>
<h1 style="font-size: 5px;">안녕하세요.</h1>
font-size는 영역내의 글자 크기를 조정 할 수 있는 속성인데요.
px는 픽셀 단위를 표현하는 것이구요. 기본적으로 가장 많이 사용되는 단위에요.
지금 보시는 것처럼 정말 여러가지 형태로 표현이 가능한데요.
이 단위도 추후에 강좌를 만들도록 할께요.
15px, 5px에서 숫자가 크면 클수록 글자가 크게 표현이 되요.
text-align 속성
<h1 style="text-align: center;">안녕하세요.</h1>
<h1 style="text-align: left;">안녕하세요.</h1>
글자의 정렬을 설정 할수 잇는 속성인데요.
center : 중앙
left : 왼쪽
right : 오른쪽
이렇게 영역내의 텍스트를 정렬 할 수 있어요.
정말 많은 속성이 있는데요. 일단 이 정도록 정리하고 추후 자세히 다루는 강좌를 만들도록 하겠습니다.
이번 강의는 여기까지에요.
여러분들의 관심과 사랑이 있다면 좀 더 좀은 컨텐츠를 제공해줄 수 있을거 같습니다.
많은 관심과 사랑 부탁드립니다.
감사합니다.
그럼 콤빠~
'웹개발 > HTML 간단태그소개' 카테고리의 다른 글
| 09. Body - Table (2) | 2024.01.02 |
|---|---|
| 08. Body - 이미지 (0) | 2024.01.02 |
| 07. Body - 하이퍼링크 (Hyperlinks) (0) | 2024.01.01 |
| 05. Body - 텍스트 꾸밈 (0) | 2024.01.01 |
| 04. Body - 제목, 단락 (0) | 2024.01.01 |
