[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 보안관리 전문기업, 이글루시큐리티는 글로벌대표 보안기업입니다. 이글루시큐리티는 점차 ..
[CSS] hover / position / overflow / transition / transform 연습
·
Stack/CSS
:hover 요소에 마우스를 올렸을 때 스타일을 지정 내 안에 있는 애들한테만 스타일 적용 가능 1) 선택한 요소 2) 선택한 요소의 하위요소 menuhover.html green menu1 서브메뉴영역 menu2 서브메뉴영역 menu3 서브메뉴영역 menu4 서브메뉴영역 menuhover_me.html GreenMall 제품소개 submenu1 submenu2 submenu3 구매안내 submenu1 submenu2 submenu3 고객센터 submenu1 submenu2 submenu3 서비스 submenu1 submenu2 submenu3 홍보센터 submenu1 submenu2 submenu3 기업소개 submenu1 submenu2 submenu3 menuhover_teacher.html Gre..
[CSS] Isaknox / Organic (페이지 따라 만들기)
·
Stack/CSS
1. isaknox_teacher.html menu search home loginchevron_right joinchevron_right Brands Product Store Customer Center NEW PRODUCT X2D2 링클 포커스 세럼 wrinkle focus serum X2D2 링클 포커스 세럼 wrinkle focus serum X2D2 링클 포커스 세럼 wrinkle focus serum X2D2 링클 포커스 세럼 wrinkle focus serum Contact us 이용약관 개인정보취급방침 family site1 family site2 (주)LG생활건강 / 서울틀별시 종로구 세문안로 58 LG광화문빌딩 110-783 대표이사 차석용 / 고객상담실 080-023-7007 / 사업..
[CSS] display / float 복습 또 복습
·
Stack/CSS
display - block / inline / inline-block / none div, ul, ol, li, h1... -> block: 너비와 높이 지정 가능, 아래쪽으로 배치됨 (얘는 한칸을 다 쓰고, 얘한테 크기를 줄 수 있다) a, span, select, ... -> inline: 너비와 높이 지정안됨, 옆으로 배치됨 (얘는 지 크기만큼만 가지고, 내가 따로 크기 못줌) inline-block: 너비와 높이 지정가능, 옆으로 배치됨, 글자처럼 취급 * 요소사이 공간이 생김 block 요소의 중앙정렬 -> 해당요소 스타일 추가 margin: 0 auto inline 요소의 중앙정렬 -> 해당요소의 부모요소에게 스타일 추가 text-align: center float left / right c..