결과

• 영상으로 남길수 없다는게 너무 아쉽다...

html과 css, js만을 사용해서 구성을 하였다.

버튼의 상태에서 따라서 조명을 끄고 키는 것을 구현하였고
opacity와 transaction을 설정하여서 입체감있게 작동을 하게 만들었다.

git링크 : https://github.com/HoJin-jjimgo/channel_Lamp

html

• 큰 특별함은 없다;;

css

이 부분이 가장 중요하다
그러기 떄문에 전체 사진 보다는 부분적으로 작성해 볼것이며 Html과 비교해가면서 확인하는 것이 좋을 것같다.

• 일단 전체적으로 코드에 대해서 적을 것이며 내가 모르는 부분에 대해서는 마지막에 따로 다뤄 보도록 하겠다.

*, nav

• 기본 틀을 구성하는 곳이다(가장 큰 틀)

* 부분은 누구나 하는 설정이다
hero 부분도 크게 어렵지 않은 설정이다.

• 사실 이부분에 positon:relative 값을 주었는데 왜 주는지 모르겠어 가지고 그냥 삭제를 하였다.

윗 메뉴칸

화면에서 메뉴칸을 담당하고 있는 부분이다.
nav 기본적으로 flex로 지정을 해줌으로써 안에 있는 태그값을 가로로 설정해 주었다.

img 파일들을 불러 온뒤에 그냥 크기정도만 설정해 주었다.

ul 서로 공백값이 일정해야 하기 떄문에 flex를 1로 설정을 해주었고 오른쪽부터 보여야 하기떄문에 오른쪽 정렬을 해주었다.

li li를 사용하게 되면 점이 보이기 떄문에 그 점을 없애주기 위해서 style을 none로 설정 하였고 세로로 정렬이 되기 떄문에 display또한 설정을 해주었다.

a a태그를 사용 하게 되면 보통 텍스트 이런식으로 밑줄이 있게 되기 떄문에 그것을 삭제해 주고자 text-decoration을 설정해 주었다.

button

button 그러게 어려운 코드는 없고 후에 cursor, transition, ouline정도만 다루어 보겠다,

span 버튼안에 있는 동그라미 버튼이다.
일단 display를 block를 주어서 사각형으로 만들어 주었고 이후 radius를 주어서 동그라미로 만들어 주었다

lamp

이미지파일 조명과 빛을 다루고 있는 부분이다.

container position자체를 absolute로 하여서 원하는 위치에 둘수 있게 하였다.

light lamp같은 경우에는 단순히 전체를 담당하게 하였지만 light는 아래에 위치해야 하기떄문에 마찬가지로 position을 수정하였다.
opacity, transform 등은 후에 다루어 보겠다.

text

글자는 단순히 영역의 크기정도만 설정해 주었다.

• 색이 나오는 이유는 .hero 떄문이다.

a 마찬가지로 밑줄을 제거해 주었고 색깔 크기 등을 설정해 주었다.

js

동적 작업이 별로 없기 떄문에 일단 html안에 js를 입력을 해주었다.

내가 바꿔야 하는 값은 버튼을 누를시에 빛이 켜져야 하기 떄문에
btn, light 에 값을 가져 왔다.

이후 button에 있는 이벤트함수를 만들어 주었다.

toggle 함수는 간단하다.

• ()안에 있는 값이 없다면 추가해주고 있다면 삭제해주는 역할을 하고 있다.

이렇게 설정해주면 button의 초기값에는 active가 없기떄문에 버튼을 누르게 되면 active class가 추가가 되는 로직이다.

active로직은 간단하다 그냥 색을 초록색으로 변하게 하는 것이다.

• button의 색을

이떄 중요한 점은 transition이다.

• 값이 변할떄 변하는 속도?? 를 지정해 주는 것으로 이해를 하였다.

  나같은 경우에는 1초 이기 떄문에 1초동안 서서히 버튼의 색이 바뀐다.

button안에 있는 span값도 바뀌어야 하기 떄문에 transition을 지정해 준것을 알수가 있다.

on class는 간단하다 선명도 : opacity를 1로 바꾸어 주는 역할이다.

• 0이면 보이지 않는다.

추가사항

transform

• 위치 이동에 대한 내용이다.
• 옵션으로 다양하게 있으니 사용하고자 할떄마다 google를 참고해보자
• 내 코드에서 역할은 X좌표에서 50%만큼 왼쪽으로 이동

cursor

• 마우스 포인트를 설정해 주는 역할이다.
• 별다른 역할은 없고 단순히 마우스 포인트의 모양만을 바꾸어 준다.

display: inline-block

• 기본적으로 inline속성이 무엇인지 알아야 한다.
  inline -> 줄바꿈이 없는 태그들
• 이 속성은 inline태그들에게 width와 height등과 같이 속성의 상하 간격을 가능하게 해준다.
• 따로 지정하지 않으면 inline태그들의 간격은 조절할수 없다.

참고 링크. https://www.daleseo.com/css-display-inline-block/

outline

• 외곽선을 의미한다.
• border의 외곽선을 꾸며줄수 있는 속성이다.