Weegle - 검색바 만들기

Assignment

1. 로고 이미지 주소 : https://user-images.githubusercontent.com/61774575/95163201-34411c00-075c-11eb-9987-d6301acb4dab.png

 

2. CSS position 속성을 이용하여 아이콘 위치하기.

 

3. 회색박스에 같은 클래스 이름을 사용하여 CSS를 한 번에 이용해보기.

 

4. English는 a tag를 이용해 구현하기.

 

5. Font Awsome에서 아이콘 사용하기.

 

---

 

My code

 

<div class="container">
	<div class="logo">
		<img src="https://user-images.githubusercontent.com/61774575/95163201-34411c00-075c-11eb-9987-d6301acb4dab.png">
	</div>

	<div class="searchBar">
        <i class="fa-solid fa-magnifying-glass"></i>
        <input type="text" class="input">
        <i class="fa-regular fa-keyboard"></i>
        <i class="fa-solid fa-microphone"></i>
    </div>

    <div class="buttons">
        <button type="button" class="btn">Weegle 검색</button>
        <button type="button" class="btn">I'm feeling Lucky</button>
    </div>

    <div class="service">
    	Weegle 제공 서비스 : <a href="#">English</a>
    </div>
</div>

* {
	box-sizing: border-box;
}

.container {
    position: relative;
    text-align: center;
}

.logo img {
	width: 300px;
}

.searchBar {
    position: relative;
    width: 500px;
    height: 40px;
    margin: 10px auto;
    padding: 5px;
    border: 1px solid #e2e2e2;
    border-radius: 20px;
}

.fa-magnifying-glass {
    position: absolute;
    top: 10px;
    left: 12px;
}

.searchBar input {
    position: absolute;
    top: 6px;
    left: 40px;
    width: 380px;
    border: none;
    padding: 4px;
}

.fa-keyboard {
    position: absolute;
    top: 10px;
    right: 40px;
}

.fa-microphone {
    position: absolute;
    top: 10px;
    right: 12px;
}

.btn {
    margin-bottom: 10px;
    padding: 10px;
    border: none;
    border-radius: 5px;
    color: gray;
}

.service {
	font-size: 12px;
}

 

문제점

검색창을 클릭했을 때 input태그의 테두리가 하이라이팅

input을 사용하면 현재 사용자가 어떤 input을 사용하고 있는지 활성화시키기 위해 강조하는 하이라이팅 효과가 생긴다. 이는 outline(MDN바로가기) 속성을 통해서 해결할 수 있다.

 

---

 

Mentor's code

<div class="weegle">
	<section class="weegleContainer">
    	<img src="https://user-images.githubusercontent.com/61774575/95163201-34411c00-075c-11eb-9987-d6301acb4dab.png" alt="weegle logo" />
        
 		<div class="searchWrapper">
        	<i class="fas fa-search"></i>
            <input type="text" />
            <i class="fas fa-keyboard"></i>
            <i class="fas fa-microphone"></i>
        </div>
        
        <div class="buttonWrapper">
        	<button>Weegle 검색</button>
            <button>I'm feeling Lucky</button>
        </div>
        
        <div class="service">
        	Weegle 제공 서비스 : <a href="#">English</a>
        </div>
    </section>
</div>

* {
	box.sizing: border-box;
}

.weegle {
	display: flex;
    justify-content: center;
    align-content: center;
    height: 100vh;
    /* display: grid;
    place-items: center; */
    /* position: relative; */
    text-align: center;
}

.weegleContainer {
	padding: 100px 50px;
    border: 1px solid #e2e2e2;
    border-radius: 5px;
    
    /* position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); */
}

.weegleContainer img {
	width: 150px;
}

.searchWrapper {
	display: flex;
    /* position: relative; */
    width: 300px;
    margin: 15px;
    padding: 5px;
    border: 1px solid #e2e2e2;
    border-radius: 15px;
}

.searchWrapper input {
	flex: 7;
    /* width: 100% */
    padding-left: 10px;
    border: none;
    outline: none;
}

.fas {
	flex: 1;
}

.buttonWrapper button {
	margin-bottom: 15px;
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

 

느낀점

flexbox를 많이 이용하는 추세, float을 사용하지 않는다.

개구리잡기 게임을 통해서 flexbox에 대한 개념을 익힐 수 있었다.

 

새로운 개념1 : CSS 높이 개념 - px이 아닌 vh

CSS에는 rem, vh, vw, vmin, vmax, ex, ch의 높이 개념이 있다. 여기서 vh란 vertical height의 약자로 반응형 웹디자인에 유용한 단위이다. 타겟 요소의 높이를 뷰포트의 너비값, 높이값에 맞게 사용할 수 있다. vh는 높이값의 1/100 값으로, 브라우저 높이가 100px이라면 1vh는 1px 수치를 갖게된다. 즉 멘토님의 100vh는 브라우저의 높이 100%라는 의미가 된다.

 

새로운 개념2 : flex: 숫자

CSS속성 flex 속성은 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성이다. flex는 flex-grow, flex-shrink, flex-basis의 단축 속성이다. 대부분의 경우 flex 값에는 auto, initial, none이나 단위 없는 양의 수를 사용해야 한다.

위에서는 검색바(input tag)가 flex가 7, 나머지 이미지 요소(.fas class)들이 flex가 각 1로 총 3이 되어서 flex는 총 합이 10이다. 이는 검색바는 7/10의 크기를 차지하고, 이미지 요소들이 각 1/10씩 차지함을 의미한다.

 

추후에 자세하게 정리할 내용

1. CSS 높이 개념

2. flexbox에 대한 이해