본문 바로가기

HTML3

[SITE] 웹사이트 - 카드 유형03 CardType03 웹페이지 실습을 위한 카드 유형 페이지 심화ver 제작해보기! 카드 안에 이미지, 키워드란, 텍스트 그리고 사용자 프로필까지 넣어서 제작해보자! 이번 유형에서는 심화 버전인 만큼 그리드 할 요소가 많습니다.😂 차근차근 그리드를 만들어 카드형 페이지를 디자인 해봅시다! 이번 카드형 디자인은 카드 사이에 여백이 없기 때문에 라인을 넣어 카드 영역을 구분 해줍니다. TIP ! 카드 섹션의 디자인이 동일할 경우 comtonent를 이용하면 효율적인 작업이 가능하다. comtonent를 처음 적용시킨 카드가 원본가 되며 원본 comtonent를 수정하면 복제 comtonent들도 함께 수정되어 작업이 훨씬 수월해진다! < HTML 소스 : 레아아웃 구조 파악하.. 2022. 8. 11.

[SITE] 웹사이트 - 카드 유형02 CardType02 웹페이지 실습을 위한 카드타입 페이지 기초 실습하기! - 2줄 유형 피그마를 통해 원하는 카드 유형을 디자인 합니다. 디자인을 할 땐 만들고자 하는 페이지의 성격을 잘 파악하여 그리드를 만들어주는 것이 중요합니다. TIP ! 카드 섹션의 디자인이 동일한데 많을 경우 컴포넌트를 이용하면 효율적인 작업이 가능하다. 컴포넌트를 처음 적용시킨 카드가 원본가 되며 원본을 수정하면 복붙했던 카드들도 함께 수정된다. 디자인한 웹 페이지 시안을 보며 페이지 구조를 파악한 후 웹 표준성과 접근성에 맞는시멘틱한 마크업을 해줍니다. 구조 파악하기 1.구조를 먼저 꼼꼼하게 파악하여 시멘틱한 마크업을 하는 것이 가장 중요하다... 2022. 8. 10.

웹사이트 - 카드 유형01 CardType01 웹페이지 실습을 위한 카드타입 페이지 기초 실습하기! 피그마를 통해 원하는 카드 유형을 디자인 합니다. 디자인을 할 땐 만들고자 하는 페이지의 성격을 잘 파악하여 그리드를 만들어주는 것이 중요합니다. 그리드 작업이 완벽해야 후에 코딩을 하는 데 있어서도 오류 및 오차가 생기지 않아 불편해지지 않습니다! 디자인한 웹 페이지 시안을 보며 페이지 구조를 파악한 후 웹 표준성과 접근성에 맞는시멘틱한 마크업을 해줍니다. 구조 파악하기 1. 카드 레이아웃은 보통 웹 메인 페이지의 섹션 부분에 위치한다. 때문에 시멘틱 태그인 요소는 부모와 자식의 관계를 나타낸다. 마찬가지로 요소 + 요소는 형제 관계를 나타낸다.*/.. 2022. 8. 10.

이전 1 다음

728x90

Lucky Charms Rainbow

JAVASCRIPT

html

HTML

css

CSS

티스토리툴바