본문 바로가기

사이트만들기8

[사이트 만들기] 이미지/텍스트 유형 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 - 이미지 스프라이트 & 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

광고 준비중입니다.

티스토리툴바