우당탕탕 코딩생활

환경오염 문제가 대두되는 시점에서 분리수거를 제대로 할 수 있게 도움을 주는 사이트를 구상해보았습니다! 물건의 분리수거 방법을 알려주는 것이 목적입니다. 피그마로 시안 작업하였습니다. 참고 사이트

웹 페이지 디자인 반응형 지금까지 했던 유형들을 합쳐서 반응형으로 작업해보도록 하겠습니다. 사이트 로고 위 코드는 웹 사이트 제작을 하기전 기본적인 구성입니다! 파비콘을 적용해주고 SEO도 작성해주었습니다. body 안에는 main이 자리해있는데 이번 포스팅의 핵심적인 부분입니다. 작업한 사이트의 구성은 아래와 같습니다. 기존의 레이아웃을 가져왔으며 추가된 부분은 미디어 쿼리 부분입니다. 헤더 영역 슬라이드 영역 이미지 타입 영역 이미지 텍스트 영역 카드 타입 영역 배너 타입 영역 텍스트 타입 영역 푸터 영역 오늘 포스팅에서는 헤더와 슬라이드 영역을 제외한 나머지를 분석해보도록 하겠습니다. 먼저 각 타입별로 css페이지를 만들어 주었습니다. 반응형에서는 미디어 쿼리를 사용합니다. 그러므로 각 css페이지..

푸터 (하단 정보) .footer__wrap { background-color: #f5f5f5; } .footer__menu { display: flex; } .footer__menu > div{ width: 16.666%; } .footer__menu > div h3 { margin-bottom: 13px; } .footer__menu > div li{ line-height: 1.9; font-size: 14px; } .footer__menu > div li a { color: #666; } .footer__right { margin-top: 50px; border-top: 1px solid #D9D9D9; padding-top: 50px; text-align: center; font-style: no..

완성화면 특징 이 페이지 특징은 마우스 오버 효과입니다. 마우스 오버 효과는 이미지, 텍스트, 버튼 등에 마우스 포인터가 올라갔을 때 발동되는 전환효과입니다. 각 카테고리 창 위에 마우스를 올리면 아래와 같이 회색으로 변합니다. 또, 더보기 버튼에 마우스를 올리면 + 버튼이 돌아가는 효과입니다. 자세한 사항은 상단 링크에서 확인해보시면 됩니다! HTML - body NOTICE 스몰토크를 위한 얇고 넓은 지식 스몰토크란? '서로 잘 모르는 사람들이 중요하지 않은 어떤 것에 대해서 나누는 대화'이지만 실제로는 일상적이고 소소한 주제로 대화를 하며며 상대방을 알아가는 것이 스몰토크라고 이해하셔도 됩니다. 더보기 인도 영화는 왜 항상 춤을 출까? 인도는 지정된 공용어가 22가지나 됩니다.사투리 수준이 아닌 외..

슬라이드 타입 웹페이지의 슬라이드 타입에는 여러 종류가 있지만, 가장 일반적으로 사용되는 슬라이드 타입은 아래와 같습니다. 이미지 슬라이드: 여러 장의 이미지를 차례로 보여주는 슬라이드로, 이미지 간에 전환 효과를 줄 수도 있습니다. 텍스트 슬라이드: 여러 페이지로 구성된 텍스트를 차례로 보여주는 슬라이드로, 페이지 간 전환 효과를 줄 수도 있습니다. 동영상 슬라이드: 여러 개의 동영상을 차례로 재생하는 슬라이드로, 동영상 간 전환 효과를 줄 수도 있습니다. 혼합 슬라이드: 이미지, 텍스트, 동영상 등 여러 종류의 콘텐츠를 조합하여 보여주는 슬라이드로, 적절한 전환 효과를 줄 수도 있습니다. 위와 같은 슬라이드 타입을 사용하여 웹페이지를 구성하면, 사용자에게 보다 다양하고 흥미로운 콘텐츠를 제공할 수 있..

이미지텍스트 타입 이미지 텍스트(Image Text) 타입은 이미지와 함께 포함되는 텍스트를 의미합니다. 예를 들어, 로고나 배너 이미지 등에 함께 표시되는 텍스트를 말합니다. Space 고대 이집트 고대 이집트 문화는 다양한 측면에서 매우 독특하고 흥미로운 요소들을 가지고 있습니다. 아래는 고대 이집트 문화의 주요 목록입니다. 종교 이집트는 매우 다양한 종교적 신앙을 가졌습니다. 건축 대표적으로 피라미드가 있습니다. 문화적 예술 이들은 예술을 통해 신들을 숭배하며, 다양한 상황과 주제를 표현했습니다. 글씨체 이집트는 유명한 글씨체 중 하나인 "갈레오"라는 글씨체를 만들어냈습니다. HTML 정리하기 글과 그림을 포괄하는 박스 한 개와 '글' , '그림1', '그림2' 의 박스 세 개를 만드는 것이 정석이..

Image Type 현재의 웹페이지에서 가장 흔하게 볼 수 있는 유형 중 하나를 꼽는다면 바로 이미지 타입입니다. 그렇다면 이 이미지 타입에서의 장점은 무엇이 있을까요? 크게 세 가지를 꼽자면 아래와 같습니다. 시각적인효과 이미지 유형 페이지는 다양한 이미지 유형에 대한 상세한 설명을 제공하여, 사용자들이 이미지 유형에 대한 이해도를 향상시킬 수 있습니다. 이미지 강조 및 강화 브랜드 개별의 이미지와 색을 통해 강조하고 기억에 남길 수 있습니다. 인지도와 기억력 텍스트보다 기억하기 쉽기 때문에 인지도를 향상시키고 사용자들에게 직관적이고 빠른 정보를 전달할 수 있습니다. 그래서 오늘은 위와 같은 이미지 유형 페이지를 만들어보려고 합니다. 레이아웃 및 디자인 정하기 저는 스몰토크를 할 수 있는 가볍고, 짧고..

Card Type 모바일 사용자가 폭증하면서 다양한 디바이스들이 나오고 있는 시대에 걸맞는 디자인 형식이라고 한다면 바로 ' 카드 타입 ' 입니다. 카드형 디자인은 웹과 모바일, 그리고 여러디바이스 화면크기에 최적화되는 모듈식 UI패턴이기 때문입니다. 특히나 이 카드 형식을으로 날아오른 사이트가 있습니다. 바로 '핀터레스트'인데요. 저도 이 사이트를 자주 이용하는데 그 중 하나가 수많은 컨텐츠를 많이, 보다 편리하게 볼 수 있다는 장점 때문이었습니다. 카드형 디자인은 매력적인 이미지나 컬러를 사용하여 지루하게 보일 수 있는 모듈UI 디자인의 단점을 보완하고 사용자에게 시각적인 즐거움과 직관적인 정보를 전달할 수 있게 하기도 합니다. 그래서 오늘은 이 카드형식의 페이지를 만들어 보려고 합니다. 레이아웃 및..