본문 바로가기

디자인6

[SITE] 웹사이트 - 이미지 텍스트 유형01 ImageTextType01 웹페이지 실습을 위한 이미지/텍스트 유형을 실습해보겠습니다! 이번 이미지/텍스트 유형은 이미지와 텍스트 영역이 함께 들어있는 타입입니다. 그럼 아래의 코드를 보며 함께 실습 해보겠습니다~😆 이번 유형은 이미지/텍스트 타입으로 각 주제와 영역에 맞게 레이아웃과 디자인을 설정하시면 됩니다. 아래의 피그마를 참고하여 HTML, CSS를 설정해봅시다. 😇 디자인한 웹 페이지 시안을 보며 페이지 구조를 파악한 후 웹 표준성과 접근성에 맞는시멘틱한 마크업을 해줍니다. TIP ! • 섹션, 아티클과 같은 시멘틱 태그에는 꼭 헤딩 태그를 함께 사용해주어야 웹표준을 준수하게 됩니다. • 섹션 영역에 웹표준 준수.. 2022. 9. 2.

[SITE] 웹사이트 - 텍스트유형03 TextType03 웹페이지 실습을 위한 텍스트 유형을 실습해보겠습니다! 이번 유형은 지난 유형들에 비해 조금 더 심화 버전입니다...! 그럼 아래의 코드를 보며 함께 실습 해보겠습니다 🫠 🫠 레이아웃 그리드 및 안내선을 이용하여 레이아웃 디자인을 완성합니다! 이젠 익숙해진 이미지스프라이트 기능을 위해 프레임을 추가하여 프로필 아이콘을 60px / 별점 아이콘 102px 씩 배치시켰습니다. 꼭 간격을 잘 맞춰주세요~! 😇 ! TIP ! • 구조를 먼저 꼼꼼하게 파악하여 큰 덩어리부터 마크업을 하는 것이 가장 중요합니다.(웹표준 준수 필수!) • 웹표준과 웹 접근성, 호환성을 놓치지 않도록 합니다. • 공통 선택자와 각각의 .. 2022. 9. 1.

[SITE] 웹사이트 - 텍스트유형02 TextType02 웹페이지 실습을 위한 텍스트 유형을 실습해보겠습니다! 이번 유형은 보통 텍스트로만 정보를 제공하고자 할 때 사용합니다. 그럼 아래의 코드를 보며 함께 실습 해보겠습니다 😆 이번 유형은 이미지가 들어가지 않고 대신 아이콘이 들어가게 됩니다. 텍스르로만 이루어진 만큼 더 신경써서 작업해줍니다! 지난 텍스트 유형01과 똑같이 이미지스프라이트 기능을 위하여 프레임을 하나 더 만들어 아이콘을 60px씩 배치시켰습니다 😇 디자인한 웹 페이지 시안을 보며 페이지 구조를 파악한 후 웹 표준성과 접근성에 맞는시멘틱한 마크업을 해줍니다. ! TIP ! • 구조를 먼저 꼼꼼하게 파악하여 큰 덩어리부터 마크업을 하는 것이 가.. 2022. 9. 1.

[ILLUSTLATOR] 사슴 일러스트 Illustrator : 펜 툴로 꽃과 사슴 작업하기 01 이번 시간에는 디자인 프로그램인 일러스트레이터(Illustrator)를 사용하여 사슴🦌과 꽃🌹을 작업해보겠습니다. #1. 사슴 그리기 일러트스레이터의 도형툴과 패스파인더를 이용하여 캐릭터를 만들어보자! ! TIP ! 최대한 점을 찍지 않고 한 번에 이어 그려서 부드럽게 작업해줍시다! 🎨 과정 보기 🎨 결과보기 완성된 사슴 일러스트를 다양한 색으로 작업해봅시다! #2. Mocup으로 일러스트 응용해보기 작업한 일러스트를 목업 사이트를 이용해 포토샵으로 편집해봅시다! 실제 물건에 직접 일러스트를 넣어볼 수 있어서 디자인에 아주 편리한 기능이랍니다! 😆 🎨 티셔츠 🎨 테이프 모두 잘 작업하셨나요?! 그럼 다음 디자인 시간에 뵙겠습니다! 😃 👍 2022. 8. 25.

[SITE] 이미지 유형 만들기 02 Image Type02 이번 이미지 유형에서는 애니메이션과 블러 효과를 주어서 더 동적인 페이지를 실습해보겠습니다! 이미지 유형의 가장 기초적인 레이아웃으로 이미지 박스 안에 텍스트와 링크 박스가 들어가 있는 구조입니다. TIP ! 여백은 10단위로 해주어서 좀 더 효율적으로 작업할 수 있게 합니다:) 🎨 그리드와 레이아웃 🎨 완성본 디자인한 웹 페이지 시안을 보며 페이지 구조를 파악한 후 웹 표준성과 접근성에 맞는시멘틱한 마크업을 해줍니다. ! TIP ! 이번 유형은 백그라운드에 이미지를 삽입하면 따로 애니메이션과 같은 효과를 주기 어렵기 때문에 img태그를 사용하여 이미지를 삽입하여 작업합니다:) 지난 시간에 작업한 이.. 2022. 8. 18.

[SITE] 웹사이트 - 이미지 유형01 Image Type01 웹페이지 실습을 위한 이미지 유형 페이지 제작해보기! 이번 이미지 유형에서는 background에 image를 넣어서 작업해보겠습니다! 이미지 유형의 가장 기초적인 레이아웃으로 이미지 박스 안에 텍스트와 링크 박스가 들어가 있는 구조입니다. TIP ! 여백은 10단위로 해주어서 좀 더 효율적으로 작업할 수 있게 합니다:) 🎨 그리드와 레이아웃 🎨 완성본 디자인한 웹 페이지 시안을 보며 페이지 구조를 파악한 후 웹 표준성과 접근성에 맞는시멘틱한 마크업을 해줍니다. ! TIP ! 섹션 태그에 섹션 선택자를 따로 준 이유는 앞으로 만들게 될 유형들 모두 공통적으로 섹션 안에 제목, contents 구조로 .. 2022. 8. 17.

이전 1 다음

728x90

Lucky Charms Rainbow

JAVASCRIPT

html

HTML

css

CSS

티스토리툴바