본문 바로가기

figma15

[사이트 만들기] 실전 유형 01 사이트 만들기 : 실전 유형 01 그동안 배웠던 헤더(반응형 전용 메뉴바 포함), 카드, 이미지, 이미지/텍스트, 텍스트, 슬라이드, 푸터 유형을 한 곳에 모아 본격적으로 웹 페이지를 만들어보도록 하겠습니다. Figma HTML 소스 헤더, 슬라이드, 이미지, 이미지/텍스트, 카드, 배너, 텍스트, 푸터 순으로 영역이 이루어져 있다. (※ 스압주의!) 코드 펼쳐보기 헤더 영역 바로가기 슬라이드 영역 바로가기 이미지 영역 바로가기 이미지/텍스트 영역 바로가기 카드 영역 바로가기 배너 영역 바로가기 텍스트 영역 바로가기 푸터 영역 바로가기 web site 별빛제빵교실 Baking Class MAIN NOTICE CERTIFICATION CLASS YOUTUBE GOAL SIGN IN 슬라이드 영역 BAKIN.. 2022. 9. 13.

[사이트 만들기] 푸터 유형 01 사이트 만들기 : 푸터 유형 STUDY 01 이번 포스팅에서는 Figma에서 만든 푸터 유형 섹션을 HTML과 CSS 코드로 옮기는 작업을 해보도록 하겠습니다. Figma 먼저 만들고자 하는 웹 사이트의 모양을 Figma라는 프로그램을 이용하여 아래와 같이 만들어주도록 하자. HTML 소스 웹 표준 준수를 위해 시맨틱 태그를 적극 사용하도록 하자. ul>li 형식으로 만들도록 한다. 푸터 영역 사이트 웹표준 사이트 반응형 사이트 패럴랙스 사이트 포트폴리오 사이트 헤더 영역 메뉴 유형 01 메뉴 유형 02 슬라이드 영역 슬라이드 유형 01 슬라이드 유형 02 이미지 영역 이미지 유형 01 이미지 유형 02 이미지/텍스트 유형 01 이미지/텍스트 유형 02 텍스트 유형 01 컨텐츠 영역 카드 유형 01 카드.. 2022. 9. 5.

[사이트 만들기] 배너 유형 01 사이트 만들기 : 배너 유형 STUDY 01 이번 포스팅에서는 Figma에서 만든 배너 유형 섹션을 HTML과 CSS 코드로 옮기는 작업을 해보도록 하겠습니다. Figma 먼저 만들고자 하는 웹 사이트의 모양을 Figma라는 프로그램을 이용하여 아래와 같이 만들어주도록 하자. 그와 동시에 이미지 스프라이트용 아이콘 SVG를 출력할 페이지도 따로 만들도록 한다. 만드는 방법은 지난 이미지 스프라이트 포스팅을 참조할 것. HTML 소스 웹 표준 준수를 위해 시맨틱 태그를 적극 사용하도록 하자. img 태그의 alt와 같은 효과를 주기 위해 아이콘이 들어갈 span 태그의 클래스 값을 "ir"로 설정하자. 자세한 설명은 아래 예시 코드의 주석처리 내용을 참조할 것. 배너 영역 김제빵 유튜브 더 다양한 강의는 .. 2022. 9. 5.

[사이트 만들기] 슬라이드 유형 01 사이트 만들기 : 슬라이드 유형 STUDY 01 이번 포스팅에서는 Figma에서 만든 슬라이드 유형 섹션을 HTML과 CSS 코드로 옮기는 작업을 해보도록 하겠습니다. Figma 먼저 만들고자 하는 웹 사이트의 모양을 Figma라는 프로그램을 이용하여 아래와 같이 만들어주도록 하자. 그와 동시에 이미지 스프라이트용 아이콘 SVG를 출력할 페이지도 따로 만들도록 한다. 만드는 방법은 지난 이미지 스프라이트 포스팅을 참조할 것. HTML 소스 웹 표준 준수를 위해 시맨틱 태그를 적극 사용하도록 하자. img 태그의 alt와 같은 효과를 주기 위해 아이콘이 들어갈 span 태그의 클래스 값을 "ir"로 설정하자. 자세한 설명은 아래 예시 코드의 주석처리 내용을 참조할 것. 슬라이드 영역 BAKING CLASS.. 2022. 9. 5.

