안녕하세요

실제로 구현을 해보며 얻어가는 것이 많습니다. 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..

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..