스타일(style) 속성
스타일 속성은 해당 태그에 여러 외적인 요소를 입혀주는 속성이다. 스타일 속성에서 쓰는 구문은 CSS(Cascading Style Sheet) 구문이고 CSS 파일은 .css 확장자를 가진다.
CSS 구문은 property와 그에 해당하는 값으로 구성되어 있고, 한 쌍(property : value)이 끝날 때마다 세미콜론을 통해 끝났음을 알려야 한다.
p {
/* property : value ; */
color : red;
background : blue;
font-size : 15px;
}스타일은 어디에서 선언해주냐에 따라 총 3가지 방식으로 구분된다.
Inline style sheet
inline style sheet은 이름 그대로 태그 안에 스타일 속성을 지정해주는 방식이다.
<p style = ""> style 속성 </p>
Internal style sheet
head 태그안에 style 태그에서 해당 태그(꾸며주고 싶은 태그)에 접근해서 스타일을 입혀주는 것이 가능하다. inline은 아니지만 같은 html 파일 내부에 있기 때문에 internal 방식이라고 한다.
<head>
<style>
p {
....
}
</style>
</head>
Linking style sheet
또한, head 태그 안의 link 태그를 통해 외부의 css 파일( .css )을 연결하여 적용할 수 있다.
<head>
<link rel="stylesheet" href="css/style.css">
</head>
간단한 CSS 예제
스타일을 입히기 위해서는 CSS 구문에 따라 property와 value를 지정해주어야 한다. 아래의 대표적인 스타일 property 예제를 통해서 CSS 구문에 작성방식, 동작 방식을 간단하게 살펴보겠다.
<!--
구문 :
<tagname style="property : value;">
<style>
property : value;
</style>
대표적인 스타일 property
background-color : 배경색
color : 글자색
text-align : 좌우정렬 (left, center, right)
font-size : 글자 크기
font-family : 글꼴
한글 글꼴은 그 수가 많지 않아서 선택의 폭이 좁습니다.
가변폭 글꼴과 고정폭 글꼴이 있는데 고정폭은 글자사이 간격을 조절할 수 없으므로
가변폭 글꼴을 사용하는 것이 좋습니다.
가변폭 글꼴 : 굴림(Gulim), 돋움(Dotum), 바탕(Batang), 궁서(Gungsuh)
고정폭 글꼴 : 굴림체(GulimChe), 돋움체(DotumChe), 바탕체(BatangChe), 궁서체(GungsuhChe)
-->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic Style</title>
</head>
<body>
<h1 style="font-family: Gulimche;">굴림체</h1>
<h1 style="font-family: Gungsuh; background-color: cyan; text-align: right;">궁서체</h1>
<h1 style="font-family: Batang; background-color: yellow; text-align: center;">바탕체</h1>
<br>
<p style="font-size: 200%;">200% P 태그</p>
<p style="font-size: 300%;">300% P 태그</p>
<p style="font-size: 200px;">200px P 태그</p>
</body>
</html>
해당 코드를 돌리면 아래와 같은 결과가 나온다.
CSS는 여러 스타일 property에 대해 지원하고 있고 이에 대한 자세한 내용은 추후 CSS 포스팅에서 다루겠다. 궁금하신 분들은 아래의 링크를 참고하시기 바란다.
https://www.w3schools.com/css/default.asp
CSS Tutorial
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
'Web > HTML' 카테고리의 다른 글
| [HTML] Tag - Image (0) | 2023.10.20 |
|---|---|
| [HTML] Tag - DIV&SPAN (0) | 2023.10.20 |
| [HTML] 속성(Attribute) (0) | 2023.10.19 |
| [HTML] HTML 문서 정보 태그 (0) | 2023.10.19 |
| [HTML] TAG - Heading (0) | 2023.10.19 |