색 추출 방법
아래 사진에서 사용된 색의 hex 값을 알고 싶다면, 개발자도구의 color picker나 chrome 확장프로그램 'color zilla'를 이용해보세요.
아이콘 이용 팁
다양한 아이콘 도구들이 있지만, font Awesome을 이용해봅시다. 사용방법은 공식문서 또는 구글링을 통해 찾아서 이용해보세요. 물론 다른 도구를 사용해도 좋습니다!
로고는 아래의 이미지 주소를 사용하세요.
https://user-images.githubusercontent.com/61774575/95163201-34411c00-075c-11eb-9987-d6301acb4dab.png
CSS position 속성을 이용해서 아이콘들을 위치시켜보세요!
힌트 : input과 아이콘들을 감싸주는 부모태그 용 div를 하나 만들면 아이콘을 위치시키기에 편리하겠네요.
두 회색박스에 같은 클래스이름을 사용해서 css를 한번에 이용해보세요.
English 는 a 태그를 이용해 구현해보세요.
과제 완료 후 코드 + 구현화면을 캡쳐하여 Google Classroom에 제출해주세요!
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="https://kit.fontawesome.com/e264982194.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="logo">
<img src="https://user-images.githubusercontent.com/61774575/95163201-34411c00-075c-11eb-9987-d6301acb4dab.png">
</div>
<div class="icon">
<i class="fas fa-search"></i>
<input type="text" class="content"></input>
<i class="fas fa-keyboard"></i>
<i class="fas fa-microphone"></i>
</div>
<div class="box">
<div class="search-box">Weggle 검색</div>
<div class="lucky-box">I'm feeling Lucky</div>
</div>
<div class="service"><span>Weggle 제공 서비스: <span><a href="#"> English</a></div>
</body>
</html>style.css
.logo {
display: flex;
justify-content:center;
}
.icon {
display: flex;
justify-content:center;
}
.box {
display: flex;
justify-content:center;
}
.service {
display: flex;
justify-content:center;
}
.icon {
position:relative;
}
.fa-search {
position: absolute;
right: 970px;
top: 10px;
font-size: 20px;
color: grey;
}
.fa-keyboard {
position:absolute;
font-size: 20px;
left: 920px;
top: 10px;
}
.fa-microphone {
position:absolute;
font-size: 20px;
left: 960px;
top: 10px;
color: skyblue;
}
.content {
width: 800px;
height: 35px;
border-radius:20px;
border: 1px solid rgb(209, 207, 207);
}
.search-box{
display: flex;
justify-content:center;
align-items:center;
width: 150px;
height: 50px;
background-color:#F4F4F4;
border-radius:5px;
margin-right:10px;
}
.lucky-box {
display: flex;
justify-content:center;
align-items:center;
width: 150px;
height: 50px;
background-color:#F4F4F4;
border-radius:5px;
}
.lucky-box .search-box {
color:#646569;
}
.box {
margin-top: 15px;
}
.service {
margin-top: 30px;
}weegle페이지: https://23-html-and-css-weegle-geomsaegba-richyoung1.codekatajavascr.repl.co/
선명한 기억보다 흐릿한 메모