앞으로는 외부스타일시트 쓰고, 유효성 검사를 진행하는 습관을 들일예정.
ch2
조건: 이메일에 하이퍼 걸기. 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
43
44
45
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/sytle3.css">
<title>Document</title>
</head>
<body>
<table>
<tr>
<td rowspan="4"><img src="./KakaoTalk_20221122_224407289_04.jpg" alt="picture"></td>
<td colspan="4">이 력 서</td>
</tr>
<tr>
<td rowspan="2">성명</td>
<td rowspan="2">안 기 웅</td>
<td colspan="2">주 민 등 록 번 호</td>
</tr>
<tr>
<td colspan="2">123456-1234567</td>
</tr>
<tr>
<td colspan="4">생년월일 1986년 01월 09일 (만 34 세)</td>
</tr>
<tr>
<td>주소</td>
<td colspan="4">경기도 화성시 산척동</td>
</tr>
<tr>
<td rowspan="2">연락처</td>
<td>집</td>
<td>02 - 123 - 1234</td>
<td rowspan="2">전자우편</td>
<td rowspan="2"><a href="https://www.naver.com/">ankiwoong@gmail.com</a></td>
</tr>
<tr>
<td>핸드폰</td>
<td>010-123-1234</td>
</tr>
</table>
</body>
</html>
|
cs |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
table{
width: 500px;
height: 180px;
border: 1px solid black;
}
tr,td{
padding: 1px;
border: 1px solid black;
}
img{
width: 70px;
height: 130px;
}
|
cs |
ch3
기억하자.. <legend></>태그
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<fieldset>
<legend>신상정보</legend>
<ol>
<li>이름 <input type="text" placeholder="이름"></li>
<li>이메일 <input type="text" placeholder="exmaple@domain.com"></li>
<li>이메일 <input type="text" placeholder="01123456770"></li>
</ol>
</fieldset>
</body>
</html>
|
cs |
ch4 폰트 지정하기
조건: 첫문단 special 클래스의 폰트는 '나눔 고딕', NanumGothic, '돋움', Dotum, sans-serif를 선언.
css 코드(굳이 html코드는 쓰지 않겠다.)
|
1
2
3
4
|
@import url(https://fonts.googleapis.com/earlyaccess/nanumgothic.css);
.special{
font-family: 'Nanum Gothic', '돋음', Dotum, sans-serif; font-size: 20px;
}
|
cs |
돋음과 Dotum을 같이 써야 하는 이유는 비한국어 Windows (최소한 9x/ME)에서는 MS IE조차도 ‘돋음’을 인식하지 못 하기 때문입니다. Apple Gothic은 Mac OS X에 들어 있는 sans-serif에 해당하는 한국어 글꼴 이름입니다. 표 4에서 라틴 글꼴을 비교한 표가 있는데, Windows Corefonts는 다른 OS에서도 사용할 수 있습니다.
한글 폰트 사용하기
한글 글꼴은 그 수가 많지 않아서 선택의 폭이 좁습니다. 가변폭 글꼴과 고정폭 글꼴이 있는데 고정폭은 글자사이 간격을 조절할 수 없으므로 가변폭 글꼴을 사용하는 것이 좋습니다.
- 가변폭 글꼴 : 굴림(Gulim), 돋움(Dotum), 바탕(Batang), 궁서(Gungsuh)
- 고정폭 글꼴 : 굴림체(GulimChe), 돋움체(DotumChe), 바탕체(BatangChe), 궁서체(GungsuhChe)
ch5 선택자로 정의내려보기.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
a{
font-weight: 700;
font-size: 50px;
}
a:link {
color: green;
text-decoration: none;
}
a:visited {
color: gold;
text-decoration: none;
}
a:hover {
color: palevioletred;
text-decoration: underline;
}
|
cs |
ㅍ
ch6
상대위치설정을 통해 div를 아래와 같이 표현해보자.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/sytle3.css">
</head>
<body>
<div class="mom">
<div id="left">left:0top:0</div>
<div id="right">right:0top:0</div>
<div id="left2">left:0bottom:0</div>
<div id="right2">right:0bottom:0</div>
</div>
</body>
</html>
|
cs |
|
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
|
div{
border: 1px solid black;
text-align: center;
font-size: small;
font-weight: bold;
}
.mom{
position: relative;
width: 200px;
height: 200px;
}
#left{
text-align: center;
display: inline-block;
width: 100px;
height: 100px;
background-color: palevioletred;
position: absolute;
left: 0;
top: 0;
}
#left2{
width: 100px;
height: 100px;
background-color: blueviolet;
left: 0;
bottom: 0;
position: absolute;
}
#right{
background-color: aqua;
width: 100px;
height: 100px;
position: absolute;
right: 0;
top: 0;
}
#right2{
background-color: gray
;
width: 100px;
height: 100px;
position: absolute;
right: 0;
bottom: 0;
}
|
cs |
'📚HTML, CSS > 실습 및 프로젝트' 카테고리의 다른 글
| html / css 프로젝트 1-(2)[프로젝트(1)을 사용해서 웹페이지 완성] (0) | 2023.02.01 |
|---|---|
| html / css 프로젝트 1-(1) (0) | 2023.01.30 |
| [html, css] 기초 or 기본 문제들 모음(2) (1) | 2023.01.27 |
| [html, css] 기초 or 기본 문제들 모음 (0) | 2023.01.26 |
| CSS 기초문제들 (0) | 2023.01.24 |