HTML NEW ARRIVALS ZOOM VIEW BERRY LACE DRESSE $29.00 ADD TO CART ZOOM VIEW BERRY LACE DRESSE $29.00 ADD TO CART ZOOM VIEW BERRY LACE DRESSE $29.00 ADD TO CART ZOOM VIEW BERRY LACE DRESSE $29.00 ADD TO CART ZOOM VIEW BERRY LACE DRESSE $29.00 ADD TO CART CSS *{ padding: 0; margin: 0; text-decoration: none; list-style: none; box-sizing: border-box; background-color: rgb(231, 228, 228); } .container..
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;} /* 인라인은 글자처럼 취급하기때문에 부모를 넘어갈수 없..
HTML NEW ARRIVALS ZOOM VIEW BERRY LACE DRESSE $29.00 ADD TO CART ZOOM VIEW BERRY LACE DRESSE $29.00 ADD TO CART ZOOM VIEW BERRY LACE DRESSE $29.00 ADD TO CART ZOOM VIEW BERRY LACE DRESSE $29.00 ADD TO CART ZOOM VIEW BERRY LACE DRESSE $29.00 ADD TO CART CSS *{ padding: 0; margin: 0; text-decoration: none; list-style: none; box-sizing: border-box; background-color: rgb(231, 228, 228); } .container..
오늘 작성한 CSS 코드를 조금 수정해 보았다. 라디오 버튼을 선택하면 연결된 라벨의 백그라운드 색상이 변경되도록 수정하였다. 또한, 라벨의 위에 overline 줄이 생성되도록 수정하였다. label{ display: inline-block; width: 25%; text-align: center; /* border: 1px solid #f30d0d; */ padding: 16px 16px; font-size: 20px; background-color: rgb(252, 236, 252); color: rgb(205, 166, 241); } #p > div{ font-size: 20px; padding: 0; width: 100%; display: none; } #a:checked ~ #p #b1{dis..
label 과 radio를 사용하여 클릭시 박스가 보이도록 구성 HTML Comunication Scheduling Messages Live Chat Communicate with ease Uniquely underwhelm premium outsourcing with proactive leadership skills. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer rutrum, urna eu pellentesque pretium, nisi nisi fermentum enim, et sagittis dolor nulla vel sapien. Vestibulum sit amet mattis ante. Ut placerat dui eu n..
https://themewagon.com/themes/restoran-free-responsive-bootstrap-5-restaurant-website-template/ Restoran - Free Bootstrap 5 Restaurant Website Template Restoran is a free Bootstrap restaurant website design that is clean and modern. It is designed for restaurants, and other food-related websites. themewagon.com 위의 사이트에서 웹사이트를 다운받아 CSS를 비슷하게 작성해보았다.
- box-sizing 속성 값 의미 기본값 content-box 너비(width, height)만으로 요소의 크기를 계산 content-box border-box 너비(width,height)에 안쪽 여백(padding)과 테두리 선(border)를 포함하여 요소의 크기를 계산 * border-box padding값과 margin 값을 포함하여 요소의 크기 결정 - display 속성값 의미 blcok 블록 요소( 등) inline 인라인 요소( 등) 기타 table, table-cell, flex 등 none 요소의 박스 타입이 없음(요소가 사라짐) * 인라인→블럭 하는 이유 크기 조정을 위해 요소 변경한다. (인라인 요소는 크기 조정이 안된다(width, height)) * flex 인라인 요소로 ..
- Total
- Today
- Yesterday