무엇을 배웠는가?
- 검색바 만들기
검색창 만드는 과제를 진행하였다. 앞서 배운 position을 이용하여 검색창위에 아이콘들을 배치하여 검색창을 구현하였다.
- 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" />
<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 alt="Weegle" src="https://user-images.githubusercontent.com/61774575/95163201-34411c00-075c-11eb-9987-d6301acb4dab.png">
</header>
<section>
<div class="search-box">
<input type="text" placeholder="위글위글">
<i class="fas fa-search"></i>
<i class="fas fa-keyboard"></i>
<i class="fas fa-microphone"></i>
</div>
<div class="underbar">
<div class="boxbox">Weegle 검색</div><div class="boxbox">I'm feeling Lucky</div>
</div>
<div class="last"> Weegle 제공 서비스 : <a href="#">English</a></div>
</section>
</body>
</html>- CSS 코드
body {
text-align: center;
}
img {
width: 300px;
}
input {
width: 80%;
padding: 10px 10px 10px 50px;
border-radius: 1.5em;
border: 1px solid rgba(0, 0, 0, 10%);
}
input:focus {
outline: none;
}
input:hover {
box-shadow: 2px 2px 2px 2px rgba(50, 50, 50, 20%);
}
.search-box{
position: relative;
}
.fas {
position: absolute;
top: 10px;
}
.fa-search {
left: 8%;
}
.fa-keyboard {
right: 11%;
}
.fa-microphone {
color: blue;
opacity: 60%;
right: 8%;
}
.boxbox {
background-color: rgba(220, 220, 220, 0.342);
display: inline-block;
margin: 20px;
padding: 20px;
cursor: pointer;
}
.last {
margin-top: 20px;
}전체적인 레이아웃이 가운데 정렬이므로 body에서 text-align을 center로 설정해 주었다.
css코드를 보면 .fas 라고 적힌 클래스 선택자에 position이 absolute가 적혀있다. 아이콘 전체 클래스이고 그 아래 .fa-search, .fa-keyboard, .fa-microphone 이라고 적힌 것은 각 아이콘에 대한 개별 클래스 이름이다.
.fas 에 absolute라고 설정해 놓았다. .fas의 부모 클래스는 .search-box이므로 .search-box의 position은 absolute, relative, fixed 중 하나이면 된다.
검색창 아래 두개의 회색 버튼같이 생긴 부분은 .boxbox클래스로 정해 놓고 display를 inline-block으로 설정해 주어 두개가 나란히 옆에 있을 수 있도록 했다.
- Wecolor Picker
1번과 비슷한 문제였지만 아래 '좋아요' 버튼과 날짜 부분을 flex 속성을 이용하여 풀었다.
좋아요 버튼은 왼쪽, 날짜는 오른쪽에 붙어있기 때문에 justify-content의 값을 space-between으로 설정해 주었다. space-between은 flex아이템들 끼리 서로 간격을 맞추어 정렬된다. 비슷한 속성값으로 space-around가 있다.
어디에 적용했는가?
- Replit 25, 26번 과제를 수행하였다! HTML은 너무 어려운 것 같다.
이번 과제에만 수행했지만 나중에 웹 페이지 제작을 하게 될 경우 꼭 필요한 레이아웃 설정인 것 같다.
어려웠던 점은 무엇인가?
창의 크기를 변경할 경우 아이콘들이 검색바를 벗어나버리는 경우가 발생했다.
문제를 해결하기 위해 '아이콘이 검색바를 부모로 섬겨야 하고, 부모의 움직임에 아이콘도 유동적으로 움직일 수 있게 해야겠다' 라는 생각을 했고 검색바와 아이콘을 하나의 div태그로 묶어주었다. 그리고 나서 아이콘의 left, right 값을 10px, 30px..등 고정된 값으로 하는 것이 아니라 10%, 30% 처럼 부모 요소에 종속적으로 움직일 수 있도록 만들어 주었다.
결과는 화면의 크기를 조절해서 아이콘들이 검색바 안에 잘 들어있었다.
2번 문제에서는 flex 속성을 너무 오랜만에 사용해서 다시 찾아보며 공부했다.
flex와 비슷하게 grid로 레이아웃을 설정할 수도 있고 position을 이용하여 각 요소들의 위치를 배치할 수도 있다. 개발자가 사용하기 편한 방법을 이용하면 된다.