[사이트 만들기] 이미지/텍스트 유형 01 사이트 만들기 : 이미지/텍스트 유형 STUDY 01 이번 포스팅에서는 Figma에서 만든 이미지/텍스트 유형을 HTML과 CSS 코드로 옮기는 작업을 해보도록 하겠습니다. Figma 먼저 만들고자 하는 웹 사이트의 모양을 Figma라는 프로그램을 이용하여 아래와 같이 만들어주도록 하자. HTML 소스 웹 표준 준수를 위해 시맨틱 태그를 적극 사용하도록 하자. 유용한 사이트 살펴보기 이미지 텍스트 유형 01 유용한 사이트 살펴보기 웹디자이너, 웹 퍼블리셔, 프론트앤드 개발자를 위한 유용한 사이트입니다. 튜토리얼 사이트 레퍼런스 사이트 웹폰트 사이트 CSS 사이트 WebGL 사이트 Youtube 사이트 레퍼런스 사이트 튜토리얼 사이트 CSS 소스 reset에서 margin값과 padding값을 0으로 초기.. 2022. 9. 1.

[사이트 만들기] 헤더 유형 01 사이트 만들기 : 헤더 유형 STUDY 01 이번 포스팅에서는 Figma에서 만든 헤더 유형을 HTML과 CSS 코드로 옮기는 작업을 해보도록 하겠습니다. Figma 먼저 만들고자 하는 웹 사이트의 모양을 Figma라는 프로그램을 이용하여 아래와 같이 만들어주도록 하자. HTML 소스 웹 표준 준수를 위해 시맨틱 태그를 적극 사용하도록 하자. web site 헤더 영역 슬라이드 영역 이미지 영역 컨텐츠 영역 푸터 영역 로그인 CSS 소스 reset에서 margin값과 padding값을 0으로 초기화 시키는 작업부터 시작한다. 최종 결과 원본 사이트 보기 원본 소스 보기 2022. 9. 1.

[사이트 만들기] 텍스트 유형 03 사이트 만들기 : 텍스트 유형 STUDY 03 이번 포스팅에서는 Figma에서 만든 텍스트 유형 섹션을 HTML과 CSS 코드로 옮기는 작업을 해보도록 하겠습니다. 아이콘 출력은 아이콘이 들어갈 원을 먼저 코딩으로 만들어 낸 후, 아이콘을 이미지 스프라이트 기법으로 원 안에 넣는 식으로 코딩을 진행하였습니다. Figma 먼저 만들고자 하는 웹 사이트의 모양을 Figma라는 프로그램을 이용하여 아래와 같이 만들어주도록 하자. 그와 동시에 이미지 스프라이트용 아이콘 SVG를 출력할 페이지도 따로 만들도록 한다. 만드는 방법은 지난 이미지 스프라이트 포스팅을 참조할 것. HTML 소스 웹 표준 준수를 위해 시맨틱 태그를 적극 사용하도록 하자. img 태그의 alt와 같은 효과를 주기 위해 아이콘이 들어갈 sp.. 2022. 9. 1.

[사이트 만들기] 텍스트 유형 02 사이트 만들기 : 텍스트 유형 STUDY 02 이번 포스팅에서는 Figma에서 만든 텍스트 유형 섹션을 HTML과 CSS 코드로 옮기는 작업을 해보도록 하겠습니다. 아이콘 출력은 아이콘이 들어갈 원을 먼저 코딩으로 만들어 낸 후, 아이콘을 이미지 스프라이트 기법으로 원 안에 넣는 식으로 코딩을 진행하였습니다. Figma 먼저 만들고자 하는 웹 사이트의 모양을 Figma라는 프로그램을 이용하여 아래와 같이 만들어주도록 하자. 그와 동시에 이미지 스프라이트용 아이콘 SVG를 출력할 페이지도 따로 만들도록 한다. 만드는 방법은 지난 이미지 스프라이트 포스팅을 참조할 것. HTML 소스 웹 표준 준수를 위해 시맨틱 태그를 적극 사용하도록 하자. img 태그의 alt와 같은 효과를 주기 위해 아이콘이 들어갈 sp.. 2022. 9. 1.

