* 본 포스팅은 스타일 시트의 기본을 위한 CSS 정보글입니다.
2. 스타일 시트의 기본을 위한 CSS 정보글
문서 내용을 자유롭게 표현 "간단한 웹문서 제작을 위한 HTML의 기본" 글을 통해서 HTML을 통해서 문단을 구성하고, 글씨체를 바꾸고, 이미지를 첨부하거나 여백을 설정하는 등 간단한 웹문서를
hooks.tistory.com
1. 웹문서의 스타일을 지정하는 코드?
지난 포스팅에서 간단한 웹문서와 이미지를 삽입하는 코드를 배워보았습니다. 하지만 쉽게 제작된 만큼 글자들의 위치가 왼쪽으로 정렬되어있고, 글자 크기, 폰트 등 다채롭지가 못합니다. 이번에는 간단한 웹문서의 스타일을 지정함으로써 깔끔하게 페이지가 기본적으로 여백을 갖고, 글자의 크기와 폰트를 변경하는 그런 스타일 코드에 대해서 배워보겠습니다.
2. 스타일 코드, <style>... </style>
이 스타일을 지정하는 코드의 위치는 사용자 마음대로 입니다.
<body> ...</body> 안에 위치해도 되고, <title> 앞, 뒤 위치해도 되고, 심지어 <html> ... </html> 코드 밖에 위치해도 적용되네요.
주목해야할 점으로 이 스타일 코드 안에서 문서들의 스타일을 지정하기 위해서는
코드 이름 { ... }과 같이 중괄호로 닫는다는 것이 특징입니다.
아마도 다른 코드와 구분을 쉽게 하기 위해서...
예시로 맨 위의 기본 웹문서에 다음과 같이 스타일 코드를 지정해주겠습니다.
<style>
body {
margin: 10%;
}
h1 { text-align: center; }
h2 {
color: #0000ff;
}
</style>
body에 해당하는 텍스트의 여백을 10%로 지정하고, h1에 텍스트는 중앙으로 배열하겠다는 의미입니다.
또한, h2의 텍스트 색상을 #0000ff로 바꾸겠다는 건데... 기본적인 웹문서이므로 기본적인 컬러 코드만 표시해두겠습니다.
* 기본 색상 코드
검정 #000000
빨강 #ff0000
초록 #00ff00
파랑 #0000ff
그렇습니다 전 파란색 텍스트를...
위와 같이 스타일을 지정하여 웹문서를 편집하면, 다음과 같이 좀 더 깔끔한 웹페이지가 완성됩니다.
3. 글씨체와 크기를 변경하는 스타일 코드
좀 더 스마트해 보이는 글씨체와 크기, 그리고 강조까지 넣고 싶은데, 어떻게 하면 되나요?
About HOOK는 궁금증을 유발해 보이는 그런 글씨체로 바꾸고 싶어요.
그렇다면, 먼저 font-family 코드를 알아봅시다.
기본적으로 5가지 글씨체를 알아볼 건데,
serif
sans-serif
monospace
cursive
fantasy
위 다섯 가지 글꼴은 가장 기본적으로 제공되는 글씨체입니다.
아직 더 스마트해 보이고 궁금증을 유발해 보이는 글씨체는 위 다섯 가지안에서 해결....
다섯가지 글씨체를 보기 위해서, 그리고 기본적으로 제공되는 소제목 코드 h1~h7를 이용하여 글씨체 5가지를 보도록 하겠습니다. 먼저 기본 웹문서에 추가적으로 위 다섯 개의 글씨체 이름의 텍스트를 소제목 5가지로 <body>... </body> 안에 다음과 같이 추가하겠습니다.
<h3> serif </h3>
<h4> sans-serif </h4>
<h5> monospace</h5>
<h6> cursive </h6>
<h7> fantasy </h7>
그리고 이어서 스타일 코드, <style>... </style>, 내부에 위 다섯 개의 소제목의 글꼴 체도 다음과 같이 코드를 추가하여 넣습니다.
h3 { font family: serif; }
h4 { font family: sans-serif; }
h5 { font family: monospace; }
h6 { font family: cursive; }
h7 { font family: fantasy; }
그런데 글씨체가 너무 작아서 잘 보이지 않네요...
그렇다면 글씨체를 키워줄 수 있는
font-size 코드를 알아봅시다.
아까 지정했던 글씨체 폰트에 코드를 추가하여 다음과 같이 편집해 보겠습니다.
h3 { font-family: serif; font-size: 30;}
h4 { font-family: sans-serif; font-size: 30; }
h5 { font-family: monospace; font-size: 30; }
h6 { font-family: cursive; font-size: 30; }
h7 { font-family: fantasy; font-size: 30; }
기본적으로 px 단위로 편집됩니다. 굳이 px 안 써도 됩니다.
'COMPUTER SCIENCE > A piece of INFO.' 카테고리의 다른 글
| HTML 항목 구성과 항목에 설명넣기 (0) | 2021.05.20 |
|---|---|
| 문단 구성에 유용한 HTML 코드 정리 (0) | 2021.05.18 |
| HTML 이미지 삽입코드와 사이즈 변경 (0) | 2021.05.13 |
| 간단한 웹문서 작성하고 브라우저로 열기 (0) | 2021.05.12 |
| 홈페이지 제작을 위한 기본정보 (0) | 2021.05.11 |
