[html/css] 동영상을 활용한 웹 메인 홈페이지 제작하기 - 2편

안녕하세요

동영상을 활용한 웹 메인 홈페이지 제작하기 2편 시작하겠습니다

 

- 1편 -

레이아웃 및 미리보는 화면

동영상을 화면 사이즈에 맞게 넣는 방법이 있습니다

 

2020/12/27 - [웹코딩 공부&공유/내 작품] - [html/css] 동영상을 활용한 웹 메인 홈페이지 제작하기 - 1편

[html/css] 동영상을 활용한 웹 메인 홈페이지 제작하기 - 1편

 

동영상은 1편에 있습니다

2편에는 이미지만 나타내도록 하겠습니다

동영상을 활용한 메인 화면

---

1. 설명란 또는 글자를 랜덤으로 적어보자

 

Section 부위에

3번째 작은 글씨들을 보면

Lorem ipsum 블라블라... 이렇게 적혀져 있습니다

 

이렇게 설명하는 부위에 보여주고 싶으실 때

자주 사용할 수 있는 방법입니다

제가 타이핑을 일일히 해서 밀어넣은게 아닙니다

 

HTML코드

<p>lorem</p>

저는 <p>...</p> 태그 안에 넣었구요

 

lorem만 적으시는게 아니고

lorem + Tab

을 해주시면 저렇게 막 언어들이 나오게 됩니다

 

---

2. JOIN 만들어보기

 

저런 버튼형식들의 모양은

물론 button 을 활용해도 되지만 <a> 태그를 활용하셔도 됩니다

 

HTML 코드

<a>join</a>

 

우선

<a>...</a> 안에 join 이라고 타이핑 해주세요

 

그런 다음

 

CSS코드

a {
  ...
  background: #fff;
  text-transform: uppercase;
  font-weight: 500;
  color: #111;
  letter-spacing: 2px;
  border-radius: 10px;
}

이정도 보시면 될것 같습니다

 

기능 하나씩 설명드릴게요

---

2_1 text-transform 활용하기

 

제가 위의 a 태그에서 join 이라고 해놓았는데

전부 대문자로 변경되어 있습니다

 

어떤 텍스트를 한번에 대문자 소문자를 만들때 사용하는 것입니다

 

texrt-transform : uppercase;	해당하는 박스에 적힌 모든 글자를 대문자
texrt-transform : lowercase;	해당하는 박스에 적힌 모든 글자를 소문자

이런걸 잘 사용할 일이있나??

하실 수도 있는데..

저도 그렇게 생각했었습니다

 

생각보다 유용하니 알아두시면 좋을것 같습니다

---

2_2 letter-spacing 활용하기

 

직역하면... 문자-공간 정도가 되나요??

 

말그대로 텍스트와 텍스트 사이에 그.. 자간??을 설정할 수 있는 방법입니다

 

위 코드에서 제가 letter-spacing : 2px 로 설정해두었거든요

한 글자마다 2px 씩 공간을 두고 적어달라 이런 뜻입니다

 

lower-upper, letter-spacing 알아보기

 

---

3. @keyframes 말고 자연스럽게 조금 움직이는 아이콘 만들기

 

저번에 제가 @keyframes를 간단하게 다룬적이 있었습니다

@keyframes 보다 더욱 간단하게 하는 방법을 알려드리도록 하겠습니다

 

HTML코드

<li><a href=""><i class="fab fa-instagram"></i></a></li>
<li><a href=""><i class="fab fa-facebook-f"></i></a></li>
<li><a href=""><i class="fab fa-twitter"></i></a></li>

이렇게 fontawesome 에서 가져온 아이콘들을 가져온 후

 

CSS코드

li {
  transition: 0.5s;
}
li:hover {
  transition: 0.5s;
  transform: translateY(-5px);
}

---

3_1 :hover을 활용하기

 

:hover이란 마우스를 올렸을때 입니다

즉, li에 마우스를 올렸을때를 정의할 수 있는것입니다

 

:hover 이 외에도 정말 다양한 것들이 있지만 그건 다음에 다루도록 하겠습니다

---

3_2 transition 을 활용하기

 

transition 을 활용해서 이제 몇 초안에 바뀔꺼냐 라는걸 정의 할 수 있습니다

 

예를들어, 위 의 코드대로

transition : 0.5s;

transform : translateY(-5px);

라고 하면

 

li:hover이 되면!! 0.5초만에 -5px만큼 위로 라는 것입니다

 

어?? 그럼 왜 li 에 또 transition : 0.5s 만큼 준것이죠??

 

정답은..

위로 0.5초만에 5px만큼 이동을 했는데

마우스가 범위를 이탈하게 되면 원래 위치로 뚝 떨어져 보입니다

뭔가 마우스가 이탈하면 딱딱하다고 해야하나??

 

이탈해서 li의 원래자리로 돌아갈때까지

다시 0.5초의 시간을 주어서 자연스럽게 떨어지도록 하는 것입니다

 

코드를 올려 놓겠습니다

transition 과 tranform 을 수정하면서 테스트 해보시면 좋겠습니다

See the Pen ExgoZJa by Kang Byeongcheol (@Devcheol) on CodePen.

 

 

이렇게 홈페이지에 관한 내용을 2편으로 나누어 제작 해보았습니다

봐주셔서 감사드리구요

 

혹시 모르시는 사항 또는 궁금하신 사항 또는 지적사항 댓글로 꼭 알려주세요

같이 공부하면 너무 좋을것 같습니다 !!