Dragonball Online Goku Hand
본문 바로가기

사이트 제작하기/Card Type 카드 유형3

[사이트 제작] 세번째 : 카드유형 TYPE.03 사이트 제작하기 : 카드 유형03 이번 카드 유형은 큰 여백 안에 3개의 카드를 만들어 내는 유형입니다. 카드를 분리하는 선, 그림 안에 글씨 넣기, 제일 밑 부분에 인물 정보 넣어주기 등 기존에 했던 카드유형과는 다른 새로운 부분들이 있으니 주의하셔야 합니다! 오늘 만들 사이트 형식 사이트 제작 방법 1. Figma 사용해서 레이아웃 설정 사이트를 만들기 위해서는 기존의 카드 유형의 방법들과 같이 먼저 사이트 레이아웃을 설정해야 합니다. figma를 이용하여 레이아웃을 설정해줄 수 있습니다. layout을 grid가 아닌 columns로 설정 후 count 12, margin 380을 틀을 만들어줍니다. " shift + R " 로 자 기능을 활용하여 레이아웃을 만들어줍니다. ※ 이 때, 칸이나 줄이 .. 2022. 8. 10.
[사이트 제작] 두번째 : 카드 유형 TYPE.02 사이트 제작하기 : 카드 유형02 이번 카드 유형은 8개의 카드를 위 아래 4개씩 배치하는 것입니다. 네모 안 화살표를 오른쪽에 배치하는 부분이 카드 유형01과는 다른 특징입니다. 오늘 만들 사이트 형식 사이트 제작 방법 1. Figma 사용해서 레이아웃 설정 사이트를 만들기 위해서는 먼저 사이트 레이아웃을 설정해야 합니다. 밑의 이미지와 같이 figma를 이용하여 레이아웃을 설정해줄 수 있습니다. layout을 grid가 아닌 columns로 설정 후 count 12, margin 380을 주어 아래와 같은 형식을 만들어줍니다. " shift + R " 로 자 기능을 활용하여 레이아웃을 만들어줍니다. ※ 이 때, 칸이나 줄이 확실하게 맞아야 하며 오차없이 레이아웃을 설정해주는 것이 중요합니다. 2. v.. 2022. 8. 9.
[사이트 제작] 첫번째 : 카드 유형 TYPE.01 사이트 제작하기 : 카드 유형01 웹 개발자에게 사이트 제작하기는 기본입니다. 따라서 웹 개발자가 되기 위해서는 사이트의 유형과 사이트 만드는 방법을 기초부터 탄탄하게 배워야 합니다. 오늘은 코딩과 피그마를 활용하여 아래와 같은 사이트를 만들어 보겠습니다! 오늘 만들 사이트 형식 사이트 제작 방법 1. Figma 사용해서 레이아웃 설정 사이트를 만들기 위해서는 먼저 사이트 레이아웃을 설정해야 합니다. 밑의 이미지와 같이 figma를 이용하여 레이아웃을 설정해줄 수 있습니다. " shift + R " 로 자 기능을 활용하여 레이아웃을 만들어줍니다. ※ 이 때, 칸이나 줄이 확실하게 맞아야 하며 오차없이 레이아웃을 설정해주는 것이 중요합니다. 2. vscode를 통해 코딩해주기! : HTML편 레이아웃을 다.. 2022. 8. 8.