728x90
1. 카드뉴스 형태의 웹사이트 화면
2. index.html
|
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
58
59
60
61
62
63
|
<!DOCTYPE html>
<html lang="ko">
<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>부경대학교 디딤돌 인재 프로그램</title>
<link rel="stylesheet" href="style.css">
<meta name="naver-site-verification" content="02273abcec07e1ea3d3c3e737a9de7c2cb829631" />
</head>
<body>
<div class="container">
<div class = card-box>
<div class="img-gradient"></div> <!--이 div에만 class지정*/-->
<img src="img/AA.jpg" alt="할로윈인간">
<div class="text-wrap">
<h1>디딤돌 인재 신청</h1>
<!--<p>bitgold is good</p>-->
</div>
<a class= "play-btn" href="https://brownboard.tistory.com/6" target="_blank"></a>
</div>
<div class = card-box>
<div class="img-gradient"></div>
<img src="img/BB.jpg" alt="할로윈인간">
<div class="text-wrap">
<h1>교육프로그램</h1>
<!--<p>bitgold is good</p>-->
</div>
<a class= "play-btn" href="https://brownboard.tistory.com/7" target="_blank"></a>
</div>
<div class = card-box>
<div class="img-gradient"></div>
<img src="img/CC.jpg" alt="할로윈인간">
<div class="text-wrap">
<h1>프로젝트 랩</h1>
<!--<p>bitgold is good</p>-->
</div>
<a class= "play-btn" href="https://brownboard.tistory.com/8" target="_blank"></a>
</div>
<div class = card-box>
<div class="img-gradient"></div>
<img src="img/DD.jpg" alt="할로윈인간">
<div class="text-wrap">
<h1>마일리지 제도</h1>
<!--<p>bitgold is good</p>-->
</div>
<a class= "play-btn" href="https://brownboard.tistory.com/9" target="_blank"></a>
</div>
<div class = "ad-banner">
<ins class="kakao_ad_area" style="display:none;"
data-ad-unit = "DAN-xcti7kkrqA5FpDl0"
data-ad-width = "320"
data-ad-height = "100"></ins>
<script type="text/javascript" src="//t1.daumcdn.net/kas/static/ba.min.js" async></script>
</div>
</body>
</html>
|
cs |
1~10 /head/내용 제목 및 style.css적용
11~52 각 카드 뉴스에 대한 이미지와 클래스 설정(alt="할로윈 인간"이 항목은 필요없음) 버튼 클릭 시에 해당 주소로 탭을 새로 만들어 이동
54~60 광고배너
3. style.css
|
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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
|
.container{
text-align: center;
margin-top:200px;
}
.card-box{
position: relative; /*얘 기준에 맞춰서 상대적으로 맞추는듯?*/
border-radius: 16px;
overflow: hidden; /*다른 부모의 높이에 넘어가는 걸 숨김*/
display: inline-block;
margin:10px;
width: 100%;
max-width: 280px;
height: 360px;
box-shadow: 0 20px 35px rgba(0,0,0,0.26);
transition: 0.3s;
}
.card-box:hover{
transform:scale(0.95);
}
.img-gradient{
position: absolute; /*위치를 절대적으로*/
left:0;
top:0;
width: 100%;
height: 100%;
background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.1));
z-index: 1;
}
.text-wrap{
position: absolute;
bottom:0;
padding: 24px;
text-align:left;
z-index: 2; /*z축으로 앞,뒤로 보내는 역할*/
}
.text-wrap h1{
color: #fff;
text-shadow: 2px 2px 8px #000;
font-size: 24px;
margin-bottom:8px;
font-weight: bold;
}
/*.text-wrap p{
color: #fff;
text-shadow: 1px 1px 5px #000;
font-size:18px;
line-height:1.5;
margin:0;
}*/
.play-btn{
width:60px;
height: 60px;
position: absolute;
right:24px;
top: 24px;
background-color: #004fff;
background: #004fff url(../img/icon-play.png)
no-repeat center; /*..으로 바깥으로 나간다음 img폴더에 있는 파일로 드감*/
background-size: 24px;
border-radius: 50%;
z-index: 2;
}
.play-btn:focus{
outline:0;
}
.play-btn:hover{
background-color: rgba(0,79,255,0.9);
cursor:pointer;
box-shadow: 0 2px 4px rgba(0,79,255,0.6);
}
.ad-banner {
width: 320px;
margin: 0 auto;
}
|
cs |
1~4 각 카드뉴스에 대한 전체적인 class 설정
5~16 카드 이미지에 대한 크기 및 디자인적인 요소 설정
18~20 마우스 포커스일 때 크기를 작게 해서 UI적인 요소 추가
22~29 이미지 gradient 값
32~45 이미지 위에 적을 글씨에 적용 되는 설정, 이미지 위에 글씨를 적기 위해 글씨는 흰색이며 그림자를 주어서 인식성을 높임
56~74 오른쪽 위의 버튼이미지에 대한 크기 설정 및 마우스 포커스일 때 크기 및 색깔 변경
80~83 광고 배너
디딤돌이라는 프로그램을 홍보하기 위해 만든 웹사이트 코드입니다.
유튜브를 보다가 카드 뉴스형태의 광고가 눈에 띄었고, 이렇게 만들면 재밌겠다라는 생각이 들어서 만들게 되었습니다.
html,css에 아는 게 하나도 없었기 때문에 조코딩,디자인베이스 유튜브를 보면서 만들게 되었고 제작기간은 3일입니다.
백엔드는 netlify사이트를 통해 구축하였습니다.
728x90
'교내 활동 > [LINC+ 활동] 디딤돌 인재' 카테고리의 다른 글
| [PKNU LINK+]부경대학교 LINK+ 디딤돌인재 교육프로그램-세부사항 (0) | 2021.07.16 |
|---|---|
| [PKNU LINK+]부경대학교 LINK+ 디딤돌인재 마일리지, 이수혜택 (0) | 2021.06.22 |
| [PKNU LINK+]부경대학교 LINK+ 디딤돌인재 프로젝트 랩(project lab) (0) | 2021.06.22 |
| [PKNU LINK+]부경대학교 LINK+ 디딤돌인재 교육프로그램 (0) | 2021.06.22 |
| [PKNU LINK+]부경대학교 LINK+ 디딤돌인재 신청안내 (0) | 2021.06.22 |
댓글