-
210914_css+class,divHtml 2021. 9. 14. 17:52
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS 적용_#1</title>
<!--body 섹션별로 동일한 효과를 줄 때 css 사용-->
<style type="text/css">
h1{
font-size: 40pt;
color: #009966;
}
h2{
font-size: 25pt; color: #db7789;
}
p{
font-size: 13pt; color: #cc0000; line-height: 2em;
}
</style>
</head>
<body>
<h1>우리 강아지, 우울증인 것 같아요</h1> <p>강아지의 수명은 10여 년이 넘기 때문에 강아지를 키우다 보면 결혼, 임신, 유학 등 사람에게도 다양한 변화가 일어나게 됩니다. 결혼으로 인해서 환경이 바뀌는 것은 물론 가족 구성원의 변화도 생기게 되는데요, 강아지가 잘 적응할 수 있도록 조금 더 관심을 기울여주세요:) 가족이 집에서 빠져나가게 되면 아이도 허전함을 느끼게 되고, 함께 이사하는 경우라면 낯선 상황에 긴장하고 불안해할 수 있답니다</p>
<img alt="" src="../image/dog1.jpg">
<h2>1. 반려인의 결혼</h2> <p>강아지의 수명은 10여 년이 넘기 때문에 강아지를 키우다 보면 결혼, 임신, 유학 등 사람에게도 다양한 변화가 일어나게 됩니다. 결혼으로 인해서 환경이 바뀌는 것은 물론 가족 구성원의 변화도 생기게 되는데요, 강아지가 잘 적응할 수 있도록 조금 더 관심을 기울여주세요:) 가족이 집에서 빠져나가게 되면 아이도 허전함을 느끼게 되고, 함께 이사하는 경우라면 낯선 상황에 긴장하고 불안해할 수 있답니다.</p>
<img alt="" src="../image/dog2.jpg">
<h2>2. 아기가 태어났을 때의 무관심</h2> <p>강아지와 아기를 함께 키우는 것은 아기의 면역력이나 정서에도 도움이 된다고 하죠? 하지만 아기가 태어났을 때 모든 가족이 강아지에게 너무 무관심해지고 아기에게 관심이 쏠리면 무관심으로 인한 강아지 우울증이 나타날 수 있어요. 강아지와 아기를 아예 분리시키고 아기만 돌보는 경우도 있는데, 이렇게 되면 강아지는 아기에게 관심을 빼앗겼다고 생각하게 됩니다. 가능하면 같은 공간에서 강아지가 아이와 가족들을 볼 수 있게 해주고, 접촉이 불안하다면 아이가 있는 방에 울타리를 둘러주는 것만으로도 강아지는 자신이 가족들과 함께하고 있다고 느낄 수 있어요. 강아지에게 아기의 존재를 차근차근 알려주고 친해질 수 있도록 도와주세요. ^^</p>
<img alt="" src="../image/dog3.jpg">
<h2>3. 혼자 있는 시간이 너무 많아요</h2> <p>집에 혼자 있는 시간이 너무 긴 강아지들은 하루종일 반려인을 기다리다가 스트레스를 받거나 우울해하기도 합니다. 가능한 자주 산책하면서 교감하는 시간을 가져주세요. 반려인과 떨어지면 불안하고 초조해하는 분리불안을 심하게 느끼는 경우도 있는데요, 반려인의 외출을 강아지가 너무 심각하게 느끼지 않도록 훈련을 할 필요도 있습니다. 외출하고 돌아와서 반기는 강아지에게 너무 격렬하게 반응을 보여주지 말고 오히려 모른 척을 하다가 강아지가 진정되고 나서 예뻐해주시는 게 좋아요. 나갔다 온 일이 특별한 게 아니라 아무 일도 아니라는 듯이요:)</p>
<img alt="" src="../image/dog4.jpg">
</body>
</html>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css를 class에 적용</title>
<style type="text/css">
/* 범용클래스 .점 */
.style1{
font-size: 15pt; /* 글자크기단위:pt,em,px,rem -텍스트빼고는 거의 px씀 */
color: magenta; /* 글자색: 16진수, 영단어 */
}
/* b태그에만 적용가능한 클래스 */
b.style2{
border-color: #9370db; /* 테두리 선색 */
border-radius: 30px; /*테두리선의 모서리 둥글기 */
border-width: 10px; /* 테두리선 굵기 */
border-style: solid; /* 테두리 선종류*/
width: 300px; /* 전체너비 */
color: #191970; /* 글자색 */
font-size: 2em; /* 직전태그의 2배 */
}
b.style3{
height:200px; /* 태그높이 */
text-align: center; /* 가운데 수평 */
}
</style>
</head>
<body>
<font color="red" size="5" face="Impact">Have a Nice Day!!</font>
<br>
<font color="ff00ff" size="10">안녕하세요</font>
<br>
<b class="style1">Bold_style1적용</b>
<!--style1이라는 클래스 적용-->
<br>
<font class="style1">font_style1적용</font>
<br>
<b class="style2">Bold_style2적용</b>
<br>
<font class="style2">font_style2적용</font>
<br>
<b class="style2 style3">style2,3 둘 다적용</b>
<br>
</body>
</html>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css Div</title>
<style type="text/css">
.style1{
color: #00bfff; /*텍스트 컬러*/
border: solid 5px #f08080;
height: 100px;
}
/*div태그에서만 적용가능한 class*/
div.style2{
width:500px;
text-align:center;
line-height: 100px;
margin-left: 50px; /* 태그 바깥중 왼쪽의 여백 */
margin-top: 30px;
font-size: 1.5em;
font-weight: bold; /*폰트 굵게 속성*/
text-decoration: line-through; /*취소선*/
font-family: 'Comic Sans Ms','Impact'; /*폰트 종류*/
}
/*로또숫자처럼 디자인*/
div.style3{
margin-left: 100px;
margin-top: 30px;
border: solid 3px #7b68ee;
background-color: #f0fff0;
border-radius: 100px; /*모서리 둥글게*/
width: 100px;
height: 100px;
line-height: 100px;
font-size:3em;
font-family: 'Comic Sans MS';
text-align: center;
font-weight: bold;
color: black;
box-shadow: 5px 5px 5px gray; /* x,y,blur,색상 */
}
</style>
</head>
<body>
<!--태그마다 적용 안 되는 css속성 있음-->
<span class="style1">Span Tag1</span> <!--span은 height 적용 안됨-->
<span class="style2">Span Tag2</span> <!--style2는 div에만 적용가능하기에 변화없음-->
<div class="style1 style2">Div Tag1</div>
<div class="style3">7</div>
</body>
</html>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="../css/mystyle.css"> <!--외부css파일삽입-->
<style type="text/css">
div{
float:left;
}
</style>
</head>
<body>
<div class="lotto">7</div>
<div class="lotto">42</div>
<div class="lotto">15</div>
<div class="lotto">20</div>
<div class="lotto">38</div>
<div class="lotto">1</div>
<hr style="clear: both;"> <!--해제 안하면 그다음 속성도 다 옆으로-->
<h3>이미지</h3>
<img alt="이미지없음" src="../image/image_01.png">
<img alt="이미지없음" src="../image/image_02.png" width="100" border="1"><br>
</body>
</html>
'Html' 카테고리의 다른 글
210914_list (0) 2021.10.03 210914_table (0) 2021.09.14 210914_image (0) 2021.09.14 210914_h,b,pre,hr,p,u,em,sup,sub,small (0) 2021.09.14 210914_html (0) 2021.09.14