CSS로 Hello World 꾸미기(Internal Style tag)

Posted by ITPangPang
2016.06.19 02:47 웹(Web)/CSS


CSS로 

Hello World 꾸미기


ㆍ CSS는 HTML로 출력하는 내용물에 디자인을 입혀주는 

   역할을 합니다


ㆍ CSS 첫번째 글로 Hello World를 출력하는 HTML 코드에

    CSS 코드를 추가시켜서 Text에 색깔과 Size를 바꿔보도록

    하겠습니다.


ㆍ HTML에 CSS를 적용시키는 방법은 총 3가지가 있는데 

    이번글에서는 내부 Style tag를 적용시켜보도록 하겠습니다




모든 웹개발 관련글은

HTML -> CSS -> JavaScript

순서대로 글을 쓰게 될 것 같습니다.


HTML 첫번째 글로 

HelloWorld를

출력하는 방법을 적었으니

(HTML기본 구조 및 Hello World출력하기)


이번글에서는 CSS코드만

추가시켜서

Sytle을 적용시켜보도록

하겠습니다


먼저 Hello World를 출력하는

HTML 코드입니다.

<html>

<head>

<meta charset = "utf-8">

<title>Hello World</title>

</head>

<body>

Hello World

</body>

</html>



여기서 CSS를

추가시켜보도록 하겠습니다.


아 그 전에 HTML에서 한부분만

수정하겠습니다.

<html>

<head>

<meta charset = "utf-8">

<title>Hello World</title>

</head>

<body>

<h1>Hello World</h1>

</body>

</html>


<h1></h1>을 추가시켰는데

이 부분은 HTML 글을 쓰면서

다시 알아보도록 하겠습니다.


먼저 시각적으로

바로 차이를 확인할 수 있는

텍스트 색깔을 바꿔보면서

내부 style tag에 대해

알아보겠습니다

<html>

<head>

<meta charset = "utf-8">

<style type="text/css">

h1{

color: green;

}

<title>Hello World</title>

</head>

<body>

<h1>Hello World</h1>

</body>

</html>


위의 html을

실행시켜보겠습니다.


위와 같이 text color가

green인 Hello World를

출력하였습니다


이번에 추가된

CSS 코드를 보도록

하겠습니다.


<style type="text/css">

h1{color: green;}


위와 같이 2줄이 추가되었습니다.


먼저 이번글에서는

style tag를 적용시키고

있으므로


style tag를 잠깐

설명하자면


style tag는

<head> ~ </head>

사이에


위의 CSS 코드를

추가 시키는 방법입니다


<head>에서 미리

element에 스타일을

지정을 해준후


<body>에서

element를 사용할 때

<head>에서 지정한

스타일을 불러다가

디자인을 해주는 방법입니다.


<style type="text/css">

이 부분은 코드 그대로

text에 css 스타일을 입힌다는

뜻이고


h1{color: green;}

이 부분은


선택자(selector)로

요소를 선택해서


스타일 속성을 입혀주는 부분으로


선택자{ ~ }

로 구성되 있습니다


위에서는 h1이 선택자(selector)

부분으로 h1요소를 선택한다는

뜻입니다.


{ ~ }

부분에서 ~에 스타일을 넣어줍니다.

선택자에서 h1요소를 선택한후

color 색깔을 green으로 입힌다는

내용입니다.


간단하게

color:색깔;

을 넣어주시면 됩니다

color: green;

color: red;

color: blue;

간단하게 이런식으로 넣으셔도 되고


color: rgb(34,116,28);

color: rgb(255,0,0);

color: rgb(0,255,255);

또는 이런식으로 rgb값으로 넣으셔도 됩니다.


색깔만 바꿔주시면

아래와 같은 결과를 얻을 

수 있습니다




색깔을 바꿔봤으니

이번에는 글자크기(font size)

변경해보도록 하겠습니다


파란색 HelloWorld 코드에서 

font size CSS 한줄을 추가시키도록

하겠습니다.


<html>

<head>

<meta charset = "utf-8">

<style type="text/css">

h1{

color: rgb(0,0,255);

font-size: 50px;

}

</style>

<title>Hello World</title>

</head>

<body>

<h1>Hello World</h1>

</body>

</html>


위의 코드를 실행시켜보겠습니다.


글자크기가 달라진것이

느껴집니다.


여기서 추가된 코드는

한줄입니다

font-size: 50px;

코드 그대로 폰트 사이즈를

원하는 px로 변경시켜줍니다.


뭐 뒤에는 px이 아니라

pt로 사용하셔도 됩니다.


뭐 특별히 다른 부분은

설명할게 없으므로


폰트사이즈랑 color좀

여러가지 변경시켜보면서

테스트 해보고

끝내도록 하겠습니다

저작자 표시 비영리 변경 금지
신고
이 댓글을 비밀 댓글로