Scroll Event, favicon, 반응형 웹 페이지 제작하기

 

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

---

Review

 

 

 

 

 

 

---

 

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

 

<스크롤 이벤트>

 

 

- HTML

 

    <h1>Scroll Event</h1>
    <section></section>
    <div class="container">
      <h2>content</h2>
      <br />
      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting
        industry. Lorem Ipsum has been the industry's standard dummy text ever
        since the 1500s, when an unknown printer took a galley of type and
        scrambled it to make a type specimen book. It has survived not only five
        centuries, but also the leap into electronic typesetting, remaining
        essentially unchanged. It was popularised in the 1960s with the release
        of Letraset sheets containing Lorem Ipsum passages, and more recently
        with desktop publishing software like Aldus PageMaker including versions
        of Lorem Ipsum.
      </p>
      <br />
      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting
        industry. Lorem Ipsum has been the industry's standard dummy text ever
        since the 1500s, when an unknown printer took a galley of type and
        scrambled it to make a type specimen book. It has survived not only five
        centuries, but also the leap into electronic typesetting, remaining
        essentially unchanged. It was popularised in the 1960s with the release
        of Letraset sheets containing Lorem Ipsum passages, and more recently
        with desktop publishing software like Aldus PageMaker including versions
        of Lorem Ipsum.
      </p>
      <br />
      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting
        industry. Lorem Ipsum has been the industry's standard dummy text ever
        since the 1500s, when an unknown printer took a galley of type and
        scrambled it to make a type specimen book. It has survived not only five
        centuries, but also the leap into electronic typesetting, remaining
        essentially unchanged. It was popularised in the 1960s with the release
        of Letraset sheets containing Lorem Ipsum passages, and more recently
        with desktop publishing software like Aldus PageMaker including versions
        of Lorem Ipsum.
      </p>
      <br />
    </div>

 

 

 

 

- CSS

 

      * {
        margin: 0;
        padding: 0;
      }

      body {
        font-family: montserrat, sans-serif;
      }

      h1 {
        position: relative;

        margin-top: 150px;

        text-align: center;
      }

      section {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;

        /* clip-path: circle(100px at 50% 50%); */
        /* clip-path: ellipse(100px 150px at 50% 50%); */
        /* clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); */
        clip-path: circle(0 at 50% 50%);

        background: url(img/photo1.jpg) no-repeat;
        background-size: cover;
      }

      .container {
        position: relative;
        top: 200vh;

        padding: 30px;

        background: #ddd;
      }

 

 

 

- jQuery

 

      $(function () {
        $(window).scroll(function () {
          let scrTop = $(window).scrollTop();

          $("section").css("clip-path", "circle(" + scrTop + "px at 50% 50%)");
        });
      });

 

 

 

0

아주 간단한 예제인뎅 이미지를 예쁜 것 쓰니 너무 특별해보인다.

스위스 다시 가고싶당 ㅠ_ㅠ

 

 

 

 

 

* 이미지 출처

: https://www.postershop.kr/

 

 

---

 

 

https://meyerweb.com/eric/tools/css/reset/

CSS Tools: Reset CSS

 

오우 페이지가 너무 귀엽다.

웹스토리보이님께 reset.css를 작성하는 법을 배웠었는데, 오늘 학원에서도 수업으로 들었다.

 

사이트로 들어가면 기본 작성 예시가 있다. 복사해서 자기가 자주 쓰는 것들을 바탕으로 초기화

시키면 된다. 한 파일만 잘 작성해둬도 나중에 다른 곳에 붙여넣기 해도 된다. 

 

 

 

---

 

 

Favicon & App Icon Generator (favicon-generator.org)

Favicon & App Icon Generator

 

파비콘을 만들어주는 사이트이다.

접속해서 파비콘으로 만들 파일을 첨부파일로 올려주면 디바이스마다 다른 크기로 파비콘을 만들어준다.

 

 

 

 

이미지를 첨부하고 creat favicon을 클릭하면 저런 화면이 나타난다.

 

Download the generated favicon을 클릭하면 압축파일을 다운 받을 수 있고, 그 압축 파일을 풀면

 

 

 

이렇게 크기별로 다른 파비콘을 만들어준다.

 

 

<!-- favicon link -->
    <link rel="icon" href="img/border.png" />

 

HTML에서 <link rel="icon" href="파비콘 저장 경로"  />

이렇게 링크로 연결을 해주면 아래와 같이 나타난다.

 

 

 

파비콘이 위에 적용된 것을 볼 수 있다. 

기업 사이트에서 많이 볼 수 있는데, 개인 사이트에서도 언제든지 적용할 수 있다.