CSS : style 배우기(0401)

AfterSchool/html 방과후

CSS : style 배우기(0401)

노 코딩 노 라이프 2022. 4. 1. 00:05

오늘은 html배운지 6일차되는날...

오늘 굉장히 어려운 것을 배웠다

바로 css이다

역시 모든지 처음은 다 어려운것 같다

하지만 처음의 시작이 반이라는 말이 있는 듯이

도전을 두려워하면 안될것 같다!!

1. 인라인 스타일

결과

코드

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>인라인 스타일</title>
</head>
<body>
<h3 style="color:#ff0000; font-size: 18px;">제목입니다</h3>
</body>
</html>

color: 색깔 ☞글자색깔

font-size : 숫자px; ☞글자크기

저 사진과 같이 글씨에 색을 넣을 수 있다

2. 내부 스타일 시트

결과

코드

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>내부 스타일 시트</title>
	<style>
		h4 {
			color: blueviolet;
			font-size: 18px;
		}
	</style>
</head>
<body>
	<h4>제목입니다</h4>
</body>
<link rel="stylesheet" type="text/css" href="Mystyle.css">
<body>
	<h5>외부스타일 제목입니다.</h5>
</body>
</html>

외부스타일은 CSS 새로운 파일을 만들고

h5{
	color: pink;
	font-size: 28px;
}

이때 !! 파일을 저장할때 파일명.css로 저장해야한다.

그다음 css파일과 html과 연결하기 위해 아래와 같은 코드를 작성하면 된다!

<link rel="stylesheet" type="text/css" href="파일이름.css">

3. 예제

마지막으로는 이것저것 적혀있는 예제를 만들어보았다.

결과

코드

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

<body>
    <style>
        p {
            color: blue;
            font-size: 20px;
        }
    </style>
</body>
    <h2>2022-03-31</h2><br>
    <p>나무의 줄기는 땅 위로 계속 높게 자라고 해마다 굵기가 두꺼워지지만...
<body>
    <h3 style="color:#ff0000; font-size:18px;">제목입니다.</h3>
<head>
    <style>
        h4 {
            color: #009000;
            font-size: 18px;
        }
    </style>
</head>
</body>

<body>
    <h4>제목입니다.</h4>
</body>

<body>
    <h5> 외부스타일 제목입니다.</h5>
</body>

<body>
<head>
    <style>
        h1 {
            text-align:center;
            text-decoration:underline;
        }
    p {
            line-height:150%;
    }
    </style>
</head>

<body>
    <h1>로즈메리 허브</h1>
    <p>로즈메리는 남유럽이 원산지이며 1~2미터까지....</p>
</body>
<style>
	h2{
		color: #0000ff;
		text-shadow: 3px 3px 5px #444444;
	}
</style>
<body>
	<h2>페퍼먼트 허브</h2>
</body>
<style>
	h2{
		color: red;
		font-family: "맑은고딕";
		font-size: 28px;
	}
	p{
		color: purple;
		font-family: "돋움";
		font-size: 14px;
	}
</style>
<body>
	<h2>배롱나무</h2>
	<p>우리나라의 정원이나 공원 등에서 흔히 볼수있는...</p>
</body>
<style>
	h2{
		font-style: italic;
	}
	p{
		font-weight: bold;
	}
</style>
</html>

정리를 해보자면

text-align:center; ☞ 문장 가운데에 오게 하기
text-decoration:underline; ☞ 문잘 밑줄긋기
text-shadow: 숫자px 숫자px 숫자px 색깔; ☞글씨 그림자
font-family: "글꼴이름"; ☞글꼴바꾸기
font-style: italic; ☞기움임꼴
font-weight: bold;☞굵게

나중에 연습할 때 모르는 부분이 있을 때

이 글을 보고 하면 도움이 될 것 같다~!