기초(padding 과 margin 차이 포함)
- style 지정과 동일한 컨셉이다.
- class를 지정하면 원하는 태그에 사용 가능하다.
- 아래 p.txt1의 경우 p태그에만 사용 가능하다.
- 앞에 p가 없고 .txt1이라하면 어디든 사용 가능하다.
- padding의 기준 내부에 간격을 두는 것이고, margin의 경우 기준 외부에 간격을 두는 것이다.
- 아래 코드를 보면 backgraound 가 기준으로 padding은 backgraound 안쪽에 간격을, margin의 경우 backgraound 바깥쪽에 간격을 두고 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Css Class</title>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bagel+Fat+One&family=East+Sea+Dokdo&family=Moirai+One&family=Nanum+Pen+Script&family=Orbit&display=swap" rel="stylesheet">
<style>
p{
font-family: East Sea Dokdo;
font-size: 30px;
width: 100;
}
/* class는 . 으로 구분한다. */
p.txt1{ /* p 태그에만 적용 가능하다. */
background-color: bisque;
padding: 30px;
}
p.txt2{
background-color: aquamarine;
padding: 10px 20px 30px 40px;
}
p.txt3{
background-color: cornflowerblue;
margin: 30px;
}
p.txt4{
background-color: pink;
text-align: center;
}
</style>
</head>
<body>
<h1>반려동물이란?</h1>
<h2>반려동물의 정의</h2>
<p class="txt1">
"반려동물"이란 반려(伴侶) 목적으로 기르는 개, 고양이, 토끼, 페럿, 기니피그 및 햄스터를 말합니다(「동물보호법」 제2조제1호의3, 「동물보호법 시행규칙」 제1조의2).
</p>
<h2>반려동물의 종류</h2>
<p class="txt2">
반려동물이란 사람과 더불어 사는 동물로 장난감이 아닌 더불어 살아가는 동물을 말합니다. 이에 따라 사람과 더불어 살아가는 동물이라면 개, 고양이, 토끼, 기니피그, 돼지, 닭, 오리, 앵무새, 도마뱀, 이구아나, 사슴벌레, 금붕어 등 그 종류를 불문하고 모두 반려동물이라고 할 수 있습니다.
</p>
<h2>새로운 애완동물</h2>
<p class="txt3">
최근에는 팬더 마우스 등 쥐(마우스, 랫)와 같은 동물들도 새로운 애완동물로 널리 길러지는 추세다. 파충류와 양서류, 갑각류도 빈번히 애완용으로 사육되고 있다. 양서·파충류 중에서는 거북, 아홀로틀, 샌드피시 스킨크, 도마뱀붙이류, 이구아나, 필리핀의 맹꽁이인 아시아맹꽁이가 인기가 있다.
</p>
<h2>개별법상 반려동물의 범위</h2>
<p class="txt4">
반려동물과 관련된 법률에서 정하고 있는 동물의 범위는 약간씩 차이는 있지만 개와 고양이는 공통적으로 포함되어 있습니다.
</p>
</body>
</html>
font-family(외부 폰트 다운로드) 및 w3shool홈페이지(css 파일링크)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bagel+Fat+One&family=East+Sea+Dokdo&family=Moirai+One&family=Nanum+Pen+Script&family=Orbit&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<title>Document</title>
<style>
/* class: . 으로 표현, id: # 으로 표현 */
.happy{ /* happy라는 클래스의 전체태그에 적용된다. */
color: #ffccff;
font-size: 40px;
font-family: Nanum Pen Script;
}
b.nice{ /* b태그 영역에서만 적용되는 클래스 */
text-decoration: underline;
color: dodgerblue;
text-shadow: 3px 3px 3px #ccc;
}
img.imga{
width: 400px;
border: 10px groove gray;
margin-left: 200px;
margin-bottom: 50px;
}
img.imgb{
/* 가로 세로 200, 그림자, 테두리 둥글게 */
width: 300px;
height: 300px;
margin-left: 20px;
box-shadow: 5px 5px 5px 5px gray;
border-radius: 150px;
}
b.bts{
font-size: 40px;
font-family: Moirai One;
color: brown;
margin-left: 70px;
}
</style>
</head>
<body>
<font size="5" color="red">Font Tag!!</font><br>
<span style="color: magenta; font-size: 2em;">Span Tag!!</span> <!-- 높이조절 불가 -->
<span style="border: 2px solid green;">안녕하세요</span> <!-- 높이조절 불가 -->
<div class="happy">Div Tag_#1!!!</div> <!-- 블록형태라고 생각하면 편하다.-->
<div>Div Tag_#2!!!</div>
<b class="happy nice">B Tag!!! 굵게 속성 포함된 태그</b><br> <!-- class 2가지 모두 적용 됨. -->
<img src="../html_img/dog1.jpg" alt="이미지 없다" title="갱얼쥐 1" class="imga"> <!-- alt는 이미지 안뜨거나 할때 활용, 청각장애인을 위해 사용.-->
<br>
<img src="../html_img/dog2.jpg" alt="이미지 없음둥" title="갱얼쥐 두번째!" class="imgb">
<br>
<img src="../html_img/dog2.jpg" alt="이미지 없음둥" title="갱얼쥐 두번째!" class="img-circle">
<br>
<b class="bts">육계장</b>
<img src="../day0712/Food/3.jpg" alt="이미지 없음둥" title="배고프다!!" class="img-rounded">
<br>
<img src="../day0712/Food/4.jpg" alt="이미지 없음둥" title="배고프다!!" class="img-circle">
<br>
<img src="../day0712/Food/5.jpg" alt="이미지 없음둥" title="배고프다!!" class="img-thumbnail">
<br>
</body>
</html>
java를 잡아...... 하... 이게 맞나...