목록HTML & CSS/생활코딩 - 겁나 빠른 웹 레시피 (6)
개발자입니다
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
label for 에 checkbox의 id 입력하면 label 클릭으로도 checkbox 클릭한 효과 줄 수 있다. ROOT node1 node2 node3 node31 node32 node33
masonry: 벽도을 쌓는 공사, 석조 : 독립적인 콘텐츠를 표현한다. 피규어, 설명, 콘텐츠는 하나의 단위로 참조된다. 이미지, 삽화, 도표, 코드 조각 등을 넣을 수 있다. An elephant at sunset -CSS 설명 column-width: 350px : 350 px의 너비를 가진 열로 나눠준다. column-gap: 15px : column 간격을 15px 준다. box-shadow: 바깥 영역에 그림자를 준다. /* offset-x | offset-y | blur-radius | color */ Cinderella wearing European fashion of the mid-1860’s Rapunzel, clothed in 1820’s period fashion Belle, bas..