전체 글
css - 변수 선언 및 사용법
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); }
<step21>'css_갤럭시 홈페이지 따라하기'
http://greenweb.dothome.co.kr/galaxy/ Document 프리미엄 편의장비 편안하고 안전한 여행을 위한 필수 선택 프리미엄급 편의장비(유모차,카시트)로 행복한 여행에 안전을 더하세요. go greenweb.dothome.co.kr 1) galaxy.html 로그인 회원가입 비회원예약확인 (064)-744-1116 실시간 예약 갤럭시 서비스 대여가이드 커뮤니티 이벤트 페이스북 인스타그램 얼리버드요금제! 먼저예약하고 할인받자. 얼리버드요금제! 먼저예약하고 할인받자 예약율에 따른 할인요금제로 일찍 예약할수록 보다 더 저렴한 가격에 차량을 이용하실 수 있습니다 go 無한면책 한도無+無사고시 50%환불 無한면책 한도無+無사고시 50%환불 사고수리비와 휴차보상료 한도 無제한! 無사고시 無..
<step20>'css_반응형_media'
1) media_ex.html 다이정글은 업계선두주자로 오랜 실무 경험과 축적된 전문지식을 자랑하는 DIY 가구 전문 쇼핑몰입니다. DIY와 리폼에 대해 생소한 소비자에게 리폼을 알리고 장려하며 초보자도 쉽게 도전할 수 있도록 다양한 콘텐츠와 소비자 중심의 쇼핑몰로 거듭나기 위해 노력하고 있습니다. 즐거운 DIY와 리폼, 다이정글과 함께 시작하세요! 내츄럴 수저꽂이 내추럴 수저꽃이 입니다. 군더더기 없는 깔끔한 박스 디자인에 앞면 아크릴에 귀여운 수저 그림이 그려져 있어요. 원목나무의 내추럴함을 느낄 수 있는 수저꽃이 입니다. 우드 사각 컵받침 내추럴 수저꽃이 입니다. 군더더기 없는 깔끔한 박스 디자인에 앞면 아크릴에 귀여운 수저 그림이 그려져 있어요. 원목나무의 내추럴함을 느낄 수 있는 수저꽃이 입니다..
<step19>'css_flex실습'
1) indigo.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 Lorem..
flex익히기 게임
flex익히기 게임 https://flexboxfroggy.com/#ko Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com
css - flex
※flex-box 레이아웃 container에게 주는 속성 1. display : flex; 2. flex-direction : 배치방향을 지정 속성값 - row(default) / column / row-reverse / column-reverse 3. flex-wrap : 아이템을 한줄로만 배치할건지 여러줄로 배치할건지 지정 속성값 - wrap / no-wrap(default) / wrap-reverse 4. flex-flow(속기법): column no-wrap 5. justify-content : 주축방향 아이템 정렬을 지정 속성값 - flex-start / flex-end / center / space-around / space-between / space-evenly 6. align-items..
<step19>'css_flex'
1) flex_layout.html div1 div2 div3 div4 div5 2) flex_ex.html Green menu1 menu2 menu3 menu4 메인 컨텐츠01 작은제목 입니다. 내용적는 부분입니다. 2020.12.17 작은제목 입니다. 내용적는 부분입니다. 2020.12.17 작은제목 입니다. 내용적는 부분입니다. 2020.12.17 공지사항 그린 컴퓨터 아카데미 소식2020.12.17 코로나 바이러스 예방법2020.12.17 그린 컴퓨터 아카데미 소식2020.12.17 코로나 바이러스 예방법2020.12.17 주소 : 서울특별시 용산구 한강대로 대표이사: 그린 사업자 등록번호 : 110-12-12345 통신판매 신고: 제 2020-서울용산-000호 Green 3) flex_ex2.h..
브라우저 지원 유무 사이트
https://caniuse.com/ Can I use... Support tables for HTML5, CSS3, etc caniuse.com
css - center로 보내기
position을 이용해 요소의 중앙에 배치하기 1) top: 50% / left: 50% / transform: translate (-50%, -50%) 2) top: 50% / left: 50% / margin-left:-(width절반)px; / margin-top:-(width절반)px; 3) calc()함수를 사용 calc(50% - 100px) ※position 지정 후 left: 50%; /* center로 보내기!! */ top: 50%; /* center로 보내기!! */ transform: translate(-50%,-50%); /* center로 보내기!! */
<step18>'css_hover,position_실습'
1) hover_ex.html hover01 hover effect green web hover effect green web hover02 hover effect hover effect hover03 hover effect green web hover effect green web hover04 hover effect green web hover effect green web 2) 사이트맵 한국어 기업소개 솔루션 서비스 PR BLOG Monthly Security Peport 본 보고서는 이글루시큐리티에서 보안 매거진으로 고객부터 it보안 종사자까지 더 많은 분들과 보안 이슈를 공유 함으로써 안전한 보안환경을 만들기 위해 제작되었습니다. 국내 no.1 보안관리 전문기업, 이글루시큐리티는 글로벌대표 보안..