My Tech Blog (디자인)

✔️ 1. Magazine Design The Daily Work - Webflow HTML website template Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla. the-daily-work-template.webflow.io ✔️ 2. Responsive Yoga Website 피트니스 관련 웹사이트에 역동적인 사람의 이미지 + 도형의 배치 투명한 인물 배경에 여러 가지 도형을 삽입해서 재미있는 효과를 낼 수 있는 점이 마음에 들었다. ..

웹디자인에서 색채는 전체적인 분위기를 구성하는 중요한 요소입니다. 색은 시각적으로 사람에게 가장 먼저 인식되는 감각인데요.같은 색감이라도 명도나 채도에 따라 느낌이 달라지며, 보는 사람의 감정까지 변화시킵니다. 웹디자인을 할 때 브랜드 이미지와 개성을 표현하기 위해 특정 색감을 강조하여 활용하기도 합니다. 미국의 컬러 리서치 연구소 (CR)에 따르면, 소비자가 상품을 결정하는 시간은 90초 안에 이루어진다고 합니다. 이때 상품에 대한 판단 80~90%가색상에 의해 결정된다고 하는데요. 이처럼 고객의 마음을 이끌기 위해 색감은  기업 마케팅의 중요한 부분입니다. 온라인상에서 기업을 대표하는 요소인 홈페이지의 색감은 판매 상품의 긍정적인 이미지를 전달하고, 방문자의 재방문을 유도하기 위해 매우 중요한 요소입..

✨텍스트 강조하기✨ 안녕하세요. html/css를 활용하여 텍스트를 강조하는 법을 알려드릴게요. 텍스트에 형광펜 칠한 것 같은 효과 나타내기, 점으로 글씨 강조하기, 물결선으로 텍스트 강조하기, 글자에 줄글 배경넣기 같이 해봐요.    ⚡ 1. 마크를 이용한 텍스트 강조하기가상요소를 사용하지 않고, background-image속성으로 간단하게 형광펜으로 밑줄을 그은 것 같은 효과를 표현할 수 있습니다.  선의 굵기를 직접 지정해 줄 수 있어요.  ✔️ HTML 코드강조할 텍스트에 형광펜으로밑줄을 그은 것처럼 표현하기✔️CSS 코드p { font-size: 40px;}.emphasis { background-image: linear-gradient( /* 선형 그라데이션 */ r..

✨제목 &텍스트 디자인✨    📌 1.  가로 선이 두 개 있는 제목 디자인2개의 선으로 간단하게 제목을 꾸며봐요. position: absolute 대신 flex를 이용해서 코드를 구현해 볼게요.  ☑️ HTML 코드멋진 웹디자인을 위한 아이디어☑️ CSS 코드.heading { display: flex; justify-content: center; align-items: center; font-size: 36px;}.heading::before,.heading::after { content: ''; width: 70px; height: 3px; background-color: #ffb28e;}.heading::before { margin-right: ..

✨사진&로고 디자인✨ 안녕하세요. 오늘은 vscode로 html/css로 로고를 디자인할 때 활용할 수 있는 디자인을 배워봐요. 사진에 로고 삽입하는 법, 그리고 글씨를 사진으로 채우는 법을 알아봅시다.📌 1. 흰 배경의 로고를 사진에 올리기 배경으로 사용할 사진 한 장과 흰 배경에 검은색 글씨가 있는 로고 이미지를 준비해 주세요. 저는 디즈니를 좋아해서 디즈니 사진과 로고를 준비했어요. 원칙적으로 이미지 위에 삽입하려는 로고의 배경이 투명하지 않으면 포토샵을 사용해서 배경을 제거하고 PNG파일로 만들어주어야 하지만 아래 CSS 코드를 사용하면 그런 작업 없이도 간단하게 흰 배경은 투과되도록 합성할 수 있습니다. 이것을 가능하게 해 주는 것이 mix-blend-mode 프로퍼티입니다. 포토샵의 혼합모드랑..

✨피사체에 그림자 추가하기✨ 안녕하세요. 오늘은 피사체에 그림자를 추가해서 역동적인 이미지를 만드는 법을 알려드릴게요. 포토샵이나 일러스트를 사용하지 않아도 HTML과 CSS만으로 작업 할거니까 Vscode에서 따라해주세요. 📌 STEP 1. 투명한 바탕의 이미지를 준비해주세요. 투명한 배경 이미지 찾는 법 알려드릴게요. 포토샵으로 직접 배경을 제거하는 방법도 있지만 우리는 연습만 할꺼니까 구글에서 배경 없는 이미지를 가져와봅시다. 그냥 검색하면 실제로는 배경이 투명하지 않은 경우가 많아요. 구글에서 투명한 이미지 검색하는 법 구글 이미지검색 > 검색창 아래 [도구] 클릭 > [색상]에서 투명 클릭 실제로 배경이 투명한지 확인하기 위해서는 직접 이미지를 클릭해보세요. 아래처럼 배경에 회색 스케일의 바둑판..