Weegle 검색바

연정·2021년 10월 10일
CSShtml
0

HTML & CSS

목록 보기
3/3
post-thumbnail

이론적으로 배운 내용들을 실제로 적용해보며 이해해보자!
구현하고자 하는 이미지는 아래와 같다.

페이지 구현을 위해 내가 작성한 코드.

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/b5d94dac67.js" crossorigin="anonymous"></script>
  </head>
  <body>
    <div class="container">
      <img src="https://user-images.githubusercontent.com/61774575/95163201-34411c00-075c-11eb-9987-d6301acb4dab.png" alt="Weegle logo" width="300px">

      <div class="search_bar">
        <i id="search" class="fas fa-search"></i>
        <input type="text">
        <i id="keyboard" class="fas fa-keyboard"></i>
        <i id="mic" class="fas fa-microphone"></i>
      </div>

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

      <div class="footer">
        Weegle 제공 서비스 : <a href="">English</a>
      </div>
    </div>
  </body>
</html>


CSS
* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.search_bar {
  position: relative;
  width: 500px;
  margin-bottom: 10px;
}

input {
  width: 100%;
  border: 1px solid #F4F4F4;
  border-radius: 30px;
  padding: 7px 20px;
}

i {
  position: absolute;
  top: 10px;
  margin: 0;
  font-size: 12px;
}

#search {
  left: 15px;
  color: #808080;
}

#keyboard {
  right: 32px;
}

#mic {
  right: 15px;
  color: #4F86EC;
}

button {
  border: none;
  border-radius: 2px;
  color: #808080;
  padding: 10px;
  margin-left: 5px;
}

.footer {
  font-size: 12px;
  margin-top: 15px;
}

a {
  color: blue;
  text-decoration: none;
}

내가 구현한 페이지.

페이지 구현을 하며 새로 습득한 내용들.

1. 아이콘 삽입
아이콘 삽입은 font Awesome이라는 페이지를 이용하였다. 해당 페이지 내에 원하는 무료 아이콘을 선택한 뒤, head 태그 내에 font Awesome 페이지와 연결하는 링크 삽입 + 아이콘 위치에 아이콘 링크 삽입으로 원하는 결과를 얻을 수 있다. 단, 아이콘의 경우 텍스트로 인식되어 크기 조정은 CSS 내에서 font size로 조정할 수 있다. 또한 각각의 아이콘에 부여된 클래스는 class = "fas fa-search"의 형태로 되어 있는데, fas와 fa-search 두개의 클래스가 부여된 것으로 해석하면 된다.

2. body section
해당 코드에서 body 태그는 총 4개의 섹션 (로고 이미지 / 검색바 / 버튼 / footer)로 나뉘어 구성되어 있다. div 태그를 활용하여 4개의 섹션을 하나로 묶어 전체 정렬을 용이하게 한다.

3. Input
클래스가 "search_bar"인 div 태그를 살펴보자. 그 안에 input 태그가 있는데, input은 사용자가 직접 텍스트를 입력할 수 있는 요소를 생성하는 태그이다. (input 태그는 self-closing 태그이다.)

<input type="text" placeholder="ID">
<input type="password' placeholder="password">
<input type="number" placeholder="전화번호">

type은 어떤 타입의 텍스트를 받아들일 것인지를 결정한다. type이 text이면 어느 텍스트라도 수집 가능하며, number이면 숫자만 수집한다. type이 password인 경우에는 type="text"인 경우와 비슷하나 입력하는 내용이 노출되지 않는다는 점에서 차이를 가진다.

placeholder는 사용자의 입력을 돕는 도움말의 역할을 하며, 사용자에게는 보이나 입력에는 직접적인 영향을 끼치지 않는다. 만약 도움말이 아니라 태그 내에 미리 어떤 항목을 입력해놓고 싶을 때는 value라는 attribute를 사용한다.

input 태그와 비슷한 역할을 하는 태그로는 textarea 태그가 있는데, 보다 긴 텍스트를 입력하도록 해야할 때 사용한다. (textarea 태그는 open & closing 태그로 이루어진다.)

4. box-sizing : border-box;
CSS에서 box-sizing 속성은 요소의 너비와 높이를 어떻게 계산할 것인지에 대한 속성이다. content-box는 box-sizing의 기본값으로, 컨텐츠 영역만 박스 사이즈로 계산하며 테두리의 두께나 안쪽 여백을 부여할 경우 사이즈가 달라지게 된다. border-box는 컨텐츠 뿐 아니라 테두리 & 안쪽 여백까지 박스의 사이즈로 고려한다.

일반적으로 요소의 너비와 높이를 설정할 때 테두리 & 안쪽 여백을 별도로 계산하기보다는 전체를 기준으로 사이즈를 생각하기 때문에, 대부분의 경우 CSS에 아래와 같이 box-sizing을 조절하여 편리성을 높인다.

* {
box-sizing: border-box;

페이지 구현을 하며 고민했던 부분들.

1. 전체 항목을 한 번에 중앙정렬할 수 있는 방법이 없을까?

[PROBLEM]
내가 원하는 레이아웃으로 조정할 수 있도록 하는 display: flex; attribute를 설정하고 나서도 콘텐츠가 중앙정렬이 되지 않거나, 페이지를 키우면 정렬형식이 바뀌는 등 지속적인 오류가 생겼다. 이걸 해결할 수 있는 방법은?

[SOLUTION]

  • text-align: center; : 블록 요소의 정렬을 조정하는 text-align attribute를 center로 설정하여 4개로 나뉜 요소 가운데 정렬
  • 페이지의 가로축 세로축 정렬을 조정하는 justify-content align-items attribute를 활용하여 가로축과 세로축에서 해당 div 섹션이 중앙에 오도록 수정

2. 모든 정렬을 조정하였음에도 페이지 세로축에서 중앙으로 이동하지 않는 요소들. 이유가 뭘까?

[PROBLEM]
1번 항목대로 조정을 완료하였으나, 페이지 세로축 상의 중앙으로 항목이 이동하지 않고 상단에만 머물러있는 문제가 발생하였다.

[SOLUTION]
block 요소는 페이지의 가로 전체를 기본으로 삼으나, 페이지의 세로는 콘텐츠가 차지하고 있는 세로 영역만 포함하기 때문에 문제가 발생한 것이라고 판단. html body 태그에 height: 100% 설정을 부여하여 문제 해결!

3. 나는 div class="container" 태그에 정렬 관련 CSS를 부여하였으나 멘토님은 body 태그에 부여하였다. 그 차이점은?

결론부터 말하면 두 가지 방식 모두 사용 가능. 현재 예시에서는 body 태그 내에 크게 div class="container" 요소만 존재하기 때문에 body 태그에 설정해도 무방하다. 만약 div 태그가 여러개 존재하며 각각의 태그가 다르게 정렬되어야 한다면 각각의 태그에 설정을 부여하는게 맞다.

  • 각 요소에 margin 값이나 padding 값을 주는 하드코딩으로 페이지 구성을 할 수도 있겠으나, 더 효율적인 방식을 찾기 위해 시간을 들인 스스로에게 칭찬을!
  • CSS 작성 시 border-box 속성을 추가하는 것 잊지 말기.
  • display: flex는 조정을 원하는 내용의 부모태그에 부여해야 한다는 점 명심하기
profile
연정
성장형 프론트엔드 개발자
이전 포스트

Layout

0개의 댓글