안녕하세요

6월 1일은 공휴일입니다. 공부 외에도 해야할 일이 있어서 바쁘기 때문에 주중의 휴일이 무척 달콤하게 다가옵니다. 개인적인 일이 이제 곧 끝납니다. 이번 주 목요일부터는 09:00~18:00 수업으로 전환되기 때문에 수업 내용을 복습하는 것 만으로도 바쁠 것 같습니다. 여유가 될 때마다 코딩 문제풀이도 할 수 있도록 해야겠습니다. slick과 jquery로 이전슬라이드, 다음슬라이드 버튼, 선택한 슬라이드로 바로 이동하는 버튼을 구현했습니다. [수업 중 구현한 버튼 slide 페이지 주소입니다.] slick 다운로드와 설정 방법입니다. https://kenwheeler.github.io/slick/ slick을 다운로드 받고 압축을 풉니다. 아래의 파일을 복사해서 폴더 안에 붙여넣으면 됩니다. slick..

반응형화면으로 메뉴를 구성하는 방법을 배웠습니다. 큰 화면에서는 헤더에 메뉴들이 나열되어 있습니다. 화면의 크기가 지정된 크기 이하로 작아진 화면에서는 메뉴들이 사라지고, 버튼이 생깁니다. 버튼을 누르면 슬라이드로 메뉴창이 나옵니다. [수업 중 구현한 페이지] 주석 입력 방법입니다. 협업을 할 때에는 ~를 누가 ~를 언제 수정했다. 하고 기록을 남기는 것이 중요합니다. /* 2022.05.30 young */ .header {} // 2022.05.30 young document.querySelector('.header').style.color = 'red' html 기본 틀입니다. 없애기 none의 대척점에 있는 나타내기 는block 입니다. display: none; display: block; !i..

10일 사이에 많은 것을 배웠고 배우고 있지만, 아직은 초반이라 그런지 반복하여 손에 익히는 시간이 많습니다. 이번 주 목요일 부터는 9:00~18:00 총 8시간의 수업으로 전환됩니다. 체력이 받쳐줘야 할 것 같습니다. 운동도 빠지지 않고 사흘에 한 번 이상은 할 수 있도록 노력해야겠습니다. 2주차 노트 5월27일 10일차 - slick-slider, 가상요소선택자로 pattern 입히기 5월26일 9일차 - side menu, keyframes 구현 5월25일 8일차 - 슬라이드 top 사이즈바꾸기, JS로 toggle("on ") 학습 5월24일 7일차 - 헤더 메뉴 구현하기, 슬라이드 활용하기 5월23일 6일차 - slick 슬라이드 구현, 3단 이미지 코딩 [node.js] 2775 부녀회장이 ..

실제로 구현을 해보며 얻어가는 것이 많습니다. position, slick-slider, 가상요소선택자 pattern 입히기 뿐만이 아니라, 올바른 semantic 사용법, 실제 현장에서 이용하는 size 등을 반복하며 배울 수 있습니다. [수업 중 구현한 페이지주소입니다.] image 이름을 붙일 때 m01 : main, 두자릿수를 대비해 01 부터 시작합니다. 이미지 크기가 넘칠 때는 max-witdth 를 적용하면 됩니다. img { max-width: 100%; } transform: scale로 이미지 크기를 키울 때 overflow: hidden; 을 적용하지만 이미지 크기가 넘친다면 img 를 div로 감싸서 해결합니다. strong은 inline이고 p는 block입니다. line-heig..