[티스토리 블로그 스킨 제작 가이드 강의 6] 파일 불러오기

이미지 다운로드하기

제가 아이콘을 다운로드할 때 자주 가는 사이트는 svgrepo라는 사이트입니다.

무료 라이센스라서 편하게 사용할 수 있는데요. search 라고 검색을 하면 이렇게 많은 돋보기 아이콘이 나타납니다. 저는 이 중에서 3번 째 아이콘을 사용해볼게요.

그러면 이렇게 DOWNLOAD SVG VECTOR라는 버튼이 나타나는데 클릭하면 다운로드가 됩니다.

저는 이 파일명을 search.svg 라고 바꿨는데요. 이걸 이제 업로드해보겠습니다.

파일 업로드하기

스킨 편집 페이지에서 CSS 탭 오른쪽에 파일업로드가 있는데요. 여기에 들어가시면 이전에 업로드했던 example.html 파일이 있습니다.

이건 선택을 하시고 삭제 버튼을 누르면 지울 수 있습니다.

업로드하는 방법은 추가 버튼을 클릭하시구요

다운로드 했던 이미지를 열어주시면 됩니다.

그러면 이렇게 업로드가 되는데요. 대부분의 파일은 이렇게 images 폴더에 들어가고 최대 20MB까지 업로드가 가능합니다.

파일 불러오기

이제 파일을 img 태그로 불러와볼건데요. HTML 탭에 들어가셔서 검색이라는 글자를 img 태그로 바꾸겠습니다.

html

      <div class="search">
  <input
    name="[##_search_name_##]"
    value="[##_search_text_##]"
    placeholder="검색 내용을 입력하세요"
    onkeypress="if (event.keyCode == 13) { [##_search_onclick_submit_##] }"
  />
  <button onclick="[##_search_onclick_submit_##]">
		<!-- 추가 -->
    <img />
		<!--------->
  </button>
</div>

그리고 src에 들어가는 값은 업로드한 파일 경로와 동일한데요. 파일업로드 탭을 보시면 images 폴더에 search.svg 파일이 있습니다.

그대로 넣어주시면 되는데요. 앞에 현재 주소를 의미하는 .과 / 도 꼭 넣어주세요.

html

      <img src="./images/search.svg" />

      어떤 파일이든 이렇게 images 폴더에 업로드 되니까요. 경로를 ./images/파일이름이라고 생각하시면 됩니다. 이건 Javascript 파일이나 다른 파일도 마찬가지에요.

적용하고 새로고침을 하면 이렇게 이미지가 잘 불러와집니다.

Book Club 스킨을 잘 보시면 입력창 안에 돋보기가 들어가 있습니다. 그래서 div 태그로 하나 감싸서 그 안에 둘 다 들어가게 할거구요. 그리고 검색내용을 입력하세요. 글자도 같이 나타나게 하겠습니다.

우선 input placeholder에 내용을 추가해주시구요.

html

      <input
  name="[##_search_name_##]"
  value="[##_search_text_##]"
  placeholder="검색내용을 입력하세요."
  onkeypress="if (event.keyCode == 13) { [##_search_onclick_submit_##] }"
/>

input과 button을 감싸는 div 태그도 추가합니다. class 이름은 search라고 할게요.

html

      <div class="search">
  <input
    name="[##_search_name_##]"
    value="[##_search_text_##]"
    placeholder="검색 내용을 입력하세요."
    onkeypress="if (event.keyCode == 13) { [##_search_onclick_submit_##] }"
  />
  <button onclick="[##_search_onclick_submit_##]">
    <img src="./images/search.svg" />
  </button>
</div>

CSS 수정하기

네 이제 CSS를 수정해보겠습니다.

그 전에 지금 .top 에 있는 img 태그 선택자가 있어서 search 아이콘에도 같이 적용이 되고 있는데요. 자식 선택자(>)를 추가해서 search 아이콘에는 적용되지 않게 하겠습니다.

css

      header .top > img {
  /* ... */
}

그 다음으로 button을 만들 때마다 이렇게 배경색과 선이 추가가 되어서 보기 안좋기 때문에 기본 스타일을 제거하겠습니다.

css

      button {
  background-color: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}

