사이트 제작하기17 [사이트 제작] 헤더 유형부터 푸터 유형까지 : 반응형 포함 🧷 사이트를 제작해보자! 근데 이제 반응형을 곁들인...^^ [💁🏻♀️ 쉽지 않다편] 헤더, 슬라이드, 이미지, 이미지텍스트, 카드, 배너, 텍스트, 푸터 유형으로 이루어진 사이트를 만들어봅시다. 마무리는 역시나 막시나 반응형까지 해주어야 완성이겠죠? 함께 만들어 보아요❗️ 🔨 제작 방법 ➰ Figma로 구성 짜기 figma를 통해서 사이트를 어떤 유형으로 구성할 것인지, 유형마다 어떤 식으로 구성할 것인지를 구체적으로 짜주어야 합니다. (그래야 나중에 코딩할 때 수월하겠죠?🥹) 📋 헤더 유형 ➰ vscode를 통해 코딩해주기! : html편 사이트 헤더 부분을 어떻게 구성해야할지 틀을 짜주어야 합니다. 코드 보기 MOMENTO store main best codi product brand SNS 로그.. 2022. 9. 14. [사이트 제작] 웹기능사 실기 대비 : COOKIT 사이트 COOKIT 사이트 만들기 [웹기능사 시험 대비] 📌 웹기능사 실기 시험을 대비하기 위해 COOKIT 사이트를 만들어보겠습니다. ➰ HTML 사이트의 틀을 제작해줍니다. lt;div id="warp"> Cookit 소개 sub-menu1 sub-menu1 sub-menu1 sub-menu1 Cookit 메뉴 sub-menu2 sub-menu2 sub-menu2 sub-menu2 리뷰 sub-menu3 sub-menu3 sub-menu3 sub-menu3 이벤트 sub-menu4 sub-menu4 sub-menu4 sub-menu4 My쿡킷 sub-menu5 sub-menu5 sub-menu5 sub-menu5 이미지1 이미지2 이미지3 우리집도 COOKIT 배송이 되나요? 배송 가능한지 알려드려요. 배송.. 2022. 9. 14. [사이트 제작] 웹기능사 실기 대비 : 롯데월드 사이트 롯데월드 사이트 만들기 [웹기능사 시험 대비] 📌 웹기능사 실기 시험을 대비하기 위해 롯데월드 사이트를 만들어보겠습니다. ➰ HTML 사이트의 틀을 제작해줍니다. 즐길거리 subMenu-1 subMenu-2 subMenu-3 subMenu-4 요금/우대혜택 subMenu-1 subMenu-2 subMenu-3 subMenu-4 참여프로그램 subMenu-1 subMenu-2 subMenu-3 subMenu-4 이용가이드 subMenu-1 subMenu-2 subMenu-3 subMenu-4 소통서비스 subMenu-1 subMenu-2 subMenu-3 subMenu-4 이미지1 이미지2 이미지3 롯데월드 소식 1. 첫번째 목록입니다. 첫번째 목록입니다. 첫번째 목록입니다.2019.05.03 1. 첫번째.. 2022. 9. 14. [사이트 제작] 슬라이드(slide)유형을 만들어 봅시다! 🧷 사이트를 제작해보자! [💁🏻♀️ 슬라이드 영역 편] 슬라이드 영역은 많은 웹사이트에서 흔히 볼 수 있는 영역으로 이미지를 넘길 수 있습니다. 슬라이드 유형을 함께 만들어 보아요❗️ 🔨 제작 방법 ➰ Figma 사용 사이트를 만들기 위해서는 먼저 사이트 레이아웃을 설정해야 합니다. figma를 이용하여 그리드를 통해 해당 영역을 설정해줄 수 있습니다. ➰ vscode를 통해 코딩해주기! : HTML편 레이아웃을 다 설정해줬다면 코딩을 해봅시다! html의 body 부분에 레이아웃 구역을 정해줍니다. 슬라이드 영역 DEVELOPER NEW PROJECT 너무 무리하지 말아요! 이미 당신은 잘하고 있고! 앞으로도 잘 할 수 있어요! 자세히보기 사이트보기 이전 이미지 다음 이미지 1 2 3 플레이 정지 ➰.. 2022. 9. 6. [사이트 제작] 배너(banner)유형을 만들어 봅시다! 🧷 사이트를 제작해보자! [💁🏻♀️ 배너 영역 편] 배너란, 홈페이지의 한 쪽에 특정 웹 사이트의 이름이나 내용을 배너 유형은 배너 안에 약간의 글이 적혀 있는 유형으로 이름이나 내용을 부착하여 홍보하는 이미지를 말합니다. 배너 유형을 함께 만들어 보아요❗️ 🔨 제작 방법 ➰ Figma 사용 사이트를 만들기 위해서는 먼저 사이트 레이아웃을 설정해야 합니다. figma를 이용하여 그리드를 통해 해당 영역을 설정해줄 수 있습니다. ➰ vscode를 통해 코딩해주기! : HTML편 레이아웃을 다 설정해줬다면 코딩을 해봅시다! html의 body 부분에 레이아웃 구역을 정해줍니다. 배너 영역 유튜버 입짧은 혠 다양한 먹방 영상을 유튜브를 통해 제공하고 있습니다. 배너 유형01 ➰ vscode를 통해 코딩해주기.. 2022. 9. 6. [사이트 제작] 푸터(footer)유형을 만들어 봅시다! 🧷 사이트를 제작해보자! [💁🏻♀️ 푸터 영역 편] 푸터 유형은 사이트의 제일 하단 부분에 해당합니다. 푸터 유형 함께 만들어 보아요❗️ 🔨 제작 방법 ➰ Figma 사용 사이트를 만들기 위해서는 먼저 사이트 레이아웃을 설정해야 합니다. figma를 이용하여 레이아웃을 설정해줄 수 있습니다. ➰ vscode를 통해 코딩해주기! : HTML편 레이아웃을 다 설정해줬다면 코딩을 해봅시다! html의 body 부분에 레이아웃 구역을 정해줍니다. 푸터 영역 사이트 웹표준 사이트 웹표준 사이트 웹표준 사이트 웹표준 사이트 헤더 영역 메뉴 유형01 메뉴 유형02 슬라이드 영역 슬라이드 유형01 슬라이드 유형02 이미지 영역 이미지 유형01 이미지 유형02 이미지/텍스트 유형01 이미지/텍스트 유형02 텍스트 유형.. 2022. 9. 6. [사이트 제작] 이미지 텍스트(image text)유형을 만들어 봅시다! 🧷 사이트를 제작해보자! [💁🏻♀️ 이미지 텍스트 편] 이미지 텍스트 유형은 말 그대로 이미지와 텍스트로 이루어진 유형으로 웹사이트를 얼굴, 몸(발 제외), 발의 구조로 비유하자면 몸에 해당하는 부분입니다. 몸 부분에는 여러 유형으로 사이트를 만들어 줄 수 있는데 이번에는 이미지 텍스트 유형을 통해 사이트를 만들어보도록 하겠습니다. 이미지 텍스트(image text) 함께 만들어 보아요❗️ 🔨 제작 방법 ➰ Figma 사용 사이트를 만들기 위해서는 먼저 사이트 레이아웃을 설정해야 합니다. figma를 이용하여 레이아웃을 설정해줄 수 있습니다. ➰ vscode를 통해 코딩해주기! : HTML편 레이아웃을 다 설정해줬다면 코딩을 해봅시다! html의 body 부분에 레이아웃 구역을 정해줍니다. 유용한 사이.. 2022. 9. 1. [사이트 제작] 헤더(header) 유형을 만들어 봅시다! 🧷 사이트를 제작해보자! [💁🏻♀️ 헤더 영역 편] 우리가 웹사이트를 볼 때 반드시 필요한 부분이 어디인가요? 바로 헤더 영역입니다. 주로 메뉴나 목차 등으로 구성되어 있으며 로그인 혹은 회원가입 등도 볼 수 있습니다. 헤더(header)부분 함께 만들어 보아요❗️ 🔨 제작 방법 ➰ Figma 사용 사이트를 만들기 위해서는 먼저 사이트 레이아웃을 설정해야 합니다. figma를 이용하여 레이아웃을 설정해줄 수 있습니다. 그리드를 통해 기본적인 틀을 먼저 잡아준 후 " shift + R " 로 자 기능을 활용하여 레이아웃을 만들어줍니다. ※ 이 때, 칸이나 줄이 확실하게 맞아야 하며 오차없이 레이아웃을 설정해주는 것이 중요합니다. ➰ vscode를 통해 코딩해주기! : HTML편 레이아웃을 다 설정해줬다면.. 2022. 9. 1. [사이트 제작] 세번째 : 텍스트 유형 TYPE.03 사이트 제작하기 : 📝 텍스트 유형03 텍스트 유형은 이미지가 아닌 말 그대로 텍스트로 이루어진 유형입니다. 이번 유형은 카드유형01번과 비슷한 레이아웃이지만 디테일이 많이 추가 된 유형입니다. 오늘 만들 사이트 형식 사이트 제작 방법 1. Figma 사용해서 레이아웃 설정 사이트를 만들기 위해서는 먼저 사이트 레이아웃을 설정해야 합니다. (그리드 이용) 밑의 이미지와 같이 figma를 이용하여 레이아웃을 설정해줄 수 있습니다. " shift + R " 로 자 기능을 활용하여 레이아웃을 만들어줍니다. ※ 이 때, 칸이나 줄이 확실하게 맞아야 하며 오차없이 레이아웃을 설정해주는 것이 중요합니다. 2. vscode를 통해 코딩해주기! : HTML편 레이아웃을 다 설정해줬다면 코딩을 해봅시다! html의 bo.. 2022. 9. 1. [사이트 제작] 두번째 : 텍스트 유형 TYPE.02 사이트 제작하기 : 📝 텍스트 유형02 텍스트 유형은 이미지가 아닌 말 그대로 텍스트로 이루어진 유형입니다. 이번 유형은 제목과 주제별 내용들을 나누어 구조를 짜주어야 합니다. 오늘 만들 사이트 형식 사이트 제작 방법 1. Figma 사용해서 레이아웃 설정 사이트를 만들기 위해서는 먼저 사이트 레이아웃을 설정해야 합니다. (그리드 이용) 밑의 이미지와 같이 figma를 이용하여 레이아웃을 설정해줄 수 있습니다. " shift + R " 로 자 기능을 활용하여 레이아웃을 만들어줍니다. ※ 이 때, 칸이나 줄이 확실하게 맞아야 하며 오차없이 레이아웃을 설정해주는 것이 중요합니다. 2. vscode를 통해 코딩해주기! : HTML편 레이아웃을 다 설정해줬다면 코딩을 해봅시다! html의 body 부분에 레이아.. 2022. 9. 1. [사이트 제작] 첫번째 : 텍스트 유형 TYPE.01 사이트 제작하기 : 📝 텍스트 유형01 텍스트 유형은 이미지가 아닌 말 그대로 텍스트로 이루어진 유형입니다. 아이콘이 들어가므로 아이콘을 어떤 방법으로 넣어줄지 생각해보아야 합니다. 오늘 만들 사이트 형식 사이트 제작 방법 1. Figma 사용해서 레이아웃 설정 사이트를 만들기 위해서는 먼저 사이트 레이아웃을 설정해야 합니다. (그리드 이용) 밑의 이미지와 같이 figma를 이용하여 레이아웃을 설정해줄 수 있습니다. " shift + R " 로 자 기능을 활용하여 레이아웃을 만들어줍니다. ※ 이 때, 칸이나 줄이 확실하게 맞아야 하며 오차없이 레이아웃을 설정해주는 것이 중요합니다. 2. vscode를 통해 코딩해주기! : HTML편 레이아웃을 다 설정해줬다면 코딩을 해봅시다! html의 body 부분에 .. 2022. 8. 30. [사이트 제작] 세번째 : 이미지 유형 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. [사이트 제작] 세번째 : 카드유형 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. 이전 1 다음
