본문 바로가기

사이트 만들기4

[사이트 만들기] 실전 유형 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.

이전 1 다음

Reference Book

JavaScript

JavaScript

HTML

HTML

CSS

CSS

광고 준비중입니다.

티스토리툴바