Dev다D

해변의 몽숭이 Relative 포지셔닝 개념을 이용해서 몽숭이를 해변가에 위치시켜주세요. 몽숭이를 원래 위치에서 위로 100px, 오른쪽으로 200px 이동시키면 됩니다! 코드는 css 폴더에 styles.css에 작성해주세요. img { display: block; margin: 0 auto; } .mongsoong { position: relative; bottom : 100px; left: 200px; } 본 내용은 코드잇의 '웹 퍼블리싱' 강의를 참고하여 작성한 내용입니다.

내비게이션 바 로고 위 사진처럼 로고 링크와 .info를 세로로 가운데 정렬을 해주세요. 여러분을 돕기 위해 배경색도 입혀놓았고 소문자 'x'도 써놓았는데요. 완성이 되면 다 없애주시길 바랍니다! 코딩, 스펙이 아니라 필수입니다. 코드잇은 코딩을 통해 생각하는 법을 가르칩니다. 더 알아보기 body { margin: 0; font-family: 'Noto Sans KR', sans-serif; } #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 { font-fa..

이미지 버튼 위 사진처럼 이미지 링크 세 개를 만들어보세요. 순서대로 각각 "https://facebook.com", "https://instagram.com", "https://github.com"으로 갑니다. 세 이미지는 브라우저에서 가운데 정렬이 되어 있습니다. Check me out on... body { margin: 50px 0; } h1 { font-family: 'Noto Sans KR', sans-serif; margin-bottom: 20px; text-align: center; } .link-container { text-align: center; } .link-container a:not(:last-child) { margin-right: 20px; } a { text-decorat..

CSS 최적화 웹사이트를 열심히 만들다보니 어느덧 코드가 엄청 길어졌습니다. 옆에 앉아 있던 친구가 제 코드를 쓱 보더니 한 마디 하네요. “뭘 그렇게 복잡하게 해? 그거 열 줄이면 되는데~ ㅎㅎ” 아, 자존심 상합니다! 얼른 CSS 코드를 열 줄(빈 줄 제외)로 줄여보세요. 결과물이 동일하다면 HTML 코드를 조금 변형해도 됩니다. 결과물은 아래 사진과 같습니다. HTML CSS JAVASCRIPT PYTHON JAVA h2 { padding: 20px; font-size: 30px; } .box-one h2 { background: #FA987D; } .box-two h2 { background: #72CCA7; } 본 내용은 Codeit의 '웹 퍼블리싱' 강의를 참고하여 작성한 내용입니다.

마우스 오버 버튼 로그인 페이지 과제의 버튼에 작은 효과를 하나 주려고 합니다. 마우스를 '로그인' 버튼 위에 올릴 경우 로그인 버튼에 box-shadow 속성을 설정해주세요. 속성값은 위 사진에 나와 있듯이 box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.50);입니다. 코드는 css/style.css에 작성해주세요. 마우스오버 작동 영상 비밀번호를 잊어버리셨나요? * { box-sizing: border-box; font-family: 'Noto Sans KR', sans-serif; } body { margin: 0; background-color: #1BBC9B; } .login-form { padding: 20px; background-color: #EEEFF1; widt..

코딩의 민족 위 이미지의 지시사항을 따라, '코딩의 민족' 웹사이트를 완성해주세요. 참고로 '바로 결제' 버튼은 href="#"로 설정되어 있는 태그로 써주세요! 코딩의 민족 넌 코딩할때가 제일 이뻐 코딩에 빠진 닭 주머니가 가벼운 당신의 마음까지 생각한 착한 가격! 바로 결제 코코 스시 주머니가 가벼운 당신의 마음까지 생각한 착한 가격! 바로 결제 코데리아 주머니가 가벼운 당신의 마음까지 생각한 착한 가격! 바로 결제 코가 주머니가 가벼운 당신의 마음까지 생각한 착한 가격! 바로 결제 * { box-sizing: border-box; } body { background-color: #f0e8d9; } h1 { text-align: center; font-size: 64px; color: #58595B;..

썸머 뮤직 페스티벌 (SMF) 최고의 아티스트들로 구성된 초호화 라인업! '썸머 뮤직 페스티벌(SMF)'을 위한 웹사이트를 만들어보려고 합니다. 위 사진과 같이 images/hero_image.jpg 파일로 .hero-header의 배경 이미지를 설정해주고, .learn-more 버튼을 스타일링 해주세요. 배경 이미지는 원본의 비율을 유지하면서 태그를 모두 채워야 합니다. 만약 배경 이미지가 잘려야 하는 상황이 오면 왼쪽, 오른쪽이 똑같이 잘려야 하고 위, 아래가 똑같이 잘려야 합니다. 정답 코드는 css 폴더의 styles.css에 작성해주세요. SMF 10th Summer Music Festival 20 - 21 August, 2017 Learn More body { margin: 0; font-fa..

로그인 페이지 박스를 꾸미는 방법들을 총동원하여 위와 같은 디자인을 만들어보세요. 모든 태그는 기본적으로 설정되어 있는 속성들이 있다는 걸 기억해주세요. 예를 들어서 태그에는 기본적으로 테두리가 있기 때문에 테두리를 직접 없애줘야겠죠? .login-form의 배경색은 #EEEFF1, submit-btn의 배경색은 #1BBC9B, 의 폰트색은 #9B9B9B입니다. 초록 선은 padding을 뜻하고, 빨간 선은 margin을 뜻합니다. .login-form은 가운데로 정렬되어 있습니다. 모든 동근 모서리는 5px의 border-radius를 갖고 있습니다. 비밀번호를 잊어버리셨나요? * { box-sizing: border-box; font-family: 'Noto Sans KR', sans-serif; }..

그랜드 부다페스트 호텔 깔끔한 영화 소개 모듈을 만들어 봅시다. 여러분은 에 네 가지만 해주시면 됩니다. 코드는 css 폴더에 style.css에 작성해주세요. 세로 길이를 220px로 설정해주세요. 3px 두께에 색은 #B72920인 테두리를 입혀주세요. 문구를 스크롤하면서 볼 수 있도록 overflow 속성을 설정해주세요. 글이 테두리에 너무 붙어 있지 않도록 15px의 여유 공간을 주세요. Grand Budapest Hotel Wes Anderson heads to Europe for the first time with this Indian Paintbrush production starring Saoirse Ronan, Ralph Fiennes, Bill Murray, and Jude Law. G..

여행 사이트 이미지는 images 폴더 안에 images/logo.png, images/home.png, images/paris.png, images/seoul.png, images/tokyo.png 를 사용하면 됩니다. (css 파일의 위치를 잘 확인해 주세요.) 조건1. 모든 요소가 가운데 정렬 되어있어야합니다. 조건2. ‘travel’ 로고는 가로 길이가 165px, 세로 길이가 58px입니다. 조건3. 'travel' 로고 위에는 80px의 여백이 있습니다. 조건4. 메뉴는 16px의 ‘Helvetica’ 폰트, 색상은 Hex값 기준 58595B, RGB 기준 (88, 89, 91)입니다. 조건5. 현재 머물러 있는 창의 메뉴의 폰트는 진하게 나옵니다. 조건6. 각 메뉴 사이의 간격은 20px이고..