목록전체 글 (529)
안녕하세요
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/blBxtM/btrGJG18kma/RaMBZp6bxAeGY4h9Zkntv0/img.png)
1. 현재 슬라이드의 비디오만 재생됩니다. 2. 슬라이드가 넘어가면 자동으로 비디오가 재생됩니다. 3. 비디오는 슬라이드가 넘어가도 처음으로 돌아가지 않고 넘어간 시간에 정지되어 있습니다. 4. 슬라이드가 넘어가면 무조건 Pause 버튼으로 바뀝니다. 5. 슬라이드마다 Pause Play가 작동합니다. [220706 식품코딩Mc] [ 220706 식품코딩Mc html / css / js ] 현재 슬라이드는 재생시키고 슬라이드가 넘어갈 때마다 나머지 슬라이드는 정지합니다. 비디오가 50개라면(슬라이드에 50개의 비디오를 넣을 일은 사실 없습니다.) 50줄이 될 테니 매우 비효율적인 코드네요. 문제는 인식하고 있지만 손 쓸 방도가 없었습니다. 이 코드를 짠 것은 3일 전입니다. 당시에는 jquery로 DOM..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/cTcLRJ/btrGLztshvT/sgaVxoOQOKx2pvkLrIqzJ0/img.png)
다단메뉴를 반응형으로 만듭니다. 레이아웃을 만들 때 height를 주지 않아야 반응형으로 만들기 편합니다. 주요 width를 auto로 바꾸어 주기, 화면 크기가 작아졌을때 버튼으로 메뉴 사라졌다 나타나도록 하기, js로 구현한 메뉴버튼이 큰 화면에서 영향받지 않도록 resize 주기. 위의 세 단계가 중요한 포인트입니다. 오늘도 한 섹션을 만들었습니다. js로 기능을 구현하기 위해 선택자를 이용하는 것이 쉽지 않습니다. [220706 식품코딩Mc] [ 220706 식품코딩Mc html / css / js ] 다단메뉴 shortcut은 다음과 같습니다. ul>li*5>a{menu0$}+ul.smenu>li*5>a{smenu$$} css 디자인을 합니다. .Wrap { } .header { line-hei..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/c4qae7/btrGGSfdnMb/mxRutiyIOl5wL9rw8E5RQK/img.png)
float으로 responsive를 구현하는 방법을 배웠습니다. 처음 보는 속성이기 때문에 생소하여 어느 정도까지만 이해가 되고 그쳤습니다. 실제로 현장에서 많이 사용하지는 않는다고 합니다. 오래 된 사이트의 경우엔 float가 코드에 들어가 있을 테니 알아는 두라고... [220706 식품코딩Mc] [ 220706 식품코딩Mc html / css / js ] .prettierignore를 사용하면 원하는 파일에 format save가 적용되지 않도록 할 수 있습니다. css를 작성할 때는 prettier의 format save를 적용해 실수 없이 편하게 작성하고 완성된 코드를 가로로 길게 쓰고 싶다면 .prettierignore에 *.css를 입력하여 저장합니다. 그리고 css-compact exten..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/b8ojL4/btrGzPjyopv/xsocJZzD5iI0GWfqgmgApK/img.png)
이번 코딩은 slide를 중점적으로 연습합니다. [220706 식품코딩Mc] [ 220706 식품코딩Mc html / css / js ] 시안부터 디자인 하는 것은 어렵고 계속 바뀌기 때문에 대략적인 레이아웃과 아이디어만 구상한 뒤에 코딩을 하면서 간격이나 폰트를 맞추기로 했습니다. 러프한 레이아웃을 따라 러프한 코딩을 구현했습니다. git을 terminal로 이용하는 설명은 github에서 repository를 만들고 난 직후에 잘 정리되어 있습니다. …or create a new repository on the command line echo "# responsive_web" >> README.md git init git add README.md git commit -m "first commit" g..