안녕하세요

JS로 클릭을 하면 화면에 없다가 나타나는 사이드바를 구현했습니다. 나타나고 사라질 뿐만 아니라 버튼의 텍스트를 OPEN CLOSE 로 바꾸는 심화학습도 했습니다. 그리고 keyframes를 통해서 이벤트 없이도 스스로 동작하는 애니메이션을 학습했습니다. 잘 이용한다면 동적인 디자인을 구현할 수 있을 것 같습니다. 기능을 구현하는 것이 어렵지만 재미있게 배울 수 있었습니다. 하루 빨리 더 많은 기능을 구현해보고 싶은 마음도 있지만 쌤은 그러다가 지치지 말고 길게 가자 말해주셨어요. 가늘고 길게 갑시다. dl 태그는 dt 또는 dd 만을 자식으로 가집니다. 정의 및 특징 태그는 용어(term)와 그에 대한 설명(description)을 리스트 형식으로 정의할 때 사용합니다. 요소는 용어(term)나 이름(..

버튼을 클릭하면 슬라이드가 바뀌는 기능을 배웠습니다. jquery로 class의 index를 변수로 지정하고 css 속성의 top에 index 값을 곱해주면 이미지가 위로 올라가는 듯한 슬라이드를 구현할 수 있습니다. $(function () { $(".num li").on("click", function () { var idx = $(this).index(); $('.shoes .case ul').css({ top:-450 *idx}) }) }); [버튼을 누르면 top 위치가 변하는 슬라이드] 그리고 이미지를 배경에 두고 전면의 레이아웃만 움직이는 효과를 배웠습니다. 하지만 실수로 파일을 백업하지 않았습니다. 남아있는 코드로 복습한 뒤에 직접 구현해보도록 합니다. css 속성 순서가 잘 기억나지 않을..

헤더의 메뉴와 자동슬라이드를 구현했습니다. 슬라이드 기능은 필수라고 생각하기 때문에 추가로 더 배우고 싶습니다. [오늘 학습한 내용으로 구현한 사이트 화면입니다.] hr은 문장과 문장 또는 컨텐츠와 컨텐츠 사이를 나눌때 사용합니다. 디자인적으로 이용하기 위해서는 bolder를 사용하는 것이 좋습니다. 클래스명을 _로 연결하는 것을 스네이크 케이스라고 합니다. #dddddd는 경계선에 사용되는 표준 색상입니다. dd처럼 반복되는 경우에는 #ddd로 표현할 수 있습니다. .header .top_banner { border-bottom: 1px solid #dddddd; } 1200px의 박스는 클래스를 부여합니다. .header .top_banner .container { display: flex; just..

주말에 푹 쉬어도 월요일 수업은 피곤한 것 같습니다. slick을 활용한 슬라이드 구현 방법을 맛보기만 하고 다음 시간에 제대로 배웁니다. 엄청 새로운 내용을 배우지는 않았습니다. [3단 이미지를 구현했습니다.] 실제로 어떻게 만들어지는지, 보통 사용하는 웹규격은 어떤지에 대해 배울 수 있었습니다. 높이는 특별한 경우가 아니라면 auto로 두고, padding으로 조절합니다. background나 떠오르게 된 box가 기존의 layout에서 벗어난 경우에는 auto를 사용하지 않습니다. 모듈화 보통 header와 footer는 고정된 채로 main의 내용이 바뀝니다. 고정된 부분은 components로 만들어 작업을 합니다. .wrap : 한 섹션을 크게 둘러싸는 박스의 클래스명입니다. slick : 부..