Study/반응형 웹

반응형 사이트 만들기 - 레이아웃 연습, 아웃라이너, 헤더 메뉴, 헤더 타이틀, 헤더 아이콘, 전체 메뉴, 타이틀

posey 2023. 1. 17. 09:19

 

  • UI/UX 반응형 웹디자인&웹퍼블리셔 개발자 과정 - DAY 88



Review






 

  • UI/UX 반응형 웹디자인&웹퍼블리셔 개발자 과정 - DAY 88

 

 

<레이아웃 유형 연습>

 

 

1. layout01

 

layout1 (width: 1903px)

 

 

 

 

2. layout02

 

layout2 (width: 1903px)
0
layout2

 

 

3. layout03

 

layout3 (width: 1903px)

 

 

0
layout3

 

 

4. layout04

 

layout4 (width: 1903px)

 

 

0
layout4

 

 

5. layout05

 

 

layout5 (width: 1903px)

 

0
layout5

 

6. layout06

 

layout6 (width: 1903px)

 

0
layout6

 

 

 

7. layout07

 

layout6 (width: 1903px)

 

0
layout6

 

 

 

 

 

 

 

 

<반응형 사이트 아웃라이너 작업>

 

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="author" content="posey" />
    <meta name="description" content="반응형 사이트 연습" />
    <meta name="keywords" content="반응형 사이트, 웹 퍼블리셔, HTML5, webs" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>반응형 사이트 만들기</title>
    <!-- style -->
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/style.css" />

    <!-- 파비콘 -->
    <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png" />
    <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png" />
    <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png" />
    <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png" />
    <link
      rel="apple-touch-icon"
      sizes="114x114"
      href="/apple-icon-114x114.png"
    />
    <link
      rel="apple-touch-icon"
      sizes="120x120"
      href="/apple-icon-120x120.png"
    />
    <link
      rel="apple-touch-icon"
      sizes="144x144"
      href="/apple-icon-144x144.png"
    />
    <link
      rel="apple-touch-icon"
      sizes="152x152"
      href="/apple-icon-152x152.png"
    />
    <link
      rel="apple-touch-icon"
      sizes="180x180"
      href="/apple-icon-180x180.png"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="192x192"
      href="/android-icon-192x192.png"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="icon/favicon-32x32.png"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="96x96"
      href="icon/favicon-96x96.png"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="16x16"
      href="icon/favicon-16x16.png"
    />
    <link rel="manifest" href="icon/manifest.json" />
    <meta name="msapplication-TileColor" content="#ffffff" />
    <meta name="msapplication-TileImage" content="icon/ms-icon-144x144.png" />
    <meta name="theme-color" content="#ffffff" />
    <style>
      @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap");

      @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/static/pretendard-dynamic-subset.css");

      * {
        margin: 0;
        padding: 0;
      }

      body {
        font-family: "Montserrat", Pretendard, sans-serif;
      }
    </style>
  </head>
  <body>
    <header>
      <h1>반응형 사이트</h1>
    </header>
    <nav>
      <h2>반응형 사이트 전체 메뉴</h2>
    </nav>
    <article>
      <h2>반응형 사이트 서브 타이틀</h2>
    </article>
    <main>
      <section>
        <h2>반응형 사이트 콘텐츠</h2>
        <section>
          <h3>반응형 사이트 왼쪽 콘텐츠</h3>
          <article><h4>반응형 사이트 왼쪽 콘텐츠1</h4></article>
          <article><h4>반응형 사이트 왼쪽 콘텐츠2</h4></article>
          <article><h4>반응형 사이트 왼쪽 콘텐츠3</h4></article>
        </section>
        <section>
          <h3>반응형 사이트 가운데 콘텐츠</h3>
          <article><h4>반응형 사이트 가운데 콘텐츠1</h4></article>
          <article><h4>반응형 사이트 가운데 콘텐츠2</h4></article>
          <article><h4>반응형 사이트 가운데 콘텐츠3</h4></article>
        </section>
        <section>
          <h3>반응형 사이트 오른쪽 콘텐츠</h3>
          <article><h4>반응형 사이트 오른쪽 콘텐츠1</h4></article>
          <article><h4>반응형 사이트 오른쪽 콘텐츠2</h4></article>
          <article><h4>반응형 사이트 오른쪽 콘텐츠3</h4></article>
        </section>
      </section>
    </main>
    <footer>
      <h2>반응형 사이트 푸터</h2>
    </footer>

    <!-- JavaScript Libraries -->
    <script src="js/jquery.min_1.12.4.js"></script>
    <script src="js/modernizr-custom.js"></script>
  </body>
</html>

 

 

 

 

