[HTML과 CSS 코드예시] 스타일 적용으로 웹페이지 꾸미기

홈페이지제작/CSS 2018. 2. 6. 15:10

HTML과 CSS 코드예시] 스타일 적용으로 웹페이지 꾸미기

Color Scripter로   https://colorscripter.com/   에서 적용하여 삽입하였습니다.

스타일을 적용하지 않은 예시

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
    <title>스타일 없는 웹 페이지</title>
</head>
<body>
<h3>CSS 스타일 맛보기</h3>
<hr>
<p>나는 <span>웹 프로그래밍</span>을 좋아합니다.</p>
</body>
</html>
 
 cs

 

 css스타일을 적용한 예시

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
    <title>스타일 없는 웹 페이지</title>
    <style>
        /*CSS 스타일 시트 작성*/
        body{background-color: mistyrose;}
        h3 {color : purple;}
        hr {border : 5px solid yellowgreen;}
        span{color: blue;font-size : 20px;}
    </style>
</head>
<body>
<h3>CSS 스타일 맛보기</h3>
<hr>
<p>나는 <span>웹 프로그래밍</span>을 좋아합니다.</p>
</body>
</html>
 
 
 
 cs

 

 

위의 코드가 칼라로 들어갈 수있게 한 것은

Color Scripter로   https://colorscripter.com/   에서 적용하여 삽입하였습니다.

               

 

 

 

 

 

 

 

 

 

 

 

저작자표시

'홈페이지제작 > CSS' 카테고리의 다른 글

[CSS 강좌] 테이블 꾸미기  (0) 2018.02.14
[CSS 강좌] 박스 모델(Box Model)  (0) 2018.02.07
CSS 강좌 /선택자 / 전체 선택자(Universal Selector)  (0) 2018.02.05
[CSS 강좌] 워드프레스 테마 만들기  (0) 2018.01.29
[CSS 기초강좌] 표(table) 꾸미기 > 테두리 만들기  (0) 2018.01.11
블로그 이미지

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,

공지사항



카테고리

글 보관함

달력

«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31

티스토리툴바