웹코딩, SVG를 활용한 랜딩페이지 제작하기 (1)

#웹코딩 #SVG활용

웹사이트 디자인 소개 및 학습목표

#

디자인소개

패스트 캠퍼스 "최성일"강사님의 강의를 듣고 내용정리한 글입니다. 디자인은 강의의 템플릿을 아주 살짝 변형하였습니다. 모든 디자인 저작권은 강사님께 있습니다.

​

SVG모션을 활용한 랜딩페이지 만들기

이전글에 다뤘던 웹 SVG파일 구현을 응용하여 패널이 돌아갈 때 마다, 그림이 그려지도록 랜딩페이지를 만들 것이다.

(svg기본편 보러가기)

짚어가야할 요소

HTML

• 시멘틱 테그 메끄럽게 정리(항상중요)
• SVG 파일 웹 적용에 대한 이해

​

CSS

• 2D/3D 회전에 대한 이해(매우중요!)
• 가상 선택자로 버튼만드는 방법 익히기
• SVG파일 속성 변경에 대한 이해

​

JS

• UP & DOWN 버튼클릭시 패널이 돌아가게끔 구현하기
• classList에 대한 이해

각 언어의 핵심요소만 간추렸다. 앞으로 단계별로 게시글을 정리할 때, 세부적으로 중요한 것을 계속 짚어 나갈 것이다.

HTML 전체구조도

기본구조를 가져왔다. main프레임 밖에 위치해있지만, 모두 main안에 들어가있는 것을 알 수 있다. 우선은 앞으로 공부하며 하나씩 알아보도록 하고, 지금은 그림 보면서 참고하자.

HTML

Body padding으로 전체구조 잡기

처음에는 구조를 어떻게 잡아야할까 고민이 많이 되었다. 이것저것 시도하다가 강사님이 아주 꿀 같은 팁을 주셨다. 바로 body테그에 padding을 넣고 main에 높이,넓이를 100%씩 넣는 방법이다.

                                    html

<body>
  <main></main>
</body>

css

body{
   width:100%;
   height: 100vh;
   padding: 25vh 10vw 15vh;  //위 아래 좌우

     main{
      width:100%;
      height: 100%;
      border: 1px solid red;
      position: relative;
}
}

​

• padding이 잘 들어갔는지 확인하기 위해 border을 추가해 주었다.
• main 위치값과 크기를 따로 지정해주지 않아도 되어서 한번에 틀잡기 좋다.

복습

#

썸네일용 이미지

짚어갈 포인트

• 시멘틱 테그의 구조가 어떻게 되는지 공부하기
• body에 padding 값을 주어 프레임 크기와 위치를 한번에 해결하기

​

​

​