시맨틱 태그로 MASK UI 구조잡기 (1)

#시맨틱태그 #MASK #webkit

​

**\\글읽기 전에 잠깐!\*\***

**\*\***정보처리기사 필기** 준비중이라면?\*\***

> 정보처리기사 총정리 바로가기

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

#

webkit MASK이미지를 활용하여 랜딩페이지 만들기

이전글에 다뤘던 -webkit-mask를 활용하여 회사 랜딩페이지를 제작해 보겠다.

시맨틱 태그 구조

좀 많이 복잡한 구조이다. 천천히 하나씩 알아보자

• 전체영역을 main으로 잡는다.
• 좌측 메뉴바 영역을 header로 구성하고 로고는 h1, 메뉴바는 ul>li로 잡아준다.
• 배경으로 들어갈 비디오는 section>article>video로 넣어준다. autoplay loop 속성을 추가한다.
• 화면 우측의 소개글은 section>article>.slogan으로 만들어준다.
• .slogan 안쪽의 글자는 h1>.inner , p>.inner로 넣어준다.

시맨틱태그는 구조를 잡는 뼈대이다. 가장 중요하면서도 헷갈리는 부분이 많다. 정해진 공식은 없지만, 여러 인터렉션을 구현하기 위해서는 구조를 처음에 잘잡아놔야 이중으로 코드를 짜지 않을 수 있다.

​

초보자 입장에서는 경험을 통해 배우는 것 밖에 답이 없다.

​

\*나중에 우측 상단에 .sns로 아이콘도 추가할 예정이다.

​

폰트소개

구글 웹폰트

코드를 작성하기 이전 제일 처음으로 구글 웹폰트 연결을 했다..

@Cormorant SC

• 로고 & 메뉴바 폰트이다. 고급스러운 느낌이 나는게 회사와 잘 어울린다고 생각이 들었다.

@Bebas Neue

• 메뉴클릭시 나타나는 폰트이다. 두껍고 긴 폰트라 회사의 이미지와 어울린다.

컨셉이 회사이기 때문에, 회사와 어울리는 신뢰감과 전문성이 묻어나는 폰트를 선택했다.

​

​

마스크 이미지 소개 & 다운로드

이전글에 다뤘던 마스크 모션과 함께 추가로 2개의 모션이미지를 넣어 인터렉션을 구현할 것이다. 필요하면 직접 다운로드하면 된다.

첨부파일

mask

.zip

파일 다운로드

#

#

#

#

복습

#

짚어갈 포인트

• 시맨틱 태그의 구조 다시 한번 복습하기
• mask 인터렉션 공부하고 오기

​

​

​