Dev다D

이미지 버튼 위 사진처럼 이미지 링크 세 개를 만들어보세요. 순서대로 각각 "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;..

Academe 🏫Theory01. JQueryGitHub 🐸 Study 🛠Codeit;[웹 퍼블리싱 - HTML/CSS 핵심 개념] 01. Box Model21. 코딩의 민족 [웹 퍼블리싱 - HTML/CSS 핵심 개념] 02. CSS 제대로 활용하기01. 선택자 정리02. 마우스 오버 버튼03. CSS 상속04. CSS 우선순위05. CSS 최적화06. CSS의 다양한 단위들 [웹 퍼블리싱 - HTML/CSS 핵심 개념] 03. Display01. display02. display 정리03. Inline-block04. Inline-block 정리05. 태그의 비밀06. 다양한 링크07. 이미지 버튼08. Baseline09. vertical-align pt. 110. vertical-align pt...

GitHub 🐸 Study 🛠 Codeit; [웹 퍼블리싱 - HTML/CSS 핵심 개념] 01. Box Model 18. 배경 이미지 19. 배경 이미지 정리 노트 20. 썸머 뮤직 페스티벌 (SMF)

썸머 뮤직 페스티벌 (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..

Academe 🏫 Theory. JQuery GitHub 🐸 Study 🛠 Codeit; [웹 퍼블리싱 - HTML/CSS 시작하기] 06. 여행사이트 01. 여행 사이트 [웹 퍼블리싱 - HTML/CSS 핵심 개념] 01. Box Model 01. Box Model 소개 02. margin, padding 03. marging & padding 정리 04. width, height 05. width, height 정리 06. overflow 07. overflow 정리 08. border 09. border 정리 10. 그랜드 부다페스트 호텔 11. 박스 꾸미는 몇 가지 방법 12. 둥근 모서리 13. 배경색 14. 그림자 15. box-sizing 16. box-sizing 정리 17. 로그인 페이지..