happy cat image

Start Web Coding

Your First step toward web coding,
Start Web Coding

UI 변경

Applying style to text

Now we will learn how to decorate text.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Applying style to text</title>
</head>
<body>
    <p> hello world </p>
</body>
</html>

The default source is to test with the above source.

Applying fonts

To apply a font, we can use the font-family property.

selector {font-family: font1, font2, font3}

In css source above, the selector is the class name, tag name, and id as I mentioned before.
And font-family is a property that applies the font. The reason that the value has the font 1,2,3 is the priority. If there is no first font, then the next font is applied, or the next font is applied, like this.

Let's give it a try.

p{font-family:verdana}

Below is the tag if applied above source.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Applying fonts</title>
<style>
    p{font-family:verdana}
</style>
</head>
<body>
    <p> hello world </p>
</body>
</html>

Apply the above source to your web editor or your editor. Then you can eliminate the CSS and see the differences.

Applying the font size

Let's apply the font size this time.

p{font-size:value}

Apply as above. And units are pt and px. There is more, but let's just let it know.

pt is the absolute value and px is the relative value. Since pt is an absolute value, it is almost never used and px is used mostly.

The reason is that the font size changes according to the resolution of the monitor and the size is adjusted to fit even if it is displayed on the mobile.

그러므로 px(상대값)를 많이 사용 합니다.

p{font-size:12px}

Therefore, we use a lot of px (relative value).

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Decorate your text</title>
<style>
	p{font-size:12px}
</style>
</head>
<body>
	<p> hello world </p>
</body>
</html>

Let's test the above source and change the px value to test it.


Specify the type of letter

p{font-style:value}

Values are italic and normal. If you give italic, italic is applied, and normal does not give an italic effect.

font-style is used to give an italic effect.

So let's test it by example..

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Decorate your text</title>
<style>
	p{font-style:italic}
</style>
</head>
<body>
	<p>hello world</p>
</body>
</html>

If you test the above source with the editor, you can see the italic effect.

Assign bold to text

p{font-weight:value}
Values include bold, normal, and numbers from 100 to 900. It is explained that the thickness of the data is 100 ~ 900 steps, but as a result, between 600 and 900 is treated as bold
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Decorate your text</title>
<style>
	.bold{font-weight:bold}
	.normal{font-weight:normal}
	.hundred{font-weight:100}
	.fourhundred{font-weight:400}
	.ninehundred{font-weight:900}
</style>
</head>
<body>
<p class="bold">i am bold</p>
<p class="normal">i am normal</p>
<p class="hundred">i am 100</p>
<p class="fourhundred">i am 400</p>
<p class="ninehundred">i am 900</p>
</body>
</html>

Result is like below


bold

Specifying text kerning

We use letter-spacing when reducing or increasing the spacing between the sides of the text.

p{letter-spacing:px}
When it comes to Values, there are px, pt, and em. But I only use px. Because it is a relative value, it automatically adjusts to monitor resolution.

Let's test it with an example source.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Decorate your text</title>
<style>
	p{letter-spacing:10px}
</style>
</head>
<body>
	<p>hello world</p>
</body>
</html>

I hope you can test the px values by changing them in the above source. And I need to ask you one thing. Are you just copying and pasting all the sources? I highly recommend that you actually type the sources.

기본 html구조를 다 숙지 하셨다면 괜찮은데 그렇지 않다면 손으로 쳐보면서 익히셔야 효과가 좋습니다. 이거구나 하고 넘어가는것보다

If you want to decrease the space between letters, you can also give a negative number like this -1px.

Specifying line spacing

Let's control the line spacing.

p{line-height:값}
Values can be given in% or in px.

Let's test it. Let's try adjusting the width of the p tag to 300px.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Decorate your text</title>
<style>
	p{width:300px;line-height:20px}
</style>
</head>
<body>
	<p>From east to west, Europe is a mixture of cultures, languages, heritage, architecture and customs all across the continent. The dissolution of border checks within the EU means that travel in Europe has never been easier, more affordable or more convenient!
</p>
</body>
</html>

Please test it with different px values or with % in the above source. Then you are going to get the feel of it

Underline text

I've taught this in a simple style tag in html 2.

The lecture was just mentioning that these things are, and you need to control it with a stylesheet now.

Therefore, What I am teaching is just what I am teaching. To decide which tag you are going to use is your decision.

One tip is that it is always better to use CSS if possible.

text-decoration is used to apply a line of text.

p{text-decoraton:value}
값에는 underline : 밑줄긋기
none : 효과없음
overline : 텍스트 위에 선 긋기
line-through : 텍스트 가운데 선 긋기

