[개발] - Front/Mega-CSS
5. 목록 스타일, 표 스타일
완벽한 장면
2023. 5. 13. 10:20
list-style-type: 불릿 모양과 번호 스타일 지정
<목록 스타일의 속성값>
list-style-image: 불릿 대신 이미지 파일을 사용
list-style-image: url('~~~'); // 불릿으로 사용할 이미지
list-style-position: 목록을 들여쓰기
list-style: 목록 속성을 한꺼번에 표시
- 소스를 간단하게 줄일 수 있음
예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>IT 수강생 모집</title>
<style>
h1{
color: red;
}
h2,h3{
color: blue;
}
.outside{
color: green;
/*list-style: none;*/
/*list-style-image: url('images/무당벌레.PNG');*/
}
.inside{
list-style-position: inside;
}
</style>
</head>
<body>
<h1>IT 수강생 모집</h1>
<h2>IT에 관심 있는 여러분 환영합니다</h2>
<p>메가 IT에서 모두를 대상으로 수강생을 모집합니다. 학부나 전공에 상관없습니다. <br>
평소 IT에 관심있었던 사람들의 지원바랍니다.</p>
<ul class="outside">
<li><b>모집 기간 :</b> 4월 2일 ~ 5월 11일</li>
<li><b>모집 분야 :</b> 프론트, 백엔드, 게임개발</li>
<li><b>지원 방법 :</b> 양식 작성 후 이메일 접수<br>
<i>지원서 양식은 메가IT 홈페이지 공지 게시판에 있습니다.</i></li>
</ul>
<ul class="inside">
<li><b>모집 기간 :</b> 4월 2일 ~ 5월 11일</li>
<li><b>모집 분야 :</b> 프론트, 백엔드, 게임개발</li>
<li><b>지원 방법 :</b> 양식 작성 후 이메일 접수<br>
<i>지원서 양식은 메가IT 홈페이지 공지 게시판에 있습니다.</i></li>
</ul>
<h3>혜택</h3>
<ol type="a">
<li>취업지원</li>
<li>공부공간 제공</li>
</ol>
<img src="images/a.jpg" width="500" height="500" alt="">
</body>
</html>실행 결과
표 스타일
caption-side : 표 제목의 위치를 정해주는 속성
border : 표에 테두리를 그려주는 속성
- 표 테두리는 border 속성을 사용하는데 표 바깥 테두리와 셀 테두리를 각각 지정한다.
예제
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>BorderStyle</title>
<style>
div {
width: 200px;
height: 100px;
display: inline-block;
margin: 15px;
text-align: center;
font-size: 20px;
line-height: 100px;
border-width: 5px;
/* 테두리 굵기 */
}
#box1 {
border-style: solid;
border-width: 2px;
border-color: red;
}
/* 실선 */
#box2 {
border-style: dotted;
border-width: thick thin;
border-top-color: blue;
}
/* 점선 */
#box3 {
border-style: dashed;
border-width: thick thin thin thick;
/*top, right, bottom -> left right를 따라갑니다.*/
border-left-color: orange;
}
/* 짧은 직선 */
#box4 {
border-style: double;
border-width: thick thin; /*top, right, bottom -> left right를 따라갑니다.*/
border-left-color: green;
}
#box5 {
border-style: groove;
border-width: thick; /*top, right, bottom -> left right를 따라갑니다.*/
border-left-color: yellow;
}
#box6 {
border-style: inset;
border-width: thick thin thin; /*top, right, bottom -> left right를 따라갑니다.*/
border-left-color: pink;
}
#box7 {
border-style: outset;
border-width: thick thin thin; /*top, right, bottom -> left right를 따라갑니다.*/
border-left-color: purple;
}
#box8 {
border-style: ridge;
border-width: thick thin thin; /*top, right, bottom -> left right를 따라갑니다.*/
border-left-color: aqua;
}
</style>
</head>
<body>
<div id="box1"> 실선 테두리 </div>
<div id="box2"> 점선 테두리 </div>
<div id="box3"> 짧은 직선 테두리</div>
<div id="box4"> double </div>
<div id="box5"> groove </div>
<div id="box6"> inset </div>
<div id="box7"> outset </div>
<div id="box8"> ridge </div>
</body>
</html>
실행 결과
border-spacing : 셀 사이의 여백을 결정
기본형
border-collapse: 표와 셀 스타일을 합쳐주는 속성
예제
- 표의 바깥 테두리는 검은색 실선, 셀의 테두리는 검은색 점선으로 지정한 후 이 속성을 이용해 합치기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>표 스타일</title>
<style>
table {
caption-side: bottom; /* 표 캡션 위치 */
border:1px solid black; /* 표 테두리는 검은 색 실선으로 */
border-collapse: collapse; /* 테두리 한줄로 표시 */
}
td, th {
border:1px dotted black; /* 셀 테두리는 검은 색 점선으로 */
padding:10px; /* 셀 테두리와 내용 사이의 여백 */
text-align:center; /* 셀 내용 가운데 정렬 */
}
</style>
</head>
<body>
<h2>상품 구성</h2>
<table>
<caption>선물용과 가정용 상품 구성</caption>
<thead>
<tr>
<th>용도</th>
<th>중량</th>
<th>개수</t>
<th>가격</th>
</tr>
</thead>
<tbody>
<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원</td>
</tr>
<tr>
<td rowspan="2">가정용</td>
<td>3kg</td>
<td>11~16과</td>
<td>30,000원</td>
</tr>
<tr>
<td>5kg</td>
<td>18~26과</td>
<td>47,000원</td>
</tr>
</tbody>
</table>
</body>
</html>실행 결과
퀴즈 1
만들 모양
코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>연습문제 4</title>
<style>
#container { /* 전체 콘텐츠를 감싸는 div */
width:650px; /* 너비 */
margin:0 auto; /* 가로로 중앙에 배치 */
padding:5px; /* 테두리와 내용 사이의 패딩 여백 */
}
#check { /* 텍스트 부분을 감싸는 div */
width:640px; /* 너비 - 그림 너비 값에 맞춤 */
border:1px solid #ccc; /* 테두리 */
}
h1 {
color: white; /* 글자색 */
font-size: 1em; /* 글자 크기 */
background: #222; /* 배경색 */
margin: 0; /* 제목과 다른 요소 간의 마진 여백 */
padding: 10px; /* 테두리와 제목 텍스트 사이의 패딩 여백 */
}
h2 {
color: #ff0000; /* 글자색 */
font-size: 1.5em; /* 글자 크기 */
text-align: center; /* 가운데 정렬 */
}
p {
font-size: 1.2em; /* 글자 크기 */
line-height: 2em; /* 줄간격 */
font-weight: bold; /* 굵게 */
text-align: center; /* 가운데 정렬 */
}
.accent {
color: #0000ff; /* 글자색 */
}
.smalltext {
font-size: 0.7em; /* 글자 크기 */
}
img{
width:640px;
}
</style>
</head>
<body>
<div id="container">
<img src="images/안녕.jpg" alt="인형 상품 사세요.">
<div id="check">
<h1>확인하세요</h1>
<h2>주문 및 배송</h2>
<p><span class="accent">오후 5시 이전</span> 주문건은 당일 발송합니다<br>
2시 이후 주문건은 다음날 발송합니다(주말 제외)</p>
<hr>
<h2>교환 및 환불</h2>
<p>불만족시 <span class="accent">100% 환불</span>안됩니다<br>
고객센터로 전화주세요</p>
<hr>
<h2>고객센터 </h2>
<p>1111-1111<br>
<span class="smalltext">상담시간 : 오전 9시 ~ 오후 4시 (토/일, 공휴일 휴무)</span></p>
</div>
</div>
</body>
</html>
퀴즈 2
만들 모양
코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>IT 수강생 모집</title>
<link rel="stylesheet" href="css/Q2.css">
</head>
<body>
<div id="container">
<div id="description">
<h1>위키</h1>
<p>위키(wiki,이 소리의 정보듣기 (도움말·정보))는 불특정 다수가 협업을 통해
직접 내용과 구조를 수정할 수 있는 웹사이트를 말한다</p>
<p>또한 일반적인 위키에서 텍스트는 단순화된 <del>마크업 언어</del>
(<i>위키 마크업</i>)을 이용하여 작성되며,
리치 텍스트 에디터의 도움을 받아 편집하기도 한다.
<br><sup>[1]</sup> 위키는 지식경영이나 기록 등 다양한 용도로 이용된다.
공동체용 웹사이트나 조직 내 인트라넷에 쓰이기도 한다.
그러나 주로 개인적인 용도로 이용되는 위키도 있는데,
이를 개인 위키라고 한다.
</p>
</div>
<div id="receipe">
<h1>IT 수강생 모집</h1>
<h2>IT에 관심 있는 여러분 환영합니다</h2>
<p>메가 IT에서 모두를 대상으로 수강생을 모집합니다. 학부나 전공에 상관없습니다. <br>
평소 IT에 관심있었던 사람들의 지원바랍니다.</p>
<ul>
<li><b>모집 기간 :</b> 4월 2일 ~ 5월 11일</li>
<li><b>모집 분야 :</b> 프론트, 백엔드, 게임개발</li>
<li><b>지원 방법 :</b> 양식 작성 후 이메일 접수<br>
<i>지원서 양식은 메가IT 홈페이지 공지 게시판에 있습니다.</i></li>
</ul>
</div>
<div id="package">
<h1>IT 수강생 지원 양식</h1>
<table>
<tr>
<th rowspan="3">개인정보</th>
<th>이름</th>
<td></td>
</tr>
<tr>
<th>나이</th>
<td></td>
</tr>
<tr>
<th>연락처</th>
<td></td>
</tr>
<tr>
<th>IT 지원 분야</th>
<td colspan="2"></td>
</tr>
</table>
</div>
</div>
</body>
</html>
퀴즈 3
만들 모양
코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>IT 수강생 모집</title>
<link rel="stylesheet" href="css/Q3.css">
</head>
<body>
<div id="container">
<div id="description">
<h1>위키</h1>
<p>위키(wiki,이 소리의 정보듣기 (도움말·정보))는 불특정 다수가 협업을 통해
직접 내용과 구조를 수정할 수 있는 웹사이트를 말한다</p>
<p>또한 일반적인 위키에서 텍스트는 단순화된 <del>마크업 언어</del>
(<i>위키 마크업</i>)을 이용하여 작성되며,
리치 텍스트 에디터의 도움을 받아 편집하기도 한다.
<br><sup>[1]</sup> 위키는 지식경영이나 기록 등 다양한 용도로 이용된다.
공동체용 웹사이트나 조직 내 인트라넷에 쓰이기도 한다.
그러나 주로 개인적인 용도로 이용되는 위키도 있는데,
이를 개인 위키라고 한다.
</p>
</div>
<div id="receipe">
<h1>IT 수강생 모집</h1>
<h2>IT에 관심 있는 여러분 환영합니다</h2>
<p>메가 IT에서 모두를 대상으로 수강생을 모집합니다. 학부나 전공에 상관없습니다. <br>
평소 IT에 관심있었던 사람들의 지원바랍니다.</p>
<ul>
<li><b>모집 기간 :</b> 4월 2일 ~ 5월 11일</li>
<li><b>모집 분야 :</b> 프론트, 백엔드, 게임개발</li>
<li><b>지원 방법 :</b> 양식 작성 후 이메일 접수<br>
<i>지원서 양식은 메가IT 홈페이지 공지 게시판에 있습니다.</i></li>
</ul>
</div>
<div id="package">
<h1>IT 수강생 지원 양식</h1>
<table>
<tr>
<th rowspan="3">개인정보</th>
<th>이름</th>
<td></td>
</tr>
<tr>
<th>나이</th>
<td></td>
</tr>
<tr>
<th>연락처</th>
<td></td>
</tr>
<tr>
<th>IT 지원 분야</th>
<td colspan="2"></td>
</tr>
</table>
</div>
</div>
</body>
</html>728x90
반응형