Initial setting && div, border, id, class, link, image, font
2022. 3. 4. 11:45
|
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
|
<!DOCTYPE html>
<html>
<head>
<title>han's practice web page</title>
<link href="./data/Style/default.css" rel="stylesheet"></link>
<style>
</style>
</head>
<body> <!--우리가 실제로 보게되는 내용들-->
<div><a href="http://naver.com">naver</a></div> <!--div는 프레임을 나누는 것.-->
<div><a href="https://janghan-kor.tistory.com">
<!--image는 /image와 같이 닫힘 테그가 없음 !!!! -->
<img src="./data/img/hantistory.png" width="200px" height="auto">
<div></div>
janghan's tistory</a></div>
<!--선택자 중 id는 css에서 #을, class로 들어간 스타일은 .(dot)을 써야함. -->
<!--id는 딱 한 번만 들어갈 공간에, class는 여러 공간에 들어갈 스타일일 경우 사용 -->
<div id="myform"> this is myform from css</div>
<div class="red"> this is red from css</div>
<div class="border"> this is border from css</div>
<!--border 기준 상자 바깥쪽은 margin, 안 쪽은 padding이 됨. -->
<!--body의 경우도 위와 같이 margin, padding이 존재함.-->
<div class="content">
check your brain in this area
</div>
</body>
</html>
|
cs |
아래는 위 htmld의 css 코드이다.
url을 import하여 font를 가져왔다.
|
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
|
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+2:wght@100&display=swap');
a {
font-size: 30px;
color: rgb(165, 158, 53);
font-weight: 500;
}
#myform {
background-color: yellow;
margin: 10px;
width: 180px;
}
.red {
background-color: red;
margin: 10px;
width: 160px;
}
.border{
border: 5px solid rgb(205, 205, 255);
margin: 10px;
width: 170px;
height: 25px;
}
body{
border: 5px solid rgb(205, 205, 255);
margin: 50px, 50px, 100px, 100px;
/* margin: 값, 순서대로 위, 오른쪽, 아래, 왼쪽이 됨 */
padding: 50px;
background-image: url("../img/background.png");
background-repeat: no-repeat;/* 반복하지 않음*/
background-size: cover;/* 배경 사이즈 */
background-position: center; /* 배경 이미지 가운데 고정 */
background-attachment: fixed; /* 배경 이미지 고정 스크롤 내려도 같음.*/
}
/*body가 아니라 div에도 배경에 넣을 수 있다. 신기한 속성도 넣기.*/
.content{
text-align: center; /*text 위치 중앙에 설정 !*/
font-size: 50px;
/*왼쪽은 left, 오른쪽은 right*/
width: 3000px;
height: 500px;
background-image: url("../img/deskset.png");
background-repeat: no-repeat;/* 반복하지 않음*/
background-size: cover;/* 배경 사이즈 */
background-position: center; /* 배경 이미지 가운데 고정 */
background-attachment: fixed; /* 배경 이미지 고정 스크롤 내려도 같음.*/
}
div{
float: left;
}
|
cs |
'Front-end > htms\css' 카테고리의 다른 글
| C'est talentueux. han's main page (0) | 2022.03.04 |
|---|---|
| margin, transition, absolute, relative position (0) | 2022.03.04 |
