2장 . 글자 관련 태그
2.1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<!DOCTYPE html>
<html>
<head>
<style>
ul{
list-style: "- ";
}
</style>
</head>
<body>
<h1> ★ 요리 관련 자격증</h1>
<ul>
<li>커피 바리스타 자격증</li>
<li>제과제빵 자격증</li>
<li>조리기능사 자격증</li>
</ul>
</body>
</html>
|
cs |
-> ul { list-style: ? } 로 스타일 지정
2.3
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<h3> <h1~><h6> 태그 중 가장 글자가 큰 것은 무엇일까요?</h3>
<p>정답 : <h1></p>
<h3>삶에서 가장 중요한 것은 "행복" 입니다.</h3>
</body>
</html>
|
cs |
->
"<" : <
">" : >
"" : "
공백 :
"&" : &
프로젝트 1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
<!DOCTYPE html>
<html>
<head>
<style>
ol{
padding: 0px;
margin: 0px;
}
ol{
padding: 0 0 0 30px;
</style>
</head>
<body>
<h1>간단한 로제 파스타 만들기</h1>
<br>
<p>토마토 소스의 새콤달콤함과...........</p>
<ol>
<li>새우 마늘..</li>
<li>끓는 물에..</li>
<li>볶아 놓은 재료와...</li>
</ol>
<p>※스파게티 면은 ..</p>
</body>
</html>
|
cs |
-> 내가원하는 지점에 리스트를 위치하고 싶을 땐
margin :0px, padding : 0px 로 초기화를 한 뒤에 따로 설정해준다.
margin : 바깥 여백 상 오 하 왼
padding: 안쪽 여백
3장. 멀티 미디어
이미지 삽입: <img>
+ src = " " : 파일 경로와 이름 지정 (파일 : /) *반드시 확장자 기입
웹에서 사용되는 이미지 파일 포맷 : JPG, PNG, GIF, SVG
width: 너비
height : 높이 (너비와 높이 둘 중 하나 지정 시 자동으로 크기 지정)
title : 이미지위에 마우스 올렸을 때 보이는 설명글 지정
오디오 삽입 : <audio> </audio>
+ src = " " : 파일 경로와 이름 지정
controls : 오디오 플레이어가 화면에 표시
loop : 오디오 반복 재생
autoplay : 오디오 자동 재생
비디오 삽입 : <video> </video>
+ src = : 파일 경로와 이름 지정
controls : 비디오 플레이어가 화면에 표시
loop : 비디오 반복 재생
autoplay : 비디오 자동 재생
width : 너비 지정
height : 높이 지정
링크 걸기 : <a> </a>
+ href =" " : 링크할 사이트 지정
target="_blank" : 새로운 페이지로 링크 열기
<a>와 </a> 사이 : 누를 텍스트나 이미지 지정
text-decoration: none; : 텍스트 장식 없애기
4장. 테이블과 폼 양식을 만들어보자
4.1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
<!DOCTYPE html>
<html>
<head>
<style>
table,td,th{
border: solid 1px black;
border-collapse: collapse;
}
</style>
</head>
<body>
<h1>KTX 열차 시간표</h1>
<table>
<tr>
<th>출발 시간</th>
<th>버스 회사</th>
<th>등급</th>
<th>잔여석</th>
</tr>
<tr>
<td>12:30</td>
<td>금호고속</td>
<td>고속</td>
<td>27석</td>
</tr>
<tr>
<td>12:45</td>
<td>동양고속</td>
<td>우등</td>
<td>25석</td>
</tr>
<tr>
<td>13:00</td>
<td>금호고속</td>
<td>고속</td>
<td>20석</td>
</tr>
</table>
</body>
</html>
|
cs |
->
테이블 : <table </table>
행 : <tr> </tr>
열 제목 : <th></th>
열 (셀) : <td></td>
줄 보이게 하기
css :
border : 스타일 글자크기px 글자색상
border-collapse : collapese; : 선 하나로
프로젝트 3
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
<!DOCTYPE html>
<html>
<head>
<style>
table,td,th{
border: solid 1px black;
border-collapse: collapse;
}
</style>
</head>
<body>
<h1> 태풍정보 </h1>
<table>
<tr>
<th rowspan="2">일시</th>
<th colspan="2">중심위치</th>
<th rowspan="2" >중심기업(hPa)</th>
<th colspan="2">최대 풍속</th>
</tr>
<tr>
<td>위도</td>
<td>경도</td>
<td>초속(m/s)</td>
<td>시속(km/h)</td>
</tr>
<tr>
<td >24일 09시 현재</td>
<td>17.2</td>
<td>112.2</td>
<td >1000</td>
<td>18</td>
<td>64</td>
</tr>
<tr>
<td >24일 09시 현재</td>
<td>17.2</td>
<td>112.2</td>
<td >1000</td>
<td>18</td>
<td>64</td>
</tr>
</table>
</body>
</html>
|
cs |
->
행/열 합치기
<th> </td> 주로 <th> 열제목에서 지정
+ rowspan ="" 행 합치기
colspan ="" 열 합치기
폼 양식 정리
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<form>
텍스트 입력창 : <input type="text">
<br><br>
비밀번호 입력창 : <input type="password">
<br><br>
라디오 버튼 : <input type="radio" checked>라디오 버튼1
<input type="radio">라디오 버튼2
<input type="radio">라디오 버튼 3
<br><br>
체크 박스 : <input type="checkbox">체크박스 1
<input type="checkbox">체크박스 2
<input type="checkbox">체크박스 3
<br><br>
파일 선택 창: <input type="file">
<br><br>
선택 박스 : <select>
<option>선택 박스1</option>
<option>선택 박스2</option>
<option>선택 박스 3</option>
</select>
<br><br>
다중 입력 창 :<br><textarea rows="5" cols="50"> </textarea>
<br><br>
<button> 확인</button>
</form>
</body>
</html>
|
cs |
폼 입력 : <form> </form>
+폼 종류
텍스트 입력 창 : 문구 <input type="text">
비밀번호 입력창 : 문구 <input type="password>
라디오 버튼 : <input type="radio">문구
체크 박스 : <input type="checkbox">문구
파일 선택 창 : <input type="file">
선택 박스 : <select>
<option>문구</option>
<option>문구</option>
</select>
다중 입력 창 : 문구 <textarea rows="" cols=""> </textarea>
버튼 : <button>문구</button>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
<!DOCTYPE html>
<html>
<head>
<style>
tr,td{
width: 50px;
}
</style>
</head>
<body>
<h3>개인 신상 정보 입력</h3>
<form>
<table >
<tr>
<td>이름 : <input type="text"></td>
</tr>
<tr>
<td>비밀번호 : <input type="password"></td>
</tr>
<tr>
<td>성별 :<input type="radio">남성 <input type="radio">여성
</tr>
<tr>
<td>취미 : <input type="checkbox">영화감상 <input type="checkbox">게임 <input type="checkbox">음악듣기</td>
</tr>
<tr>
<td>파일 첨부 :<input type="file"></td>
</tr>
<tr>
<td>이메일 : <input type="text">@<select>
<option>--선택--</option>
<option>naver.com</option>
</select></td>
</tr>
<tr>
<td>자기소개 : <textarea rows="5" cols="50"></textarea></td></tr>
<tr><td><button>확인</button></td>
</tr>
</form></table>
</body>
</html>
|
cs |
->
폼양식을 가지런히 정리하는 방법은 테이블을 사용하는 것이다. (<td> 셀안에 넣기 )
5장 css
5.3
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<!DOCTYPE html>
<html>
<head>
<style>
h1{
color: blue;
text-shadow: 2px 2px 10px gray;
}
p{
color: #444444;
font-family: "바탕";
font-size: 18px;
line-height: 150%;
}
span{
font-weight: bold;
color: #0e9bdc;
text-decoration: underline;
}
</style>
</head>
<body>
<h1>세랭게티 국립공원</h1>
<p>
<span>탄자니아의 킬리만자로산 서쪽</span>에 위치한 세렝게티의ㅣ 광활한 평원은 11ㄴㅇㅁㄴㅇㅁㅇㅁㄴㅇㄴㅁㅇ탄자니아의 킬리만자로산 서쪽에 위치한 세렝게티의ㅣ 광활한 평원은 11ㄴㅇㅁㄴㅇㅁㅇㅁㄴㅇㄴㅁㅇ탄자니아의 킬리만자로산 서쪽에 위치한 세렝게티의ㅣ 광활한 평원은 11ㄴㅇㅁㄴㅇㅁㅇㅁㄴㅇㄴㅁㅇ탄자니아의 킬리만자로산 서쪽에 위치한 세렝게티의ㅣ 광활한 평원은 11ㄴㅇㅁㄴㅇㅁㅇㅁㄴㅇㄴㅁㅇ탄자니아의 킬리만자로산 서쪽에 위치한 세렝게티의ㅣ 광활한 평원은 11ㄴㅇㅁㄴㅇㅁㅇㅁㄴㅇㄴㅁㅇ
</p>
</body>
</html>
|
cs |
->
text-shadow: 오른쪽 간격px 왼쪽간격 px 흐림정도px 글자색;
text-weight: bold or normal; - 글자 굵게 설정
text-decoration : underline ;-글자 밑줄 설정
line-height : ???% - 줄 간격 설정
list-style-image : url(경로); - 목록 글머리 형태 이미지로 변환
list-style-type: square, circle, disc ...
6장 CSS선택자
태그 선택자: 태그의 영역을 지정
id 선택자: 유일무이한 하나의 특정 영역 지정( #으로 선언 )
class 선택자: 여러 영역을 지정 ( . 으로 선언 )
7장 레이아웃 기초
글상자 스타일: border : 스타일 글자크기px 글자 색;
안쪽 여백 : padding: 상px 우px 하px 좌px;
바깥 여백: margin: 상px 우px 하px 좌px;
글상자 스타일에 맞게 : border-top, border-bottom..
스타일 : solid(실선) dashed(줄선) dobble(이중 실선) dotted(점선)
width : 너비 값 설정