[사이트 만들기] 텍스트 유형 01 사이트 만들기 : 텍스트 유형 STUDY 01 이번 포스팅에서는 Figma에서 만든 텍스트 유형 섹션을 HTML과 CSS 코드로 옮기는 작업을 해보도록 하겠습니다. 아이콘 출력은 아이콘이 들어갈 원을 먼저 코딩으로 만들어 낸 후, 아이콘을 이미지 스프라이트 기법으로 원 안에 넣는 식으로 코딩을 진행하였습니다. Figma 먼저 만들고자 하는 웹 사이트의 모양을 Figma라는 프로그램을 이용하여 아래와 같이 만들어주도록 하자. 그와 동시에 이미지 스프라이트용 아이콘 SVG를 출력할 페이지도 따로 만들도록 한다. 만드는 방법은 지난 이미지 스프라이트 포스팅을 참조할 것. HTML 소스 웹 표준 준수를 위해 시맨틱 태그를 적극 사용하도록 하자. img 태그의 alt와 같은 효과를 주기 위해 아이콘이 들어갈 sp.. 2022. 8. 30.

[사이트 만들기] 이미지 유형 03 - 이미지 스프라이트 & IR효과 활용하기 사이트 만들기 : 이미지 유형 03 이번 포스팅에서는 Figma에서 만든 이미지 유형 섹션을 HTML과 CSS 코드로 옮기는 작업을 해보도록 하겠습니다. Figma 먼저 만들고자 하는 웹 사이트의 모양을 Figma라는 프로그램을 이용하여 아래와 같이 만들어주도록 하자. 이번에 만들 웹 사이트의 유형은 큰 메인 이미지 한 장과 그 옆에 작은 사이즈의 이미지 4장이 배치된 구조이며, 마우스를 올려 놓으면(hover) 제목과 설명이 들어있는 검은색 블러 처리된 박스가 자연스럽게 올라오는 효과까지 반영시켜보도록 하겠다. HTML 소스 웹 표준 준수를 위해 시맨틱 태그를 적극 사용하도록 하자. 자세한 설명은 아래 예시 코드의 주석처리 내용을 참조할 것. 귀여운 헬로키티를 보고 가세요😻 산리오의 상징 캐릭터 헬로키.. 2022. 8. 20.

[사이트 만들기] 이미지 유형 02 - Transition & Hover 활용하기 사이트 만들기 : 이미지 유형 02 이번 포스팅에서는 Figma에서 만든 이미지 유형 섹션을 HTML과 CSS 코드로 옮기는 작업을 해보도록 하겠습니다. Figma 먼저 만들고자 하는 웹 사이트의 모양을 Figma라는 프로그램을 이용하여 아래와 같이 만들어주도록 하자. 이번에 만들 웹 사이트의 유형은 이미지 위에 제목과 자세히 보기 버튼을 올려놓고 그걸 hover 효과로 위로 나타나게 하는 애니메이션을 주도록 하겠다. HTML 소스 웹 표준 준수를 위해 시맨틱 태그를 적극 사용하도록 하자. 자세한 설명은 아래 예시 코드의 주석처리 내용을 참조할 것. 별빛 제빵교실 강사 소개🍞 사람 아닌 동물이지만 훌륭한 실력을 가진 별빛 제빵교실의 강사분들을 소개합니다! 댕댕이 자세히 보기 냥냥이 자세히 보기 북극곰 자.. 2022. 8. 17.

