💗 CPU 발표 내용 정리하기-1
✔ toogle 버튼 구현하기.
- 순수 css로만 메뉴 구현하기.
input (type="checkbox" 이용하기.) 과 label을 이용하고, 세부내용은 ul 태그를 이용해서 정리해준다.
평소에는 ul 태그의 내용이 안 보이게 설정해준 뒤에, label을 클릭했을 때(:checked 이용하기.) 보여지도록 설정해준다.
input#menu3:checked + nav#dropDownCnt3 {
display: block;
}- vanilla js로 메뉴 구현하기.
querySelector를 이용해서 원하는 부분은 가져와서 변수로 만들어주고, addEventListener를 통해서 이벤트를 넣어준다. toogle("active")를 이용해서 active 기능이 켜졌다가 꺼지도록 만들어준다. 또한, 함수를 한번만 사용하고 버릴 경우에는 () => {}를 이용해서 바로 적어준다. 그런 뒤에 css 파일로 가서 세부 사항은 평소에 안 보이게 저장해두고, active가 주어졌을 경우에 보여지도록 한다.
✔ float left, right 그리고 clear both
위치를 조정하고 싶은 경우에 float를 이용한다. 허나 float를 이용한 뒤에는 정확한 위치를 표시하기 위해서 clear를 통해서 정리를 해야한다.
✔ "반응형 헤더" 만들기.
유튜버 엘리님의 강의를 통해서 같이 반응형 헤더를 만들어보고, 내가 원하는 모습으로 다시 한번 만들어보았다. 코드를 깔끔하게 짜고 싶으면 시맨틱 태그를 잘 이용해야하며, css를 이용할 때에는 큰 부분부터 작은 부분으로 코드를 작성해줘야 더 깔끔하게 짤 수 있다. 그리고 html 코드를 작성하기 전에, 레이아웃을 작성해주면 더 좋은 클래스와 아이디의 이름을 지으면서 깨끗하게 짤 수 있다.
반응형 헤더를 만들면서 2가지를 명확하게 알게 되었다.
✔ 미디어 쿼리
스크린의 크기에 맞춰서 어떤 경우에는 보이게 만들고 어떤 경우에는 안 보이게 만들 수 있다. 요즘에는 여러 종류의 전자 기기가 있기 때문에 모든 경우를 생각하면서 코드를 짜야한다.
@ media screen and (// 기준점 적어주기.){
// 코드 작성하기.
}✔ position
기존의 흐름을 타지 않고, 위치를 바꾸고 싶은 경우에 absolute를 이용한다. right/ left 등을 이용해서 위치를 세부적으로 조정할 수 있다.
✔ flex-box
flex-box는 박스 안에 박스가 있는 경우에 유용하게 이용할 수 있다. 거의 모든 경우를 flex-box라고 생각하면 될 것 같다... 처음에는 정말 이해가 되지 않아서 힘들었는데, 이번에 제대로 이해하게 된 것 같다.
- display: flex (flex-box임을 알려주기.)
flex-box 임을 알려준다. - flex-direction (방향 알려주기.)
어떤 방향으로 flex-box가 이루어지는지 알려준다. - justify-content (위치 조정하기.)
flex-direction 방향으로의 위치를 알려준다. - align-items (위치 조정하기.)
flex-direction 수직 방향으로의 위치를 알려준다.
✔ WIT 3기 도전 : 과제 "웹 퍼블리싱"
5가지 정도는 해결하지 못하였는데, 꼭 5가지 모두 해결하고 싶다...
- 스크롤을 내렸을 때, 헤더가 흰색 네모로 바뀌어야 한다.
- our favorite btn 옆으로 보내기. & 버튼 누르면 움직이도록 만들어주기.
- 신발 사진 위에 마우스 올리면 다른 사진 보여지도록 만들어주기.
- 일부 a 태그에 애니메이션 효과주기.
- background & text 쪽에 애니메이션 효과주기.
(추가) front-end 동기님이 말씀해주셨는데, css로 해결이 가능하다면 성능이 훨씬 좋아지기 때문에 css가 가능하면 최대한 js를 사용하지 말라고 하셨다.
😀 마무리...
이제는 자바스크립트 공부를 더 많이 해야겠다. 이제 html & css는 감을 많이 잡았습니당...! 개강해서 매일 할 수 있을 지는 모르겠지만, 목표는
Javascript 30 이 사이트를 이용해서 매일 1개씩 만드는 것입니다... 그리고 이것이 끝나면 to-do-list와 계산기를 만들어보고 싶다!