cursor: pointer는 마우스를 가져다 댈 때 클릭할 수 있다는 느낌을 주기 위해서 넣었습니다. 이제 아래에 적용해볼게요.

우선 .search 클래스 크기를 가로 200px, 세로 30px로 하겠습니다.

css

      .search {
  width: 200px;
  height: 30px;
}

그리고 그 안에 input 태그도 부모 태그 크기와 똑같이 할게요.

css

      .search input {
  width: 100%;
  height: 100%;
}

테두리도 추가하고 끝을 둥글게 만들어주겠습니다.

css

      .search input {
  width: 100%;
  height: 100%;
  border: 1px solid #eee;
  border-radius: 15px;
}

그 다음으로 버튼을 수정해볼건데요. button이 input과 겹치게 있어야하기 때문에 position을 absolute로 넣습니다.

css

      .search button {
  position: absolute;
}

그리고 위아래에서 중앙에 위치하도록 하고 오른쪽 끝에서 살짝 떨어지게 배치하겠습니다.

css

      .search button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 10px;
}

크기는 input보다 조금 작은 20px로 할게요.

css

      .search button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 10px;
  width: 20px;
  height: 20px;
}

button 안에 있는 이미지는 이거와 동일하게 해야겠죠? 그리고 아이콘이 너무 까만 색이라 투명도를 반 정도 적용하겠습니다.

css

      .search img {
  width: 100%;
  height: 100%;
  opacity: 0.5;
}

여기까지 적용하고 새로고침을 하면 search 아이콘이 화면의 오른쪽 끝에 가있는데요. 이걸 고치려면 button이 있어야할 위치의 기준을 div 태그로 해야합니다. position: relative를 추가할게요.

css

      .search {
  width: 200px;
  height: 30px;
  position: relative;
}

그러면 이렇게 아이콘이 input 태그 안에 위치하는데, 글자를 길게 입력하면 이렇게 겹쳐버립니다.

input 태그의 좌우에 padding을 넣어보겠습니다. 그리고 부모 컨테이너 밖으로 튀어나가지 않게 box-sizing:border-box를 추가하겠습니다.

css

      .search input {
  /* ... */
  padding: 0 33px 0 10px;
  box-sizing: border-box;
}

네 이제 입력해보면 딱 잘 맞게 잘립니다.

마무리하며

이런 식으로 파일을 불러와서 사용하시면 되겠습니다.

감사합니다.

코드

html

      <!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <s_t3>
      <div class="container">
        <header>
          <div class="top">
            <a class="title" href="[##_blog_link_##]">[##_title_##]</a>
            <s_search>
              <div class="search">
                <input
                  name="[##_search_name_##]"
                  value="[##_search_text_##]"
                  placeholder="검색 내용을 입력하세요"
                  onkeypress="if (event.keyCode == 13) { [##_search_onclick_submit_##] }"
                />
                <button onclick="[##_search_onclick_submit_##]">
                  <img src="./images/search.svg" />
                </button>
              </div>
            </s_search>
            [##_blog_image_##]
          </div>
          [##_blog_menu_##]
        </header>
      </div>
    </s_t3>
  </body>
</html>

css

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

ul, ol {
  list-style-type: none;
  padding: 0;
}

button {
  background-color: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}

header {
  max-width: 1080px;
  margin: 0 auto;
}

header .top {
  display:flex;
  justify-content: flex-end;
  align-items: center;
  padding: 15px 0;
}

header .top > img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-left: 10px;
}

header .title {
  font-size: 30px;
  margin-right:auto;
}

header ul {
  display: flex;
}

header ul li {
  padding: 0 30px;
}

header ul a {
  padding: 20px 0;
  color: #666;
  border-bottom: 5px solid transparent;
  transition: all 0.3s;
}

header ul a:hover {
  color: black;
  border-color: black;
}

.search {
  width: 200px;
  height: 30px;
  position: relative;
}

.search input {
  width: 100%;
  height: 100%;
  border: 1px solid #eee;
  border-radius: 15px;
  padding: 0 33px 0 10px;
  box-sizing: border-box;
}

.search button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 10px;
  width: 20px;
  height: 20px;
}

.search img {
  width: 100%;
  height: 100%;
  opacity: 0.5;
}