[티스토리 블로그 스킨 제작 가이드 강의 5] 헤더 만들기 2

프로필 이미지 만들기

Book club skin의 오른쪽 위를 보시면 이렇게 프로필이 있습니다. 클릭하면 관리와 글쓰기, 로그인이 나타나는데요.

이 기능은 사실 메뉴바가 있기 때문에 굳이 구현할 필요는 없습니다.

게다가 이를 위한 치환자도 없기 때문에 Javascript로 직접 구현을 하셔야하는데요. 제 강의는 스킨 가이드에 따라 기본 기능들을 구현하는 게 목적이기 때문에 생략하도록 하겠습니다.

      혹시 이런 기능들을 어떻게 구현하는지 궁금하다거나, 수정을 하고싶은데 막히는 부분이 있으시다면 제가 크몽에서 티스토리 수정 서비스를 진행하고 있으니까요. 거기서 문의주시면 감사하겠습니다. 아래에 고정 댓글에 주소를 넣어둘게요.

이제 다시 HTML 코드로 돌아와서 profile을 추가해보겠습니다.

<s_search> 그룹 치환자 밑에 img 태그를 넣습니다.

html

      <div class="top">
  <a class="title" href="[##_blog_link_##]">[##_title_##]</a>
  <s_search>
    <input type="text" name="[##_search_name_##]" value="[##_search_text_##]" onkeypress="if (event.keyCode == 13) { [##_search_onclick_submit_##] }"
/>
    <button onclick="[##_search_onclick_submit_##]">검색</button>
  </s_search>
  <!-- 추가한 부분 -->
  <img />
  <!-------------->
</div>

블로그 프로필 이미지는 [##_image_##] 라는 값 치환자를 사용하시면 되는데요. 블로그 대표 이미지의 URL 값으로 치환이 됩니다. src에 바로 넣어볼게요.

html

      <div class="top">
  <a class="title" href="[##_blog_link_##]">[##_title_##]</a>
  <s_search>
    <input type="text" name="[##_search_name_##]" value="[##_search_text_##]" onkeypress="if (event.keyCode == 13) { [##_search_onclick_submit_##] }"
/>
    <button onclick="[##_search_onclick_submit_##]">검색</button>
  </s_search>
  <!-- 추가한 부분 -->
  <img src="[##_image_##]" />
  <!-------------->
</div>

적용하고 새로고침을 해보면 이미지가 커서 화면을 꽉채우는데요.

top에 있는 img 태그의 크기를 30px로 할게요. 그리고 둥글게 하기 위해서 border-radius를 50%로 하고, 왼쪽에 약간 margin을 주겠습니다.

css

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

네 그러면 이렇게 이미지가 둥글게 잘 나타나죠?

그런데 약간 이미지가 위로 가 있어서 .top의 align-items를 center로 해보겠습니다.

css

      .top {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

네 그러면 이렇게 정렬이 잘 된 것을 볼 수 있구요.

사실 [##_blog_image_##] 치환자를 사용하면 img 태그도 만들 필요가 없습니다.

html

      <div class="top">
  <a class="title" href="[##_blog_link_##]">[##_title_##]</a>
  <s_search>
    <input type="text" name="[##_search_name_##]" value="[##_search_text_##]" onkeypress="if (event.keyCode == 13) { [##_search_onclick_submit_##] }" />
    <button onclick="[##_search_onclick_submit_##]">검색</button>
  </s_search>
  <!-- <img src="[##_image_##]" /> 와 동일-->
  [##_blog_image_##]

</div>

네 이런 식으로 사용하셔도 똑같은 결과가 나오는데요. 편한 방식으로 사용하시면 되겠습니다.

상단 메뉴 만들기

이번에는 메뉴를 만들어볼 건데요. Book Club 스킨을 보시면 이렇게 제목 아래에 있습니다.

이 링크들은 관리 페이지에서 메뉴에 들어가시면 정하실 수 있습니다. 기본적으로 홈, 태그, 방명록이 들어가있죠. 추가도 가능하고 삭제도 가능한데요.

만약에 특정 카테고리도 추가하고 싶다면, 자신의 블로그 카테고리를 클릭해서 해당 주소를 여기에 넣으시면 됩니다.

베스트셀러라는 카테고리를 넣고 싶다면 베스트셀러를 클릭해서 해당 주소를 복사해오면 되는거죠.

이제 이 메뉴 링크들이 나오도록 해보겠습니다. 스킨 가이드를 보시면 [##_blog_menu_##]라는 치환자가 있습니다. 이것만 추가하면 되는데요.

top class를 가진 div 태그 아래에 넣어보도록 하겠습니다.

html

      <header>
  <div class="top">
    <a class="title" href="[##_blog_link_##]">[##_title_##]</a>
    <s_search>
      <input type="text" name="[##_search_name_##]" value="[##_search_text_##]" onkeypress="if (event.keyCode == 13) { [##_search_onclick_submit_##] }" />
      <button onclick="[##_search_onclick_submit_##]">검색</button>
    </s_search>
    [##_blog_image_##]

  </div>
  <!-- 추가한 부분 -->
  [##_blog_menu_##]
  <!-------------->
</header>

적용하고 새로고침을 하면 이렇게 나타나는데요.

개발자 도구로 보시면 <ul> 태그와 <li> 태그, 그리고 <a>태그로 구성되어 있는것을 알 수 있습니다.

CSS로 약간 스타일링을 해볼게요.

우선 이전에 만든 선택자들 앞에 header를 추가합니다. 나중에 겹치는걸 방지하기 위해서인데요. <a> 태그는 공통으로 적용해야하는 부분이니까 그대로 두겠습니다.

html

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

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

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

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

그리고 <ul>와 <ol> 태그는 list-style-type을 제거하겠습니다. padding도 제거하구요.

css

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

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

이제 book club 스킨처럼 메뉴를 가로로 배치하고 좀 여유있게 공간을 두겠습니다.

css

      header ul {
  display:flex;
}

header ul li {
  padding: 0px 30px;
}

그리고 Book Club Skin에서 메뉴에 마우스를 가져다 대면 이렇게 색이 진해지고 아래에 선이 나타나죠? 똑같이 구현해보겠습니다.

css

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

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

네 그러면 이렇게 메뉴에 마우스를 가져다 대보면 아래에 선이 나타나죠? 이런 식으로 만드시면 되구요.

메뉴가 상단 제목과 너무 붙어있으니까 상단도 padding을 넣어서 여유를 좀 줄게요.

css

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

그리고 마우스를 가져다대면 좀 색상이 바로바로 바뀌어서 좀 딱딱한 느낌이 드는데요. transition을 넣어서 부드럽게 해보겠습니다.

css

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

네 그러면 이렇게 부드럽게 바뀝니다. Book Club 스킨에서는 이동한 주소에 맞게 아래에 선이 나타나는데 이건 Javascript를 사용해야 합니다. 그래서 생략

마지막으로 Book club은 헤더가 좌우에 여유 공간이 좀 있죠?

header 에 최대 크기를 1080px로 하고 좌우 margin을 auto로 넣어줄게요

css

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

네 이런 식으로 메뉴와 프로필 이미지를 불러오면 되구요.

다음 시간에는 검색 창 옆에 있는 돋보기 이미지를 넣어볼건데요. 파일을 업로드하고 불러오는 방법에 대해서 알려드리겠습니다.

감사합니다.

전체 코드

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>
      <header>
        <div class="top">
          <a class="title" href="[##_blog_link_##]">[##_title_##]</a>
          <s_search>
            <input type="text" name="[##_search_name_##]" value="[##_search_text_##]" onkeypress="if (event.keyCode == 13) { [##_search_onclick_submit_##] }" />
            <button onclick="[##_search_onclick_submit_##]">검색</button>
          </s_search>
          [##_blog_image_##]

        </div>
        [##_blog_menu_##]
      </header>
    </s_t3>
  </body>
</html>

css

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

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

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: 0px 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;
}