Dragonball Online Goku Hand
본문 바로가기

사이트 제작하기/Image Type 이미지 유형3

[사이트 제작] 세번째 : 이미지 유형 TYPE.03 사이트 제작하기 : 이미지 유형03 사이트 유형에는 이미지 유형도 있습니다. 카드 유형이랑 비슷해보이지만 이미지 안에 글씨가 들어간다는 차이가 있습니다. 이 유형은 마우스를 사진에 가져갔을 때 새로운 박스와 함께 여러 개의 아이콘이 등장하는 것이 특징입니다. 오늘 만들 사이트 형식 사이트 제작 방법 1. 이번 유형은 어떤 유형일까? 이번 이미지 유형은 이미지 유형02와 같이 사진에 마우스를 가져갔을 때 새로운 박스가 생기게 하는 유형입니다. 유형02와 다른 점은 레이아웃 구조와 마우스를 가져갔을 때 박스 안에 아이콘까지 나타나게 하는 것입니다. 자세하게 배워봅시다! 2. vscode를 통해 코딩해주기! : HTML편 레이아웃을 다 설정해줬다면 코딩을 해봅시다! html의 body 부분에 레이아웃 구역을 .. 2022. 8. 21.
[사이트 제작] 두번째 : 이미지 유형 TYPE.02 사이트 제작하기 : 이미지 유형02 사이트 유형에는 이미지 유형도 있습니다. 카드 유형이랑 비슷해보이지만 이미지 안에 글씨가 들어간다는 차이가 있습니다. 오늘 만들 사이트 형식 사이트 제작 방법 1. Figma 사용해서 레이아웃 설정 사이트를 만들기 위해서는 먼저 사이트 레이아웃을 설정해야 합니다. 밑의 이미지와 같이 figma를 이용하여 레이아웃을 설정해줄 수 있습니다. 그리드를 통해 기본적인 틀을 먼저 잡아준 후 " shift + R " 로 자 기능을 활용하여 레이아웃을 만들어줍니다. ※ 이 때, 칸이나 줄이 확실하게 맞아야 하며 오차없이 레이아웃을 설정해주는 것이 중요합니다. 2. vscode를 통해 코딩해주기! : HTML편 레이아웃을 다 설정해줬다면 코딩을 해봅시다! html의 body 부분에 .. 2022. 8. 17.
[사이트 제작] 첫번째 : 이미지 유형 TYPE.01 사이트 제작하기 : 이미지 유형01 사이트 유형에는 이미지 유형도 있습니다. 카드 유형이랑 비슷해보이지만 이미지 안에 글씨가 들어간다는 차이가 있습니다. 오늘 만들 사이트 형식 사이트 제작 방법 1. Figma 사용해서 레이아웃 설정 사이트를 만들기 위해서는 먼저 사이트 레이아웃을 설정해야 합니다. 밑의 이미지와 같이 figma를 이용하여 레이아웃을 설정해줄 수 있습니다. 그리드를 통해 기본적인 틀을 먼저 잡아준 후 " shift + R " 로 자 기능을 활용하여 레이아웃을 만들어줍니다. ※ 이 때, 칸이나 줄이 확실하게 맞아야 하며 오차없이 레이아웃을 설정해주는 것이 중요합니다. 2. vscode를 통해 코딩해주기! : HTML편 레이아웃을 다 설정해줬다면 코딩을 해봅시다! html의 body 부분에 .. 2022. 8. 17.