My Melody Kawaii

홈페이지제작 3

홈페이지 텍스트 유형을 만들어 봤습니다!

텍스트 유형 저번 슬라이드 유형을 만들어 보고 텍스트 유형을 만들어 보았습니다. 홈페이지를 제작할 때 텍스트 유형은 다양하게 존재 하고 있습니다. 제품이나 서비스를 소개할 때 회사에 대해 소개할 때 채용정보,블로그,이벤트 및 프로모션 소개, 고객지원, 연락처 정보등을 기재할 때 많이 사용하고 있는 유형중에 하나입니다. 완선본 피그마를 사용해서 전체적인 툴 잡아주기 피그마에서 아이콘 만드는 방법 home으로 들어가서 icon을 검색 한후 맘에 드는 아이콘을 get a copy를 누르고 가져오면 됩니다. 색상 조절은 카피 후 조절이 가능 합니다. HTML notice 2023 DJ Festival 음원 리스트 이번 페스티벌을 통해 발표한 음원 리스트입니다. EDM, 하우스, 트렌스 장르로 구성되어 있으며 생..

페이지 제작 2023.03.19

페이지 제작 이미지 유형을 만들어 봅시다!

이미지 유형 페이지 제작시 이미지로 나타낼 부분을 피그마를 이용해 예제를 만들고 코딩을 하여 피그마에 만든 이미지 그대로 만들어 보았습니다. Figma사용하기 만드는 방법 저번에 카드유형과 동일하게 width 값 1920 height값을 800정도 설정해줍니다. layout설정 또한 카드 유형과 동일하게 잡아줍니다. 프레임을 20*20으로 만든후 눈금을 끌어와서 카드유형과 동일하게 양쪽 끝에 넓이를 준 후 눈금을 맞춰줍니다. 이제 정확한 위치를 위해 제목을 가운데 정렬해주기 저네 120height값으로 높이를 맞춰주줍니다. 제목 높이는 50으로 맞춰주고 폰트 크기도 50으로 지정해 줍니다. 내용을 써주기 위해 높이 30으로 사이를 떨어트려준 후 내용을 적어줍니다. 이미지를 첨부 한 후 버튼 제작을 위해 ..

페이지 제작 2023.03.11

페이지 제작 카드 유형을 만들어보자!

카드유형 다양한 사이트 유형 중 오늘은 카드 유형을 만들어 보았습니다! FIgma사용 만드는 방법 먼저 피그마를 열어서 프레임을 만들어 주며 width 값 1920 height값을 800정도 설정해 줍니다. layout grid 설정에서 columns로 바꿔준 후 count 12, margin 380, gutter20으로 설정해줍니다. R을 누르면 프레임 값이 만들어 지는데 height값 20으로 양쪽 끝 그리드를 빨간선으로 눈금을 잡아줍니다. 다시 프레임을 만들어서 카드 섹션이 들어갈 수 있도록 3개의 프레임을 만들어 줍니다. 제목사이의 간격을 150으로 잡아준후 30간격을 만들어 준 후 2줄 내용이 들어갈 수 있도록 65정도 간격을 줍니다. 카드 사이에 간격이 70정도 준 후 카드에 들어가는 그림을 ..

페이지 제작 2023.03.07