반응형
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/* 글꼴관련스타일 */
/* font-family:글꼴이름 */
*{
/* font-family: "맑은 고딕", 돋움, 굴림 */
}
/* 글자크기 font-size: 절대크기(브라우저 지정크기),
상대크기(상대적인 글자크기), 크기(글자크기), 백분율(부모기준)*/
body{
/* font-size: 20pt; */
}
/* 글자스타일 font-style : normal italic*/
p{
/* font-style: italic; */
}
/* 글자 굵기 font-weight */
p{
/* font-weight: bold; */
}
/* body태그 선택 글자크기 20px */
body{
font-size: 20px;
}
/* h1태그 선택 글꼴 바탕, 글자크기 3em */
h1{
font-family: 바탕;
font-size: 3em;
}
/* class="sp" 선택 글자크기 150%, 글자굵기 800 */
.sp{
font-size: 150%;
font-weight: 800;
/* 글자색 red 16진수 #ff0000 rgba(255,0,0, 투명도)
투명도 0(투명) ~ 1(불투명)*/
color: rgb(255, 0, 0,0.5);
}
/* class="italic" 선택 글자 스타일 italic */
.italic{
font-style: italic;
}
</style>
</head>
<body>
<h2>레드향</h2>
<p>껍질에 붉은빛이 돌아 <span class="sp">레드향</span>이라 불린다</p>
<p class="italic">비타민C와 비타민 P가 풍부해
혈액순환, 감기예방 등에 좋은 것으로 알려져 있다</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
p {
width: 200px;
border: 1px solid #222;
padding: 10px;
margin: 10px;
}
/* 텍스트 정렬하는 text-align left right center justify*/
/* class="center" 텍스트 정렬 */
.center{
text-align: justify;
}
/* 줄간격 조절 line-height 0.7 2.5 24px 200% */
p{
line-height: 2;
}
/* 텍스트에 줄표시하거나 없애주는 text-decoration 속성 */
/* class="sp" text-decoration: none underline overline line-through */
.sp{
text-decoration: underline;
}
/* 글자간격 letter-spacing, 단어간격 word-spacing속성 */
p{
letter-spacing: 0.2em;
word-spacing: 2em;
}
/* 텍스트 그림자 효과 text-shadow 속성 가로 세로 번짐정도 색상지정 */
.sp{
color:white;
text-shadow: 7px -7px 20px black;
}
/* 텍스트 대소문자 변환 text-transform 속성 */
/* capitalize 첫글자 대문자, uppercase 대문자 lowercase 소문자*/
.tran1{
text-transform: capitalize;
}
.tran3{
text-transform: lowercase;
}
</style>
</head>
<body>
<h2>레드향</h2>
<p class="center">껍질에 붉은빛이 돌아 <span class="sp">레드향</span>이라 불린다</p>
<p class="italic">비타민C와 비타민 P가 풍부해
혈액순환, 감기예방 등에 좋은 것으로 알려져 있다</p>
<p class="tran1">html</p>
<p class="tran2">css</p>
<p class="tran3">JAVASCRIPT</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/* 목록 스타일 지정 list-style-type 속성
none*/
.c1{
list-style-type:none;
}
/* class="c2" 목록 스타일 지정 */
/* 목록스타일 아이콘 이미지 list-style-image 속성 */
.c2{
list-style-image: url("icon.png");
list-style-position: inside;
}
/* 목록스타일 들어쓰는 list-style-position 속성
inside 안으로 들여쓰기 , outside 기본*/
</style>
</head>
<body>
<ol class="c1">
<li>셀러드 채소를 씻어 물기 제거</li>
<li>먹기 좋은 크기로 썰어 둠</li>
<li>한꺼번에 갈아 줌</li>
<li>드레싱 뿌리면 끝</li>
</ol>
<ul class="c2">
<li>셀러드 채소를 씻어 물기 제거</li>
<li>먹기 좋은 크기로 썰어 둠</li>
<li>한꺼번에 갈아 줌</li>
<li>드레싱 뿌리면 끝</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
table{
/* 표 제목 위치를 정해주는 caption-side 속성 */
caption-side: bottom;
/* 표에 테두리 그려주는 border 속성 두께 선종류 선색상 */
border: 1px solid black;
/* 셀 사이 여백 border-spacing 속성 */
border-spacing: 10px;
/* 표와 셀 테두리 합쳐주는 border-collapse 속성 */
border-collapse: collapse;
}
/* td,th 대상 테두리 1px dotted 검정색 */
td,th{
border: 1px dotted black;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<h1>상품 구성</h1>
<table border="1">
<caption>선물용과 가정용 상품 구성</caption>
<tr><th>용도</th><th>중량</th><th>갯수</th><th>가격</th></tr>
<tr><td rowspan="2">선물용</td><td>3kg</td><td>11~16과</td><td>35,000원</td></tr>
<tr> <td>5kg</td><td>18~26과</td><td>52,000원</tr>
<tr><td rowspan="2">가정용</td><td>3kg</td><td>11~16과</td><td>30,000원</tr>
<tr> <td>5kg</td><td>18~26과</td><td>47,000원</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/* body *{ */
/* border: 1px solid blue; */
/* } */
.box1{
border: 2px solid skyblue;
width: 400px; /*고정너비*/
height: 100px; /*고정 높이*/
/* box-shadow 수평거리 수직거리 흐림정도 번짐정도 색상 */
box-shadow: 2px -2px 20px 0px blue;
border-radius: 20px;
}
.box2{
border: 2px solid white;
width: 50%;
height: 100px;
box-shadow: 5px 5px 15px 5px pink;
border-radius: 20px;
}
#im{
/* border-radius: 50%; */
border-top-left-radius: 25px;
border-style: dotted;
border-color: red;
}
.box3
{
width: 400px; /*고정너비*/
height: 100px; /*고정 높이*/
border: 10px;
/* border-width: 2px 10px; /*위아래 양옆 선 너비*/
border-width: 10px 20px 30px 40px; /* 위 왼쪽 아래 오른쪽 */
border-left-color: orange;
border-style: solid;
}
</style>
</head>
<body>
<!-- css이용하여 박스 모델 :박스 형태 =>웹문서 -->
<!-- margin, padding, 테두리 박스 여러 겹 사용 -->
<!-- h1, div, p 태그 요소 : 한줄 전체 차지 100%-->
<!-- span, img, strong 콘텐츠 만큼 범위 영역 -->
<!-- 콘텐츠 영역 - padding - border - margin -->
<!-- 콘텐츠 영역 크기 지정 width height 속성 -->
<div class="box3"></div>
<img id ="im" src="../html/4.jpg">
<div class="box1"></div>
<div class="box2"></div>
<h1>레드향</h1>
<div>껍질에 붉은빛이 돌아 <span>레드향</span>이라 불린다</div>
<p>비타민C와 비타민 P가 풍부해<br>
혈액순환, 감기예방 등에 좋은 것으로 알려져 있다</p>
</body>
</html>
반응형