[사이트 만들기] 이미지 유형 01 - 이미지 위에 설명, 버튼 넣기 사이트 만들기 : 이미지 유형 01 이번 포스팅에서는 Figma에서 만든 이미지 유형 섹션을 HTML과 CSS 코드로 옮기는 작업을 해보도록 하겠습니다. Figma 먼저 만들고자 하는 웹 사이트의 모양을 Figma라는 프로그램을 이용하여 아래와 같이 만들어주도록 하자. 이번에 만들 웹 사이트의 유형은 이미지 위에 제목과 본문(설명), 버튼을 올려놓는 간단한 방식이다. HTML 소스 웹 표준 준수를 위해 시맨틱 태그를 적극 사용하고, 이미지는 img 태그가 아닌 article 태그에 CSS로 나중에 추가해줄 것. 자세한 설명은 아래 예시 코드의 주석처리 내용을 참조할 것. 별빛 제빵교실 개강소식🍞 별빛 제빵교실이 2022년 8월 23일 개강합니다. 수강신청 기회는 지금 뿐이니 서두르세요! 나만의 제빵 포트.. 2022. 8. 17.

[사이트 만들기] 카드 유형 섹션 만들기 심화편 사이트 만들기 : 카드 유형 03 이번 포스팅에서는 Figma에서 만든 카드 유형 섹션을 HTML과 CSS 코드로 옮기는 작업을 해보도록 하겠습니다. 최대한 웹 표준을 준수하기 위해 시맨틱 태그를 사용하고 이미지 출력 시 figure 태그로 감싸며, img 태그에서 alt(설명)칸에 부연 설명을 넣는 등의 작업을 잊지 말도록 합시다! Figma 먼저 만들고자 하는 웹 사이트의 모양을 Figma라는 프로그램을 이용하여 아래와 같이 만들어주도록 하자. 이번에 만들 웹 사이트의 유형은 카드 유형 섹션 심화편이며 지난 번 카드 유형이 진라면 순한맛이라면 이번 편은 불닭, 마라맛이니 각오하자🥵. HTML 소스 웹 표준 준수를 위해 시맨틱 태그를 적극 사용하고 img 태그에서의 alt 기능도 적극 활용할 것. 자세.. 2022. 8. 10.

[사이트 만들기] 카드(8개) 유형 섹션 만들기 사이트 만들기 : 카드 유형 02 이번 포스팅에서는 Figma에서 만든 카드 유형 섹션을 HTML과 CSS 코드로 옮기는 작업을 해보도록 하겠습니다. 최대한 웹 표준을 준수하기 위해 시맨틱 태그를 사용하고 이미지 출력 시 figure 태그로 감싸며, img 태그에서 alt(설명)칸에 부연 설명을 넣는 등의 작업을 잊지 말도록 합시다! Figma 먼저 만들고자 하는 웹 사이트의 모양을 Figma라는 프로그램을 이용하여 아래와 같이 만들어주도록 하자. 이번에 만들 웹 사이트의 유형은 카드(8개) 유형 섹션이다. HTML 소스 웹 표준 준수를 위해 시맨틱 태그를 적극 사용하고 img 태그에서의 alt 기능도 적극 활용할 것. 자세한 설명은 아래 예시 코드의 주석처리 내용을 참조할 것. 포트폴리오 만들기 취업용.. 2022. 8. 9.

[사이트 만들기] 카드 유형 섹션 만들기 사이트 만들기 : 카드 유형 이번 포스팅에서는 Figma에서 만든 카드 유형 섹션을 HTML과 CSS 코드로 옮기는 작업을 해보도록 하겠습니다. 최대한 웹 표준을 준수하기 위해 시맨틱 태그를 사용하고 이미지 출력 시 figure 태그로 감싸며, img 태그에서 alt(설명)칸에 부연 설명을 넣는 등의 작업을 잊지 말도록 합시다! Figma 먼저 만들고자 하는 웹 사이트의 모양을 Figma라는 프로그램을 이용하여 아래와 같이 만들어주도록 하자. 이번에 만들 웹 사이트의 유형은 카드 유형 섹션이다. HTML 소스 웹 표준 준수를 위해 시맨틱 태그를 적극 사용하고 img 태그에서의 alt 기능도 적극 활용할 것. 자세한 설명은 아래 예시 코드의 주석처리 내용을 참조할 것. 별빛 제빵교실 개강소식🍞 별빛 제빵교.. 2022. 8. 8.

이전 1 다음

Reference Book

JavaScript

JavaScript

HTML

HTML

CSS

CSS

광고 준비중입니다.

티스토리툴바