Dev다D

이노 옷걸이처럼 걸어 놓을 수 있는 블루투스 스피커 '이노'를 홍보하는 사이트를 만들어보려고 합니다. 위에 있는 도면을 따라 반응형 웹사이트를 만들어주세요. 그리드는 반응형 그리드 과제에서 만든 것을 그대로 사용하면 됩니다! 초록색 선은 padding, 빨간색 선은 margin, 파란색 선은 가운데 정렬(가로 혹은 세로)을 뜻합니다. 모든 사진은 background-image를 통해 넣었습니다. In'o 글자의 font-size는 20px 글자색은 white입니다. In'o 글자가 속한 div 태그의 background-color 는 #353535입니다. 결과물 IN'O Portfolio Make Hardware Soft IN'O is a hanger-type bluetooth speaker that d..

반응형 그리드 크게 세 가지로 나누어집니다. 왼쪽: 모바일 사이즈 (767px 이하) 가운데: 타블릿 사이즈 (768px 이상, 991px 이하) 오른쪽: 데스크탑 사이즈 (992px 이상) 반응형 그리드 결과물 body { margin: 0; } div { float: left; } #div1 { background-color: #FF0000; width: 100%; height: 60px; } #div2 { background-color: #FFA500; width: 100%; height: 350px; } #div3 { background-color: #FFFF00; width: 100%; height: 320px; } #div4 { background-color: #008000; width: 10..

SimpleShop 코드잇의 SimpleShop 쇼핑몰 페이지를 완성해보세요! 참고하세요: 네비게이션 바의 height 는 60px 입니다. 네비게이션 바의 메뉴들은 클릭하면 페이지 최상단으로 이동합니다. # 를 활용해주세요. hero_header.jpg 는 배경이미지로 들어가고, 배경이미지가 들어가는 영역은 450px 의 height를 가집니다. 각 상품들을 클릭하면 페이지 최상단으로로 이동합니다. 이미지의 테두리는 클릭 영역 표시를 위한 것이고, 직접 구현하지는 않아도 됩니다. 페이스북, 인스타그램, 트위터 아이콘의 height는 20px로 지정해 주세요. Contact Shop Cart Login Our New Products Sunglasses 49,000 Tassel Loafer 89,000 B..

네비게이션 바 메뉴 네비게이션 바 로고 과제에 이어서 네비게이션 바에 메뉴를 넣어보세요. 세 메뉴는 각각 태그 안의 태그이고, 태그 안에 묶여 있습니다. float의 개념을 잘 활용해보세요! 수업 회원가입 로그인 코딩, 스펙이 아니라 필수입니다. 코드잇은 코딩을 통해 생각하는 법을 가르칩니다. 더 알아보기 body { margin: 0; } #navbar { padding: 0 20px; border-bottom: 1px solid #eee; overflow: hidden; background-color: white; box-shadow: 0 1px 3px 0 rgba(0,0,0,0.50); height: 60px; } #logo { float: left; line-height: 60px; } #logo..

파라다이스 파크 놀이 공원 '파라다이스 파크'의 웹사이트를 만들어보려고 합니다. 여러분이 할 일은 사이트 좌측에 있는 네비게이션 바를 채워 넣는 것입니다. 'HOME', 'EVENT', 'TICKET', 'MEMBERSHIP', 'NOTICE'는 사이트 메뉴입니다. 각각 다른 태그 안에 있는 태그입니다. 태그는 모두 태그에 묶여 있습니다. 빨간 선은 margin, 초록 선은 padding, 파란 선은 '가운데 정렬'입니다. 페이스북 아이콘은 width를 22px로, 트위터 아이콘은 width를 25px로 지정해 주세요. HOME EVENT TICKET MEMBERSHIP NOTICE Welcome to Paradise Park! Learn More body { margin: 0; min-width: 76..

코딩의 민족 그리드 코딩의 민족 넌 코딩할때가 제일 이뻐 코딩에 빠진 닭 주머니가 가벼운 당신의 마음까지 생각한 착한 가격! 바로 결제 코코 스시 주머니가 가벼운 당신의 마음까지 생각한 착한 가격! 바로 결제 코데리아 주머니가 가벼운 당신의 마음까지 생각한 착한 가격! 바로 결제 코가네 주머니가 가벼운 당신의 마음까지 생각한 착한 가격! 바로 결제 * { box-sizing: border-box; } body { background-color: #f0e8d9; } h1 { text-align: center; font-size: 64px; color: #58595B; margin-top: 75px; margin-bottom: 30px; } h2 { text-align: center; font-size: 3..

그리드 연습 위와 같은 그리드 레이아웃을 만들어주세요! body { margin: 0; } /* 전체 */ div { width: 100%; height: 800px; float: left; } /* 개별 */ #red { background-color: #FF0000; width: 100%; height: 200px; } #orange { background-color: #FFA500; width: 25%; height: 200px; } #yellow { background-color: #FFFF00; width: 50%; height: 200px; } #green { background-color: #008000; width: 25%; height: 200px; } #blue { background-..

신문 광고 광고의 가로 길이는 180px 입니다. 빨간색으로 나와 있는 수치를 보고 margin도 꼭 넣어주세요! 4차 산업혁명의 시대, 소프트웨어 교육은 필수 코드잇 강영훈 대표 '소프트웨어 강국되려면 컴퓨터적 사고방식 필요해' "누구나 프로그래밍을 배워야한다. 사고하는 방법을 가르쳐주기 때문이다." 故 스티브잡스 애플 창업자가 했던 말이다. 소프트웨어는 4차 산업혁명의 흐름이다. 인공지능, IoT, 빅데이터, 3D프린팅, 가상 현실, 증강현실 등 모두 소프트웨어와 긴밀한 연관성을 갖고 있는 분야이다. 미래의 흐름에 발맞춰 정부는 2018년부터 초, 중, 고등학교에서 소프트웨어 교육을 전면 실시할 계획이다. 이에 앞서 지난해와 올해 미래부, 교육부에서 900개의 연구기관 및 선도학교를 정해 교육하고 있..

우표 붙이기 Absolute 포지셔닝 개념을 이용해서 우표와 주소를 올바른 곳에 위치해주세요. siri Kim 1234 ENTP #101 .env-div { width: 500px; height: 232px; position: relative; } .address { font-family: cursive; position: absolute; left: 30px; bottom: 30px; } .stamp { position: absolute; right: 30px; top: 30px; } 본 내용은 Codeit의 '웹 퍼블리싱' 강의를 참고하여 작성한 내용입니다.

명언 두 따옴표는 폰트 크기는 96px(32px의 300%)입니다. 위 사진에서 빨간 줄은 margin입니다. 위 사진에서 초록 줄은 포지셔닝을 통한 이동입니다. “ 정상에 오르고 싶다는 생각만으로 정상에 오르는게 아니야, 올라야지 “ 조승우 .quote { font-size: 32px; line-height: 32px; text-align: center; margin-top: 75px; font-family: 'Do Hyeon', sans-serif; } .figure { margin-top: 50px; } .qmark { font-size: 96px; position: relative; } .open-qmark { margin-right: 15px; top: 20px } .close-qmark { m..