CSS로 Hello World 꾸미기(Internal Style tag)
CSS로
Hello World 꾸미기
ㆍ CSS는 HTML로 출력하는 내용물에 디자인을 입혀주는
역할을 합니다
ㆍ CSS 첫번째 글로 Hello World를 출력하는 HTML 코드에
CSS 코드를 추가시켜서 Text에 색깔과 Size를 바꿔보도록
하겠습니다.
ㆍ HTML에 CSS를 적용시키는 방법은 총 3가지가 있는데
이번글에서는 내부 Style tag를 적용시켜보도록 하겠습니다
모든 웹개발 관련글은
HTML -> CSS -> JavaScript
순서대로 글을 쓰게 될 것 같습니다.
HTML 첫번째 글로
HelloWorld를
출력하는 방법을 적었으니
이번글에서는 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좀
여러가지 변경시켜보면서
테스트 해보고
끝내도록 하겠습니다
'웹(Web) > CSS' 카테고리의 다른 글
| inline, block 요소 (0) | 2016.12.11 |
|---|---|
| CSS 기본(font-size, color, background, border) (0) | 2016.11.12 |
| HTML문서에 .CSS Link하기(외부 스타일시트) (1) | 2016.10.03 |
| CSS로 표를 꾸며보자 (0) | 2016.07.03 |
| CSS 하이퍼링크 꾸미기 (0) | 2016.06.20 |