[CSS] CSS 애니메이션
·
Stack/CSS
@keyframes scaleWidth { from { width: 100px; } to { width: 200px; } } div { animagion-name: scaleWidth animation-duration: 1s; } ani.html ani_ex.html ani_ex_teacher.html ani_ex2.html Green Academy green web
[CSS] nots (페이지 따라만들기 5)
·
Stack/CSS
index2.html BEST SELLER SKINCARE MAKEUP THE STORY EXPERIENCE WHERE PREMIUM DWELLS it is the clean healthy looking skin that bootsts your confidence. NOTs always aim for the premium. Remember the 28 Days 28 Remedy The regeneration cycle of nomal skin Skin Lighting Whitening Program White luminaire which completes beautiful by bringtening the lost light within skin Blue Organic Begin28 Forming moi..
[CSS] CSS 변수 선언
·
Stack/CSS
/* 변수 선언 */ :root { --main-bg-color: red; --big-font: 24px; --middle-font: 18px; --small-font: 14px; } /* 변수 사용 */ div { background: var(--main-bg-color); font-size: var(--big-font); } IE는 지원 불가
[CSS] Galaxy (페이지 따라만들기 4)
·
Stack/CSS
index.html 로그인 회원가입 비회원예약확인 (064)-744-1116 실시간예약 실시간 예약 갤럭시 서비스 대여가이드 커뮤니티 이벤트 페이스북 인스타그램 얼리버드요금제! 먼저예약하고 할인받자. 얼리버드요금제! 먼저예약하고 할인받자 예약율에 따른 할인요금제로 일찍 예약할수록 보다 더 저렴한 가격에 차량을 이용하실 수 있습니다 go 無한면책 한도無+無사고시 50%환불 無한면책 한도無+無사고시 50%환불 사고수리비와 휴차보상료 한도 無제한! 無사고시 無한면책 보험료의 50% 환불! go 프리미엄 편의장비 편안하고 안전한 여행을 위한 필수 선택 프리미엄 편의장비 편안하고 안전한 여행을 위한 필수 선택 프리미엄급 편의장비(유모차,카시트)로 행복한 여행에 안전을 더하세요. go 금연차량 NO SMOKING!..
[CSS] Indigo (+ 반응형)
·
Stack/CSS
indigo_media.html INDIGO HOME WE ARE WORK BLOG CONTACT US WE ARE Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. HOME Lorem Ipsum is simply dummy text of the printing and typesetting industry. WE ARE Lorem Ipsum is simply dummy text of the printing and typesetting industry. WORK Lo..
[CSS] media 쿼리 (반응형)
·
Stack/CSS
break point 0~768px 모바일 768px~1024px 테블릿 1025px~ web 1. @media all and (min-width:320px) and (max-width: 768px) { 스타일 작성 } 2. media.html (초안) media.html 모바일 diy.html 다이정글은 업계선두주자로 오랜 실무 경험과 축적된 전문지식을 자랑하는 DIY 가구 전문 쇼핑몰입니다. DIY와 리폼에 대해 생소한 소비자에게 리폼을 알리고 장려하며 초보자도 쉽게 도전할 수 있도록 다양한 콘텐츠와 소비자 중심의 쇼핑몰로 거듭나기 위해 노력하고 있습니다. 즐거운 DIY와 리폼, 다이정글과 함께 시작하세요! 내츄럴 수저꽂이 내추럴 수저꽃이 입니다. 군더더기 없는 깔끔한 박스 디자인에 앞면 아크릴에 귀..
[CSS] Indigo (페이지 따라 만들기 3)
·
Stack/CSS
indigo_teacher.html INDIGO HOME WE ARE WORK BLOG CONTACT US WE ARE Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. HOME Lorem Ipsum is simply dummy text of the printing and typesetting industry. WE ARE Lorem Ipsum is simply dummy text of the printing and typesetting industry. WORK ..
[CSS] flex-box 레이아웃 연습
·
Stack/CSS
container에게 주는 속성 1. display: flex; 2. flex-direction: 배치방향을 지정 row / column / row-reverse / column-reverse 3. flex-wrap: 아이템을 한줄로만 배치할건지 여러줄로 배치할건지 지정 wrap / no-wrap / wrap-reverse 4. flex-flow: column no-wrap 5. justify-content: 주축방향 아이템 정렬 지정 flex-start / flex-end / center / space-around / space-between 6. align-items: 교차축 아이템 정렬 지정 (한줄일 때) flex-start / flex-end / center / stretch (default) 7..
[CSS] 원하는 요소 중앙에 배치하는 방법
·
Stack/CSS
position을 이용해 요소의 중앙에 배치하기 1. top: 50% / left: 50% / transform: translate(-50%, -50%) 2. top: 50% / left: 50% margin-left: -50px; 쌤이 여기 왜 -50이라 적으셨을까 margin-top: -100px; 3. calc()함수를 사용 calc(50% - 100px) 초록 부분 띄어쓰기 필수 ! 띄어쓰기 안하니까 안되넹
[CSS] Igloo (페이지 따라 만들기 2)
·
Stack/CSS
85% 완성작 ㅠ http://hyodev.dothome.co.kr/Igloo/ Document Monthly Security Peport 본 보고서는 이글루시큐리티에서 보안 매거진으로 고객부터 it보안 종사자까지 더 많은 분들과 보안 이슈를 공유 함으로써 안전한 보안환경을 만들기 위해 제작되었습니다. hyodev.dothome.co.kr 사이트맵 한국어 기업소개 솔루션 서비스 PR CENTERBLOG Monthly Security Peport 본 보고서는 이글루시큐리티에서 보안 매거진으로 고객부터 it보안 종사자까지 더 많은 분들과 보안 이슈를 공유 함으로써 안전한 보안환경을 만들기 위해 제작되었습니다. 국내 no.1 보안관리 전문기업, 이글루시큐리티는 글로벌대표 보안기업입니다. 이글루시큐리티는 점차 ..