목록HTML & CSS (22)
개발자입니다
HTML, CSS, 자바스크립트로 길게 코딩해야 했던 모달 창을 HTML 코드로 간단히 만들 수 있다. 태그를 사용해 만든다. button value="close" 로 지정하면 닫기 버튼 구현된다. pseudo 선택자 backdrop 으로 모달창 뒷부분 배경색 변경 가능하다.
page1.html consectetur adipisicing elit. Eum sequi consequuntur totam placeat tenetur similique, magni ratione vel delectus consequatur consectetur fugiat eius ipsam fuga ullam quas, voluptates ad nemo. page1 page2 play pause page.js history.back(); // 이전 페이지의 객체 history.pushState(null, null, 'a.html'); // a.html 페이지를 history 맨 끝에 넣는다. $(window).on('popstate', function()) // 뒤로가기 이벤트가 빌생했을때 even..
https://source.unsplash.com/ - https://source.unsplash.com/random http://loremflickr.com/ - http://loremflickr.com/1280/720 http://pipsum.com/ - http://pipsum.com/1280x720.jpg https://unsplash.it/ - https://unsplash.it/1280/?random 특정 분류, 크기, 작가 사진 URL 에 지정 가능 Lorem ipsum dolor.
각 배경마다 height: 100vh, overflow: hidden, background-attachment: fixed 로 한다. 밑줄은 h1:after 에 border-bottom 주고 width 로 길이 조절한다. display: block 하면 아래로 내려간다. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam suscipit sint ab beatae nihi Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam suscipit sint ab beatae nihi Lore..
transform: translateY(3px) 로 눌리는 느낌 줬다. border-bottom: 2px 로 변경해서 눌렀을 때 아래 그림자가 얇아지게 했다. transition: all 0.1s 로 부드러운 움직임을 줬다. blue red