결과는 이러하다. 

크게 헤더, 메뉴, 서브 타이틀, 콘텐츠, 푸터 이렇게 나뉘고, 콘텐츠는 세부적으로 나누어서 작업할 것이다.

시멘틱 태그로는 header, nav, article, main, section, article, footer가 쓰인다. 

 

 

 

 

 

 

<반응형 사이트 헤더 메뉴 작업>

 

 

- HTML

 

    <header id="header">
      <div class="container">
        <div class="row">
          <div class="header">
            <div class="header_menu">
              <a href="#">Blog</a>
              <a href="#">Github</a>
              <a href="#">Webstandard</a>
            </div>
          </div>
        </div>
      </div>
    </header>
    <!-- header -->

 

 

- 'style.css'

 

@charset "utf-8";

/* 레이아웃 */
#header {
  background: url(../img/bg.png) repeat-x center top;
}

/* 컨테이너 */
.container {
  width: 1200px;

  margin: 0 auto;

  background: rgba(0, 0, 0, 0.2);
}

/* 헤더 */
.header {
  height: 327px;
}

.header .header_menu {
  text-align: right;
}

.header .header_menu a {
  /* a 태그가 인라인 구조라서 위쪽은 padding이 적용되지 않아 inline-block으로 바꿔줌 */
  display: inline-block;
  font-size: 16px;
  color: #fff;

  padding: 8px 0 6px 10px;
  transition: color 0.3s ease;
  /* 흰색을 회색으로 바꿔주는데 0.3초 동안 부드럽게 변경하라는 뜻 */
}

.header .header_menu a:hover {
  color: #ccc;
}

/* mediaquery */
@media (max-width: 1220px) {
  .container {
    width: 100%;
  }

  .row {
    padding: 0 15px;
  }
}

 

 

 

- 'reset.css'

 

@charset "utf-8";

/* 여백 초기화 */
body,
div,
ul,
li,
dl,
dd,
dt,
ol,
h1,
h2,
h3,
h4,
h5,
h6,
input,
fieldset,
legend,
p,
select,
table,
th,
td,
tr,
textarea,
button,
form,
figure,
figcaption {
  margin: 0;
  padding: 0;
}

/* a 링크 초기화 */
a {
  color: #222;
  text-decoration: none;
}
a:hover {
  color: #2698cb;
}

/* 폰트 초기화 */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap");

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/static/pretendard-dynamic-subset.css");

body,
input,
textarea,
select,
button,
table {
  font-family: "Montserrat", Pretendard, "Nanum Gothic",
    AppleSDGothicNeo-Regular, "Malgun Gothic", "맑은 고딕", dotum, "돋움",
    sans-serif;
  color: #222;
  font-size: 13px;
  line-height: 1.5;
}

 

 

 

 

헤더 메뉴까지 완성 !

 

아직 내가 부족한 점은 선생님과 같이 하면 주석을 달게 되는데, 나 혼자 실습할 때는 주석 다는 습관이

완전히 잡히지 않았다는 것이다 ㅠ_ㅠ

 

연습해야겠다...ㅠㅠ

 

 

 

 

 

 

<반응형 사이트 헤더 타이틀, 아이콘 작업>

 

 

공유 디버거 - Meta for Developers (facebook.com)

 

공유 디버거 - Meta for Developers

공유 디버거를 사용하면 Facebook에 공유될 때 콘텐츠가 표시되는 모습을 미리 보거나 오픈 그래프 태그를 사용하여 문제를 디버깅할 수 있습니다. 이 도구를 사용하려면 Facebook에 로그인하세요.

developers.facebook.com

 

위의 링크는 페이스북 공유 디버거 사이트이다.

인스타그램 아이콘을 클릭하면 페이스북으로 내 사이트 링크를 공유할 수 있게 만드는 작업을 하는

것이다.

 

그런데 여기서 시간이 아주 많이 지체되었다.

닷홈에 호스팅을 하지 않은 탓인지 디버거 사이트에서 내 url이 자꾸 invaild site라고 떴다...

결국 포기 PASS -

 

 

* 해결 완료 

내가 똥멍청이처럼 자꾸 내 컴퓨터 document 파일에서 index.html 파일을 열고는 페이스북 공유를

하려고 했었다. 깃허브에 호스팅한 다음 그 url을 열고, 공유하기를 누르니까 된다 !

 

 

 

 

아주아주 뒤늦게 알게 된 사실... 하하

인스타그램 버튼을 누르면 페이스북을 통해서 인스타그램으로 공유할 수 있게 된당 >___< 

 

 

 

 

오늘은 일단 전체메뉴 작업까지 완성 - !

반응형