그러면 텍스트에 줄을 그어 봅시다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>텍스트 꾸미기</title>
<style>
	p{text-decoration:underline}
</style>
</head>
<body>
	<p>hello world</p>
</body>
</html>

Try changing the value of text-decoration in the above source to overline, line-through, none.
So let's apply the font, size, shape, thickness, color etc. learned in the current course.
You need to know how to put multiple elements in order to do that. The method is simple.

tag{font-family:value;line-height:20px;letter-spacing:30px;font-style:italic;text-decoration:underline}
Enter {property: value; property: value; attribute: value} as above, enter the property and value, and use; (semicolon).

Let's test it.

Applying style to text

This time, I'll try to apply a stylesheet to the text.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Decorate your text</title>
</head>
<body>
	<p> hello world </p>
</body>
</html>

The above source would be the default this time.

Applying fonts

To apply a font, use the font-family property.

Selector {font-family: font1, font2, font3}

In css source above, the selector is the class name, tag name, and id as I mentioned before.
And font-family is a property that applies the font. The reason that the value has the font 1,2,3 is the priority. If there is no first font, then the next font is applied, or the next font is applied, like this.

Then, let’s give it a try!

p{font-family:verdana}

Apply the above, then you will get the result as below.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Decorate your text</title>
<style>
	p{font-family:verdana}
</style>
</head>
<body>
	<p> hello world </p>
</body>
</html>

Apply the above source to your web editor or your editor. Then you can eliminate the CSS and see the differences.

Applying the font size

이번에는 글씨 크기를 적용해 봅시다.

p{font-size:value}

Apply as above. And units are pt and px. There is more, but let's just let it know.

pt is the absolute value and px is the relative value. Since pt is an absolute value, it is almost never used and px is used mostly.

The reason is that the font size changes according to the resolution of the monitor and the size is adjusted to fit even if it is displayed on the mobile.

Therefore, we use a lot of px (relative value).

p{font-size:12px}

Let's apply.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Decorate your text </title>
<style>
	p{font-size:12px}
</style>
</head>
<body>
	<p> hello world </p>
</body>
</html>

Let's test the above source and change the px value to test it.


글씨 형태 지정하기

p{font-style:값}

Values are italic and normal. If you give italic, italic is applied, and normal does not give an italic effect.

font-style is used to give an italic effect.

So let's test it by example..

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Decorate your text</title>
<style>
	p{font-style:italic}
</style>
</head>
<body>
	<p>hello world</p>
</body>
</html>

If you test the above source with the editor, you can see the italic effect.

Assign bold to text

p{font-weight:value}
Values include bold, normal, and numbers from 100 to 900. It is explained that the thickness of the data is 100 ~ 900 steps, but as a result, between 600 and 900 is treated as bold
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Decorate your text </title>
<style>
	.bold{font-weight:bold}
	.normal{font-weight:normal}
	.hundred{font-weight:100}
	.fourhundred{font-weight:400}
	.ninehundred{font-weight:900}
</style>
</head>
<body>
<p class="bold">i am bold</p>
<p class="normal">i am normal</p>
<p class="hundred">i am 100</p>
<p class="fourhundred">i am 400</p>
<p class="ninehundred">i am 900</p>
</body>
</html>

Result is like below


bold

Specifying text kerning

We use letter-spacing when reducing or increasing the spacing between the sides of the text.

p{letter-spacing:px}
When it comes to Values, there are px, pt, and em. But I only use px. Because it is a relative value, it automatically adjusts to monitor resolution.

Let's test it with an example source.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Decorate your text </title>
<style>
	p{letter-spacing:10px}
</style>
</head>
<body>
	<p>hello world</p>
</body>
</html>

I hope you can test the px values by changing them in the above source. And I need to ask you one thing. Are you just copying and pasting all the sources? I highly recommend that you actually type the sources.

If you are familiar with the basic html structure, it's all right, but if not, try it out by hand. I think this is more than It is better to actually try it.

If you want to decrease the space between letters, you can also give a negative number like this -1px.

Specifying line spacing

Let's control the line spacing.

p{line-height:value}
Values can be given in% or in px.

Let's test it. Let's try adjusting the width of the p tag to 300px.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Decorate your text</title>
<style>
	p{width:300px;line-height:20px}
</style>
</head>
<body>
	<p> From east to west, Europe is a mixture of cultures, languages, heritage, architecture and customs all across the continent. The dissolution of border checks within the EU means that travel in Europe has never been easier, more affordable or more convenient!</p>
</body>
</html>

Please test it with different px values or with % in the above source. Then you are going to get the feel of it

Underline text

I've taught this in a simple style tag in html 2.

The lecture was just mentioning that these things are, and you need to control it with a stylesheet now.

