오늘은 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;☞굵게
나중에 연습할 때 모르는 부분이 있을 때
이 글을 보고 하면 도움이 될 것 같다~!
'AfterSchool > html 방과후' 카테고리의 다른 글
| CSS : 클래스 선택자와 아이디 선택자(0407) (0) | 2022.04.07 |
|---|---|
| CSS : 웹페이지 꾸미기(0405) (0) | 2022.04.05 |
| html : 회원가입양식 만들기(0329) (0) | 2022.03.29 |
| html: 영상넣기, 테이블 만들기(0324) (0) | 2022.03.24 |
| html: 이미지 태그 알아보기(0323) (0) | 2022.03.23 |
