시작하기에 앞서 5조의 많은 질문 공격에도 항상 웃으면서 차근차근 설명해주시는 우리 두현님에게 감사 말씀 전합니다.
HTML
<!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 href="style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
</head>
<body>
<header>
<img class="weegle logo" src="https://user-images.githubusercontent.com/61774575/95163201-34411c00-075c-11eb-9987-d6301acb4dab.png">
</header>
<div class="search">
<input type="text" class="search-bar">
<img class="reading-glasses" src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/icon/search.png">
<i class="fas fa-keyboard"></i>
<i class="fas fa-microphone"></i>
</div>
<div class="weegle-container">
<span class="weegle weegle1">
weegle 검색
</span>
<span class="weegle weegle2">
I'm feeling lucky
</span>
<div class="service">
<p>weegle 제공 서비스 : <a style="color: blue;">English</a></p>
</div>
</div>
</body>
</html>CSS
.total {
border: 1px solid white;
width: 700px;
height: 500px;
}
.logo {
position: absolute;
left: 125px;
width: 450px;
}
.search {
position: relative;
width: 300px;
top: 170px;
left: 25px;
}
.search-bar {
top: 30px;
width: 650px;
height: 40px;
border: 2px solid rgb(209, 207, 207);
border-radius: 20px;
}
.reading-glasses {
position: absolute;
width: 25px;
top: 10px;
left: 10px;
}
.fa-keyboard {
position: absolute;
font-size: 20px;
top: 10px;
left: 580px;
}
.fa-microphone {
position: absolute;
font-size: 20px;
top: 10px;
left: 620px;
color: blueviolet;
}
.weegle-container {
position: relative;
top: 200px;
left: 200px;
margin: 10px;
}
.weegle {
border-radius: 10px;
margin-left: 10px;
margin-left: 10px;
}
.weegle1 {
background-color: gray;
padding: 15px;
}
.weegle2 {
background-color: gray;
padding: 15px;
}
.service {
position: relative;
left: 50px;
top: 10px;
margin-top: 30px;
}
.service a {
cursor: pointer;
}첫 응용? 과제를 하면서 느낀점은 기능을 어떻게 적용해야 할 지, 큰 틀은 어떻게 나눠야할지를 정확히 모르고 있다는 것을 느꼈다. 일단 github에 올리고 계속 리펙토링을 통해 정확하게 속성들을 다룰 수 있도록 연습해야겠다.
포기하는 그 순간이 바로 시합종료예요...
화이팅 🔥🔥🔥