Therefore, What I am teaching is just what I am teaching. To decide which tag you are going to use is your decision.

One tip is that it is always better to use CSS if possible.

텍스트에 줄긋기를 적용 시킬려면 text-decoration을 사용한답니다.

p{text-decoraton:값}
값에는 underline : 밑줄긋기
none : 효과없음
overline : 텍스트 위에 선 긋기
line-through : 텍스트 가운데 선 긋기

Text-decoration is used to apply a line of text.

<!DOCTYPE html>
<html>
<head>X
<meta charset="utf-8" />
<title>텍스트 꾸미기</title>
<style>
	p{text-decoration:underline}
</style>
</head>
<body>
	<p>hello world</p>
</body>
</html>

위 소스에서 text-decoration의 값을 overline, line-through, none으로 변경해가면서 테스트 해보세요.

그럼 현재 강좌에서 배운 글씨체, 크기, 형태, 굵기, 칼라 등등 적용해봅시다.

그렇게 하기 위해서 여러개의 요소를 넣는 법을 알아야 하는데요 방법은 간단합니다.

태그{font-family:값;line-height:20px;letter-spacing:30px;font-style:italic;text-decoration:underline}
위와 같이 {속성:값;속성:값;속성:값} 으로 진행 하시면 됩니다. 속성과 값을 입력하고 구분은 ;(세미콜론)을 사용하구요.^^

그럼 테스트 해봅시다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>텍스트 꾸미기</title>
<style>
	h2{color:#333;font-style:italic}
	p{color:blue;font-style:normal;text-decoration:underline;line-height:30px}
</style>
</head>
<body>
	<h2>IT! News</h2>
	<p>이르면 올해 가을쯤에 도난당한 스마트폰을 사용할 수 없게 만드는 기술이 선보일 예정이다.

미 NBC 방송을 비롯한 주요 외신들은 14일(현지 시각) 미국 검찰 당국자들이 절도 등 범죄 방지를 위해 삼성전자, 애플 등 스마트폰 기기 관련 업체에 도난당한 핸드폰을 사용하지 못하게 하는 장치를 즉각 마련하라고 요구했다고 보도했다.

뉴욕과 샌프란시스코 검찰총장 등 수사 당국자와 정계 인사, 소비자 단체 등으로 구성된 스마트폰지키기운동(SOS) 지난 13일 뉴욕에서 삼성, 애플 등 주요 스마트폰 제조 업체 관계자들이 참석한 가운데 연석회의를 열고 이러한 도난 방지 기술을 장착을 촉구했다.

미 NBC 방송은 이 회의에 참석한 조지 가스콘 샌프란시스코 검찰총장은 최근 애플에서 아이폰 제품에 사용용방지장치(activation lock)를 적용하기는 했으나, 우리는 더욱 완벽하게 핸드폰을 못쓰게 만드는(하드웨어적인) 장치를 원한다 고 말했다고 보도했다.
</p>
</body>
</html>

이렇게 해서 텍스트 관련 CSS 강좌를 끝내도록 하겠습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>텍스트 꾸미기</title>
<style>
	h2{color:#333;font-style:italic}
	p{color:blue;font-style:normal;text-decoration:underline;line-height:30px}
</style>
</head>
<body>
	<h2>IT! News</h2>
	<p>이르면 올해 가을쯤에 도난당한 스마트폰을 사용할 수 없게 만드는 기술이 선보일 예정이다.

미 NBC 방송을 비롯한 주요 외신들은 14일(현지 시각) 미국 검찰 당국자들이 절도 등 범죄 방지를 위해 삼성전자, 애플 등 스마트폰 기기 관련 업체에 도난당한 핸드폰을 사용하지 못하게 하는 장치를 즉각 마련하라고 요구했다고 보도했다.

뉴욕과 샌프란시스코 검찰총장 등 수사 당국자와 정계 인사, 소비자 단체 등으로 구성된 스마트폰지키기운동(SOS) 지난 13일 뉴욕에서 삼성, 애플 등 주요 스마트폰 제조 업체 관계자들이 참석한 가운데 연석회의를 열고 이러한 도난 방지 기술을 장착을 촉구했다.

미 NBC 방송은 이 회의에 참석한 조지 가스콘 샌프란시스코 검찰총장은 최근 애플에서 아이폰 제품에 사용용방지장치(activation lock)를 적용하기는 했으나, 우리는 더욱 완벽하게 핸드폰을 못쓰게 만드는(하드웨어적인) 장치를 원한다 고 말했다고 보도했다.
	</p>
</body>
</html>

이렇게 해서 텍스트 관련 CSS 강좌를 끝내도록 하겠습니다.

강좌로 돌아가기