Home 애플 웹사이트 만들기 시작! - HTML구조짜기
Post
Cancel

애플 웹사이트 만들기 시작! - HTML구조짜기

1. 애플 웹사이트

인프런에서 신기한 강의를 발견함. 애플 공식웹에서 구현한 기능, 즉 스크롤 값에 따라서 글자와 사진이 커졌다 줄어들었다 사라졌다하는 기능을 가르치는 강의를 발견했다.

구매한지는 4개월이상 된거 같은데 자바스크립트 기초 문법좀 더 다지고, 알고리즘 공부하느라고 최근에 듣기 시작했다. 근데, 너무 재밌다.

어려운건 없다. 알고리즘 공부를 해서 그런가 웬만한 로직과 문법은 이해가 된다. 다만, 접근법이 참 신기해서 배울점이 많다.

그래서 하나하나 세세하게 구현하는 과정을 서술하지는 않을 것이다. 배우던 도중에 새로알게된 사실이나, 알고있었지만 나중에 유용하게 사용될것 같은 지식만 간단하게 설명하고 넘어가려고 한다.

2. HTML

  • global / local nav로 네이밍을 했다.

  • 움직이는 그림을 하나로 관리할 수 있게 scroll-section 이라는 클래스로 통합하였다.

  • 또한, 각각의 웹사이트내에서 움직이는 그림이 4가지 영역으로 나뉘어져 있다. 따라서 section에 숫자를 부여하고 id를 할당하여 4개를 개별적으로 관리할 수 있게 만들었다.

1
2
3
4
<section class="scroll-section" id="scroll-section-0"></section>
<section class="scroll-section" id="scroll-section-1"></section>
<section class="scroll-section" id="scroll-section-2"></section>
<section class="scroll-section" id="scroll-section-3"></section>
  • 글자가 올라가지 않고 사진에 붙어있는 글자에 sticky-elem이라고 네이밍함.

  • sticky elem도 각자 가져와서 써야하므로 a,b,c,d class를 지정해서 세분화함.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<section class="scroll-section" id="scroll-section-0">
  <h1>AirMug Pro</h1>
  <div class="sticky-elem main-message a">
    <p>하와이 용암에서 추출한 <br />천연 주황빛깔의 최고급 세라믹</p>
  </div>
  <div class="sticky-elem main-message b">
    <p>
      음료의 맛을 200% 살려주는 <br />
      맛 강화 기능
    </p>
  </div>
  <div class="sticky-elem main-message c">
    <p>
      잡고있는듯 아닌 듯한 <br />
      인체공학적 손잡이
    </p>
  </div>
  <div class="sticky-elem main-message d">
    <p>
      말그대로 보면 볼 수록 빠져드는 <br />
      은은한 매력
    </p>
  </div>
</section>
  • 보통 div로 감싸는 경우는 말그대로 하나로 묶어서 쉽게 정렬하기 위함이기도 하고, 한꺼번에 변화를 적용하기 위함이기도 하다.

사실 html은 별거 없다. 다음은 css를 살펴보자!

This post is licensed under CC BY 4.0 by the author.