zim's growth dairy

HTML 코드 1. CSS 코드 작성 전 돔트리를 작성한다. (전체적인 구조 확인을 하기 위해) 2. CSS 작성 (부모 요소에서 자식 요소로 내려가면서 작성 필요한 것들은 다시 위로 올라와서 작성하면됨 배치 정렬 먼저 하기) 2-1. *{} 작성 전체적으로 줘야할 것들 주고 시작해야한다. 2-2. 부모에서 자식에게 배치를 위해 필요한 것들 작성한다. 2-3. 자식 스스로 정렬하는 것들을 적용한다. 2-4. 꾸미기 토대로 작성한 CSS *{ margin: 0; padding: 0; text-decoration: none; list-style: none; box-sizing: border-box; } .slidewrap{ width: 100%; border: 1px solid red; } .slidelis..

블록 요소 - 줄 바꿈이 일어난다. - 텍스트와 인라인 요소를 자식 요소로 포함할 수 있다. - 블록 요소는 있는 것과 없는 것이 있다. - 크기 조정 가능하다. 인라인 요소 - 줄 바꿈이 일어나지 않는다. - 텍스트와 인라인 요소를 자식 요소로 포함할 수 있다. - 블록 요소는 불가능 1. 선택자 종류 기호 태그 설명 및 특징 타입 선택자 p {} 문서의 태그를 직접 지정하여 사용한다. id 선택자 #abc 요소 중 id='abc'로 지정된 태그를 적용 class 선택자 .abc 요소 중 class="abc"로 지정된 태그를 적용 전체 선택자 *{} 모든 요소를 지정한다. 하위 선택자 p li 선택자 사이에 공백으로 분리해 p태그 하위 모든 li를 선택 자식 선택자 ul > li 자식 요소를 가르키며 ..

HTML HOME SERVICES PRODUCTS WATCHES SALE BLOG PAGES ▼ ABOUT BLOG SHOP CART CHECKOUT SINGLE POST SINGLE PTODUCT CONTACT TECHNOLOGY HACK YOU WON'T GET SHOP PRODUCT FREE DELIVERY Consectetur adipi elit lorem ipsum dolor sit amet QUALITY GUARANTEE Dolor sit amet orem ipsu mcons ectetur adipi elit. DAILY OFFERS Amet consectetur adipi elit loreme ipsum dolor sit. 100% SECURE PAYMENT Rem Lopsum dolor s..

HTML 회원가입 이름 주민등록번호 - ID PW 생년월일 성별 여자 남자 이메일 전화번호 현재 관심사는 무엇인가요? 영화 드라마 운동 CSS *{ margin: 0; padding: 0; text-decoration: none; list-style: none; box-sizing: border-box; } form { width: 80%; margin: 0 auto; } fieldset { min-width: 0; width: 50%; /* border: 1px solid red; */ margin: 0 auto; padding: 20px; } legend{ font-size: 25px; font-weight: 600; padding: 10px; } div{ padding: 10px; } .finish..

HTML sneakers for sports i love shoes this is shoes this is your presents CSS *{ padding: 0; margin: 0; text-decoration: none; list-style: none; box-sizing: border-box; } .container{ width: 80%; margin: 0 auto; display: flex; /* border: 1px solid red; */ /* padding: 5px; */ } .left{ margin-top: 10px; width: 67%; /* border: 1px solid blue; */ } .right{ width: 30%; /* border: 1px solid green; */ /..

이전에 실습했던 슬라이드는 ul과 li로 구성했다. 이번에는 div로 구성한 슬라이드 예제를 실습해보았다. HTML CSS *{ margin: 0; padding: 0; text-decoration: none; list-style: none; box-sizing: border-box; } input{ display: none; } .section .slidewrap { max-width: 1200px; width: 100%; margin: 0 auto; overflow: hidden; } /*전체적인 사이즈 지정 */ .section .slidelist{ white-space: nowrap; font-size: 0; } .section .slidelist > div { display: inline-blo..

HTML Our Menu All Burger Pizza Pasta Fries Delicious Pizza Veniam debitis quaerat officiis quasi cupiditate quo, quisquam velit, magnam voluptatem repellendus sed eaque $20 Delicious Burger Veniam debitis quaerat officiis quasi cupiditate quo, quisquam velit, magnam voluptatem repellendus sed eaque $15 Delicious Pizza Veniam debitis quaerat officiis quasi cupiditate quo, quisquam velit, magnam v..

HTML l r l r l r CSS *{ margin: 0; padding: 0; text-decoration: none; list-style: none; box-sizing: border-box; } /* .section input[id*="slide"]{display: none;} */ /* radio 버튼 안보이게 하기 id*=은 slide로 시작하는 id를 뜻함 */ .section .slidewrap { max-width: 1200px; margin: 0 auto; overflow: hidden;} /* container 크기 지정 */ .section .slidelist {white-space: nowrap; font-size: 0;} /* 인라인은 글자처럼 취급하기때문에 부모를 넘어갈수 없..