웹 사이트 제작15 [웹 사이트 제작]완성형 01 웹 사이트 제작 01 그동안 올렸던 유형들을 한 곳에 모아 한 가지 주제를 정하고 실전 사이트를 만들었습니다. 이번 사이트는 식물키우기와 관련된 사이트입니다. 01. Figma Figma를 이용해 레이아웃을 만들었습니다. 02. HTML 웹표준 준수를 위해 시맨틱 태그를 사용합니다. 또한, 스킵네비게이션을 사용하였습니다. 스킵네비게이션은 웹접근성을 위한 가장 기본적인 버튼으로, 키보드의 TAB 키를 눌렀을 때 해당 영역으로 갈 수 있는 메뉴 바로가기를 나타냅니다. 소스보기 헤더 영역 바로가기 슬라이드 영역 바로가기 이미지 영역 바로가기 이미지/텍스트 영역 바로가기 카드 영역 바로가기 배너 영역 바로가기 텍스트 영역 바로가기 푸터 영역 바로가기 Plant site MAIN 반려식물 칼럼/뉴스 식물성장 문의.. 2022. 9. 14. [웹 사이트 제작]푸터유형 01 푸터유형01 사이트의 제일 아래부분을 차지하는 푸터유형 만들기에 대해 알아보겠습니다. 1. Figma로 디자인하기 Figma를 이용해 그리드를 나누어 전체적인 틀을 만들어줍니다. 각 구역간의 수치는 정확히 해주는게 중요합니다. 2. HTML 웹표준 준수를 위해 시맨틱 태그를 사용합니다. 푸터 영역 사이트 웹표준 사이트 반응형 사이트 패럴랙스 사이트 포트폴리오 사이트 헤더 영역 메뉴 유형01 메뉴 유형02 슬라이드 영역 슬라이드 유형01 슬라이드 유형02 이미지 영역 이미지 유형01 이미지 유형02 이미지/텍스트 유형01 이미지/텍스트 유형02 텍스트 유형01 컨텍츠 영역 카드 유형01 카드 유형02 카드 유형03 푸터 영역 푸터 메뉴 유형01 푸터 컨택트 유형02 푸터 이메일 유형03 2022 Webst.. 2022. 9. 5. [웹 사이트 제작]배너유형 01 배너유형01 배너유형 만들기에 대해 알아보겠습니다. 1. Figma로 디자인하기 Figma를 이용해 그리드를 나누어 전체적인 틀을 만들어줍니다. 각 구역간의 수치는 정확히 해주는게 중요합니다. 2. HTML 웹표준 준수를 위해 시맨틱 태그를 사용합니다. 배너 영역 반려견 키우기 더 다양한 정보는 유튜브를 통해 제공하고 있습니다. youtube.com 배너 유형01 3. CSS Figma를 이용해 만든 디자인을 보며 css설정을 합니다. /* font */ @import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css'); .nexon { font-family: 'NexonLv1Gothic'; font-weight: 400; } .. 2022. 9. 5. [웹 사이트 제작]슬라이드유형 01 슬라이드유형01 슬라이드유형 만들기에 대해 알아보겠습니다. 1. Figma로 디자인하기 Figma를 이용해 그리드를 나누어 전체적인 틀을 만들어줍니다. 각 구역간의 수치는 정확히 해주는게 중요합니다. 2. HTML 웹표준 준수를 위해 시맨틱 태그를 사용합니다. 슬라이드 영역 DEVELOPER NEW PROJECT 너무 무리하지 말아요! 이미 당신은 잘하고 있고! 앞으로도 잘 할 수 있어요! 자세히 보기 사이트 보기 이전 이미지 다음 이미지 1 2 3 플레이 정지 3. CSS Figma를 이용해 만든 디자인을 보며 css설정을 합니다. .slider__inner { margin-top: 70px; } .slider { position: relative; } .slider__img { background: .. 2022. 9. 5. [웹 사이트 제작]이미지/텍스트 유형 01 이미지/텍스트유형01 오늘은 사이트만들기에서 이미지/텍스트 유형을 제작해 보겠습니다. 1. Figma로 디자인하기 Figma를 이용해 그리드를 나누어 전체적인 틀을 만들어줍니다. 2. HTML 웹표준 준수를 위해 시맨틱 태그를 사용합니다. 유용한 사이트 살펴보기 이미지 텍스트 유형01 유용한 사이트 살펴보기 웹디자이너, 웹 퍼블리셔, 프론트앤드 개발자를 위한 유용한 사이트입니다. 튜토리얼 사이트 레퍼런스 사이트 웹폰트 사이트 CSS 사이트 WebGL 사이트 Youtube 사이트 레퍼런스 사이트 튜토리얼 사이트 3. CSS Figma를 이용해 만든 디자인을 보며 css설정을 합니다. .imgText__inner { display: flex; justify-content: space-between; } .i.. 2022. 9. 1. [웹 사이트 제작]헤더유형 01 헤더유형01 오늘은 사이트만들기에서 헤더유형을 제작해 보겠습니다. 단순하기 때문에 간단하게 만들 수 있습니다. 1. Figma로 디자인하기 Figma를 이용해 그리드를 나누어 전체적인 틀을 만들어줍니다. 2. HTML 웹표준 준수를 위해 시맨틱 태그를 사용합니다. Web site 헤더 영역 슬라이드 영역 배너 영역 컨텐츠 영역 푸터 영역 로그인 3. CSS Figma를 이용해 만든 디자인을 보며 css설정을 합니다. display: flex;와 justify-content: space-between;를 사용하여 정렬을 맞춰줍니다. /* fonts */ @import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css'); .Nexo.. 2022. 9. 1. [웹 사이트 제작]텍스트유형 03 텍스트유형03 오늘은 사이트의 텍스트유형 세 번째를 만들어 보았습니다. 큰 제목과 설명이 있고 세 구역으로 나누어진 유형입니다. 1. Figma로 디자인하기 Figma를 이용해 그리드를 나누어 전체적인 틀을 만들어줍니다. 각 구역간의 수치는 정확히 해주는게 중요합니다. 2. HTML 웹표준 준수를 위해 시맨틱 태그를 사용합니다. 아이콘들은 img 태그를 사용하여 넣어주었습니다. 필라테스 후기 재활필라테스 수강생들의 후기를 소개합니다. 계속 진행하지 못해서 아쉬울 정도로 만족스러운 수업이었어요! 제 몸 상태랑 컨디션에 맞게 체계적으로 수업 해주시고, 자세도 꼼꼼하게 봐주셔서 운동하는데 도움 이 많이 되었습니다. 허리 통증이 있었는데, 많이 좋아지고 운동 끝나고 집에 가는길에 몸이 가벼워서 항상 기분좋게 돌.. 2022. 8. 31. [웹 사이트 제작]텍스트유형 02 텍스트유형02 오늘은 사이트의 텍스트유형 두 번째를 만들어 보았습니다. 제목이 왼쪽에 있는 유형입니다. 1. Figma로 디자인하기 Figma를 이용해 그리드를 나누어 전체적인 틀을 만들어줍니다. 각 구역간의 수치는 정확히 해주는게 중요합니다. 2. HTML 웹표준 준수를 위해 시맨틱 태그를 사용합니다. section태그는 보통 제목태그를 포함합니다. 내용을 한꺼번에 넣는 것이 아니라, 하나씩 확인하면서 진행하면 실수와 시간을 줄일 수 있습니다. CANADA 캐나다(CA) 여행소개 캐나다로 여행하는 사람들을 위한 여행소개입니다. 즐거운 여행 되세요 ! 밴쿠버 캐나다의 서부에 위치한 밴쿠버입니다. 밴쿠버는 2010년 동계올림픽이 개최된 곳입니다. 살기 좋은 도시 순위에서 매년 5위 안에 손꼽히는 인기 지역.. 2022. 8. 31. [웹 사이트 제작]텍스트유형 01 텍스트유형01 오늘은 사이트의 텍스트유형을 만들어 보았습니다. 1. Figma로 디자인하기 Figma를 이용해 그리드를 나누어 전체적인 틀을 만들어줍니다. 각 구역간의 수치는 정확히 해주는게 중요합니다. 마우스오버 했을 때 배경색을 바꿔주기 위해 한 영역에만 배경색을 주었습니다. 2. HTML 웹표준 준수를 위해 시맨틱 태그를 사용합니다. section태그는 보통 제목태그를 포함합니다. 내용을 한꺼번에 넣는 것이 아니라, 하나씩 확인하면서 진행하면 실수와 시간을 줄일 수 있습니다. 텍스트 유형01 반려견 기르기 반려견 산책 반려견 산책을 위한 설명입니다. 반려견 산책 시 주의할 점과 준비물의 소개가 있습니다. 산책하기 좋은 장소도 소개되어 있습니다. 더보기 반려견 간식 반려견 간식을 위한 설명입니다. 반.. 2022. 8. 30. [웹 사이트 제작]이미지유형 03 이미지유형01 사진 한 장은 수 백 마디의 이야기가 담겨 있습니다. 그리고 현재의 웹사이트 역시 동일한 시각적 영향을 가지고 있습니다. 따라서 데이터의 시각화가 점점 더 중요해지고 있습니다. 이미지 유형 중 세 번째 이미지 유형 제작 방법에 대해 알아보겠습니다. 1. Figma로 디자인하기 Figma를 이용해 그리드를 나누어 전체적인 틀을 만들어줍니다. 왼쪽에 큰 사진이 들어가고 오른쪽에 4구역으로 나누어져 사진이 들어갑니다. 2. HTML 웹표준 준수를 위해 시맨틱 태그를 사용합니다. 이번 유형에서는 img 태그를 이용하여 대부분의 이미지를 삽입하였지만 왼쪽의 큰 사진은 백그라운드를 이용하였습니다. 캐나다 여행 캐나다 여행을 위한 사이트입니다. CANADA Vancouver 페이스북 페이지이동 페이지이.. 2022. 8. 19. [웹 사이트 제작]이미지유형 02 이미지유형01 사진 한 장은 수 백 마디의 이야기가 담겨 있습니다. 그리고 현재의 웹사이트 역시 동일한 시각적 영향을 가지고 있습니다. 따라서 데이터의 시각화가 점점 더 중요해지고 있습니다. 이미지 유형 중 두 번째 이미지 유형 제작 방법에 대해 알아보겠습니다. 1. Figma로 디자인하기 Figma를 이용해 그리드를 나누어 전체적인 틀을 만들어줍니다. 각 구역간의 수치는 정확히 해주는게 중요합니다. 2. HTML 웹표준 준수를 위해 시맨틱 태그를 사용합니다. 이번 유형에서는 img 태그를 이용하여 이미지를 삽입하였습니다. 캐나다 여행 캐나다 여행을 위한 사이트입니다. Vancouver 자세히보기 Quebec 자세히보기 Niagara Falls 자세히보기 3. CSS Figma를 이용해 만든 디자인을 보.. 2022. 8. 17. [웹 사이트 제작]이미지유형 01 이미지유형01 사진 한 장은 수 백 마디의 이야기가 담겨 있습니다. 그리고 현재의 웹사이트 역시 동일한 시각적 영향을 가지고 있습니다. 따라서 데이터의 시각화가 점점 더 중요해지고 있습니다. 이미지 유형 중 첫 번째 이미지 유형 제작 방법에 대해 알아보겠습니다. 1. Figma로 디자인하기 Figma를 이용해 그리드를 나누어 전체적인 틀을 만들어줍니다. 각 구역간의 수치는 정확히 해주는게 중요합니다. 2. HTML 웹표준 준수를 위해 시맨틱 태그를 사용합니다. 이미지가 두 장만 들어가기 떄문에 간단하게 HTML 구조를 잡을 수 있습니다. 반려견 기르기 반려견을 기르는 분들을 위한 사이트 입니다. 강아지 산책 반려견 산책시의 준비물과 주의사항들입니다. 동네별로 산책하기 좋은 장소들 소개도 있습니다. 강아지.. 2022. 8. 17. [웹 사이트 제작]카드유형 03 카드유형03 모바일 사용자가 폭발적으로 증가하면서 반응형 디자인이 어쩌면 필수적으로 적용되고 있는 지금, 카드형 디자인은 웹과 모바일 모두 화면크기에 맞게 최적화되는 모듈식 UI 패턴입니다. 수 많은 컨텐츠를 사용자에게 제공하는 서비스가 인기를 끌면서 카드 UI에 대한 관심이 지속적으로 높아지고 있으며, 뉴스나 커머스까지도 카드형 디자인이 다양하게 적용되고 있습니다. 카드 유형 중 세 번째 카드 유형 제작 방법에 대해 알아보겠습니다. 1. Figma로 디자인하기 Figma를 이용해 그리드를 나누어 전체적인 틀을 만들어줍니다. 각 구역간의 수치는 정확히 해주는게 중요합니다. 2. HTML 사진과 사진에 있는 텍스트를 위해 figure 태그와 figurecaption 태그를 사용하였습니다. 레저 스포츠 Su.. 2022. 8. 10. [웹 사이트 제작]카드유형 02 카드유형02 모바일 사용자가 폭발적으로 증가하면서 반응형 디자인이 어쩌면 필수적으로 적용되고 있는 지금, 카드형 디자인은 웹과 모바일 모두 화면크기에 맞게 최적화되는 모듈식 UI 패턴입니다. 수 많은 컨텐츠를 사용자에게 제공하는 서비스가 인기를 끌면서 카드 UI에 대한 관심이 지속적으로 높아지고 있으며, 뉴스나 커머스까지도 카드형 디자인이 다양하게 적용되고 있습니다. 카드 유형 중 두 번째 카드 유형 제작 방법에 대해 알아보겠습니다. 1. Figma로 디자인하기 Figma를 이용해 그리드를 나누어 전체적인 틀을 만들어줍니다. 각 구역간의 수치는 정확히 해주는게 중요합니다. 2. HTML 화살표 버튼을 넣어주기 위해 svg파일로 저장 후 페이지 소스를 복사해 붙여줍니다. 웹표준 준수를 위해 aria-hid.. 2022. 8. 9. [웹 사이트 제작]카드유형 01 카드유형01 모바일 사용자가 폭발적으로 증가하면서 반응형 디자인이 어쩌면 필수적으로 적용되고 있는 지금, 카드형 디자인은 웹과 모바일 모두 화면크기에 맞게 최적화되는 모듈식 UI 패턴입니다. 수 많은 컨텐츠를 사용자에게 제공하는 서비스가 인기를 끌면서 카드 UI에 대한 관심이 지속적으로 높아지고 있으며, 뉴스나 커머스까지도 카드형 디자인이 다양하게 적용되고 있습니다. 카드 유형 중 첫 번째 카드 유형 제작 방법에 대해 알아보겠습니다. 1. Figma로 디자인하기 Figma를 이용해 그리드를 나누어 전체적인 틀을 만들어줍니다. 각 구역간의 수치는 정확히 해주는게 중요합니다. 2. HTML 웹표준 준수를 위해 시맨틱 태그를 사용합니다. section태그는 보통 제목태그를 포함합니다. 내용을 한꺼번에 넣는 것.. 2022. 8. 8. 이전 1 다음 728x90
